diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts index 7091cf9c..5feab2b3 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts @@ -1,20 +1,11 @@ -import { style } from "@vanilla-extract/css"; +import { style, globalStyle } from "@vanilla-extract/css"; export const generatedImageMain = style({ position: "relative", }); -// export const imageContain = style({ -// width: "512px", -// height: "512px", -// backgroundColor: "black", -// display: "flex", -// justifyContent: "center", -// alignItems: "center", -// }); - -export const image = style({ - // width: "512px", - // height: "512px", - // objectFit: "contain", +globalStyle(`${generatedImageMain} img`, { + width: "100%", + height: "100%", + objectFit: "contain", }); diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index 53200ee5..c15e6f25 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx @@ -4,14 +4,12 @@ import { ImageRequest } from "../../../api"; import { generatedImageMain, - image, } from "./generatedImage.css"; interface GeneretaedImageProps { imageData: string | undefined; metadata: ImageRequest | undefined; className?: string; - // children: never[]; } export default function GeneratedImage({ @@ -21,7 +19,7 @@ export default function GeneratedImage({ }: GeneretaedImageProps) { return (
- {metadata!.prompt} + {metadata!.prompt}
); } diff --git 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 index 1f98152c..55a5e22b 100644 --- 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 @@ -14,18 +14,18 @@ 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, -}); +// 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", -}); +// globalStyle(`${MenuButton}> h4`, { +// color: "#e7ba71", +// }); diff --git 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 index 24c49408..2f525982 100644 --- 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,10 +5,8 @@ import { useCreateUI } from "../../creationPanelUIStore"; import { SettingItem, -} from "../../../../../styles/shared.css"; -import { MenuButton, -} from "../advancedsettings.css"; +} from "../../../../../styles/shared.css"; import { useTranslation } from "react-i18next"; diff --git 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 index fa6431c5..3d727e08 100644 --- 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,11 +4,10 @@ import { useCreateUI } from "../../creationPanelUIStore"; import { SettingItem, + MenuButton } from "../../../../../styles/shared.css"; -import { - MenuButton, -} from "../advancedsettings.css"; + import { useTranslation } from "react-i18next"; diff --git 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 index 7e02aa7c..7f7898df 100644 --- 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 @@ -4,12 +4,10 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore"; import { useCreateUI } from "../../creationPanelUIStore"; import { - SettingItem + SettingItem, + MenuButton, } from "../../../../../styles/shared.css"; -import { - MenuButton, -} from "../advancedsettings.css"; import { useTranslation } from "react-i18next"; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx index aaaf6625..233b8743 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx @@ -32,7 +32,7 @@ const idDelim = "_batch"; export default function MakeButton() { const { t } = useTranslation(); - const dingRef = useRef(null); + const dingRef = useRef(); const parallelCount = useImageCreate((state) => state.parallelCount); const builtRequest = useImageCreate((state) => state.builtRequest); @@ -58,8 +58,6 @@ export default function MakeButton() { const hackJson = (jsonStr: string, id: string) => { - // DONES't seem to be needed for the updated progress implementation - try { const parsed = JSON.parse(jsonStr); @@ -91,7 +89,6 @@ export default function MakeButton() { const decoder = new TextDecoder(); let finalJSON = ''; - //console.log('id', id); while (true) { const { done, value } = await reader.read(); const jsonStr = decoder.decode(value); @@ -151,10 +148,7 @@ export default function MakeButton() { } const startStream = async (id: string, req: ImageRequest) => { - // const streamReq = { - // ...req, - // stream_image_progress: true, - // }; + try { resetForFetching(); 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 index 1827903a..1a7a068e 100644 --- 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 @@ -2,29 +2,9 @@ import { style } from "@vanilla-extract/css"; import { vars } from "../../../../../styles/theme/index.css"; -export const MakeButtonStyle = style({ +import { BrandedButton } from "../../../../../styles/shared.css"; + +export const MakeButtonStyle = style([BrandedButton, { width: "100%", - backgroundColor: vars.colors.brand, fontSize: vars.fonts.sizes.Headline, - fontWeight: "bold", - color: vars.colors.text.normal, - padding: vars.spacing.small, - borderRadius: vars.trim.smallBorderRadius, - - ":hover": { - backgroundColor: vars.colors.brandHover, - }, - - ":active": { - backgroundColor: vars.colors.brandActive, - }, - - ":disabled": { - backgroundColor: vars.colors.brandDimmed, - color: vars.colors.text.dimmed, - }, - - ":focus": { - outline: "none", - }, -}); +}]); 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 index 584516ce..97a48900 100644 --- 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 @@ -2,6 +2,8 @@ import { style } from "@vanilla-extract/css"; import { vars } from "../../../../../styles/theme/index.css"; +import { BrandedButton } from "../../../../../styles/shared.css"; + export const ImageInputDisplay = style({ display: "flex", }); @@ -15,27 +17,7 @@ export const ImageInput = style({ display: "none", }); -export const ImageInputButton = style({ - backgroundColor: vars.colors.brand, - fontSize: vars.fonts.sizes.Subheadline, - fontWeight: "bold", - color: vars.colors.text.normal, - padding: vars.spacing.small, - borderRadius: vars.trim.smallBorderRadius, - - ":hover": { - backgroundColor: vars.colors.brandHover, - }, - - ":active": { - backgroundColor: vars.colors.brandActive, - }, - - ":disabled": { - backgroundColor: vars.colors.brandDimmed, - color: vars.colors.text.dimmed, - }, -}); +export const ImageInputButton = style([BrandedButton]); // this is needed to fix an issue with the image input text // when that is a drag an drop we can remove this diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts index 70eec138..2c2d646b 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts @@ -7,16 +7,12 @@ export interface ImageCreationUIOptions { isOpenAdvImprovementSettings: boolean; isOpenAdvPropertySettings: boolean; isOpenAdvWorkflowSettings: boolean; - isOpenAdvGPUSettings: boolean; - isOpenImageModifier: boolean; - imageMofidiersMap: object; toggleAdvancedSettings: () => void; toggleAdvImprovementSettings: () => void; toggleAdvPropertySettings: () => void; toggleAdvWorkflowSettings: () => void; - toggleAdvGPUSettings: () => void; toggleImageModifier: () => void; // addImageModifier: (modifier: string) => void; @@ -30,9 +26,7 @@ export const useCreateUI = create( isOpenAdvImprovementSettings: false, isOpenAdvPropertySettings: false, isOpenAdvWorkflowSettings: false, - isOpenAdvGPUSettings: false, isOpenImageModifier: false, - imageMofidiersMap: {}, toggleAdvancedSettings: () => { set( @@ -67,14 +61,6 @@ export const useCreateUI = create( ); }, - toggleAdvGPUSettings: () => { - set( - produce((state: ImageCreationUIOptions) => { - state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings; - }) - ); - }, - toggleImageModifier: () => { set( produce((state: ImageCreationUIOptions) => { diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts index 17f64808..ff625097 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts @@ -15,21 +15,21 @@ 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, -}); +// 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", -}); +// globalStyle(`${MenuButton}> h4`, { +// color: "#e7ba71", +// }); export const ModifierListStyle = style({ // marginBottom: vars.spacing.small, diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx index 0947f283..a0cc296b 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx @@ -1,12 +1,14 @@ import React, { useState } from "react"; -import { PanelBox } from "../../../../styles/shared.css"; +import { + PanelBox, + MenuButton, +} from "../../../../styles/shared.css"; import { ImagerModifierGroups, ImageModifierGrouping, - MenuButton, ModifierListStyle, } from "./imageModifiers.css"; diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx index 54e9b85d..1237003e 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx @@ -26,26 +26,6 @@ export default function CompletedImages( clearDisplay(); }; - // const idDelim = "_batch"; - // if (completedQueries.length > 0) { - // // map the completedImagesto a new array - // // and then set the state - // const temp = completedQueries - // .map((query, index) => { - // if (void 0 !== query) { - // return query.output.map((data: ImageOutput, index: number) => { - // return { - // id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`, - // data: data.data, - // info: { ...query.request, seed: data.seed }, - // }; - // }); - // } - // }) - // .flat() - // .reverse() - // .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items - return (
{/* Adjust the dom do we dont do this check twice */} diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/currentDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/currentDisplay.css.ts new file mode 100644 index 00000000..15ba7cc0 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/currentDisplay.css.ts @@ -0,0 +1,12 @@ +import { style } from '@vanilla-extract/css' + +// handles all 3 +export const currentDisplayMain = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + width: '100%', + padding: '0 0 0 0', +}) diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/imageDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/imageDisplay.css.ts new file mode 100644 index 00000000..92109926 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/imageDisplay.css.ts @@ -0,0 +1,41 @@ +import { style, globalStyle } from '@vanilla-extract/css' + + +import { vars } from '../../../../../styles/theme/index.css' + +export const imageDisplayMain = style({ + height: '100%', + width: '100%', + display: 'flex', + flexDirection: 'column', +}); + +export const imageDisplayContainer = style({ + height: '100%', + width: '80%', + display: 'flex', + justifyContent: 'center', +}); + +export const imageDisplayCenter = style({ + width: '100%', + maxWidth: '1000px', + position: 'relative', +}); + +export const imageDisplayContent = style({ + display: 'flex', + flexDirection: 'column', +}); + +globalStyle(`${imageDisplayContent} > div`, { + marginBottom: vars.spacing.large, +}); + +globalStyle(`${imageDisplayContent} p`, { + marginBottom: vars.spacing.small, +}); + +globalStyle(`${imageDisplayContent} button`, { + marginRight: vars.spacing.medium, +}); diff --git 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 new file mode 100644 index 00000000..824f75cc --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/imageDisplay/index.tsx @@ -0,0 +1,91 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import React from "react"; +import { useImageCreate } from "../../../../../stores/imageCreateStore"; +import { CompletedImagesType } from "../../../../../stores/imageDisplayStore"; + +import GeneratedImage from "../../../../molecules/generatedImage"; + +import { + imageDisplayMain, + imageDisplayContainer, + imageDisplayCenter, + imageDisplayContent, +} from './imageDisplay.css'; + +import { + BrandedButton +} from '../../../../../styles/shared.css' + +export default function ImageDisplay({ info, data }: CompletedImagesType) { + + const createFileName = () => { + const { + prompt, + seed, + num_inference_steps, + guidance_scale, + use_face_correction, + use_upscale, + width, + height, + } = info; + + // Most important information is the prompt + let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_"); + underscoreName = underscoreName.substring(0, 100); + // name and the top level metadata + let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`; + // Add the face correction and upscale + if (typeof use_face_correction == "string") { + fileName += `_FaceCorrection-${use_face_correction}`; + } + if (typeof use_upscale == "string") { + fileName += `_Upscale-${use_upscale}`; + } + // Add the width and height + fileName += `_${width}x${height}`; + // add the file extension + fileName += ".png"; + // return fileName + return fileName; + }; + + const setRequestOption = useImageCreate((state) => state.setRequestOptions); + + const _handleSave = () => { + const link = document.createElement("a"); + link.download = createFileName(); + link.href = data ?? ""; + link.click(); + }; + + const _handleUseAsInput = () => { + setRequestOption("init_image", data); + }; + + return ( +
+ +
+ +
+ +
+
+

