From f208826b3ac85f87777e4518d2a18abd20d83429 Mon Sep 17 00:00:00 2001
From: djohnson <mr.demarcus.johnson@gmail.com>
Date: Mon, 8 Apr 2024 09:25:02 +0900
Subject: [PATCH] A1111 toggle button should be clearer to users

---
 .../panels/general/A1111GeneralPanel.tsx      | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/features/settings/panels/general/A1111GeneralPanel.tsx b/src/features/settings/panels/general/A1111GeneralPanel.tsx
index a27c3b2..6ad5e95 100644
--- a/src/features/settings/panels/general/A1111GeneralPanel.tsx
+++ b/src/features/settings/panels/general/A1111GeneralPanel.tsx
@@ -14,15 +14,24 @@ const A1111EnabledCheckbox = observer(() => {
 
   return (
     <label className="label w-fit cursor-pointer gap-2">
-      <input
-        type="checkbox"
-        className="checkbox checkbox-xs rounded-sm"
-        checked={settingStore.a1111Enabled}
-        onChange={e => settingStore.setA1111Enabled(e.target.checked)}
-      />
-      <span className="label-text">
-        Image Generation {settingStore.a1111Enabled ? 'Enabled' : 'Disabled'}
-      </span>
+      <span className="label-text">Image Generation through AUTOMATIC1111:</span>
+
+      <div className="join">
+        {[true, false].map(isEnabled => (
+          <button
+            className={
+              'btn join-item btn-sm mr-0 ' +
+              (settingStore.a1111Enabled === isEnabled ? 'btn-active cursor-default ' : 'btn ')
+            }
+            onClick={() => settingStore.setA1111Enabled(isEnabled)}
+          >
+            <span>
+              {isEnabled ? 'Enable' : 'Disable'}
+              {settingStore.a1111Enabled === isEnabled ? 'd' : '?'}
+            </span>
+          </button>
+        ))}
+      </div>
     </label>
   )
 })