properly styled buttons

ui/frontend/build_src/src/components/atoms/clearQueue/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { doStopImage } from "../../../../../api";
-import { useImageQueue } from "../../../../../stores/imageQueueStore";
+import { doStopImage } from "../../../api";
+import { useImageQueue } from "../../../stores/imageQueueStore";
+import { BrandedButton } from "../../../styles/shared.css";
 
 export default function ClearQueue() {
 
@@ -19,6 +20,6 @@ export default function ClearQueue() {
   // / disabled={!hasQueue}
 
   return (
-    <button onClick={() => void stopAll()}>Clear Queue</button>
+    <button className={BrandedButton} disabled={!hasQueue} onClick={() => void stopAll()}>Clear Queue</button>
   );
 }

ui/frontend/build_src/src/components/atoms/makeButton/index.tsx

@@ -1,32 +1,32 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useEffect, useRef } from "react";
 
-import { useImageCreate } from "../../../../../stores/imageCreateStore";
-import { useImageQueue } from "../../../../../stores/imageQueueStore";
+import { useImageCreate } from "../../../stores/imageCreateStore";
+import { useImageQueue } from "../../../stores/imageQueueStore";
 import {
   FetchingStates,
   useImageFetching
-} from "../../../../../stores/imageFetchingStore";
+} from "../../../stores/imageFetchingStore";
 
 
-import { useImageDisplay } from "../../../../../stores/imageDisplayStore";
+import { useImageDisplay } from "../../../stores/imageDisplayStore";
 
 import { v4 as uuidv4 } from "uuid";
 
-import { useRandomSeed } from "../../../../../utils";
+import { useRandomSeed } from "../../../utils";
 import {
   ImageRequest,
   ImageReturnType,
   ImageOutput,
   doMakeImage,
-} from "../../../../../api";
+} from "../../../api";
 import {
   MakeButtonStyle,
 } from "./makeButton.css";
 
 import { useTranslation } from "react-i18next";
 
-import AudioDing from "../../../../molecules/audioDing";
+import AudioDing from "../../molecules/audioDing";
 
 const idDelim = "_batch";
 
@@ -62,7 +62,6 @@ export default function MakeButton() {
   const hackJson = (jsonStr: string, id: string) => {
 
     try {
-
       const parsed = JSON.parse(jsonStr);
       const { status, request, output: outputs } = parsed as ImageReturnType;
       if (status === 'succeeded') {
@@ -96,7 +95,6 @@ export default function MakeButton() {
       const { done, value } = await reader.read();
       const jsonStr = decoder.decode(value);
       if (done) {
-        removeFirstInQueue();
         setStatus(FetchingStates.COMPLETE);
         hackJson(finalJSON, id);
         if (isSoundEnabled) {
@@ -171,7 +169,7 @@ export default function MakeButton() {
 
   }
 
-  const queueImageRequest = async (req: ImageRequest) => {
+  const queueImageRequest = (req: ImageRequest) => {
     // the actual number of request we will make
     const requests = [];
     // the number of images we will make
@@ -221,12 +219,12 @@ export default function MakeButton() {
     }
     // the request that we have built
     const req = builtRequest();
-    await queueImageRequest(req);
+    queueImageRequest(req);
   };
 
   useEffect(() => {
     const makeImages = async (options: ImageRequest) => {
-      // potentially update the seed
+      removeFirstInQueue();
       await startStream(id ?? "", options);
     }
 
@@ -255,7 +253,6 @@ export default function MakeButton() {
         onClick={() => {
           void makeImageQueue();
         }}
-        disabled={hasQueue}
       >
         {t("home.make-img-btn")}
       </button>

ui/frontend/build_src/src/components/atoms/makeButton/makeButton.css.ts

@@ -1,8 +1,8 @@
 import { style } from "@vanilla-extract/css";
 
-import { vars } from "../../../../../styles/theme/index.css";
+import { vars } from "../../../styles/theme/index.css";
 
-import { BrandedButton } from "../../../../../styles/shared.css";
+import { BrandedButton } from "../../../styles/shared.css";
 
 export const MakeButtonStyle = style([BrandedButton, {
   width: "100%",

ui/frontend/build_src/src/components/atoms/stopButton/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { doStopImage } from "../../../../../api";
+import { doStopImage } from "../../../api";
 
+import { BrandedButton } from "../../../styles/shared.css";
 
 export default function StopButton() {
 
@@ -12,5 +13,5 @@ export default function StopButton() {
     }
   };
 
-  return <button onClick={() => void stopMake()}>Stop</button>;
+  return <button className={BrandedButton} onClick={() => void stopMake()}>Stop</button>;
 }

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/creationActions.css.ts

@@ -0,0 +1,16 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import { vars } from "../../../../../styles/theme/index.css";
+
+export const StopContainer = style({
+  display: "flex",
+  width: "100%",
+  marginTop: vars.spacing.medium,
+});
+
+globalStyle(`${StopContainer} button`, {
+  flexGrow: 1,
+});
+
+globalStyle(`${StopContainer} button:first-child`, {
+  marginRight: vars.spacing.small,
+});

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/creationActions/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import MakeButton from "../../../../atoms/makeButton";
+import StopButton from "../../../../atoms/stopButton";
+import ClearQueue from "../../../../atoms/clearQueue";
+
+import {
+  StopContainer
+} from "./creationActions.css";
+
+export default function CreationActions() {
+  return (
+    <div>
+      <MakeButton></MakeButton>
+      <div className={StopContainer}>
+        <StopButton></StopButton>
+        <ClearQueue></ClearQueue>
+      </div>
+    </div>
+  );
+}

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

@@ -6,9 +6,10 @@ import {
   PromptDisplay,
 } from "./basicCreation.css";
 
-import MakeButton from "./makeButton";
-import StopButton from "./stopButton";
-import ClearQueue from "./clearQueue";
+// import MakeButton from "./makeButton";
+// import StopButton from "./stopButton";
+// import ClearQueue from "./clearQueue";
+import CreationActions from "./creationActions";
 import SeedImage from "./seedImage";
 import ActiveTags from "./activeTags";
 
@@ -33,11 +34,14 @@ export default function BasicCreation() {
         <p>{t("home.editor-title")}</p>
         <textarea value={promptText} onChange={handlePromptChange}></textarea>
       </div>
-      <MakeButton></MakeButton>
+
+      <CreationActions></CreationActions>
+
+      {/* <MakeButton></MakeButton>
       <div>
         <StopButton></StopButton>
         <ClearQueue></ClearQueue>
-      </div>
+      </div> */}
 
       <SeedImage></SeedImage>
       <ActiveTags></ActiveTags>

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

@@ -65,6 +65,7 @@ export const BrandedButton = style({
   fontWeight: "bold",
   color: vars.colors.text.normal,
   padding: vars.spacing.small,
+  border: "0",
   borderRadius: vars.trim.smallBorderRadius,
 
   ":hover": {