From 867140df3014a249b3881a71ee6a7bc60d26e8a7 Mon Sep 17 00:00:00 2001
From: caranicas <kendrick.caranicas@gmail.com>
Date: Thu, 15 Sep 2022 13:34:54 -0400
Subject: [PATCH] creation ui soldified

---
 ui/frontend/build_src/src/App.css             |  47 --------
 .../modierTag => atoms/modifierTag}/index.tsx |   0
 .../advancedSettings/advancedSettings.css     |   3 -
 .../src/components/creationPanel/index.tsx    | 101 ------------------
 .../src/{ => components/layouts}/App.tsx      |  15 ++-
 .../src/{ => components/layouts}/app.css.ts   |  19 +++-
 .../creationPanel/advancedSettings/index.tsx  |   4 +-
 .../basicCreation/activeTags/index.tsx        |  20 ++++
 .../basicCreation/basicCreation.css.ts        |  28 +++++
 .../creationPanel/basicCreation/index.tsx     |  43 ++++++++
 .../basicCreation}/makeButton/index.tsx       |  14 ++-
 .../makeButton/makeButton.css.ts              |  11 ++
 .../basicCreation/seedImage/index.tsx         |  87 +++++++++++++++
 .../basicCreation/seedImage/seedImage.css.ts  |  48 +++++++++
 .../creationPanel/creationPanel.css           |   0
 .../creationPanel/creationpane.css.ts         |   8 ++
 .../imageModifiers/imageModifiers.css         |   0
 .../creationPanel/imageModifiers/index.tsx    |   6 +-
 .../organisms/creationPanel/index.tsx         |  27 +++++
 .../displayPanel/audioDing/index.tsx          |   2 +-
 .../displayPanel/completedImages/index.tsx    |   0
 .../displayPanel/displayPanel.css             |   0
 .../generatedImage/generatedImage.css         |   0
 .../displayPanel/generatedImage/index.tsx     |   2 +-
 .../{ => organisms}/displayPanel/index.tsx    |   6 +-
 .../footerDisplay/footerDisplay.css           |   0
 .../{ => organisms}/footerDisplay/index.tsx   |   0
 .../headerDisplay/headerDisplay.css           |   0
 .../{ => organisms}/headerDisplay/index.tsx   |   0
 .../headerDisplay/statusDisplay/index.tsx     |   2 +-
 .../statusDisplay/statusDisplay.css           |   0
 ui/frontend/build_src/src/main.tsx            |   3 +-
 ui/frontend/build_src/src/styles.css.ts       |  15 +++
 33 files changed, 333 insertions(+), 178 deletions(-)
 delete mode 100644 ui/frontend/build_src/src/App.css
 rename ui/frontend/build_src/src/components/{creationPanel/modierTag => atoms/modifierTag}/index.tsx (100%)
 delete mode 100644 ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
 delete mode 100644 ui/frontend/build_src/src/components/creationPanel/index.tsx
 rename ui/frontend/build_src/src/{ => components/layouts}/App.tsx (75%)
 rename ui/frontend/build_src/src/{ => components/layouts}/app.css.ts (62%)
 rename ui/frontend/build_src/src/components/{ => organisms}/creationPanel/advancedSettings/index.tsx (99%)
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
 rename ui/frontend/build_src/src/components/{creationPanel => organisms/creationPanel/basicCreation}/makeButton/index.tsx (85%)
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
 rename ui/frontend/build_src/src/components/{ => organisms}/creationPanel/creationPanel.css (100%)
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
 rename ui/frontend/build_src/src/components/{ => organisms}/creationPanel/imageModifiers/imageModifiers.css (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/creationPanel/imageModifiers/index.tsx (92%)
 create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
 rename ui/frontend/build_src/src/components/{ => organisms}/displayPanel/audioDing/index.tsx (86%)
 rename ui/frontend/build_src/src/components/{ => organisms}/displayPanel/completedImages/index.tsx (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/displayPanel/displayPanel.css (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/displayPanel/generatedImage/generatedImage.css (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/displayPanel/generatedImage/index.tsx (96%)
 rename ui/frontend/build_src/src/components/{ => organisms}/displayPanel/index.tsx (94%)
 rename ui/frontend/build_src/src/components/{ => organisms}/footerDisplay/footerDisplay.css (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/footerDisplay/index.tsx (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/headerDisplay/headerDisplay.css (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/headerDisplay/index.tsx (100%)
 rename ui/frontend/build_src/src/components/{ => organisms}/headerDisplay/statusDisplay/index.tsx (95%)
 rename ui/frontend/build_src/src/components/{ => organisms}/headerDisplay/statusDisplay/statusDisplay.css (100%)

diff --git a/ui/frontend/build_src/src/App.css b/ui/frontend/build_src/src/App.css
deleted file mode 100644
index cbb0e9cd..00000000
--- a/ui/frontend/build_src/src/App.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/* Very basic mobile stacked UI*/
-@media screen and (max-width: 768px) {
-  .App {
-    grid-template-columns: 1fr;
-    grid-template-rows: 100px 1fr 1fr 300px;
-    grid-template-areas:
-      "header"
-      "create"
-      "display"
-      "footer";
-  }
-}
-
-.header-layout {
-  grid-area: header;
-}
-
-.create-layout {
-  grid-area: create;
-}
-
-.display-layout {
-  grid-area: display;
-}
-
-.footer-layout {
-  grid-area: footer;
-}
-
-/* Copypasta from Bootstrap, makes content visually hidden but still accessible for screenreaders */
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-/* TODO proper utility classes */
-.mb-4 {
-  margin-bottom: 1rem;
-}
diff --git a/ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx b/ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx
rename to ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx
diff --git a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css b/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
deleted file mode 100644
index 90fbac25..00000000
--- a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
+++ /dev/null
@@ -1,3 +0,0 @@
-input[size="4"] {
-  width: 4.5rem;
-}
diff --git a/ui/frontend/build_src/src/components/creationPanel/index.tsx b/ui/frontend/build_src/src/components/creationPanel/index.tsx
deleted file mode 100644
index 28224b8d..00000000
--- a/ui/frontend/build_src/src/components/creationPanel/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { ChangeEvent } from "react";
-
-import MakeButton from "./makeButton";
-import AdvancedSettings from "./advancedSettings";
-import ImageModifiers from "./imageModifiers";
-
-import ModifierTag from "./modierTag";
-
-import { useImageCreate } from "../../store/imageCreateStore";
-
-import "./creationPanel.css";
-
-export default function CreationPanel() {
-  const promptText = useImageCreate((state) =>
-    state.getValueForRequestKey("prompt")
-  );
-  const init_image = useImageCreate((state) =>
-    state.getValueForRequestKey("init_image")
-  );
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-  const selectedtags = useImageCreate((state) => state.selectedTags());
-
-  const handlePromptChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setRequestOption("prompt", event.target.value);
-  };
-
-  const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
-    //@ts-ignore
-    const file = event.target.files[0];
-
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target) {
-          setRequestOption("init_image", e.target.result);
-        }
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const _handleClearImage = () => {
-    setRequestOption("init_image", undefined);
-  };
-
-  return (
-    <div className="create-panel">
-      <div className="basic-create">
-        <div className="prompt">
-          <p>Prompt </p>
-          <textarea value={promptText} onChange={handlePromptChange}></textarea>
-        </div>
-
-        <div id="editor-inputs-init-image" className="row">
-          <label>
-            <b>Initial Image:</b> (optional){" "}
-          </label>
-          <input
-            id="init_image"
-            name="init_image"
-            type="file"
-            onChange={_handleFileSelect}
-          />
-          <br />
-          {init_image && (
-          <div id="init_image_preview" className="image_preview">
-              <img
-                id="init_image_preview"
-                src={init_image}
-                width="100"
-                height="100"
-              />
-
-            <button id="init_image_clear" className="image_clear_btn" onClick={_handleClearImage}>
-              X
-            </button>
-         
-          </div>
-          )}
-        </div>
-
-        <MakeButton></MakeButton>
-        <div className="selected-tags">
-          <p>Active Tags</p>
-          <ul>
-            {selectedtags.map((tag) => (
-              <li key={tag}>
-                <ModifierTag name={tag}></ModifierTag>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      <div className="advanced-create">
-        <AdvancedSettings></AdvancedSettings>
-        <ImageModifiers></ImageModifiers>
-      </div>
-    </div>
-  );
-}
diff --git a/ui/frontend/build_src/src/App.tsx b/ui/frontend/build_src/src/components/layouts/App.tsx
similarity index 75%
rename from ui/frontend/build_src/src/App.tsx
rename to ui/frontend/build_src/src/components/layouts/App.tsx
index 0dbe4915..f13ac47a 100644
--- a/ui/frontend/build_src/src/App.tsx
+++ b/ui/frontend/build_src/src/components/layouts/App.tsx
@@ -1,24 +1,23 @@
 import React, { useEffect, useState } from "react";
 
-
 import { 
   AppLayout,
   HeaderLayout,
   CreateLayout,
   DisplayLayout,
   FooterLayout
-} 
+} // @ts-ignore
 from './app.css.ts';
 
 import { useQuery } from "@tanstack/react-query";
-import { getSaveDirectory } from "./api";
-import { useImageCreate } from "./store/imageCreateStore";
+import { getSaveDirectory } from "../../api";
+import { useImageCreate } from "../../store/imageCreateStore";
 
 // Todo - import components here
-import HeaderDisplay from "./components/headerDisplay";
-import CreationPanel from "./components/creationPanel";
-import DisplayPanel from "./components/displayPanel";
-import FooterDisplay from "./components/footerDisplay";
+import HeaderDisplay from "../organisms/headerDisplay";
+import CreationPanel from "../organisms/creationPanel";
+import DisplayPanel from "../organisms/displayPanel";
+import FooterDisplay from "../organisms/footerDisplay";
 
 function App() {
   // Get the original save directory
diff --git a/ui/frontend/build_src/src/app.css.ts b/ui/frontend/build_src/src/components/layouts/app.css.ts
similarity index 62%
rename from ui/frontend/build_src/src/app.css.ts
rename to ui/frontend/build_src/src/components/layouts/app.css.ts
index ed8b7ae6..e2076867 100644
--- a/ui/frontend/build_src/src/app.css.ts
+++ b/ui/frontend/build_src/src/components/layouts/app.css.ts
@@ -7,13 +7,26 @@ export const AppLayout = style({
   pointerEvents: 'auto',
   display: 'grid',
   backgroundColor: 'rgb(32, 33, 36)',
-  gridTemplateColumns: '360px 1fr',
+  gridTemplateColumns: '400px 1fr',
   gridTemplateRows: '100px 1fr 50px',
   gridTemplateAreas: `
     "header header header"
     "create display display"
-    "footer footer footer"
+    "create footer footer"
   `,
+
+  '@media': {
+    'screen and (max-width: 800px)': {
+      gridTemplateColumns: '1fr',
+      gridTemplateRows: '100px 1fr 1fr 50px',
+      gridTemplateAreas: `
+        "header"
+        "create"
+        "display"
+        "footer"
+      `,
+    },
+  },
 });
 
 export const HeaderLayout = style({
@@ -22,10 +35,12 @@ export const HeaderLayout = style({
 
 export const CreateLayout = style({ 
   gridArea: 'create',
+  overflow: 'auto',
 });
 
 export const DisplayLayout = style({
   gridArea: 'display',
+  overflow: 'auto',
 });
 
 export const FooterLayout = style({
diff --git a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
similarity index 99%
rename from ui/frontend/build_src/src/components/creationPanel/advancedSettings/index.tsx
rename to ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
index 5aff1014..9b1aa5a0 100644
--- a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
-import { useImageCreate } from "../../../store/imageCreateStore";
-import "./advancedSettings.css";
+import { useImageCreate } from "../../../../store/imageCreateStore";
+// import "./advancedSettings.css";
 
 // todo: move this someplace more global
 const IMAGE_DIMENSIONS = [
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx
new file mode 100644
index 00000000..85c26de5
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+import ModifierTag from "../../../../atoms/modifierTag";
+
+export default function ActiveTags() {
+  const selectedtags = useImageCreate((state) => state.selectedTags());
+  return (
+    <div className="selected-tags">
+    <p>Active Tags</p>
+    <ul>
+      {selectedtags.map((tag) => (
+        <li key={tag}>
+          <ModifierTag name={tag}></ModifierTag>
+        </li>
+      ))}
+    </ul>
+  </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
new file mode 100644
index 00000000..b52c2be2
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
@@ -0,0 +1,28 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+
+export const CreationBasicMain = style({
+  position: 'relative',
+  width: '100%',
+});
+
+globalStyle(`${CreationBasicMain} > *`, {
+  marginBottom: '10px'
+});
+
+export const PromptDisplay = style({
+});
+
+globalStyle(`${PromptDisplay} > p`, {
+  fontSize: '1.5em',
+  fontWeight: 'bold',
+  marginBottom: '10px'
+});
+
+globalStyle(`${PromptDisplay} > textarea`, {
+  fontSize: '1.2em',
+  fontWeight: 'bold',
+  fontFamily: 'Arial',
+  width: '100%',
+  resize:'vertical',
+  height: '100px',
+});
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
new file mode 100644
index 00000000..f8b7b70e
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
@@ -0,0 +1,43 @@
+
+import React, {ChangeEvent} from "react";
+import { useImageCreate } from "../../../../store/imageCreateStore";
+
+
+
+import {
+  CreationBasicMain,
+  PromptDisplay,
+} // @ts-ignore 
+from "./basicCreation.css.ts";
+
+import SeedImage from "./seedImage";
+import ActiveTags from "./activeTags";
+import MakeButton from "./makeButton";
+
+export default function BasicCreation() {
+
+  const promptText = useImageCreate((state) =>
+    state.getValueForRequestKey("prompt")
+  );
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const handlePromptChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setRequestOption("prompt", event.target.value);
+  };
+
+  return (
+    <div className={CreationBasicMain}>
+      
+    <div className={PromptDisplay}>
+      <p>Prompt </p>
+      <textarea value={promptText} onChange={handlePromptChange}></textarea>
+    </div>
+
+    <SeedImage></SeedImage>
+
+    <ActiveTags></ActiveTags>
+
+    <MakeButton></MakeButton>
+  </div>
+  )
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
similarity index 85%
rename from ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx
rename to ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
index dfab85ef..d74debea 100644
--- a/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
@@ -1,10 +1,16 @@
 import React, { useEffect, useState } from "react";
 
-import { useImageCreate } from "../../../store/imageCreateStore";
-import { useImageQueue } from "../../../store/imageQueueStore";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageQueue } from "../../../../../store/imageQueueStore";
 import { v4 as uuidv4 } from "uuid";
 
-import { useRandomSeed } from "../../../utils";
+import { useRandomSeed } from "../../../../../utils";
+
+import { 
+  MakeButtonStyle 
+} from // @ts-ignore
+"./makeButton.css.ts";
+
 
 export default function MakeButton() {
   const parallelCount = useImageCreate((state) => state.parallelCount);
@@ -68,5 +74,5 @@ export default function MakeButton() {
 
   };
 
-  return <button onClick={makeImages}>Make</button>;
+  return <button className={MakeButtonStyle} onClick={makeImages}>Make</button>;
 }
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
new file mode 100644
index 00000000..28f04382
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const MakeButtonStyle = style({
+  width: '100%',
+  backgroundColor: 'rgb(38, 77, 141)',
+  fontSize: '1.5em',
+  fontWeight: 'bold',
+  color: 'white',
+  padding:'8px',
+  borderRadius: '5px',
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
new file mode 100644
index 00000000..ec06d432
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
@@ -0,0 +1,87 @@
+import React , {useRef, ChangeEvent} from "react";
+
+import { 
+  ImageInputDisplay, 
+  InputLabel,
+  ImageInput,
+  ImageInputButton,
+  ImageFixer, 
+  XButton
+} from // @ts-ignore
+"./seedImage.css.ts";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+
+
+// TODO : figure out why this needs props to be passed in.. fixes a type error
+// when the component is used in the parent component
+export default function SeedImage(_props:any) {
+
+  const imageInputRef = useRef<HTMLInputElement>(null);
+
+  const init_image = useImageCreate((state) =>
+    state.getValueForRequestKey("init_image")
+  );
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const _startFileSelect = () => {
+    imageInputRef.current?.click();
+  }
+  const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
+    //@ts-ignore
+    const file = event.target.files[0];
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target) {
+          setRequestOption("init_image", e.target.result);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+
+  const _handleClearImage = () => {
+    setRequestOption("init_image", undefined);
+  };
+
+  return (
+    <div className={ImageInputDisplay}>
+
+      <div>
+        <label className={InputLabel}>
+          <b>Initial Image:</b> (optional)
+        </label>
+        <input
+          ref={imageInputRef}
+          className={ImageInput}
+          name="init_image"
+          type="file"
+          onChange={_handleFileSelect}
+        />
+          <button className={ImageInputButton} onClick={_startFileSelect}>
+            Select File
+          </button>
+      </div>
+
+      <div className={ImageFixer}>
+        {init_image && (
+          <>
+            <img
+              src={init_image}
+              width="100"
+              height="100"
+            />
+
+          <button className={XButton} onClick={_handleClearImage}>
+            X
+          </button>
+        </>
+        )}
+      </div>
+
+
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
new file mode 100644
index 00000000..d9b30b1f
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+
+export const ImageInputDisplay = style({
+  display: 'flex',
+  // justifyContent:'space-around',
+});
+
+export const InputLabel = style({
+  marginBottom: '5px',
+  display:'block'
+
+});
+
+export const ImageInput = style({
+  display:'none',
+});
+
+export const ImageInputButton = style({
+  backgroundColor: 'rgb(38, 77, 141)',
+  fontSize: '1.2em',
+  fontWeight: 'bold',
+  color: 'white',
+  padding:'8px',
+  borderRadius: '5px',
+});
+
+// this is needed to fix an issue with the image input text
+// when that is a drag an drop we can remove this
+export const ImageFixer = style({
+  marginLeft: '20px',
+});
+
+export const XButton = style({
+  position: 'absolute',
+  transform: 'translateX(-50%) translateY(-35%)',
+  background: 'black',
+  color: 'white',
+  border: '2pt solid #ccc',
+  padding: '0',
+  cursor: 'pointer',
+  outline: 'inherit',
+  borderRadius: '8pt',
+  width: '16pt',
+  height: '16pt',
+  fontFamily: 'Verdana',
+  fontSize: '8pt',
+});
+
diff --git a/ui/frontend/build_src/src/components/creationPanel/creationPanel.css b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css
similarity index 100%
rename from ui/frontend/build_src/src/components/creationPanel/creationPanel.css
rename to ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
new file mode 100644
index 00000000..c61f5f1c
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const CreationPaneMain = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding:'0 10px', 
+});
diff --git a/ui/frontend/build_src/src/components/creationPanel/imageModifiers/imageModifiers.css b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css
similarity index 100%
rename from ui/frontend/build_src/src/components/creationPanel/imageModifiers/imageModifiers.css
rename to ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css
diff --git a/ui/frontend/build_src/src/components/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
similarity index 92%
rename from ui/frontend/build_src/src/components/creationPanel/imageModifiers/index.tsx
rename to ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
index 39a8b0f2..46a1f1bc 100644
--- a/ui/frontend/build_src/src/components/creationPanel/imageModifiers/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 
 import { useQuery } from "@tanstack/react-query";
-import { loadModifications } from "../../../api";
+import { loadModifications } from "../../../../api";
 
-import { useImageCreate } from "../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../store/imageCreateStore";
 
-import ModifierTag from "../modierTag";
+import ModifierTag from "../../../atoms/modifierTag";
 
 type ModifierListProps = {
   tags: string[];
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
new file mode 100644
index 00000000..604a140b
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
@@ -0,0 +1,27 @@
+import React, { ChangeEvent } from "react";
+
+import MakeButton from "./basicCreation/makeButton";
+import AdvancedSettings from "./advancedSettings";
+import ImageModifiers from "./imageModifiers";
+
+import "./creationPanel.css";
+
+// @ts-ignore
+import { CreationPaneMain } from "./creationpane.css.ts";
+
+import BasicCreation from "./basicCreation";
+
+export default function CreationPanel() {
+  
+  return (
+    <div className={CreationPaneMain}>
+
+      <BasicCreation></BasicCreation>
+
+      <div className="advanced-create">
+        <AdvancedSettings></AdvancedSettings>
+        <ImageModifiers></ImageModifiers>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/audioDing/index.tsx
similarity index 86%
rename from ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/audioDing/index.tsx
index 5be0f13d..13e69dff 100644
--- a/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/audioDing/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { API_URL } from "../../../api";
+import { API_URL } from "../../../../api";
 
 const url = `${API_URL}/ding.mp3`;
 
diff --git a/ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
diff --git a/ui/frontend/build_src/src/components/displayPanel/displayPanel.css b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css
similarity index 100%
rename from ui/frontend/build_src/src/components/displayPanel/displayPanel.css
rename to ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css
diff --git a/ui/frontend/build_src/src/components/displayPanel/generatedImage/generatedImage.css b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css
similarity index 100%
rename from ui/frontend/build_src/src/components/displayPanel/generatedImage/generatedImage.css
rename to ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css
diff --git a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx
similarity index 96%
rename from ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx
index 8bc555e6..cbca2736 100644
--- a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../../store/imageCreateStore";
 
 import "./generatedImage.css";
 
diff --git a/ui/frontend/build_src/src/components/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
similarity index 94%
rename from ui/frontend/build_src/src/components/displayPanel/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
index 1f439c23..c0c033ff 100644
--- a/ui/frontend/build_src/src/components/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useImageQueue } from "../../store/imageQueueStore";
+import { useImageQueue } from "../../../store/imageQueueStore";
 
-import { ImageRequest, useImageCreate } from "../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { doMakeImage, MakeImageKey } from "../../api";
+import { doMakeImage, MakeImageKey } from "../../../api";
 
 import AudioDing from "./audioDing";
 
diff --git a/ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
similarity index 100%
rename from ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css
rename to ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
diff --git a/ui/frontend/build_src/src/components/footerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/footerDisplay/index.tsx
rename to ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
diff --git a/ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css
similarity index 100%
rename from ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css
diff --git a/ui/frontend/build_src/src/components/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/headerDisplay/index.tsx
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
diff --git a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
similarity index 95%
rename from ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
index 1d0c61e3..67e01e08 100644
--- a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 
-import { healthPing, HEALTH_PING_INTERVAL } from "../../../api";
+import { healthPing, HEALTH_PING_INTERVAL } from "../../../../api";
 
 const startingMessage = "Stable Diffusion is starting...";
 const successMessage = "Stable Diffusion is ready to use!";
diff --git a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css
similarity index 100%
rename from ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css
diff --git a/ui/frontend/build_src/src/main.tsx b/ui/frontend/build_src/src/main.tsx
index f3e54e70..59e64a17 100644
--- a/ui/frontend/build_src/src/main.tsx
+++ b/ui/frontend/build_src/src/main.tsx
@@ -6,11 +6,10 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
-import App from "./App";
+import App from "./components/layouts/App";
 
 import './styles.css.ts';
 
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
diff --git a/ui/frontend/build_src/src/styles.css.ts b/ui/frontend/build_src/src/styles.css.ts
index fd3a3bc0..e33ea76a 100644
--- a/ui/frontend/build_src/src/styles.css.ts
+++ b/ui/frontend/build_src/src/styles.css.ts
@@ -13,5 +13,20 @@ globalStyle('#root', {
   left: 0,
   width: '100vw',
   height: '100vh',
+  overflow: 'hidden',
 });
 
+
+globalStyle(`*`, {
+  boxSizing: 'border-box',
+});
+
+globalStyle(`p`, {
+  margin: 0,
+});
+
+globalStyle(`textarea`, {
+  margin: 0,
+  padding: 0,
+  border: 'none',
+});
\ No newline at end of file