cleaned and built

ui/frontend/build_src/src/components/molecules/clearQueue/clearQueue.css.ts

@@ -1,9 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { vars } from "../../../styles/theme/index.css";
-
-import { BrandedButton } from "../../../styles/shared.css";
-
-export const ClearQueueButton = style([BrandedButton, {
-  fontSize: vars.fonts.sizes.Headline,
-}]);

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

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

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

@@ -4,10 +4,14 @@ import {
   ImageInputDisplay,
   InputLabel,
   ImageInput,
-  ImageInputButton,
   ImageFixer,
   XButton,
 } from "./seedImage.css";
+
+import {
+  buttonStyle
+} from "../../../../_recipes/button.css";
+
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useTranslation } from "react-i18next";
@@ -69,7 +73,7 @@ export default function SeedImage(_props: any) {
           type="file"
           onChange={_handleFileSelect}
         />
-        <button className={ImageInputButton} onClick={_startFileSelect}>
+        <button className={buttonStyle()} onClick={_startFileSelect}>
           {t("home.initial-img-btn")}
         </button>
       </div>

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

@@ -2,8 +2,6 @@ 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",
 });
@@ -17,7 +15,6 @@ export const ImageInput = style({
   display: "none",
 });
 
-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

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

@@ -7,7 +7,6 @@ import {
   completedImagesMain,
   completedImagesList,
   imageContain,
-  RemoveButton,
 } from "./completedImages.css";
 
 import {

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

@@ -12,9 +12,10 @@ import {
   imageDisplayContent,
 } from './imageDisplay.css';
 
+
 import {
-  BrandedButton
-} from '../../../../../styles/shared.css'
+  buttonStyle
+} from "../../../../_recipes/button.css";
 
 export default function ImageDisplay({ info, data }: CompletedImagesType) {
 
@@ -74,8 +75,14 @@ export default function ImageDisplay({ info, data }: CompletedImagesType) {
             <div>
               <p> {info?.prompt}</p>
               <div>
-                <button className={BrandedButton} onClick={_handleSave}>Save</button>
-                <button className={BrandedButton} onClick={_handleUseAsInput}>Use as Input</button>
+                <button className={buttonStyle(
+
+                )} onClick={_handleSave}>Save</button>
+                <button className={buttonStyle(
+                  {
+                    type: "secondary"
+                  }
+                )} onClick={_handleUseAsInput}>Use as Input</button>
               </div>
             </div>
             <GeneratedImage imageData={data} metadata={info}></GeneratedImage>

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

@@ -1,6 +1,5 @@
 import { style, globalStyle } from "@vanilla-extract/css";
 
-import { BrandedButton } from "../../../styles/shared.css";
 
 import { vars } from "../../../styles/theme/index.css";
 

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

@@ -3,7 +3,6 @@ import { style, globalStyle } from "@vanilla-extract/css";
 
 import { vars } from "../../../../styles/theme/index.css";
 
-import { BrandedButton } from "../../../../styles/shared.css";
 
 import { QueueStatus } from "../../../../stores/requestQueueStore";
 
@@ -51,30 +50,4 @@ export const QueueButtons = style({
   flexDirection: "row",
   justifyContent: "space-between",
   alignItems: "center",
-});
-
-
-// TODO these should be a button recipe?
-// export const CompleteButtton = style([BrandedButton, {
-
-// }]);
-
-// export const PauseButton = style([BrandedButton, {
-
-// }]);
-
-// export const ResumeButton = style([BrandedButton, {
-
-// }]);
-
-// export const CancelButton = style([BrandedButton, {
-
-// }]);
-
-// export const RetryButton = style([BrandedButton, {
-
-// }]);
-
-// export const SendToTopButton = style([BrandedButton, {
-
-// }]);
+});

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

@@ -56,26 +56,3 @@ 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,
-  border: "0",
-  borderRadius: vars.trim.smallBorderRadius,
-
-  ":hover": {
-    backgroundColor: vars.colors.brandHover,
-  },
-
-  ":active": {
-    backgroundColor: vars.colors.brandActive,
-  },
-
-  ":disabled": {
-    backgroundColor: vars.colors.brandDimmed,
-    color: vars.colors.text.dimmed,
-  },
-});