refactor: cleanup picker implementations

apps/client/src/common/components/input/colour-input/Swatch.tsx

@@ -16,11 +16,11 @@ export default function Swatch(props: SwatchProps) {
   const handleClick = () => {
     onClick?.(color);
   };
-  const classes = cx([style.swatch, isSelected ? style.selected : null, onClick ? style.selectable : null]);
+  const classes = cx([style.swatch, isSelected && style.selected, onClick && style.selectable]);
 
   if (!color) {
     return (
-      <div className={`${classes} ${style.center}`} onClick={handleClick}>
+      <div className={classes} onClick={handleClick}>
         <IoBan />
       </div>
     );

apps/client/src/common/components/input/colour-input/SwatchPicker.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
+import { useController, UseControllerProps } from 'react-hook-form';
 import { IoEyedrop } from '@react-icons/all-files/io5/IoEyedrop';
-import Color from 'color';
+import { ViewSettings } from 'ontime-types';
 
 import PopoverPicker from '../../../../common/components/input/popover-picker/PopoverPicker';
 import { debounce } from '../../../../common/utils/debounce';
-import { cx } from '../../../utils/styleUtils';
+import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 
 import style from './SwatchSelect.module.scss';
 
@@ -15,26 +16,9 @@ interface SwatchPickerProps {
   alwaysDisplayColor?: boolean;
 }
 
-const getIconColor = (color: string, isSelected: boolean) => {
-  if (isSelected) {
-    try {
-      const isLight = Color(color).isLight();
-      return isLight ? '#000000' : '#ffffff';
-    } catch (_error) {
-      /* we are not handling the error here */
-    }
-  }
-
-  return '#ffffff';
-};
-
 export default function SwatchPicker(props: SwatchPickerProps) {
   const { color, onChange, isSelected, alwaysDisplayColor } = props;
 
-  const classes = cx([style.swatch, isSelected ? style.selected : null, style.selectable]);
-
-  const iconColor = getIconColor(color, (alwaysDisplayColor || isSelected) ?? false);
-
   const debouncedOnChange = useCallback(
     debounce((newValue: string) => {
       onChange(newValue);
@@ -43,15 +27,34 @@ export default function SwatchPicker(props: SwatchPickerProps) {
   );
 
   const displayColor = alwaysDisplayColor || isSelected ? color : '';
+  const { color: iconColor } = getAccessibleColour(displayColor);
 
   return (
-    <div className={classes}>
-      <PopoverPicker
-        color={displayColor}
-        onChange={debouncedOnChange}
-        icon={<IoEyedrop color={iconColor} />}
-        hasInput
-      />
-    </div>
+    <PopoverPicker color={displayColor} onChange={debouncedOnChange}>
+      <div
+        className={cx([style.swatch, isSelected && style.selected, style.selectable])}
+        style={{ backgroundColor: displayColor }}
+      >
+        <IoEyedrop color={iconColor} />
+      </div>
+    </PopoverPicker>
+  );
+}
+
+export function SwatchPickerRHF(props: UseControllerProps<ViewSettings>) {
+  const { name, control } = props;
+  const {
+    field: { onChange, value },
+  } = useController({ control, name });
+
+  const displayColor = typeof value === 'string' ? value : '';
+  const { color: iconColor } = getAccessibleColour(displayColor);
+
+  return (
+    <PopoverPicker color={value as string} onChange={onChange}>
+      <div className={cx([style.swatch, style.selectable])} style={{ backgroundColor: displayColor }}>
+        <IoEyedrop color={iconColor} />
+      </div>
+    </PopoverPicker>
   );
 }

apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss

@@ -1,15 +1,18 @@
 .list {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem
+  gap: 0.5rem;
 }
 
 .swatch {
   width: 2rem;
   height: 2rem;
-  aspect-ratio: 1;
   border-radius: 99px;
   border: 2px solid $gray-1200;
+  color: $ui-white;
+
+  display: grid;
+  place-content: center;
 
   &.selected {
     border: 2px solid $blue-500;
@@ -17,11 +20,9 @@
 
   &.selectable {
     cursor: pointer;
+
+    &:hover {
+      border: 2px solid $blue-300;
+    }
   }
 }
-
-.center {
-  display: grid;
-  place-content: center;
-  color: $ui-white;
-}