Refine custom checkboxes

src/admin/AdminBatchUploadActions.tsx

@@ -147,7 +147,7 @@ export default function AdminBatchUploadActions({
               <div className="flex gap-8">
                 <FieldSetWithStatus
                   label="Favorite"
-                  icon={<IconFavs size={14} />}
+                  icon={<IconFavs size={14} highlight={favorite === 'true'} />}
                   type="checkbox"
                   value={favorite}
                   onChange={setFavorite}

src/components/Checkbox.tsx

@@ -34,7 +34,7 @@ export default function Checkbox({
         : props.checked
           ? <span className={clsx(
             boxStyles,
-            'border-transparent',
+            'border-transparent dark:border-gray-700',
             props.readOnly
               ? 'bg-gray-300 dark:bg-gray-700'
               : 'bg-black',
@@ -49,8 +49,8 @@ export default function Checkbox({
           </span>
           : <span className={clsx(
             boxStyles,
-            'border-gray-300 dark:border-gray-700',
             'bg-gray-100 dark:bg-gray-700/25',
+            'border-gray-300 dark:border-gray-700',
           )} />}
       <input
         ref={ref}

src/photo/form/PhotoForm.tsx

@@ -47,15 +47,6 @@ import IconHidden from '@/components/icons/IconHidden';
 
 const THUMBNAIL_SIZE = 300;
 
-const iconForKey = (key: keyof PhotoFormData) => {
-  switch (key) {
-  case 'favorite':
-    return <IconFavs size={14} />;
-  case 'hidden':
-    return <IconHidden size={16} />;
-  }
-};
-
 export default function PhotoForm({
   type = 'create',
   initialPhotoForm,
@@ -427,10 +418,24 @@ export default function PhotoForm({
                     onMatchResults={onMatchResults}
                     {...fieldProps}
                   />;
+                case 'favorite':
+                  return <FieldSetWithStatus
+                    key={key}
+                    icon={<IconFavs
+                      size={14}
+                      highlight={formData[key] === 'true'}
+                    />}
+                    {...fieldProps}
+                  />;
+                case 'hidden':
+                  return <FieldSetWithStatus
+                    key={key}
+                    icon={<IconHidden size={16} />}
+                    {...fieldProps}
+                  />;
                 default:
                   return <FieldSetWithStatus
                     key={key}
-                    icon={iconForKey(key)}
                     {...fieldProps}
                   />;
                 }