refactor: review timer styles

apps/client/src/common/components/fit-text/FitText.tsx

@@ -13,8 +13,13 @@ interface FitTextProps extends HTMLAttributes<HTMLDivElement> {
   max?: number; // inclusive
 }
 
-export function FitText(props: PropsWithChildren<FitTextProps>) {
-  const { children, mode = 'multi', min = 16, max = 256, ...elementProps } = props;
+export function FitText({
+  children,
+  mode = 'multi',
+  min = 16,
+  max = 256,
+  ...elementProps
+}: PropsWithChildren<FitTextProps>) {
   const ref = useRef<HTMLDivElement>(null);
 
   const isOverflown = useCallback(() => {

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.module.scss

@@ -25,9 +25,8 @@
   }
 
   &:focus {
-    outline: none;
-    background-color: $gray-1300;
-    border: 2px solid $ui-white;
+    outline: 2px solid $blue-500;
+    background-color: $gray-1350;
   }
 
   &.current {

apps/client/src/common/components/popover/Popover.tsx

@@ -18,7 +18,9 @@ export default function PopoverContents({
       <Popover.Positioner sideOffset={8} {...popoverProps}>
         <Popover.Popup className={style.popup}>
           {title && <Popover.Title className={style.title}>{title}</Popover.Title>}
-          <Popover.Description className={className}>{children}</Popover.Description>
+          <Popover.Description className={className} render={<div />}>
+            {children}
+          </Popover.Description>
         </Popover.Popup>
       </Popover.Positioner>
     </Popover.Portal>

apps/client/src/common/components/view-params-editor/InlineColourPicker.module.scss

@@ -1,7 +1,7 @@
 .inline {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 // attempt to match with ontimeTextInputs

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -43,8 +43,7 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'boolean') {
-    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
-    return <Switch size='large' name={id} defaultChecked={defaultCheckedValue} />;
+    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) || defaultValue} />;
   }
 
   if (type === 'number') {
@@ -123,3 +122,12 @@ function MultiOption({ paramField }: EditFormMultiOptionProps) {
     </>
   );
 }
+
+interface ControlledSwitchProps {
+  id: string;
+  initialValue: boolean;
+}
+function ControlledSwitch({ id, initialValue }: ControlledSwitchProps) {
+  const [checked, setChecked] = useState(initialValue);
+  return <Switch size='large' name={id} checked={checked} onCheckedChange={setChecked} />;
+}