idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(web): red disabled switch button (#552)

Browse source 
* 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)
This commit is contained in:
xoaaC 2022-12-10 19:25:48 +01:00 • committed by GitHub
parent 29da2416ec
commit f6e68fae2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/inputs/index.ts
View file

@ -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";

62
web/src/components/inputs/input_wide.tsx
View file

@ -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>
);

4
web/src/forms/settings/IrcForms.tsx
View file

@ -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"