{info?.prompt}

+
+ + +
+
+ + +
+ +
+ +
+ +
+ ); +}; diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx index bcca66ea..fff9d2ca 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx @@ -1,13 +1,15 @@ -/* eslint-disable @typescript-eslint/naming-convention */ - import React, { useEffect, useState } from "react"; -import GeneratedImage from "../../../molecules/generatedImage"; -import { useImageCreate } from "../../../../stores/imageCreateStore"; + import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchingStore"; -import { CompletedImagesType, useImageDisplay } from "../../../../stores/imageDisplayStore"; +import { useImageDisplay } from "../../../../stores/imageDisplayStore"; import { API_URL } from "../../../../api"; -import { isGeneratorFunction } from "util/types"; + +import { + currentDisplayMain, +} from './currentDisplay.css'; + +import ImageDisplay from "./imageDisplay"; const IdleDisplay = () => { @@ -65,64 +67,6 @@ const LoadingDisplay = () => { ); }; -const ImageDisplay = ({ info, data }: CompletedImagesType) => { - - const createFileName = () => { - const { - prompt, - seed, - num_inference_steps, - guidance_scale, - use_face_correction, - use_upscale, - width, - height, - } = info; - - // Most important information is the prompt - let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_"); - underscoreName = underscoreName.substring(0, 100); - // name and the top level metadata - let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`; - // Add the face correction and upscale - if (typeof use_face_correction == "string") { - fileName += `_FaceCorrection-${use_face_correction}`; - } - if (typeof use_upscale == "string") { - fileName += `_Upscale-${use_upscale}`; - } - // Add the width and height - fileName += `_${width}x${height}`; - // add the file extension - fileName += ".png"; - // return fileName - return fileName; - }; - - const setRequestOption = useImageCreate((state) => state.setRequestOptions); - - const _handleSave = () => { - const link = document.createElement("a"); - link.download = createFileName(); - link.href = data ?? ""; - link.click(); - }; - - const _handleUseAsInput = () => { - setRequestOption("init_image", data); - }; - - return ( -
-

