Merge pull request #67 from KilleenCode/form-styles-1

Add styling to settings forms

package.json

@@ -1,11 +1,13 @@
 {
   "name": "brancato",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "private": true,
   "dependencies": {
     "@algolia/autocomplete-js": "^1.5.3",
     "@algolia/autocomplete-theme-classic": "^1.5.3",
+    "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-tabs": "^0.1.5",
+    "@stitches/react": "^1.2.7",
     "@tauri-apps/api": "^1.0.0-rc.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "brancato"
-version = "0.8.0"
+version = "0.8.1"
 description = "A tool for stage-managing your life"
 authors = ["Ryan Killeen"]
 license = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "brancato",
-    "version": "0.8.0"
+    "version": "0.8.1"
   },
   "build": {
     "distDir": "../build",

src/App.css

@@ -51,11 +51,6 @@ div.inline-logo .smaller {
   list-style: none;
 }
 
-.App-header label {
-  font-size: 1rem;
-  margin-right: 6px;
-}
-
 .App-link {
   color: #61dafb;
   margin-bottom: 5vh;
@@ -70,11 +65,6 @@ div.inline-logo .smaller {
   }
 }
 
-.workflow {
-  padding: 1rem;
-  border-bottom: 1px solid white;
-}
-
 #root {
   background-color: rgba(0, 0, 0, 0);
 }

src/App.tsx

@@ -1,9 +1,10 @@
 import Config from "./Config";
 import Omnibar from "./components/Omnibar/Omnibar";
+import { globalStyles } from "./theme";
 
 function App() {
   const settingsPage = window.location.pathname === "/settings";
-
+  globalStyles();
   return (
     <>
       {settingsPage && <Config />}

src/Config.tsx

@@ -1,8 +1,13 @@
 import "./App.css";
 import Shortcut from "./components/Shortcut";
-import * as Tabs from "@radix-ui/react-tabs";
 import WorkflowSettings from "./forms/workflow-settings";
 import Filepath from "./components/Filepath";
+import {
+  TabContainer,
+  TabContent,
+  TabTrigger,
+  TabTriggerContainer,
+} from "./components/core/Tabs";
 
 export type Workflow = {
   name: string;
@@ -30,24 +35,24 @@ function Config() {
   return (
     <div className="App">
       <header className="App-header">
-        <Tabs.Root defaultValue={TabSections.WorkflowSettings}>
-          <Tabs.List>
-            <Tabs.Trigger value={TabSections.WorkflowSettings}>
+        <TabContainer defaultValue={TabSections.WorkflowSettings}>
+          <TabTriggerContainer>
+            <TabTrigger value={TabSections.WorkflowSettings}>
               {TabSections.WorkflowSettings}
-            </Tabs.Trigger>
-            <Tabs.Trigger value={TabSections.Preferences}>
+            </TabTrigger>
+            <TabTrigger value={TabSections.Preferences}>
               {TabSections.Preferences}
-            </Tabs.Trigger>
-          </Tabs.List>
-          <Tabs.Content value={TabSections.WorkflowSettings}>
+            </TabTrigger>
+          </TabTriggerContainer>
+          <TabContent value={TabSections.WorkflowSettings}>
             <WorkflowSettings />
-          </Tabs.Content>
-          <Tabs.Content value={TabSections.Preferences}>
+          </TabContent>
+          <TabContent value={TabSections.Preferences}>
             <Shortcut />
             <hr />
             <Filepath />
-          </Tabs.Content>
-        </Tabs.Root>
+          </TabContent>
+        </TabContainer>
       </header>
     </div>
   );

src/components/Filepath.tsx

@@ -1,6 +1,7 @@
 import { invoke } from "@tauri-apps/api";
 import { useEffect, useState } from "react";
 import { AppState, Commands, getConfig } from "../utils";
+import Button from "./core/button";
 const Filepath = () => {
   const [appState, setAppState] = useState<AppState | undefined>();
 
@@ -20,7 +21,9 @@ const Filepath = () => {
         Config Path: <b>{appState?.app_config.user_config_path}</b>
       </label>
       <div>
-        <button onClick={updateConfigPath}>Set custom config file path</button>
+        <Button appearance="danger" onClick={updateConfigPath}>
+          Set custom config file path
+        </Button>
       </div>
     </>
   );

src/components/Shortcut.tsx

@@ -3,6 +3,7 @@ import hotkeys from "hotkeys-js";
 import keycode from "keycode";
 import { useEffect, useState } from "react";
 import { Commands, getConfig } from "../utils";
+import Button, { ButtonContainer } from "./core/button";
 
 const Shortcut = () => {
   const [shortcut, setShortcut] = useState<string | undefined>();
@@ -38,23 +39,37 @@ const Shortcut = () => {
 
   return (
     <div>
+      <h3>Shortcut</h3>
       <p>
-        Shortcut: <code>{shortcut}</code>
+        <code>{shortcut}</code>
       </p>
-      <div>
+      {editingShortcut && <p>Begin typing your shortcut commands</p>}
+      <ButtonContainer>
         {!editingShortcut && (
-          <button
+          <Button
             onClick={() => {
               setListenForKeys(!listenForKeys);
               setEditingShortcut(true);
             }}
           >
             Edit
-          </button>
+          </Button>
         )}
-        {editingShortcut && <p>Begin typing your shortcut commands</p>}
-        {editingShortcut && <button onClick={onSave}>Save</button>}
-      </div>
+
+        {editingShortcut && (
+          <>
+            <Button appearance="success" onClick={onSave}>
+              Save
+            </Button>
+            <Button
+              appearance="secondary"
+              onClick={() => setEditingShortcut(false)}
+            >
+              Cancel
+            </Button>
+          </>
+        )}
+      </ButtonContainer>
     </div>
   );
 };

src/components/core/Tabs.tsx

@@ -0,0 +1,35 @@
+import * as Tabs from "@radix-ui/react-tabs";
+import { styled } from "../../theme";
+
+export const TabTrigger = styled(Tabs.Trigger, {
+  reset: "all",
+  cursor: "pointer",
+  background: "$mauve1",
+  color: "white",
+  border: "1px solid grey",
+  fontSize: "1rem",
+  padding: "0.8rem",
+  borderBottom: 0,
+
+  "&[aria-selected='true']": {
+    background: "$mauve2",
+  },
+});
+
+export const TabTriggerContainer = styled(Tabs.List, {
+  [`${TabTrigger}:first-child`]: {
+    borderTopLeftRadius: "8px",
+  },
+  [`${TabTrigger}:last-child`]: {
+    borderTopRightRadius: "8px",
+  },
+});
+
+export const TabContent = styled(Tabs.Content, {
+  background: "$mauve2",
+  padding: "1rem",
+  border: "1px solid grey",
+  borderTop: 0,
+});
+
+export const TabContainer = styled(Tabs.Root, {});