feat(backups): updated modal, new FormikSwitchV2

resources/scripts/components/elements/FormikSwitchV2.tsx

@@ -0,0 +1,27 @@
+import { Field, FieldProps } from 'formik';
+
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import SwitchV2Wrapper, { SwitchProps } from '@/components/elements/SwitchV2Wrapper';
+
+const FormikSwitch = ({ name, label, ...props }: SwitchProps) => {
+    return (
+        <FormikFieldWrapper name={name}>
+            <Field name={name}>
+                {({ field, form }: FieldProps) => (
+                    <SwitchV2Wrapper
+                        name={name}
+                        label={label}
+                        onChange={() => {
+                            form.setFieldTouched(name);
+                            form.setFieldValue(field.name, !field.value);
+                        }}
+                        defaultChecked={field.value}
+                        {...props}
+                    />
+                )}
+            </Field>
+        </FormikFieldWrapper>
+    );
+};
+
+export default FormikSwitch;

resources/scripts/components/elements/SwitchV2.tsx

@@ -27,4 +27,4 @@ const Switch = React.forwardRef<
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch };
+export { Switch };

resources/scripts/components/elements/SwitchV2Wrapper.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { v4 } from 'uuid';
+import { Switch } from '@/components/elements/SwitchV2';
+
+export interface SwitchProps {
+    name: string;
+    label: string;
+    description: string;
+    defaultChecked?: boolean;
+    readOnly?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    children?: React.ReactNode;
+}
+
+const SwitchV2Wrapper = ({ name, label, description, defaultChecked, readOnly, onChange, children }: SwitchProps) => {
+    const uuid = useMemo(() => v4(), []);
+
+    return (
+        <div className='flex items-center justify-between gap-2 bg-[#3333332a] border-[1px] border-[#ffffff0e] p-4 rounded-lg'>
+            <div className='flex flex-col'>
+                <label htmlFor={uuid} className='text-neutral-300 text-md font-bold'>
+                    {label}
+                </label>
+                <label
+                    htmlFor={uuid}
+                    className='text-neutral-500 text-sm font-semibold'
+                >
+                    {description}
+                </label>
+            </div>
+            {children || (
+                <Switch
+                    name={name}
+                    onCheckedChange={(checked) => {
+                        if (onChange) {
+                            onChange({
+                                target: { checked } as HTMLInputElement
+                            } as React.ChangeEvent<HTMLInputElement>);
+                        }
+                    }}
+                    defaultChecked={defaultChecked}
+                    disabled={readOnly}
+                />
+            )}
+        </div>
+    );
+};
+SwitchV2Wrapper.displayName = 'SwitchV2Wrapper';
+
+export default SwitchV2Wrapper;

resources/scripts/components/server/backups/CreateBackupButton.tsx

@@ -3,11 +3,11 @@ import { useEffect, useState } from 'react';
 import { boolean, object, string } from 'yup';
 
 import FlashMessageRender from '@/components/FlashMessageRender';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import Can from '@/components/elements/Can';
 import Field from '@/components/elements/Field';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
-import FormikSwitch from '@/components/elements/FormikSwitch';
+import FormikSwitchV2 from '@/components/elements/FormikSwitchV2';
 import { Textarea } from '@/components/elements/Input';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 
@@ -59,16 +59,16 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
                     </FormikFieldWrapper>
                 </div>
                 <Can action={'backup.delete'}>
-                    <div className={`mt-6`}>
-                        <FormikSwitch
+                    <div className={`my-6`}>
+                        <FormikSwitchV2
                             name={'isLocked'}
                             label={'Locked'}
                             description={'Prevents this backup from being deleted until explicitly unlocked.'}
                         />
                     </div>
                 </Can>
-                <div className={`flex justify-end mt-6`}>
-                    <Button type={'submit'} disabled={isSubmitting}>
+                <div className={`flex justify-end mb-6`}>
+                    <Button role={'switch'} type={'submit'} disabled={isSubmitting}>
                         Start backup
                     </Button>
                 </div>