Merge pull request #28 from caranicas/beta-react-style-clean-pt2

Beta react style clean pt2

ui/frontend/build_src/.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
+    tsconfigRootDir: __dirname,
   },
   plugins: ["react"],
   extends: [
@@ -21,6 +22,7 @@ module.exports = {
     // general things turned off for now
     "prefer-const": "off",
     "no-debugger": "warn",
+    "eol-last": "off",
 
     "comma-dangle": ["off", "always-multiline"],
     "no-void": ["off"],
@@ -60,9 +62,10 @@ module.exports = {
     "@typescript-eslint/no-unnecessary-type-assertion": "off",
     "@typescript-eslint/space-before-function-paren": "off",
 
-    // i18n stuff no string literal works
+    // i18n stuff no string literal works but turned off for now
-    "i18next/no-literal-string": "warn",
+    "i18next/no-literal-string": "off",
     // still need to figure out how to get this to work
+    // it should error if we dont haev all the keys in the translation file
     "i18n-json/identical-keys": [
       "error",
       {

ui/frontend/build_src/index.html

@@ -10,259 +10,5 @@
     <!-- The react app entry point. Currently no ui just poc importing and logging -->
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-
-    <!-- ORIGINAL CODE BELOW FOR REFENCE -->
-
-    <!--  KEEP FOR NOW -->
-    <!-- THE STYLES ARE BEING USED IN THE REACT APP  -->
-    <!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
-    <style>
-      /* label {
-        font-size: 10pt;
-      }
-      #prompt {
-        width: 100%;
-        height: 50pt;
-      }
-      @media screen and (max-width: 600px) {
-        #prompt {
-          width: 95%;
-        }
-      }
-      .image_preview_container {
-        display: none;
-        margin-top: 10pt;
-      }
-      .image_clear_btn {
-        position: absolute;
-        transform: translateX(-50%) translateY(-35%);
-        background: black;
-        color: white;
-        border: 2pt solid #ccc;
-        padding: 0;
-        cursor: pointer;
-        outline: inherit;
-        border-radius: 8pt;
-        width: 16pt;
-        height: 16pt;
-        font-family: Verdana;
-        font-size: 8pt;
-      }
-      #editor-settings-entries {
-        font-size: 9pt;
-        margin-bottom: 5px;
-        padding-left: 10px;
-        list-style-type: none;
-      }
-      #editor-settings-entries li {
-        padding-bottom: 3pt;
-      }
-      #guidance_scale {
-        transform: translateY(30%);
-      } */
-      #outputMsg {
-        font-size: small;
-      }
-      #footer {
-        font-size: small;
-        padding-left: 10pt;
-        background: none;
-      }
-      #footer-legal {
-        font-size: 8pt;
-      }
-      .imgSeedLabel {
-        position: absolute;
-        transform: translateX(-100%);
-        margin-top: 5pt;
-        margin-left: -5pt;
-        font-size: 10pt;
-
-        background-color: #333;
-        opacity: 0.8;
-        color: #ddd;
-        border-radius: 3pt;
-        padding: 1pt 3pt;
-      }
-      .imgUseBtn {
-        position: absolute;
-        transform: translateX(-100%);
-        margin-top: 30pt;
-        margin-left: -5pt;
-      }
-      .imgSaveBtn {
-        position: absolute;
-        transform: translateX(-100%);
-        margin-top: 55pt;
-        margin-left: -5pt;
-      }
-      .imgItem {
-        display: inline;
-        padding-right: 10px;
-      }
-      .imgItemInfo {
-        opacity: 0.5;
-      }
-
-      #container {
-        width: 75%;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      @media screen and (max-width: 1400px) {
-        #container {
-          width: 100%;
-        }
-      }
-      #meta small {
-        font-size: 11pt;
-      }
-      #editor {
-        padding: 5px;
-      }
-      #editor label {
-        font-weight: bold;
-      }
-      #preview {
-        padding: 5px;
-      }
-      #editor-inputs {
-        margin-bottom: 20px;
-      }
-      #editor-inputs-prompt {
-        flex: 1;
-      }
-      #editor-inputs .row {
-        padding-bottom: 10px;
-      }
-      #makeImage {
-        border-radius: 6px;
-      }
-      #editor-modifiers h5 {
-        padding: 5pt 0;
-        margin: 0;
-      }
-      #makeImage {
-        flex: 0 0 70px;
-        background: rgb(80, 0, 185);
-        border: 2px solid rgb(40, 0, 78);
-        color: rgb(255, 221, 255);
-        width: 100%;
-        height: 30pt;
-      }
-      #makeImage:hover {
-        background: rgb(93, 0, 214);
-      }
-      .flex-container {
-        display: flex;
-      }
-      .col-50 {
-        flex: 50%;
-      }
-      .col-free {
-        flex: 1;
-      }
-      .collapsible {
-        cursor: pointer;
-      }
-      .collapsible-content {
-        display: none;
-        padding-left: 15px;
-      }
-      .collapsible-content h5 {
-        padding: 5pt 0pt;
-        margin: 0;
-        font-size: 10pt;
-      }
-      .collapsible-handle {
-        color: white;
-        padding-right: 5px;
-      }
-      .panel-box {
-        background: rgb(44, 45, 48);
-        border: 1px solid rgb(47, 49, 53);
-        border-radius: 7px;
-        padding: 5px;
-        margin-bottom: 15px;
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15),
-          0 6px 20px 0 rgba(0, 0, 0, 0.15);
-      }
-      .panel-box h4 {
-        margin: 0;
-        padding: 2px 0;
-      }
-      .prompt-modifier-tag {
-        border: 1px solid rgb(10, 0, 24);
-        border-radius: 4px;
-        padding: 0pt 3pt;
-        margin-right: 2pt;
-        cursor: pointer;
-        display: inline;
-        background: rgb(163, 163, 163);
-        color: black;
-        line-height: 25pt;
-        float: left;
-        font-size: 9pt;
-      }
-      .prompt-modifier-tag:hover {
-        background: black;
-        color: white;
-      }
-      #editor-modifiers-entries .prompt-modifier-tag {
-        background: #110f0f;
-        color: rgb(212, 212, 212);
-        margin-bottom: 4pt;
-        font-size: 10pt;
-      }
-      #editor-modifiers-entries .prompt-modifier-tag:hover {
-        background: rgb(163, 163, 163);
-        color: black;
-      }
-      #editor-modifiers .editor-modifiers-leaf {
-        padding-top: 10pt;
-        padding-bottom: 10pt;
-      }
-      #preview {
-        margin-left: 20pt;
-      }
-      img {
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15),
-          0 6px 20px 0 rgba(0, 0, 0, 0.15);
-      }
-      .line-separator {
-        background: rgb(56, 56, 56);
-        height: 1pt;
-        margin: 15pt 0;
-      }
-      #editor-inputs-tags-container {
-        margin-top: 5pt;
-        display: none;
-      }
-      #server-status {
-        float: right;
-      }
-      #server-status-color {
-        width: 8pt;
-        height: 8pt;
-        border-radius: 4pt;
-        background-color: rgb(128, 87, 0);
-        /* background-color: rgb(197, 1, 1); */
-        float: left;
-        transform: translateY(15%);
-      }
-      #server-status-msg {
-        color: rgb(128, 87, 0);
-        padding-left: 2pt;
-        font-size: 10pt;
-      }
-      #preview-prompt {
-        font-size: 16pt;
-        margin-bottom: 10pt;
-      }
-      #coffeeButton {
-        height: 23px;
-        transform: translateY(25%);
-      }
-    </style>
   </body>
 </html>

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -3,15 +3,16 @@ import { style, globalStyle } from "@vanilla-extract/css";
 // @ts-ignore
 import { vars } from "../../../../styles/theme/index.css.ts";
 
