From 64663f5eeca8d2f37680c38b08a5db1adc405308 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sat, 21 Jan 2023 14:44:05 -0600
Subject: [PATCH] fix(gui): emphasize the generate buttons, align fill color
 picker

---
 gui/src/components/tab/Img2Img.tsx  |  2 +-
 gui/src/components/tab/Inpaint.tsx  | 26 ++++++++++++++++++--------
 gui/src/components/tab/Settings.tsx |  2 +-
 gui/src/components/tab/Txt2Img.tsx  |  2 +-
 gui/src/components/tab/Upscale.tsx  |  2 +-
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/gui/src/components/tab/Img2Img.tsx b/gui/src/components/tab/Img2Img.tsx
index 43a7d325..8a2840d8 100644
--- a/gui/src/components/tab/Img2Img.tsx
+++ b/gui/src/components/tab/Img2Img.tsx
@@ -65,7 +65,7 @@ export function Img2Img() {
       <UpscaleControl />
       <Button
         disabled={doesExist(source) === false}
-        variant='outlined'
+        variant='contained'
         onClick={() => upload.mutate()}
       >Generate</Button>
     </Stack>
diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx
index fb0893c6..d763b6d7 100644
--- a/gui/src/components/tab/Inpaint.tsx
+++ b/gui/src/components/tab/Inpaint.tsx
@@ -1,5 +1,5 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
-import { Box, Button, Stack } from '@mui/material';
+import { Box, Button, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useStore } from 'zustand';
@@ -151,19 +151,29 @@ export function Inpaint() {
           }}
         />
         <Stack direction='row' spacing={2}>
-          <input name='fill-color' type='color' defaultValue={fillColor} onBlur={(event) => {
-            setInpaint({
-              fillColor: event.target.value,
-            });
-          }} />
-          <label htmlFor='fill-color'>Fill Color</label>
+          <FormControlLabel
+            label='Fill Color'
+            sx={{ mx: 1 }}
+            control={
+              <input
+                defaultValue={fillColor}
+                name='fill-color'
+                type='color'
+                onBlur={(event) => {
+                  setInpaint({
+                    fillColor: event.target.value,
+                  });
+                }}
+              />
+            }
+          />
         </Stack>
       </Stack>
       <OutpaintControl />
       <UpscaleControl />
       <Button
         disabled={doesExist(source) === false || doesExist(mask) === false}
-        variant='outlined'
+        variant='contained'
         onClick={() => upload.mutate()}
       >Generate</Button>
     </Stack>
diff --git a/gui/src/components/tab/Settings.tsx b/gui/src/components/tab/Settings.tsx
index 73616765..eea73f9d 100644
--- a/gui/src/components/tab/Settings.tsx
+++ b/gui/src/components/tab/Settings.tsx
@@ -38,7 +38,7 @@ export function Settings() {
       <TextField variant='outlined' label='API Server' value={root} onChange={(event) => {
         setRoot(event.target.value);
       }} />
-      <Button startIcon={<Refresh />} onClick={() => {
+      <Button variant='contained' startIcon={<Refresh />} onClick={() => {
         const query = new URLSearchParams(window.location.search);
         query.set('api', root);
         window.location.search = query.toString();
diff --git a/gui/src/components/tab/Txt2Img.tsx b/gui/src/components/tab/Txt2Img.tsx
index 8eb70058..61e8ba83 100644
--- a/gui/src/components/tab/Txt2Img.tsx
+++ b/gui/src/components/tab/Txt2Img.tsx
@@ -66,7 +66,7 @@ export function Txt2Img() {
       </Stack>
       <UpscaleControl />
       <Button
-        variant='outlined'
+        variant='contained'
         onClick={() => generate.mutate()}
       >Generate</Button>
     </Stack>
diff --git a/gui/src/components/tab/Upscale.tsx b/gui/src/components/tab/Upscale.tsx
index 8e9bef4e..a7d20442 100644
--- a/gui/src/components/tab/Upscale.tsx
+++ b/gui/src/components/tab/Upscale.tsx
@@ -46,7 +46,7 @@ export function Upscale() {
       <UpscaleControl />
       <Button
         disabled={doesExist(params.source) === false}
-        variant='outlined'
+        variant='contained'
         onClick={() => upload.mutate()}
       >Generate</Button>
     </Stack>