hide history

2024-12-28 09:59:24 +01:00 · 2022-10-01 17:01:20 -04:00 · 2022-10-01 17:01:20 -04:00 · 1616885e7f
commit 1616885e7f
parent 85045c3e9c
33 changed files with 395 additions and 253 deletions
--- a/ui/frontend/build_src/src/App.tsx
+++ b/ui/frontend/build_src/src/App.tsx
@ -7,7 +7,6 @@ const location = new ReactLocation();

 function App() {

-
  return (
    <Router
      location={location}
--- a/ui/frontend/build_src/src/components/_recipes/button.css.ts
+++ b/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,
-        backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
-        ":hover": {
-          backgroundColor: `hsl(var(--primary-button-hue),${vars.colorMod.saturation.bright},${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})`,
-        },
+        // @ts-expect-error
+        '--button-hue': vars.brandHue,
+        '--button-base-saturation': vars.colorMod.saturation.normal,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
      },
      secondary: {
-        '--secondary-button-hue': vars.secondaryHue,
-        backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
-        ":hover": {
-          backgroundColor: `hsl(var(--secondary-button-hue),${vars.colorMod.saturation.bright},${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})`,
-        },
+        // @ts-expect-error
+        '--button-hue': vars.secondaryHue,
+        '--button-base-saturation': vars.colorMod.saturation.normal,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
      },
      tertiary: {
-        '--tertiary-button-hue': vars.tertiaryHue,
-        backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
-        ":hover": {
-          backgroundColor: `hsl(var(--tertiary-button-hue),${vars.colorMod.saturation.bright},${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})`,
-        },
+        // @ts-expect-error
+        '--button-hue': vars.tertiaryHue,
+        '--button-base-saturation': vars.colorMod.saturation.normal,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
      },
      cancel: {
-        '--cancel-button-hue': vars.errorHue,
-        backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.normal},${vars.colorMod.lightness.normal})`,
-        ":hover": {
-          backgroundColor: `hsl(var(--cancel-button-hue), ${vars.colorMod.saturation.bright},${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})`,
+        // @ts-expect-error
+        '--button-hue': vars.errorHue,
+        '--button-base-saturation': vars.colorMod.saturation.normal,
+        '--button-base-lightness': vars.colorMod.lightness.normal,
      },
+      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",
  },

 });
--- a/ui/frontend/build_src/src/components/_recipes/card.css.ts
+++ b/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)" },
--- a/ui/frontend/build_src/src/components/_recipes/popover_headless.css.ts
+++ b/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,
-});
+}]);


--- a/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts
+++ b/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": {
-      width: "0",
-    },
+    // "::-webkit-scrollbar": {
+    //   width: "4px",
+    // },

  },
  variants: {
--- a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx
+++ b/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>
--- a/ui/frontend/build_src/src/components/molecules/clearQueue/index.tsx
+++ b/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",
      }
    )}
--- a/ui/frontend/build_src/src/components/molecules/makeButton/index.tsx
+++ b/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);
--- a/ui/frontend/build_src/src/components/molecules/queueStatusTab/index.tsx
+++ b/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>}
+    </>
+  )
+
+}
+
+
+
--- a/ui/frontend/build_src/src/components/molecules/stopButton/index.tsx
+++ b/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>;
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
+++ b/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",
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
+++ b/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>
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
+++ b/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'
        })}
      >
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
+++ b/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 && (
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
+++ b/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 && (
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
+++ b/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'
        })}
      >
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts
+++ b/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({
-  height: "100%",
+export const completedImagesMain = style([cardStyle(),
+{
+  height: "250px",
  width: "100%",
  display: "flex",
-  paddingBottom: vars.spacing.medium,
-});
+  padding: vars.spacing.medium,
+  borderRadius: 0,
+}]);

 export const completedImagesList = style({
  display: "flex",
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
+++ b/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>
+    </>
  );
 }
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/index.tsx
+++ b/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>
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx
@ -17,45 +17,12 @@ const IdleDisplay = () => {
  );
 };

-const LoadingDisplay = () => {
-
-  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]);
+const LoadingDisplay = ({ images }: { images: string[] }) => {

  return (
    <>
-      <h4 className="loading">Loading...</h4>
-      <p>{percent} % Complete </p>
-      {timeRemaining != 0 && <p>Time Remaining: {timeRemaining} s</p>}
-      {progressImages.map((image, index) => {
-        if (index == progressImages.length - 1) {
+      {images.map((image, index) => {
+        if (index == images.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 />}
-
-      {(status === FetchingStates.COMPLETE && currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />}
+      {
+        (progressImages.length > 0)
+          ? <LoadingDisplay images={progressImages} />
+          : (currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />
+      }

    </div>
  );
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentInfo/index.tsx
+++ b/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>;
+}
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts
+++ b/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({
-  minHeight: '250px',
-});
+// export const previousImages = style({
+//   minHeight: '250px',
+// });
--- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
+++ b/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,
-  previousImages,
+  // displayContainer,
 } 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>
  );
 }
--- a/ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx
+++ b/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
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/index.tsx
+++ b/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>
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts
+++ b/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,
 });

--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx
+++ b/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>
          </>
        )}
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts
+++ b/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({
--- a/ui/frontend/build_src/src/pages/Home/home.css.ts
+++ b/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%",
-  height: "100%",
+  width: "100vw",
+  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}`,
 });


--- a/ui/frontend/build_src/src/pages/Home/index.tsx
+++ b/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>
+    </>
  );
 }

--- a/ui/frontend/build_src/src/styles/index.css.ts
+++ b/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",
+});
--- a/ui/frontend/build_src/src/styles/shared.css.ts
+++ b/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",
+
 });

--- a/ui/frontend/build_src/src/styles/theme/index.css.ts
+++ b/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%)',