+// import { PanelBox } from "../../../../styles/shared.css.ts";
+
 export const AdvancedSettingsList = style({
-  fontSize: vars.fonts.sizes.Body,
+  // marginBottom: vars.spacing.small,
-  marginBottom: vars.spacing.small,
+  paddingLeft: 0,
-  paddingLeft: vars.spacing.medium,
   listStyleType: "none",
 });
 
-export const AdvancedSettingItem = style({
+export const AdvancedSettingGrouping = style({
-  paddingBottom: vars.spacing.small,
+  marginTop: vars.spacing.medium,
 });
 
 export const MenuButton = style({
@@ -23,10 +24,9 @@ export const MenuButton = style({
   border: "0 none",
   cursor: "pointer",
   padding: "0",
-  marginBottom: vars.spacing.small,
+  marginBottom: vars.spacing.medium,
 });
 
 globalStyle(`${MenuButton}> h4`, {
   color: "#e7ba71",
-  marginTop: "5px !important",
 });

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx

@@ -3,6 +3,11 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useCreateUI } from "../../creationPanelUIStore";
 
+import {
+  SettingItem // @ts-expect-error
+} from "../../../../../styles/shared.css.ts";
+
+
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
@@ -28,7 +33,7 @@ export default function GpuSettings() {
       </button>
       {gpuOpen && (
         <>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 checked={turbo}
@@ -39,7 +44,7 @@ export default function GpuSettings() {
               of GPU memory)
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 type="checkbox"
@@ -49,7 +54,7 @@ export default function GpuSettings() {
               Use CPU instead of GPU (warning: this will be *very* slow)
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 checked={use_full_precision}

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx

@@ -3,6 +3,9 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useCreateUI } from "../../creationPanelUIStore";
 
+import {
+  SettingItem // @ts-expect-error
+} from "../../../../../styles/shared.css.ts";
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
@@ -62,7 +65,7 @@ export default function ImprovementSettings() {
       </button>
       {improvementOpen && (
         <>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 type="checkbox"
@@ -72,7 +75,7 @@ export default function ImprovementSettings() {
               Fix incorrect faces and eyes (uses GFPGAN)
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               Upscale the image to 4x resolution using
               <select
@@ -91,7 +94,7 @@ export default function ImprovementSettings() {
               </select>
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 disabled={isFilteringDisabled}

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect } from "react";
 import { useCreateUI } from "../creationPanelUIStore";
 
+// @ts-expect-error
+import { PanelBox } from "../../../../styles/shared.css.ts";
+
 import {
   AdvancedSettingsList,
-  AdvancedSettingItem, // @ts-expect-error
+  AdvancedSettingGrouping, // @ts-expect-error
 } from "./advancedsettings.css.ts";
 
 import ImprovementSettings from "./improvementSettings";
@@ -16,20 +19,20 @@ import BetaMode from "../../../molecules/betaMode";
 function SettingsList() {
   return (
     <ul className={AdvancedSettingsList}>
-      <li className={AdvancedSettingItem}>
+      <li className={AdvancedSettingGrouping}>
         <ImprovementSettings />
       </li>
-      <li className={AdvancedSettingItem}>
+      <li className={AdvancedSettingGrouping}>
         <PropertySettings />
       </li>
-      <li className={AdvancedSettingItem}>
+      <li className={AdvancedSettingGrouping}>
         <WorkflowSettings />
       </li>
-      <li className={AdvancedSettingItem}>
+      <li className={AdvancedSettingGrouping}>
         <GpuSettings />
       </li>
 
-      <li className={AdvancedSettingItem}>
+      <li className={AdvancedSettingGrouping}>
         <BetaMode />
       </li>
     </ul>
@@ -46,7 +49,7 @@ export default function AdvancedSettings() {
   );
 
   return (
-    <div className="panel-box">
+    <div className={PanelBox}>
       <button
         type="button"
         onClick={toggleAdvancedSettingsIsOpen}

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx

@@ -2,6 +2,10 @@ import React, { useState } from "react";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
+import {
+  SettingItem // @ts-expect-error
+} from "../../../../../styles/shared.css.ts";
+
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
@@ -64,7 +68,7 @@ export default function PropertySettings() {
       </button>
       {propertyOpen && (
         <>
-          <div>
+          <div className={SettingItem}>
             <label>
               Seed:
               <input
@@ -85,7 +89,7 @@ export default function PropertySettings() {
             </label>
           </div>
 
-          <div>
+          <div className={SettingItem}>
             <label>
               Number of inference steps:{" "}
               <input
@@ -98,7 +102,7 @@ export default function PropertySettings() {
             </label>
           </div>
 
-          <div>
+          <div className={SettingItem}>
             <label>
               Guidance Scale:
               <input
@@ -116,7 +120,7 @@ export default function PropertySettings() {
           </div>
 
           {init_image && (
-            <div>
+            <div className={SettingItem}>
               <label>
                 Prompt Strength:{" "}
                 <input
@@ -134,7 +138,7 @@ export default function PropertySettings() {
             </div>
           )}
 
-          <div>
+          <div className={SettingItem}>
             <label>
               Width:
               <select
@@ -151,9 +155,7 @@ export default function PropertySettings() {
                 ))}
               </select>
             </label>
-          </div>
 
-          <div>
             <label>
               Height:
               <select

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx

@@ -3,6 +3,10 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useCreateUI } from "../../creationPanelUIStore";
 
+import {
+  SettingItem // @ts-expect-error
+} from "../../../../../styles/shared.css.ts";
+
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";
@@ -37,7 +41,7 @@ export default function WorkflowSettings() {
       </button>
       {workflowOpen && (
         <>
-          <div>
+          <div className={SettingItem}>
             <label>
               Number of images to make:{" "}
               <input
@@ -50,7 +54,7 @@ export default function WorkflowSettings() {
               />
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               Generate in parallel:
               <input
@@ -61,7 +65,7 @@ export default function WorkflowSettings() {
               />
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 checked={isUseAutoSave}
@@ -84,7 +88,7 @@ export default function WorkflowSettings() {
               </span>
             </label>
           </div>
-          <div>
+          <div className={SettingItem}>
             <label>
               <input
                 checked={isSoundEnabled}

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts

@@ -18,9 +18,6 @@ globalStyle(`${PromptDisplay} > p`, {
 });
 
 globalStyle(`${PromptDisplay} > textarea`, {
-  fontSize: "1.2em",
-  fontWeight: "bold",
-  fontFamily: "Arial",
   width: "100%",
   resize: "vertical",
   height: "100px",

ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css

@@ -1,7 +1,7 @@
 .create-layout {
   padding: 10px;
 }
-.panel-box-toggle-btn {
+/* .panel-box-toggle-btn {
   display: block;
   width: 100%;
   text-align: left;
@@ -9,7 +9,7 @@
   color: #fff;
   border: 0 none;
   cursor: pointer;
-}
+} */
 
 .selected-tags {
   margin: 10px 0;

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts

@@ -0,0 +1,45 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+// @ts-ignore
+import { vars } from "../../../../styles/theme/index.css.ts";
+
+export const ImagerModifierGroups = style({
+  // marginBottom: vars.spacing.small,
+  paddingLeft: 0,
+  listStyleType: "none",
+});
+
+globalStyle(`${ImagerModifierGroups} li`, {
+  marginTop: vars.spacing.medium,
+});
+
+export const ImageModifierGrouping = style({
+  marginTop: vars.spacing.medium,
+});
+
+export const MenuButton = style({
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  backgroundColor: "transparent",
+  color: vars.colors.text.normal,
+  border: "0 none",
+  cursor: "pointer",
+  padding: "0",
+  marginBottom: vars.spacing.medium,
+});
+
+globalStyle(`${MenuButton}> h4`, {
+  color: "#e7ba71",
+});
+
+export const ModifierListStyle = style({
+  // marginBottom: vars.spacing.small,
+  paddingLeft: 0,
+  listStyleType: "none",
+  display: "flex",
+  flexWrap: "wrap",
+});
+
+globalStyle(`${ModifierListStyle} li`, {
+  margin: 0,
+});

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -3,6 +3,18 @@ import React, { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { loadModifications } from "../../../../api";
 
+// @ts-expect-error
+import { PanelBox } from "../../../../styles/shared.css.ts";
+
+import {
+  ImagerModifierGroups,
+  ImageModifierGrouping,
+  MenuButton,
+  ModifierListStyle
+} from //@ts-expect-error
+  "./imageModifiers.css.ts";
+
+
 import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { useCreateUI } from "../creationPanelUIStore";
 
@@ -14,7 +26,7 @@ interface ModifierListProps {
 
 function ModifierList({ tags }: ModifierListProps) {
   return (
-    <ul className="modifier-list">
+    <ul className={ModifierListStyle}>
       {tags.map((tag) => (
         <li key={tag}>
           <ModifierTag name={tag} />
@@ -39,29 +51,18 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
   };
 
   return (
-    <div className="modifier-grouping">
+    <div className={ImageModifierGrouping}>
-      <div className="modifier-grouping-header" onClick={_toggleExpand}>
+      <button type="button" className={MenuButton} onClick={_toggleExpand}>
-        <h5>{title}</h5>
+        <h4>{title}</h4>
-      </div>
+      </button>
       {isExpanded && <ModifierList tags={tags} />}
     </div>
   );
 }
 
 export default function ImageModifers() {
-  // const { status, data } = useQuery(["modifications"], loadModifications);
-
-  // const imageModifierIsOpen = useImageCreate(
-  //   (state) => state.uiOptions.imageModifierIsOpen
-  // );
-  // const toggleImageModifiersIsOpen = useImageCreate(
-  //   (state) => state.toggleImageModifiersIsOpen
-  // );
-
   const allModifiers = useImageCreate((state) => state.allModifiers);
 
-  console.log("allModifiers", allModifiers);
-
   const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
   const toggleImageModifiersIsOpen = useCreateUI(
     (state) => state.toggleImageModifier
@@ -72,25 +73,28 @@ export default function ImageModifers() {
   };
 
   return (
-    <div className="panel-box">
+    <div className={PanelBox}>
       <button
         type="button"
         onClick={handleClick}
         className="panel-box-toggle-btn"
       >
         {/* TODO: swap this manual collapse stuff out for some UI component? */}
-        <h4>Image Modifiers (art styles, tags, ect)</h4>
+        <h3>Image Modifiers (art styles, tags, ect)</h3>
       </button>
 
       {/* @ts-ignore */}
-      {imageModifierIsOpen &&
+      {imageModifierIsOpen && (
-        // @ts-ignore
+        <ul className={ImagerModifierGroups}>
-        allModifiers.map((item, index) => {
+          {allModifiers.map((item, index) => {
-          return (
+            return (
-            // @ts-ignore
+              <li key={item[0]}>
-            <ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
+                <ModifierGrouping title={item[0]} tags={item[1]} />
-          );
+              </li>
-        })}
+            );
+          })}
+        </ul>
+      )}
     </div>
   );
 }

ui/frontend/build_src/src/components/organisms/creationPanel/index.css.ts

@@ -0,0 +1,161 @@
+import {
+  createGlobalTheme,
+  createThemeContract,
+  createTheme,
+} from "@vanilla-extract/css";
+
+/**
+ * Colors are all the same across the themes, this is just to set up a contract
+ * Colors can be decided later. I am just the architect.
+ * Tried to pull things from the original app.
+ *
+ * Lots of these arent used yet, but once they are defined and useable then they can be set.
+ */
+
+// Link color 0, 102, 204
+
+const colors = createThemeContract({
+  brand: null,
+  brandDimmed: null,
+  brandHover: null,
+  brandActive: null,
+  brandAccent: null,
+  brandAccentDimmed: null,
+  brandAccentActive: null,
+
+  secondary: null,
+  secondaryDimmed: null,
+  secondaryHover: null,
+  secondaryActive: null,
+  secondaryAccent: null,
+  secondaryAccentDimmed: null,
+  secondaryAccentActive: null,
+
+  background: null,
+  backgroundAccent: null,
+  backgroundAlt: null,
+  backgroundAltAccent: null,
+
+  text: {
+    normal: null,
+    dimmed: null,
+
+    secondary: null,
+    secondaryDimmed: null,
+
+    accent: null,
+    accentDimmed: null,
+  },
+
+  link: null,
+  warning: null,
+  error: null,
+  success: null,
+});
+
+const app = createGlobalTheme(":root", {
+  spacing: {
+    small: "5px",
+    medium: "10px",
+    large: "25px",
+  },
+
+  trim: {
+    smallBorderRadius: "5px",
+  },
+
+  fonts: {
+    body: "Arial, Helvetica, sans-serif;",
+    sizes: {
+      Title: "2em",
+      Headline: "1.5em",
+      Subheadline: "1.20em",
+      SubSubheadline: "1em",
+      Body: "1em",
+      Caption: ".75em",
+      Overline: ".5em",
+
+    },
+  },
+  colors: colors,
+});
+
+export const darkTheme = createTheme(colors, {
+  brand: "#5000b9", // purple
+  brandDimmed: "#433852", // muted purple
+  brandHover: "#5d00d6", // bringhter purple
+  brandActive: "#5d00d6", // bringhter purple
+  brandAccent: "#28004e", // darker purple
+  brandAccentDimmed: "#28004e", // darker purple
+  brandAccentActive: "#28004e", // darker purple
+
+  secondary: "#0b8334", // green
+  secondaryDimmed: "#0b8334", // green
+  secondaryHover: "#0b8334", // green
+  secondaryActive: "#0b8334", // green
+  secondaryAccent: "#0b8334", // green
+  secondaryAccentDimmed: "#0b8334", // green
+  secondaryAccentActive: "#0b8334", // green
+
+  background: "#202124", // dark grey
+  backgroundAccent: " #383838", // lighter grey
+  backgroundAlt: "#2c2d30", // med grey
+  backgroundAltAccent: "#383838", // lighter grey
+
+  text: {
+    normal: "#ffffff", // white
+    dimmed: "#d1d5db", // off white
+
+    secondary: "#ffffff", // white
+    secondaryDimmed: "#d1d5db", // off white
+
+    accent: "#e7ba71", // orange
+    accentDimmed: "#7d6641", // muted orange
+  },
+
+  link: '#0066cc', // blue
+  warning: "#f0ad4e",
+  error: "#d9534f",
+  success: "#5cb85c",
+});
+
+// Generated by co-pilot
+export const lightTheme = createTheme(colors, {
+  brand: "#1E40AF",
+  brandDimmed: "#1E40AF",
+  brandHover: "#1E40AF",
+  brandActive: "#1E40AF",
+  brandAccent: "#1E40AF",
+  brandAccentDimmed: "#1E40AF",
+  brandAccentActive: "#1E40AF",
+
+  secondary: "#DB2777",
+  secondaryDimmed: "#DB2777",
+  secondaryHover: "#DB2777",
+  secondaryActive: "#DB2777",
+  secondaryAccent: "#DB2777",
+  secondaryAccentDimmed: "#DB2777",
+  secondaryAccentActive: "#DB2777",
+
+  background: "#EFF6FF",
+  backgroundAccent: "#EFF6FF",
+  backgroundAlt: "#EFF6FF",
+  backgroundAltAccent: "#EFF6FF",
+  text: {
+    normal: "#1F2937",
+    dimmed: "#6B7280",
+
+    secondary: "#1F2937",
+    secondaryDimmed: "#6B7280",
+
+    accent: "#1F2937",
+    accentDimmed: "#6B7280",
+  },
+
+  link: '#0066cc', // blue
+  warning: "yellow",
+  error: "red",
+  success: "green",
+});
+
+export const vars = { ...app, colors };

ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css

@@ -1,7 +0,0 @@
-.footer-display {
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}

ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css.ts

@@ -0,0 +1,61 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+// @ts-ignore
+import { vars } from "../../../styles/theme/index.css.ts";
+
+
+export const FooterDisplayMain = style({
+  color: vars.colors.text.normal,
+  fontSize: vars.fonts.sizes.Caption,
+
+  display: "inline-block",
+  // marginTop: vars.spacing.medium,
+  // marginBottom: vars.spacing.medium,
+  // TODO move this to the theme
+  padding: vars.spacing.small,
+  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+});
+
+export const CoffeeButton = style({
+  height: "23px",
+  transform: "translateY(25%)",
+});
+
+globalStyle(`${FooterDisplayMain} a`, {
+  color: vars.colors.link,
+  textDecoration: "none",
+});
+
+globalStyle(`${FooterDisplayMain} a:hover`, {
+  textDecoration: "underline",
+});
+
+globalStyle(`${FooterDisplayMain} a:visited`, {
+  color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} a:active`, {
+  color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} a:focus`, {
+  color: vars.colors.link,
+});
+
+globalStyle(`${FooterDisplayMain} p`, {
+  margin: vars.spacing.min,
+});
+
+
+// .footer-display {
+//   color: #ffffff;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: center;
+// }
+
+// #coffeeButton {
+//   height: 23px;
+//   transform: translateY(25%);
+// }

ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 
-import "./footerDisplay.css";
+import {
+  FooterDisplayMain,
+  CoffeeButton
+} from // @ts-ignore
+  "./footerDisplay.css.ts";
 
 import { API_URL } from "../../../api";
 
 export default function FooterDisplay() {
   return (
-    <div id="footer" className="panel-box">
+    <div className={FooterDisplayMain}>
       <p>
         If you found this project useful and want to help keep it alive, please{" "}
         <a
@@ -14,7 +18,7 @@ export default function FooterDisplay() {
           target="_blank"
           rel="noreferrer"
         >
-          <img src={`${API_URL}/kofi.png`} id="coffeeButton" />
+          <img src={`${API_URL}/kofi.png`} className={CoffeeButton} />
         </a>{" "}
         to help cover the cost of development and maintenance! Thank you for
         your support!

ui/frontend/build_src/src/styles/index.css.ts

@@ -7,7 +7,6 @@ globalStyle("body", {
   margin: 0,
   minWidth: "320px",
   minHeight: "100vh",
-  fontFamily: vars.fonts.body,
 });
 
 // single page style
@@ -25,13 +24,36 @@ globalStyle(`*`, {
   boxSizing: "border-box",
 });
 
+globalStyle(`button`, {
+  fontSize: vars.fonts.sizes.Body,
+})
+
 /** RESETS */
-globalStyle(`p, h3, h4`, {
+globalStyle(`p, h1, h2, h3, h4, h5, h6, ul`, {
   margin: 0,
 });
 
+globalStyle(`h3`, {
+  fontSize: vars.fonts.sizes.Subheadline,
+  fontFamily: vars.fonts.body,
+});
+
+globalStyle(`h4, h5`, {
+  fontSize: vars.fonts.sizes.SubSubheadline,
+  fontFamily: vars.fonts.body,
+
+});
+
+globalStyle(`p, label`, {
+  fontSize: vars.fonts.sizes.Body,
+  fontFamily: vars.fonts.body,
+});
+
 globalStyle(`textarea`, {
   margin: 0,
   padding: 0,
   border: "none",
+  fontSize: vars.fonts.sizes.Body,
+  fontWeight: 'bold',
+  fontFamily: vars.fonts.body,
 });

ui/frontend/build_src/src/styles/shared.css.ts

@@ -0,0 +1,30 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+// @ts-ignore
+import { vars } from "./theme/index.css.ts";
+
+export const PanelBox = style({
+  background: vars.colors.backgroundAlt,
+  color: vars.colors.text.normal,
+  padding: vars.spacing.medium,
+  borderRadius: vars.trim.smallBorderRadius,
+  marginBottom: vars.spacing.medium,
+  // TODO move this to the theme
+  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+});
+
+
+
+globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  backgroundColor: "transparent",
+  color: vars.colors.text.normal,
+  border: "0 none",
+  cursor: "pointer",
+  padding: "0",
+});
+
+export const SettingItem = style({
+  marginBottom: vars.spacing.medium,
+});

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -12,7 +12,6 @@ import {
  * Lots of these arent used yet, but once they are defined and useable then they can be set.
  */
 
-// Link color 0, 102, 204
 
 const colors = createThemeContract({
   brand: null,
@@ -47,6 +46,7 @@ const colors = createThemeContract({
     accentDimmed: null,
   },
 
+  link: null,
   warning: null,
   error: null,
   success: null,
@@ -54,6 +54,8 @@ const colors = createThemeContract({
 
 const app = createGlobalTheme(":root", {
   spacing: {
+    none: "0",
+    min: '2px',
     small: "5px",
     medium: "10px",
     large: "25px",
@@ -69,9 +71,12 @@ const app = createGlobalTheme(":root", {
       Title: "2em",
       Headline: "1.5em",
       Subheadline: "1.20em",
+      SubSubheadline: "1.1em",
       Body: "1em",
+      Plain: "0.8em",
       Caption: ".75em",
       Overline: ".5em",
+
     },
   },
   colors: colors,
@@ -110,6 +115,7 @@ export const darkTheme = createTheme(colors, {
     accentDimmed: "#7d6641", // muted orange
   },
 
+  link: '#0066cc', // blue
   warning: "#f0ad4e",
   error: "#d9534f",
   success: "#5cb85c",
@@ -148,6 +154,7 @@ export const lightTheme = createTheme(colors, {
     accentDimmed: "#6B7280",
   },
 
+  link: '#0066cc', // blue
   warning: "yellow",
   error: "red",
   success: "green",

ui/frontend/build_src/vite.config.ts

@@ -1,9 +1,9 @@
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite';
-import eslint from "vite-plugin-eslint";
+import eslint from 'vite-plugin-eslint';
-import react from "@vitejs/plugin-react";
+import react from '@vitejs/plugin-react';
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
-import path from "path";
+import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {