Fixes, new debug output & more.

src/components/generic/form/Checkbox.tsx

@@ -12,38 +12,37 @@ interface CheckboxProps extends DefaultInputProps {
   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}
-        />
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Input(
+    { label, valid, validationMessage, id, error, ...props }: CheckboxProps,
+    ref,
+  ) {
+    return (
+      <div className="flex flex-col w-full">
+        <Label label={label} />
+        <div className="ml-auto">
+          <input
+            ref={ref}
+            type="checkbox"
+            id={id}
+            className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
+              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>
-      {!valid && (
-        <div className="text-sm text-gray-600">{validationMessage}</div>
-      )}
-    </div>
-  );
-};
+    );
+  },
+);

src/components/generic/form/InputWrapper.tsx

@@ -12,7 +12,7 @@ export const InputWrapper = ({
   children,
 }: LabelProps): JSX.Element => (
   <div
-    className={`flex w-full border-y border rounded-md ${
+    className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
       disabled
         ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
         : ''

src/components/generic/form/Label.tsx

@@ -6,9 +6,9 @@ export interface LabelProps {
 }
 
 export const Label = ({ label, error }: LabelProps): JSX.Element => (
-  <label className="flex py-1 text-xs font-semibold text-gray-500">
+  <label className="flex py-1 text-xs font-semibold text-gray-500 dark:text-gray-400">
     {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" />
+    <div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-700 bg-gray-300 rounded-full" />
   </label>
 );