From 46026d9aa0b22eed0addc861ff7d9c3fdadcf098 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Thu, 19 Jan 2023 08:35:06 -0600
Subject: [PATCH] fix(gui): swap toggle buttons for decent checkboxes

---
 .../components/control/OutpaintControl.tsx    | 28 +++++----
 gui/src/components/control/UpscaleControl.tsx | 57 +++++++++----------
 2 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/gui/src/components/control/OutpaintControl.tsx b/gui/src/components/control/OutpaintControl.tsx
index 1447ed78..e6de6552 100644
--- a/gui/src/components/control/OutpaintControl.tsx
+++ b/gui/src/components/control/OutpaintControl.tsx
@@ -1,6 +1,5 @@
 import { mustExist } from '@apextoaster/js-utils';
-import { ZoomOutMap } from '@mui/icons-material';
-import { Stack, ToggleButton } from '@mui/material';
+import { Checkbox, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useStore } from 'zustand';
@@ -16,19 +15,18 @@ export function OutpaintControl() {
   const setOutpaint = useStore(state, (s) => s.setOutpaint);
 
   return <Stack direction='row' spacing={4}>
-    <ToggleButton
-      color='primary'
-      selected={outpaint.enabled}
-      value='check'
-      onChange={(event) => {
-        setOutpaint({
-          enabled: outpaint.enabled === false,
-        });
-      }}
-    >
-      <ZoomOutMap />
-      Outpaint
-    </ToggleButton>
+    <FormControlLabel
+      label='Outpaint'
+      control={<Checkbox
+        checked={outpaint.enabled}
+        value='check'
+        onChange={(event) => {
+          setOutpaint({
+            enabled: outpaint.enabled === false,
+          });
+        }}
+      />}
+    />
     <NumericField
       label='Left'
       disabled={outpaint.enabled === false}
diff --git a/gui/src/components/control/UpscaleControl.tsx b/gui/src/components/control/UpscaleControl.tsx
index 7687d34d..ad81c94f 100644
--- a/gui/src/components/control/UpscaleControl.tsx
+++ b/gui/src/components/control/UpscaleControl.tsx
@@ -1,6 +1,5 @@
 import { mustExist } from '@apextoaster/js-utils';
-import { FaceRetouchingNatural, ZoomIn } from '@mui/icons-material';
-import { Stack, ToggleButton } from '@mui/material';
+import { Checkbox, FormControlLabel, Stack } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useStore } from 'zustand';
@@ -16,19 +15,18 @@ export function UpscaleControl() {
   const setUpscale = useStore(state, (s) => s.setUpscale);
 
   return <Stack direction='row' spacing={4}>
-    <ToggleButton
-      color='primary'
-      selected={upscale.enabled}
-      value='check'
-      onChange={(event) => {
-        setUpscale({
-          enabled: upscale.enabled === false,
-        });
-      }}
-    >
-      <ZoomIn />
-      Upscale
-    </ToggleButton>
+    <FormControlLabel
+      label='Upscale'
+      control={<Checkbox
+        checked={upscale.enabled}
+        value='check'
+        onChange={(event) => {
+          setUpscale({
+            enabled: upscale.enabled === false,
+          });
+        }}
+      />}
+    />
     <NumericField
       label='Scale'
       disabled={upscale.enabled === false}
@@ -69,24 +67,23 @@ export function UpscaleControl() {
         });
       }}
     />
-    <ToggleButton
-      color='primary'
-      disabled={upscale.enabled === false}
-      selected={upscale.enabled && upscale.faces}
-      value='check'
-      onChange={(event) => {
-        setUpscale({
-          faces: upscale.faces === false,
-        });
-      }}
-    >
-      <FaceRetouchingNatural />
-      Face Correction
-    </ToggleButton>
+    <FormControlLabel
+      label='Face Correction'
+      control={<Checkbox
+        disabled={upscale.enabled === false}
+        checked={upscale.enabled && upscale.faces}
+        value='check'
+        onChange={(event) => {
+          setUpscale({
+            faces: upscale.faces === false,
+          });
+        }}
+      />}
+    />
     <NumericField
       label='Strength'
       decimal
-      disabled={upscale.enabled === false && upscale.faces === false}
+      disabled={upscale.enabled === false || upscale.faces === false}
       min={params.faceStrength.min}
       max={params.faceStrength.max}
       step={params.faceStrength.step}