advanced panels

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

@@ -1,4 +1,4 @@
-import { style, globalStyle } from '@vanilla-extract/css';
+import { style, globalStyle } from "@vanilla-extract/css";
 
 export const AdvancedSettingsList = style({
   // font-size: 9pt;
@@ -6,17 +6,32 @@ export const AdvancedSettingsList = style({
   // padding-left: 10px;
   // list-style-type: none;
 
-  fontSize: '9pt',
-  marginBottom: '5px',
-  paddingLeft: '10px',
-  listStyleType: 'none',
-
+  fontSize: "9pt",
+  marginBottom: "5px",
+  paddingLeft: "10px",
+  listStyleType: "none",
 });
 
 export const AdvancedSettingItem = style({
-  paddingBottom: '5px',
+  paddingBottom: "5px",
 });
 
-globalStyle( 'button > h4', {
-  color:'lightgrey' 
+export const MenuButton = style({
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  backgroundColor: "transparent",
+  color: "#fff",
+  border: "0 none",
+  cursor: "pointer",
+  padding: "0",
+  marginBottom: "10px",
 });
+
+globalStyle(`${MenuButton}> h4`, {
+  color: '#e7ba71',
+  marginTop:"5px !important",
+
+});
+
+

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

@@ -1,9 +1,12 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts'
+
 
 export default function GpuSettings() {
-
   const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
   const use_cpu = useImageCreate((state) =>
     state.getValueForRequestKey("use_cpu")
@@ -24,12 +27,13 @@ export default function GpuSettings() {
     <div>
       <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={toggleGpuOpen}
       >
         <h4>GPU Settings</h4>
       </button>
-      {gpuOpen && <>
+      {gpuOpen && (
+        <>
           <div>
             <label>
               <input
@@ -37,8 +41,8 @@ export default function GpuSettings() {
                 onChange={(e) => setRequestOption("turbo", e.target.checked)}
                 type="checkbox"
               />
-          Turbo mode (generates images faster, but uses an additional 1 GB of
-          GPU memory)
+              Turbo mode (generates images faster, but uses an additional 1 GB
+              of GPU memory)
             </label>
           </div>
           <div>
@@ -64,7 +68,8 @@ export default function GpuSettings() {
               VRAM)
             </label>
           </div>
-      </>}
+        </>
+      )}
     </div>
   );
 }

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

@@ -1,11 +1,16 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
-export default function ImprovementSettings() {
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts';
 
+export default function ImprovementSettings() {
   // these are conditionals that should be retired and inferred from the store
   const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
-  const isUsingFaceCorrection = useImageCreate((state) =>state.isUsingFaceCorrection());
+  const isUsingFaceCorrection = useImageCreate((state) =>
+    state.isUsingFaceCorrection()
+  );
 
   const use_upscale = useImageCreate((state) =>
     state.getValueForRequestKey("use_upscale")
@@ -31,17 +36,17 @@ export default function ImprovementSettings() {
     setImprovementOpen(!improvementOpen);
   };
 
-
   return (
     <div>
       <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={toggleImprovementOpen}
       >
         <h4>Improvement Settings</h4>
       </button>
-      {improvementOpen && <>
+      {improvementOpen && (
+        <>
           <div>
             <label>
               <input
@@ -88,7 +93,8 @@ export default function ImprovementSettings() {
               Show only filtered image
             </label>
           </div>
-      </>}
+        </>
+      )}
     </div>
   );
 }

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

@@ -2,9 +2,8 @@ import React, { useEffect } from "react";
 import { useImageCreate } from "../../../../store/imageCreateStore";
 import {
   AdvancedSettingsList,
-  AdvancedSettingItem
-} // @ts-ignore 
-from "./advancedsettings.css.ts";
+  AdvancedSettingItem, // @ts-ignore
+} from "./advancedsettings.css.ts";
 
 import ImprovementSettings from "./improvementSettings";
 import PropertySettings from "./propertySettings";
@@ -12,7 +11,6 @@ import WorkflowSettings from "./workflowSettings";
 import GpuSettings from "./gpuSettings";
 
 function SettingsList() {
-
   return (
     <ul className={AdvancedSettingsList}>
       <li className={AdvancedSettingItem}>

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

@@ -1,7 +1,9 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
-
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts'
 // todo: move this someplace more global
 const IMAGE_DIMENSIONS = [
   { value: 128, label: "128 (*)" },
@@ -21,10 +23,7 @@ const IMAGE_DIMENSIONS = [
   { value: 1024, label: "1024 (*)" },
 ];
 
-
 export default function PropertySettings() {
-
-
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
   const toggleUseRandomSeed = useImageCreate(
     (state) => state.toggleUseRandomSeed
@@ -56,12 +55,13 @@ export default function PropertySettings() {
     <div>
       <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={togglePropertyOpen}
       >
         <h4>Property Settings</h4>
       </button>
-      {propertyOpen && <>
+      {propertyOpen && (
+        <>
           <div>
             <label>
               Seed:
@@ -101,7 +101,9 @@ export default function PropertySettings() {
               Guidance Scale:
               <input
                 value={guidance_scale}
-              onChange={(e) => setRequestOption("guidance_scale", e.target.value)}
+                onChange={(e) =>
+                  setRequestOption("guidance_scale", e.target.value)
+                }
                 type="range"
                 min="0"
                 max="20"
@@ -166,8 +168,8 @@ export default function PropertySettings() {
               </select>
             </label>
           </div>
-      
-      </>}
+        </>
+      )}
     </div>
   );
 }

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

@@ -1,8 +1,12 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { useImageCreate } from "../../../../../store/imageCreateStore";
 
-export default function WorkflowSettings() {
+import { MenuButton } 
+from //@ts-ignore
+'../advancedsettings.css.ts';
 
+
+export default function WorkflowSettings() {
   const num_outputs = useImageCreate((state) =>
     state.getValueForRequestKey("num_outputs")
   );
@@ -10,7 +14,7 @@ export default function WorkflowSettings() {
   const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
   const save_to_disk_path = useImageCreate((state) =>
     state.getValueForRequestKey("save_to_disk_path")
-);
+  );
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
@@ -20,7 +24,6 @@ export default function WorkflowSettings() {
     (state) => state.toggleSoundEnabled
   );
 
-
   const [workflowOpen, setWorkflowOpen] = useState(true);
 
   const toggleWorkflowOpen = () => {
@@ -31,12 +34,13 @@ export default function WorkflowSettings() {
     <div>
       <button
         type="button"
-        className="panel-box-toggle-btn"
+        className={MenuButton}
         onClick={toggleWorkflowOpen}
       >
         <h4>Workflow Settings</h4>
       </button>
-      {workflowOpen && <>
+      {workflowOpen && (
+        <>
           <div>
             <label>
               Number of images to make:{" "}
@@ -94,7 +98,8 @@ export default function WorkflowSettings() {
               Play sound on task completion
             </label>
           </div>
-      </>}
+        </>
+      )}
     </div>
   );
-};
+}

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

@@ -1,8 +1,8 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 
 export const CreationPaneMain = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  padding:'0 10px',
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  padding: "0 10px",
 });

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

@@ -19,7 +19,9 @@ globalStyle(`*`, {
   boxSizing: "border-box",
 });
 
-globalStyle(`p`, {
+
+/** RESET  */
+globalStyle(`p, h3, h4`, {
   margin: 0,
 });