all buttons are a recipe now

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

@@ -3,8 +3,9 @@ import { doStopImage } from "../../../api";
 import { useRequestQueue } from "../../../stores/requestQueueStore";
 
 import {
-  ClearQueueButton
+  buttonStyle
-} from "./clearQueue.css";
+} from "../../_recipes/button.css";
+
 
 export default function ClearQueue() {
 
@@ -21,7 +22,13 @@ export default function ClearQueue() {
   };
 
   return (
-    <button className={ClearQueueButton} disabled={!hasQueue} onClick={() => void stopAll()}>
+    <button className={buttonStyle(
+      {
+        type: "cancel",
+        size: "large",
+      }
+    )}
+      disabled={!hasQueue} onClick={() => void stopAll()}>
       STOP ALL
     </button>
   );

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { doStopImage } from "../../../api";
 
-import { BrandedButton } from "../../../styles/shared.css";
+// import { BrandedButton } from "../../../styles/shared.css";
+
+import {
+  buttonStyle
+} from "../../_recipes/button.css";
 
 export default function StopButton() {
 
@@ -13,5 +17,11 @@ export default function StopButton() {
     }
   };
 
-  return <button className={BrandedButton} onClick={() => void stopMake()}>Stop</button>;
+  return <button className={buttonStyle(
+    {
+      type: "cancel",
+      size: "large",
+    }
+
+  )} onClick={() => void stopMake()}>Stop</button>;
 }

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts

@@ -48,12 +48,3 @@ globalStyle(`${imageContain} img`, {
   width: "100%",
   objectFit: "contain",
 });
-
-export const RemoveButton = style({
-  marginLeft: vars.spacing.small,
-  backgroundColor: vars.colors.brand,
-  border: "0 none",
-  padding: vars.spacing.small,
-  cursor: "pointer",
-  borderRadius: vars.trim.smallBorderRadius,
-});

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

@@ -10,6 +10,10 @@ import {
   RemoveButton,
 } from "./completedImages.css";
 
+import {
+  buttonStyle
+} from "../../../_recipes/button.css";
+
 
 
 export default function CompletedImages(
@@ -31,7 +35,7 @@ export default function CompletedImages(
       {/* Adjust the dom do we dont do this check twice */}
       {images != null && images.length > 0 && (
         <button
-          className={RemoveButton}
+          className={buttonStyle()}
           onClick={() => {
             removeImagesAll();
           }}

ui/frontend/build_src/src/components/organisms/queueDisplay/index.tsx

@@ -6,8 +6,6 @@ import { QueuedRequest, useRequestQueue } from "../../../stores/requestQueueStor
 import {
   QueueDisplayMain,
   QueueListButtons,
-  CompleteButtton,
-  ErrorButton
 } from "./queueDisplay.css";
 
 import {
@@ -37,12 +35,11 @@ export default function QueueDisplay() {
       <div className={QueueListButtons}>
         <button
           className={buttonStyle({
-            type: "secondary",
+
           })}
           onClick={clearCompleted}>Clear Completed</button>
         <button
           className={buttonStyle({
-            type: "secondary",
           })}
           onClick={clearErrored}>Clear Errored</button>
       </div>
@@ -51,4 +48,4 @@ export default function QueueDisplay() {
       })}
     </div>
   );
-}
+};

ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts

@@ -26,14 +26,4 @@ globalStyle(`${QueueListButtons} button`, {
 
 globalStyle(`${QueueListButtons} button:first-child`, {
   marginRight: vars.spacing.medium,
-});
+});
-
-
-// TODO these should be a button recipe?
-export const CompleteButtton = style([BrandedButton, {
-
-}]);
-
-export const ErrorButton = style([BrandedButton, {
-
-}]);

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/index.tsx

@@ -14,15 +14,20 @@ import {
   QueueItemMain,
   QueueItemInfo,
   QueueButtons,
-  CompleteButtton,
+  // CompleteButtton,
-  PauseButton,
+  // PauseButton,
-  ResumeButton,
+  // ResumeButton,
-  CancelButton,
+  // CancelButton,
-  RetryButton,
+  // RetryButton,
-  SendToTopButton,
+  // SendToTopButton,
 } from "./queueItem.css";
 
 
+import {
+  buttonStyle
+} from "../../../_recipes/button.css";
+
+
 interface QueueItemProps {
   request: QueuedRequest;
 }
@@ -84,23 +89,41 @@ export default function QueueItem({ request }: QueueItemProps) {
         )}
 
         {status === QueueStatus.complete && (
-          <button className={CompleteButtton} onClick={removeFromQueue}>Clear</button>
+          <button
+            className={buttonStyle({
+              size: "large",
+            })}
+            onClick={removeFromQueue}>
+            Clear
+          </button>
         )}
 
         {status === QueueStatus.pending && (
           <>
-            <button className={CancelButton} onClick={removeFromQueue}>Remove</button>
+            <button className={buttonStyle({
-            <button className={PauseButton} onClick={pauseItem}>Pause</button>
+              type: "cancel",
-            <button className={SendToTopButton} onClick={sendToTop}>Send to top</button>
+            })} onClick={removeFromQueue}>Remove</button>
+            <button className={buttonStyle({
+              type: "secondary",
+            })} onClick={pauseItem}>Pause</button>
+            <button className={buttonStyle({
+              type: "secondary",
+            })} onClick={sendToTop}>Send to top</button>
           </>
         )}
 
         {status === QueueStatus.paused && (
-          <button className={ResumeButton} onClick={retryRequest}>Resume</button>
+          <button
+            className={buttonStyle({
+              size: "large",
+            })} onClick={retryRequest}>Resume</button>
         )}
 
         {status === QueueStatus.error && (
-          <button className={RetryButton} onClick={retryRequest}>Retry</button>
+          <button
+            className={buttonStyle({
+              size: "large",
+            })} onClick={retryRequest}>Retry</button>
         )}
       </div>
 

ui/frontend/build_src/src/components/organisms/queueDisplay/queueItem/queueItem.css.ts

@@ -55,26 +55,26 @@ export const QueueButtons = style({
 
 
 // TODO these should be a button recipe?
-export const CompleteButtton = style([BrandedButton, {
+// export const CompleteButtton = style([BrandedButton, {
 
-}]);
+// }]);
 
-export const PauseButton = style([BrandedButton, {
+// export const PauseButton = style([BrandedButton, {
 
-}]);
+// }]);
 
-export const ResumeButton = style([BrandedButton, {
+// export const ResumeButton = style([BrandedButton, {
 
-}]);
+// }]);
 
-export const CancelButton = style([BrandedButton, {
+// export const CancelButton = style([BrandedButton, {
 
-}]);
+// }]);
 
-export const RetryButton = style([BrandedButton, {
+// export const RetryButton = style([BrandedButton, {
 
-}]);
+// }]);
 
-export const SendToTopButton = style([BrandedButton, {
+// export const SendToTopButton = style([BrandedButton, {
 
-}]);
+// }]);