mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
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)
This commit is contained in:
parent
29da2416ec
commit
f6e68fae2b
3 changed files with 65 additions and 3 deletions
|
@ -1,6 +1,6 @@
|
||||||
export { ErrorField, CheckboxField } from "./common";
|
export { ErrorField, CheckboxField } from "./common";
|
||||||
export { TextField, NumberField, PasswordField } from "./input";
|
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 { RadioFieldsetWide } from "./radio";
|
||||||
export { MultiSelect, Select, SelectWide, DownloadClientSelect, IndexerMultiSelect } from "./select";
|
export { MultiSelect, Select, SelectWide, DownloadClientSelect, IndexerMultiSelect } from "./select";
|
||||||
export { SwitchGroup } from "./switch";
|
export { SwitchGroup } from "./switch";
|
||||||
|
|
|
@ -241,3 +241,65 @@ export const SwitchGroupWide = ({
|
||||||
</ul>
|
</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>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
|
||||||
import { queryClient } from "../../App";
|
import { queryClient } from "../../App";
|
||||||
import { APIClient } from "../../api/APIClient";
|
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 { SlideOver } from "../../components/panels";
|
||||||
import Toast from "../../components/notifications/Toast";
|
import Toast from "../../components/notifications/Toast";
|
||||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||||
|
@ -323,7 +323,7 @@ export function IrcNetworkUpdateForm({
|
||||||
required={true}
|
required={true}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<SwitchGroupWide name="enabled" label="Enabled" />
|
<SwitchGroupWideRed name="enabled" label="Enabled" />
|
||||||
<TextFieldWide
|
<TextFieldWide
|
||||||
name="server"
|
name="server"
|
||||||
label="Server"
|
label="Server"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue