From f6e68fae2be30cd8afd516b53805a6d050993409 Mon Sep 17 00:00:00 2001
From: xoaaC <35452459+xoaaC@users.noreply.github.com>
Date: Sat, 10 Dec 2022 19:25:48 +0100
Subject: [PATCH] enhancement(web): red disabled switch button (#552)

* added red background to "Enabled" switch button when disabled for IRC update form

created const SwitchGroupWideRed in web/src/components/inputs/input_wide.tsx
added const SwitchGroupWideRed in web/src/components/inputs/index.ts
changed SwitchGroupWide to SwitchGroupWideRed in IrcNetworkUpdateForm in web/src/forms/settings/IrcForms.tsx

* added red background to SwitchGroupWideRed for default/white mode too

* made white and dark mode red one shade lighter (red-600 -> red-500)
---
 web/src/components/inputs/index.ts       |  2 +-
 web/src/components/inputs/input_wide.tsx | 62 ++++++++++++++++++++++++
 web/src/forms/settings/IrcForms.tsx      |  4 +-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/web/src/components/inputs/index.ts b/web/src/components/inputs/index.ts
index c496939..2feb2e0 100644
--- a/web/src/components/inputs/index.ts
+++ b/web/src/components/inputs/index.ts
@@ -1,6 +1,6 @@
 export { ErrorField, CheckboxField } from "./common";
 export { TextField, NumberField, PasswordField } from "./input";
-export { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "./input_wide";
+export { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, SwitchGroupWideRed, TextFieldWide } from "./input_wide";
 export { RadioFieldsetWide } from "./radio";
 export { MultiSelect, Select, SelectWide, DownloadClientSelect, IndexerMultiSelect } from "./select";
 export { SwitchGroup } from "./switch";
diff --git a/web/src/components/inputs/input_wide.tsx b/web/src/components/inputs/input_wide.tsx
index f1f94e5..2d3254b 100644
--- a/web/src/components/inputs/input_wide.tsx
+++ b/web/src/components/inputs/input_wide.tsx
@@ -241,3 +241,65 @@ export const SwitchGroupWide = ({
   </ul>
 );
 
+interface SwitchGroupWideRedProps {
+  name: string;
+  label: string;
+  description?: string;
+  defaultValue?: boolean;
+  className?: string;
+}
+
+export const SwitchGroupWideRed = ({
+  name,
+  label,
+  description,
+  defaultValue
+}: SwitchGroupWideRedProps) => (
+  <ul className="mt-2 px-4 divide-y divide-gray-200 dark:divide-gray-700">
+    <Switch.Group as="li" className="py-4 flex items-center justify-between">
+      <div className="flex flex-col">
+        <Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
+          passive>
+          {label}
+        </Switch.Label>
+        {description && (
+          <Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
+            {description}
+          </Switch.Description>
+        )}
+      </div>
+
+      <Field
+        name={name}
+        defaultValue={defaultValue as boolean}
+        type="checkbox"
+      >
+        {({ field, form }: FieldProps) => (
+          <Switch
+            {...field}
+            type="button"
+            value={field.value}
+            checked={field.checked ?? false}
+            onChange={(value: unknown) => {
+              form.setFieldValue(field?.name ?? "", value);
+            }}
+            className={classNames(
+              field.value ? "bg-blue-500 dark:bg-blue-500" : "bg-red-500 dark:bg-red-500",
+              "ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            )}
+          >
+            <span className="sr-only">Use setting</span>
+            <span
+              aria-hidden="true"
+              className={classNames(
+                field.value ? "translate-x-5" : "translate-x-0",
+                "inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+              )}
+            />
+          </Switch>
+        )}
+      </Field>
+    </Switch.Group>
+  </ul>
+);
+
diff --git a/web/src/forms/settings/IrcForms.tsx b/web/src/forms/settings/IrcForms.tsx
index 7044b05..51a5340 100644
--- a/web/src/forms/settings/IrcForms.tsx
+++ b/web/src/forms/settings/IrcForms.tsx
@@ -7,7 +7,7 @@ import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
 import { queryClient } from "../../App";
 import { APIClient } from "../../api/APIClient";
 
-import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
+import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, SwitchGroupWideRed, TextFieldWide } from "../../components/inputs";
 import { SlideOver } from "../../components/panels";
 import Toast from "../../components/notifications/Toast";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
@@ -323,7 +323,7 @@ export function IrcNetworkUpdateForm({
             required={true}
           />
 
-          <SwitchGroupWide name="enabled" label="Enabled" />
+          <SwitchGroupWideRed name="enabled" label="Enabled" />
           <TextFieldWide
             name="server"
             label="Server"