hide history

ui/frontend/build_src/src/App.tsx

@@ -7,7 +7,6 @@ const location = new ReactLocation();
 
 function App() {
 
-
   return (
     <Router
       location={location}

ui/frontend/build_src/src/components/_recipes/button.css.ts

@@ -1,14 +1,15 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { vars } from "../../styles/theme/index.css";
-
-export const buttonStyle = recipe({
-
 // would prefer to use a var here, but it doesn't work
 // vars: {
 //   '--button-base-saturation': vars.colorMod.saturation.normal,
 //   '--button-base-lightness': vars.colorMod.lightness.normal,
 // },
 
+
+import { recipe } from "@vanilla-extract/recipes";
+import { vars } from "../../styles/theme/index.css";
+
+export const buttonStyle = recipe({
+
   base: {
     fontSize: vars.fonts.sizes.Subheadline,
     fontWeight: "bold",
@@ -19,85 +20,105 @@ export const buttonStyle = recipe({
   },
 
   variants: {
-    type: {
+    color: {
       primary: {
-        '--primary-button-hue': vars.brandHue,
+        // @ts-expect-error
-        backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        '--button-hue': vars.brandHue,
-        ":hover": {
+        '--button-base-saturation': vars.colorMod.saturation.normal,
-          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
-        },
-
-        ":active": {
-          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
-        },
-
-        ":focus": {
-          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
-        },
-
-        ":disabled": {
-          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
-        },
       },
       secondary: {
-        '--secondary-button-hue': vars.secondaryHue,
+        // @ts-expect-error
-        backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        '--button-hue': vars.secondaryHue,
-        ":hover": {
+        '--button-base-saturation': vars.colorMod.saturation.normal,
-          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
-        },
-
-        ":active": {
-          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
-        },
-
-        ":focus": {
-          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
-        },
-
-        ":disabled": {
-          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
-        },
       },
       tertiary: {
-        '--tertiary-button-hue': vars.tertiaryHue,
+        // @ts-expect-error
-        backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        '--button-hue': vars.tertiaryHue,
-        ":hover": {
+        '--button-base-saturation': vars.colorMod.saturation.normal,
-          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
-        },
-
-        ":active": {
-          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
-        },
-
-        ":focus": {
-          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
-        },
-
-        ":disabled": {
-          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
-        },
       },
       cancel: {
-        '--cancel-button-hue': vars.errorHue,
+        // @ts-expect-error
-        backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        '--button-hue': vars.errorHue,
-        ":hover": {
+        '--button-base-saturation': vars.colorMod.saturation.normal,
-          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
-        },
-        ":active": {
-          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright} ,${vars.colorMod.lightness.dim})`,
-        },
-        ":focus": {
-          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright} ,${vars.colorMod.lightness.dim})`,
-        },
-        ":disabled": {
-          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.dim} ,${vars.colorMod.lightness.dim})`,
       },
+      accent: {
+        // @ts-expect-error
+        '--button-hue': vars.backgroundAccentMain,
+        '--button-base-saturation': vars.colorMod.saturation.normal,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
       },
       clear: {
         backgroundColor: "transparent",
       },
     },
 
+    type: {
+      fill: {
+        backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+          border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+        ":active": {
+          backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+          border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":focus": {
+          backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+          border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":disabled": {
+          backgroundColor: `hsl(var(--button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+          border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+        },
+      },
+      outline: {
+        backgroundColor: "transparent",
+        border: `1px solid hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          borderColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+
+        ":active": {
+          borderColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":focus": {
+          borderColor: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":disabled": {
+          borderColor: `hsl(var(--button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+        },
+      },
+      action: {
+        backgroundColor: "transparent",
+        color: `hsl(var(--button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
+        ":hover": {
+          color: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.normal})`,
+        },
+
+        ":active": {
+          color: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":focus": {
+          color: `hsl(var(--button-hue),${vars.colorMod.saturation.bright},${vars.colorMod.lightness.dim})`,
+        },
+
+        ":disabled": {
+          color: `hsl(var(--button-hue),${vars.colorMod.saturation.dim},${vars.colorMod.lightness.dim})`,
+        },
+      }
+    },
+
     size: {
       large: {
         width: "100%",
@@ -105,8 +126,10 @@ export const buttonStyle = recipe({
       }
     }
   },
+
   defaultVariants: {
-    type: "primary",
+    color: "primary",
+    type: "fill",
   },
 
 });

ui/frontend/build_src/src/components/_recipes/card.css.ts

@@ -2,13 +2,13 @@ import { recipe } from "@vanilla-extract/recipes";
 import { vars } from "../../styles/theme/index.css";
 
 export const card = recipe({
+
   base: {
     color: vars.colors.text.normal,
     padding: vars.spacing.medium,
-
   },
-  variants: {
 
+  variants: {
     backing: {
       normal: {
         background: vars.backgroundMain,
@@ -20,13 +20,19 @@ export const card = recipe({
         background: vars.backgroundDark,
       },
     },
-
     rounded: {
       true: {
         borderRadius: vars.trim.smallBorderRadius,
       },
     },
 
+    info: {
+      true: {
+        background: vars.backgroundDark,
+        border: `1px solid ${vars.backgroundAccentMain}`,
+      },
+    },
+
     level: {
       flat: {},
       1: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" },

ui/frontend/build_src/src/components/_recipes/popover_headless.css.ts

@@ -4,6 +4,10 @@ import { style, globalStyle } from "@vanilla-extract/css";
 // import { recipe } from "@vanilla-extract/recipes";
 import { vars } from "../../styles/theme/index.css";
 
+import {
+  card
+} from "./card.css";
+
 export const PopoverMain = style({
   position: 'relative'
 });
@@ -20,16 +24,16 @@ globalStyle(`${PopoverButtonStyle} > i`, {
   marginRight: vars.spacing.small,
 });
 
-export const PopoverPanelMain = style({
+export const PopoverPanelMain = style([card(
+  {
+    backing: 'dark',
+    level: 2,
+  }
+), {
   position: 'absolute',
   top: '100%',
   right: '0',
   zIndex: '1',
-  background: vars.backgroundMain,
+}]);
-  color: vars.colors.text.normal,
-  padding: vars.spacing.medium,
-  borderRadius: vars.trim.smallBorderRadius,
-  marginBottom: vars.spacing.medium,
-});
 
 

ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts

@@ -12,6 +12,10 @@ export const tabStyles = recipe({
     borderBottom: 'none',
     marginLeft: vars.spacing.small,
     boxShadow: `0px -1px 4px -2px ${vars.backgroundAccentMain} inset`,
+    width: 'fit-content',
+    ':focus': {
+      outline: 'none',
+    },
   },
 
   variants: {
@@ -28,14 +32,14 @@ export const tabStyles = recipe({
 export const tabPanelStyles = recipe({
   base: {
     color: vars.colors.text.normal,
-    borderRadius: `0 0 ${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius}`,
+    // borderRadius: `0 0 ${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius}`,
     background: vars.backgroundLight,
     padding: vars.spacing.medium,
     flexGrow: 1,
     overflow: 'auto',
-    "::-webkit-scrollbar": {
+    // "::-webkit-scrollbar": {
-      width: "0",
+    //   width: "4px",
-    },
+    // },
 
   },
   variants: {

ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx

@@ -1,8 +1,12 @@
 import React, { Fragment } from "react";
 import { Tab } from '@headlessui/react';
+
+import { useImageFetching } from "../../../stores/imageFetchingStore";
+
 import CreationPanel from "../../organisms/creationPanel";
 import QueueDisplay from "../../organisms/queueDisplay";
 
+import ProcessingStatus from "../../molecules/queueStatusTab";
 
 import {
   tabPanelStyles,
@@ -10,6 +14,8 @@ import {
 } from "../../_recipes/tabs_headless.css";
 
 
+
+
 export default function CreationTabs() {
 
   return (
@@ -35,7 +41,7 @@ export default function CreationTabs() {
                 selected,
               })}
             >
-              Queue
+              <ProcessingStatus></ProcessingStatus>
             </button>
           )}
         </Tab>

ui/frontend/build_src/src/components/molecules/clearQueue/index.tsx

@@ -24,7 +24,7 @@ export default function ClearQueue() {
   return (
     <button className={buttonStyle(
       {
-        type: "cancel",
+        color: "cancel",
         size: "large",
       }
     )}

ui/frontend/build_src/src/components/molecules/makeButton/index.tsx

@@ -250,6 +250,7 @@ export default function MakeButton() {
         return;
       }
 
+      debugger;
       makeImages(options).catch((e) => {
         console.log('HAS QUEUE ERROR');
         console.log(e);

ui/frontend/build_src/src/components/molecules/queueStatusTab/index.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+
+import { FetchingStates, useImageFetching } from "../../../stores/imageFetchingStore";
+import { useRequestQueue } from "../../../stores/requestQueueStore";
+
+export default function QueueStatusTab() {
+
+
+  const [showBasicQueue, setShowBasicQueue] = useState(true);
+
+  const hasPendingQueue = useRequestQueue((state) => state.hasPendingQueue());
+  const pendingRequests = useRequestQueue((state) => state.pendingRequests());
+
+  const status = useImageFetching((state) => state.status);
+
+  const step = useImageFetching((state) => state.step);
+  const totalSteps = useImageFetching((state) => state.totalSteps);
+
+  const startTime = useImageFetching((state) => state.timeStarted);
+  const timeNow = useImageFetching((state) => state.timeNow);
+  const [timeRemaining, setTimeRemaining] = useState(0);
+
+  const [percent, setPercent] = useState(0);
+
+  useEffect(() => {
+    if (totalSteps > 0) {
+      setPercent(Math.round((step / totalSteps) * 100));
+    } else {
+      setPercent(0);
+    }
+  }, [step, totalSteps]);
+
+  useEffect(() => {
+    // find the remaining time
+    const timeTaken = +timeNow - +startTime;
+    const timePerStep = step == 0 ? 0 : timeTaken / step;
+    const totalTime = timePerStep * totalSteps;
+    const timeRemaining = (totalTime - timeTaken) / 1000;
+    // @ts-expect-error
+    setTimeRemaining(timeRemaining.toPrecision(3));
+
+  }, [step, totalSteps, startTime, timeNow, setTimeRemaining]);
+
+  useEffect(() => {
+    if (hasPendingQueue) {
+      setShowBasicQueue(false);
+    }
+  }, [status, hasPendingQueue]);
+
+  // {/* {showBasicQueue
+  //   ? <> */}
+  //   Queue
+  //   {/* </>
+  //   : <>
+  //     <span>Percent: {percent}%</span>
+  //   </>npm
+  // } */}
+
+
+  return (
+    <>
+      <span>Queue </span>
+      {hasPendingQueue && <span> Items Remaining: {pendingRequests.length} </span>}
+    </>
+  )
+
+}
+
+
+

ui/frontend/build_src/src/components/molecules/stopButton/index.tsx

@@ -18,7 +18,7 @@ export default function StopButton() {
 
   return <button className={buttonStyle(
     {
-      type: "cancel",
+      color: "cancel",
       size: "large",
     }
   )} onClick={() => void stopMake()}>Stop</button>;

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

@@ -2,7 +2,6 @@ import { style, globalStyle } from "@vanilla-extract/css";
 
 import { vars } from "../../../../styles/theme/index.css";
 
-
 export const AdvancedSettingsList = style({
   paddingLeft: 0,
   listStyleType: "none",

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

@@ -5,9 +5,12 @@ import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   SettingItem,
-  MenuButton,
 } from "../../../../../styles/shared.css";
 
+import {
+  buttonStyle,
+} from "../../../../_recipes/button.css";
+
 import { useTranslation } from "react-i18next";
 
 export default function ImprovementSettings() {
@@ -57,7 +60,10 @@ export default function ImprovementSettings() {
     <div>
       <button
         type="button"
-        className={MenuButton}
+        className={buttonStyle({
+          type: 'action',
+          color: 'accent',
+        })}
         onClick={toggleImprovementOpen}
       >
         <h4>Improvement Settings</h4>

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

@@ -56,7 +56,8 @@ export default function AdvancedSettings() {
         type="button"
         onClick={toggleAdvancedSettingsIsOpen}
         className={buttonStyle({
-          type: 'clear',
+          type: 'action',
+          color: 'secondary',
           size: 'large'
         })}
       >

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

@@ -4,10 +4,14 @@ import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   SettingItem,
-  MenuButton
 } from "../../../../../styles/shared.css";
 
 
+import {
+  buttonStyle,
+} from "../../../../_recipes/button.css";
+
+
 
 import { useTranslation } from "react-i18next";
 
@@ -71,7 +75,10 @@ export default function PropertySettings() {
 
   return (
     <div>
-      <button type="button" className={MenuButton} onClick={togglePropertyOpen}>
+      <button type="button" className={buttonStyle({
+        type: 'action',
+        color: 'accent',
+      })} onClick={togglePropertyOpen}>
         <h4>Property Settings</h4>
       </button>
       {propertyOpen && (

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

@@ -5,9 +5,11 @@ import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   SettingItem,
-  MenuButton,
 } from "../../../../../styles/shared.css";
 
+import {
+  buttonStyle,
+} from "../../../../_recipes/button.css";
 
 import { useTranslation } from "react-i18next";
 
@@ -30,7 +32,10 @@ export default function WorkflowSettings() {
 
   return (
     <div>
-      <button type="button" className={MenuButton} onClick={toggleWorkflowOpen}>
+      <button type="button" className={buttonStyle({
+        type: 'action',
+        color: 'accent',
+      })} onClick={toggleWorkflowOpen}>
         <h4>Workflow Settings</h4>
       </button>
       {workflowOpen && (

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

@@ -57,7 +57,10 @@ function ModifierGrouping({ title, category, tags }: ModifierGroupingProps) {
 
   return (
     <div className={ImageModifierGrouping}>
-      <button type="button" className={MenuButton} onClick={_toggleExpand}>
+      <button type="button" className={buttonStyle({
+        type: 'action',
+        color: 'accent',
+      })} onClick={_toggleExpand}>
         <h4>{title}</h4>
       </button>
       {isExpanded && <ModifierList category={category} tags={tags} />}
@@ -88,7 +91,8 @@ export default function ImageModifers() {
         type="button"
         onClick={handleClick}
         className={buttonStyle({
-          type: 'clear',
+          type: 'action',
+          color: 'secondary',
           size: 'large'
         })}
       >

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts

@@ -1,13 +1,18 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
 import { vars } from "../../../../styles/theme/index.css";
+import {
+  card as cardStyle,
+} from '../../../_recipes/card.css'
 
-export const completedImagesMain = style({
+export const completedImagesMain = style([cardStyle(),
-  height: "100%",
+{
+  height: "250px",
   width: "100%",
   display: "flex",
-  paddingBottom: vars.spacing.medium,
+  padding: vars.spacing.medium,
-});
+  borderRadius: 0,
+}]);
 
 export const completedImagesList = style({
   display: "flex",

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 
 import { useImageDisplay } from "../../../../stores/imageDisplayStore";
@@ -13,23 +13,39 @@ import {
   buttonStyle
 } from "../../../_recipes/button.css";
 
+import { Transition } from '@headlessui/react'
 
 
+import {
+  tabStyles
+} from "../../../_recipes/tabs_headless.css";
+
 export default function CompletedImages(
 
 ) {
 
+  const [isShowing, setIsShowing] = useState(false)
+
 
   const images = useImageDisplay((state) => state.images);
   const setCurrentImage = useImageDisplay((state) => state.setCurrentImage);
   const clearDisplay = useImageDisplay((state) => state.clearDisplay);
 
-
   const removeImagesAll = () => {
     clearDisplay();
   };
 
   return (
+    <>
+      <button
+        className={tabStyles({})}
+        onClick={() => setIsShowing((isShowing) => !isShowing)}>
+        {isShowing ? "Hide History" : "Show History"}
+      </button>
+      <Transition
+        show={isShowing}
+      >
+
         <div className={completedImagesMain}>
           {/* Adjust the dom do we dont do this check twice */}
           {images != null && images.length > 0 && (
@@ -39,7 +55,7 @@ export default function CompletedImages(
                 removeImagesAll();
               }}
             >
-          REMOVE
+              REMOVE ALL
             </button>
           )}
           <ul className={completedImagesList}>
@@ -64,5 +80,7 @@ export default function CompletedImages(
             })}
           </ul>
         </div>
+      </Transition>
+    </>
   );
 }

ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/index.tsx

@@ -80,7 +80,8 @@ export default function ImageDisplay({ info, data }: CompletedImagesType) {
                 )} onClick={_handleSave}>Save</button>
                 <button className={buttonStyle(
                   {
-                    type: "secondary"
+                    color: "secondary",
+                    type: "outline",
                   }
                 )} onClick={_handleUseAsInput}>Use as Input</button>
               </div>

ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx

@@ -17,45 +17,12 @@ const IdleDisplay = () => {
   );
 };
 
-const LoadingDisplay = () => {
+const LoadingDisplay = ({ images }: { images: string[] }) => {
-
-  const step = useImageFetching((state) => state.step);
-  const totalSteps = useImageFetching((state) => state.totalSteps);
-  const progressImages = useImageFetching((state) => state.progressImages);
-
-  const startTime = useImageFetching((state) => state.timeStarted);
-  const timeNow = useImageFetching((state) => state.timeNow);
-  const [timeRemaining, setTimeRemaining] = useState(0);
-
-  const [percent, setPercent] = useState(0);
-
-
-  useEffect(() => {
-    if (totalSteps > 0) {
-      setPercent(Math.round((step / totalSteps) * 100));
-    } else {
-      setPercent(0);
-    }
-  }, [step, totalSteps]);
-
-  useEffect(() => {
-    // find the remaining time
-    const timeTaken = +timeNow - +startTime;
-    const timePerStep = step == 0 ? 0 : timeTaken / step;
-    const totalTime = timePerStep * totalSteps;
-    const timeRemaining = (totalTime - timeTaken) / 1000;
-    // @ts-expect-error
-    setTimeRemaining(timeRemaining.toPrecision(3));
-
-  }, [step, totalSteps, startTime, timeNow, setTimeRemaining]);
 
   return (
     <>
-      <h4 className="loading">Loading...</h4>
+      {images.map((image, index) => {
-      <p>{percent} % Complete </p>
+        if (index == images.length - 1) {
-      {timeRemaining != 0 && <p>Time Remaining: {timeRemaining} s</p>}
-      {progressImages.map((image, index) => {
-        if (index == progressImages.length - 1) {
           return (
             <img src={`${API_URL}${image}`} key={index} />
           )
@@ -66,20 +33,26 @@ const LoadingDisplay = () => {
   );
 };
 
-
 export default function CurrentDisplay() {
 
   const status = useImageFetching((state) => state.status);
   const currentImage = useImageDisplay((state) => state.currentImage);
 
+
+  const progressImages = useImageFetching((state) => state.progressImages);
+
   return (
     <div className={currentDisplayMain}>
 
-      {status === FetchingStates.IDLE && <IdleDisplay />}
+      {(currentImage == null) && <IdleDisplay />}
+      {/* {(status === FetchingStates.FETCHING || status === FetchingStates.PROGRESSING) && <LoadingDisplay />}
+      {(currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />}  */}
 
-      {(status === FetchingStates.FETCHING || status === FetchingStates.PROGRESSING) && <LoadingDisplay />}
+      {
-
+        (progressImages.length > 0)
-      {(status === FetchingStates.COMPLETE && currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />}
+          ? <LoadingDisplay images={progressImages} />
+          : (currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />
+      }
 
     </div>
   );

ui/frontend/build_src/src/components/organisms/displayPanel/currentInfo/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function CurrentInfo() {
+  return <div></div>;
+}

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

@@ -13,6 +13,6 @@ export const displayContainer = style({
   overflow: 'auto',
 });
 
-export const previousImages = style({
+// export const previousImages = style({
-  minHeight: '250px',
+//   minHeight: '250px',
-});
+// });

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

@@ -1,30 +1,35 @@
 
-import React from "react";
+import React, { useState } from "react";
 
 import CurrentDisplay from "./currentDisplay";
 import CompletedImages from "./completedImages";
 
+// import {
+//   tabStyles
+// } from "../../_recipes/tabs_headless.css";
 import {
   displayPanel,
-  displayContainer,
+  // displayContainer,
-  previousImages,
 } from "./displayPanel.css";
 
+
+
 export default function DisplayPanel() {
 
+  // const [isShowing, setIsShowing] = useState(false)
+
   return (
     <div className={displayPanel}>
 
-      <div className={displayContainer}>
+      {/* <div className={displayContainer}> */}
       <CurrentDisplay
       ></CurrentDisplay>
-      </div>
+      {/* </div> */}
 
-      <div className={previousImages}>
+      {/* <div className={previousImages}> */}
       <CompletedImages
       ></CompletedImages>
-      </div>
+      {/* </div> */}
-
     </div>
   );
 }

ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx

@@ -8,6 +8,10 @@ import {
   PopoverPanelMain,
 } from "../../../_recipes/popover_headless.css";
 
+import {
+  card
+} from '../../../_recipes/card.css';
+
 import {
   IconFont,
   SettingItem

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

@@ -35,11 +35,12 @@ export default function QueueDisplay() {
       <div className={QueueListButtons}>
         <button
           className={buttonStyle({
-
+            type: 'outline',
           })}
           onClick={clearCompleted}>Clear Completed</button>
         <button
           className={buttonStyle({
+            type: 'outline',
           })}
           onClick={clearErrored}>Clear Errored</button>
       </div>

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

@@ -15,7 +15,7 @@ export const QueueListButtons = style({
   flexDirection: "row",
   justifyContent: "space-between",
   alignItems: "center",
-  marginBottom: vars.spacing.large,
+  marginBottom: vars.spacing.medium,
   marginTop: vars.spacing.medium,
 });
 

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx

@@ -92,13 +92,15 @@ export default function QueueItem({ request }: QueueItemProps) {
         {status === QueueStatus.pending && (
           <>
             <button className={buttonStyle({
-              type: "cancel",
+              color: "cancel",
             })} onClick={removeFromQueue}>Remove</button>
             <button className={buttonStyle({
-              type: "secondary",
+              color: "secondary",
+              type: "outline",
             })} onClick={pauseItem}>Pause</button>
             <button className={buttonStyle({
-              type: "secondary",
+              color: "tertiary",
+              type: "action",
             })} onClick={sendToTop}>Send to top</button>
           </>
         )}

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts

@@ -13,7 +13,8 @@ import {
 
 export const QueueItemMain = style([card(
   {
-    backing: "dark",
+
+    info: true,
     level: 1
   }
 ), {
@@ -32,24 +33,24 @@ globalStyle(`${QueueItemInfo} p`, {
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.complete}`, {
-  backgroundColor: `hsl(${vars.tertiaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+  borderColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.processing}`, {
-  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.bright}, ${vars.colorMod.lightness.bright})`,
+  borderColor: `hsl(${vars.tertiaryHue}, ${vars.colorMod.saturation.bright}, ${vars.colorMod.lightness.bright})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.pending}`, {
-  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.normal})`,
+  borderColor: `hsl(${vars.backgroundAccentMain}, ${vars.colorMod.saturation.bright}, ${vars.colorMod.lightness.normal})`,
 });
 
 globalStyle(`${QueueItemMain}.${QueueStatus.paused}`, {
-  backgroundColor: `hsl(${vars.secondaryHue}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.dim})`,
+  borderColor: `hsl(${vars.backgroundAccentMain}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.dim})`,
+  backgroundColor: `hsl(${vars.backgroundAccentMain}, ${vars.colorMod.saturation.dim}, ${vars.colorMod.lightness.dim})`,
 });
 
-
 globalStyle(`${QueueItemMain}.${QueueStatus.error}`, {
-  backgroundColor: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
+  borderColor: `hsl(${vars.errorHue}, ${vars.colorMod.saturation.normal}, ${vars.colorMod.lightness.normal})`,
 });
 
 export const QueueButtons = style({

ui/frontend/build_src/src/pages/Home/home.css.ts

@@ -4,28 +4,28 @@ import { vars } from "../../styles/theme/index.css";
 export const AppLayout = style({
   position: "relative",
 
-  width: "100%",
+  width: "100vw",
-  height: "100%",
+  height: "100vh",
   pointerEvents: "auto",
   display: "grid",
   backgroundColor: vars.backgroundMain,
   gridTemplateColumns: "400px 1fr",
-  gridTemplateRows: "100px 1fr 115px",
+  gridTemplateRows: "70px 1fr 115px",
   gridTemplateAreas: `
     "header header header"
     "create display display"
-    "create footer footer"
+    "create display display"
   `,
 
+
   "@media": {
     "screen and (max-width: 800px)": {
       gridTemplateColumns: "1fr",
-      gridTemplateRows: "100px 300px 1fr 100px",
+      gridTemplateRows: "100px 300px 1fr",
       gridTemplateAreas: `
         "header"
         "create"
         "display"
-        "footer"
       `,
     },
   },
@@ -40,9 +40,6 @@ export const CreateLayout = style({
   position: "relative",
   display: "flex",
   flexDirection: "column",
-  // overflowY: "auto",
-  // overflowX: "hidden",
-  padding: `0 ${vars.spacing.small}`,
 });
 
 

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -51,6 +51,7 @@ function Home() {
   }, [setRequestOption, statusMods, dataMoads]);
 
   return (
+    <>
       <div className={[AppLayout].join(" ")}>
         <header className={HeaderLayout}>
           <HeaderDisplay></HeaderDisplay>
@@ -61,10 +62,11 @@ function Home() {
         <main className={DisplayLayout}>
           <DisplayPanel></DisplayPanel>
         </main>
+      </div>
       <footer className={FooterLayout}>
         <FooterDisplay></FooterDisplay>
       </footer>
-    </div>
+    </>
   );
 }
 

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

@@ -8,6 +8,10 @@ globalStyle("body", {
   minHeight: "100vh",
 });
 
+
+
+
+
 // single page style
 globalStyle("#root", {
   position: "absolute",
@@ -15,7 +19,11 @@ globalStyle("#root", {
   left: 0,
   width: "100vw",
   height: "100vh",
-  overflow: "hidden",
+  overflow: 'auto',
+  overflowX: 'hidden',
+  // "::-webkit-scrollbar": {
+  //   width: "0",
+  // },
 });
 
 // border box all
@@ -66,3 +74,7 @@ globalStyle(`a`, {
   color: vars.colors.link,
   textDecoration: "none",
 });
+
+globalStyle(`ul`, {
+  listStyle: "none",
+});

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

@@ -1,27 +1,6 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 import { vars } from "./theme/index.css";
 
-export const PanelBox = style({
-  background: vars.backgroundLight,
-  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",
-});
 
 //TODO this should probably just be for all li elements
 export const SettingItem = style({
@@ -54,5 +33,6 @@ export const MenuButton = style({
 
 globalStyle(`${MenuButton}> h4`, {
   color: "#e7ba71",
+
 });
 

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

@@ -79,7 +79,7 @@ const app = createGlobalTheme(":root", {
   // 60 degree color difference
   // step downs
   brandHue: '265', // purple
-  secondaryHue: '20', // light blue
+  secondaryHue: '225', // deep blue
   tertiaryHue: '145', // grass green
 
   // step ups
@@ -101,6 +101,7 @@ const app = createGlobalTheme(":root", {
     },
   },
 
+  // is the secondary hue
   backgroundMain: 'hsl(225, 6%, 13%)',
   backgroundLight: 'hsl(225, 4%, 18%)',
   backgroundDark: 'hsl(225, 3%, 7%)',