tightened up center display

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

@@ -2,10 +2,8 @@ import { style, globalStyle } from "@vanilla-extract/css";
 
 import { vars } from "../../../../styles/theme/index.css";
 
-// import { PanelBox } from "../../../../styles/shared.css.ts";
 
 export const AdvancedSettingsList = style({
-  // marginBottom: vars.spacing.small,
   paddingLeft: 0,
   listStyleType: "none",
 });
@@ -13,19 +11,3 @@ export const AdvancedSettingsList = style({
 export const AdvancedSettingGrouping = style({
   marginTop: vars.spacing.medium,
 });
-
-// export const MenuButton = style({
-//   display: "block",
-//   width: "100%",
-//   textAlign: "left",
-//   backgroundColor: "transparent",
-//   color: vars.colors.text.normal,
-//   border: "0 none",
-//   cursor: "pointer",
-//   padding: "0",
-//   marginBottom: vars.spacing.medium,
-// });
-
-// globalStyle(`${MenuButton}> h4`, {
-//   color: "#e7ba71",
-// });

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

@@ -15,24 +15,8 @@ export const ImageModifierGrouping = style({
   marginTop: vars.spacing.medium,
 });
 
-// export const MenuButton = style({
-//   display: "block",
-//   width: "100%",
-//   textAlign: "left",
-//   backgroundColor: "transparent",
-//   color: vars.colors.text.normal,
-//   border: "0 none",
-//   cursor: "pointer",
-//   padding: "0",
-//   marginBottom: vars.spacing.medium,
-// });
-
-// globalStyle(`${MenuButton}> h4`, {
-//   color: "#e7ba71",
-// });
 
 export const ModifierListStyle = style({
-  // marginBottom: vars.spacing.small,
   paddingLeft: 0,
   listStyleType: "none",
   display: "flex",

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

@@ -29,7 +29,7 @@ export const imageDisplayContent = style({
 });
 
 globalStyle(`${imageDisplayContent} > div`, {
-  marginBottom: vars.spacing.large,
+  marginBottom: vars.spacing.medium,
 });
 
 globalStyle(`${imageDisplayContent} p`, {
@@ -38,4 +38,4 @@ globalStyle(`${imageDisplayContent} p`, {
 
 globalStyle(`${imageDisplayContent} button`, {
   marginRight: vars.spacing.medium,
-});
+});

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

@@ -79,7 +79,6 @@ export default function ImageDisplay({ info, data }: CompletedImagesType) {
               </div>
             </div>
             <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
-
           </div>
 
         </div>

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

@@ -11,7 +11,6 @@ import {
 
 import ImageDisplay from "./imageDisplay";
 
-
 const IdleDisplay = () => {
   return (
     <h4 className="no-image">Try Making a new image!</h4>

ui/frontend/build_src/src/stores/imageDisplayStore.ts

@@ -16,8 +16,6 @@ interface ImageDisplayState {
   updateDisplay: (id: string, ImageData: string, imageOptions: any) => void;
   setCurrentImage: (image: CompletedImagesType) => void;
   clearDisplay: () => void;
-
-  // getCurrentImage: () => {};
 }
 
 export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
@@ -29,9 +27,7 @@ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
   updateDisplay: (id: string, ImageData: string, imageOptions) => {
     set(
       produce((state) => {
-        // options: imageOptions
         state.currentImage = { id, display: ImageData, info: imageOptions };
-        // // imageOptions
         state.images.unshift({ id, data: ImageData, info: imageOptions });
         state.currentImage = state.images[0];
       })