{info?.prompt}

- -
- - -
-
- ); -}; export default function CurrentDisplay() { @@ -130,7 +74,7 @@ export default function CurrentDisplay() { const currentImage = useImageDisplay((state) => state.currentImage); return ( -
+
{status === FetchingStates.IDLE && } diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts index 0c542963..6b7b1e59 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts @@ -1,17 +1,18 @@ import { style } from "@vanilla-extract/css"; +import { vars } from "../../../styles/theme/index.css"; export const displayPanel = style({ height: "100%", display: "flex", flexDirection: "column", + paddingRight: vars.spacing.medium, }); export const displayContainer = style({ flexGrow: 1, - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", + overflow: 'auto', }); -export const previousImages = style({}); +export const previousImages = style({ + minHeight: '250px', +}); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index 7c1c7923..24e8ea75 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -10,31 +10,11 @@ import { previousImages, } from "./displayPanel.css"; - -const idDelim = "_batch"; - export default function DisplayPanel() { - // if (completedQueries.length > 0) { - // // map the completedImagesto a new array - // // and then set the state - // const temp = completedQueries - // .map((query, index) => { - // if (void 0 !== query) { - // return query.output.map((data: ImageOutput, index: number) => { - // return { - // id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`, - // data: data.data, - // info: { ...query.request, seed: data.seed }, - // }; - // }); - // } - // }) - // .flat() - // .reverse() - // .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items return (
+
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx index a504cd7e..c4d47d80 100644 --- a/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx @@ -19,7 +19,7 @@ export default function StatusDisplay({ className }: { className?: string }) { const [statusMessage, setStatusMessage] = useState(startingMessage); const [statusClass, setStatusClass] = useState(StartingStatus); - const dingRef = useRef(null); + const dingRef = useRef(); // but this will be moved to the status display when it is created const { status, data } = useQuery(["health"], healthPing, { diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts index 5bd075e1..eccbec09 100644 --- a/ui/frontend/build_src/src/stores/imageCreateStore.ts +++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts @@ -7,7 +7,6 @@ import { useRandomSeed } from "../utils"; import { ImageRequest } from "../api"; - export interface ImageCreationUiOptions { isUseRandomSeed: boolean; isUseAutoSave: boolean; diff --git a/ui/frontend/build_src/src/styles/shared.css.ts b/ui/frontend/build_src/src/styles/shared.css.ts index 64d85a3b..2aa56292 100644 --- a/ui/frontend/build_src/src/styles/shared.css.ts +++ b/ui/frontend/build_src/src/styles/shared.css.ts @@ -39,4 +39,44 @@ export const SettingItem = style({ export const IconFont = style({ // reliant on font-awesome cdn fontFamily: "Font Awesome 6 Free" -}); \ No newline at end of file +}); + + +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 BrandedButton = style({ + backgroundColor: vars.colors.brand, + fontSize: vars.fonts.sizes.Subheadline, + fontWeight: "bold", + color: vars.colors.text.normal, + padding: vars.spacing.small, + borderRadius: vars.trim.smallBorderRadius, + + ":hover": { + backgroundColor: vars.colors.brandHover, + }, + + ":active": { + backgroundColor: vars.colors.brandActive, + }, + + ":disabled": { + backgroundColor: vars.colors.brandDimmed, + color: vars.colors.text.dimmed, + }, +});