Remove old Select, change Switch for Checkbox

src/components/generic/form/Checkbox.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Label } from './Label.jsx';
+
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
+interface CheckboxProps extends DefaultInputProps {
+  action?: (enabled: boolean) => void;
+  label: string;
+  valid?: boolean;
+  validationMessage?: string;
+  error?: boolean;
+}
+
+export const Checkbox = ({
+  label,
+  valid,
+  validationMessage,
+  id,
+  error,
+  ...props
+}: CheckboxProps): JSX.Element => {
+  return (
+    <div className="flex flex-col w-full">
+      <Label label={label} />
+      <div className="ml-auto">
+        <input
+          type="checkbox"
+          id={id}
+          className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent ${
+            props.disabled
+              ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
+              : ''
+          } ${
+            error
+              ? 'border-red-500'
+              : props.disabled
+              ? 'border-gray-200'
+              : ' focus-within:border-primary hover:border-primary'
+          }`}
+          {...props}
+        />
+      </div>
+      {!valid && (
+        <div className="text-sm text-gray-600">{validationMessage}</div>
+      )}
+    </div>
+  );
+};

src/components/generic/form/Input.tsx

@@ -19,7 +19,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <InputWrapper error={error} disabled={props.disabled}>
           <input
             ref={ref}
-            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none focus:border-primary"
+            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none"
             {...props}
           />
           {action && <div className="flex mr-1">{action}</div>}

src/components/generic/form/Label.tsx

@@ -6,8 +6,9 @@ export interface LabelProps {
 }
 
 export const Label = ({ label, error }: LabelProps): JSX.Element => (
-  <label className="text-xs font-semibold text-gray-500">
+  <label className="flex py-1 text-xs font-semibold text-gray-500">
     {label}
     {error && <span className="ml-2 text-red-500">{error}</span>}
+    <div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-600 bg-gray-500" />
   </label>
 );

src/components/generic/form/Select.tsx

@@ -16,7 +16,7 @@ interface SelectProps extends DefaultSelectProps {
   small?: boolean;
 }
 
-export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   ({ options, optionsEnum, label, error, small, ...props }, ref) => {
     const optionsEnumValues = optionsEnum
       ? Object.entries(optionsEnum).filter(
@@ -29,7 +29,7 @@ export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full  bg-transparent focus:outline-none focus:border-primary ${
+            className={`w-full bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
               small ? 'py-1 mx-1' : 'h-10 mx-2'
             }`}
             disabled={