refactor: restructure settings

refactor: migrate react components

apps/client/src/features/rundown/Rundown.tsx

@@ -435,9 +435,9 @@ export default function Rundown({ data }: RundownProps) {
                * Outside a block, the value will be undefined
                * If the colour is empty string ''
                * ie: we are inside a block, but there is no defined colour
-               * we default to $gray-1050 #303030
+               * we default to $gray-500 #9d9d9d
                */
-              const blockColour = rundownMetadata.groupColour === '' ? '#303030' : rundownMetadata.groupColour;
+              const blockColour = rundownMetadata.groupColour === '' ? '#9d9d9d' : rundownMetadata.groupColour;
 
               return (
                 <Fragment key={entry.id}>

apps/client/src/features/rundown/common/EditableBlockTitle.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from 'react';
-import { Input } from '@chakra-ui/react';
 
+import Input from '../../../common/components/input/input/Input';
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx } from '../../../common/utils/styleUtils';
@@ -39,7 +39,8 @@ export default function EditableBlockTitle(props: TitleEditorProps) {
   return (
     <Input
       data-testid='block__title'
-      variant='ontime-ghosted'
+      variant='ghosted'
+      fluid
       ref={ref}
       value={value}
       className={classes}
@@ -47,12 +48,6 @@ export default function EditableBlockTitle(props: TitleEditorProps) {
       onChange={onChange}
       onBlur={onBlur}
       onKeyDown={onKeyDown}
-      autoComplete='off'
-      fontWeight='600'
-      letterSpacing='0.25px'
-      paddingLeft='0'
-      size='sm'
-      fontSize='1rem'
     />
   );
 }

apps/client/src/features/rundown/placements/FinderPlacement.tsx

@@ -1,21 +1,20 @@
 import { memo } from 'react';
-import { useDisclosure } from '@chakra-ui/react';
-import { useHotkeys } from '@mantine/hooks';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 
 import Finder from '../../../views/editor/finder/Finder';
 
 export default memo(FinderPlacement);
 
 function FinderPlacement() {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+  const [isOpen, handler] = useDisclosure();
 
   useHotkeys([
-    ['mod + f', onToggle],
-    ['Escape', onClose],
+    ['mod + f', handler.toggle],
+    ['Escape', handler.close],
   ]);
 
   if (isOpen) {
-    return <Finder isOpen={isOpen} onClose={onClose} />;
+    return <Finder isOpen={isOpen} onClose={handler.close} />;
   }
 
   return null;

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -59,9 +59,9 @@ function QuickAddBlock({ previousEventId, parentBlock, backgroundColor }: QuickA
   /**
    * If the colour is empty string ''
    * ie: we are inside a block, but there is no defined colour
-   * we default to $gray-1050 #303030
+   * we default to $gray-500 #9d9d9d
    */
-  const blockColour = backgroundColor === '' ? '#303030' : backgroundColor;
+  const blockColour = backgroundColor === '' ? '#9d9d9d' : backgroundColor;
 
   return (
     <div className={style.quickAdd} style={blockColour ? { '--user-bg': blockColour } : {}}>

apps/client/src/features/rundown/rundown-block/RundownBlock.module.scss

@@ -51,6 +51,7 @@
     display: flex;
     gap: 3rem;
     margin-bottom: 0.25rem;
+    white-space: nowrap;
   }
 
   .metaEntry {

apps/client/src/features/rundown/rundown-block/RundownBlock.tsx

@@ -7,11 +7,11 @@ import {
   IoReorderTwo,
   IoTrash,
 } from 'react-icons/io5';
-import { IconButton } from '@chakra-ui/react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { EntryId, OntimeBlock } from 'ontime-types';
 
+import IconButton from '../../../common/components/buttons/IconButton';
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
@@ -120,13 +120,7 @@ export default function RundownBlock({ data, hasCursor, collapsed, onCollapse }:
       <div className={style.header}>
         <div className={style.titleRow}>
           <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-          <IconButton
-            aria-label='Collapse'
-            onClick={() => onCollapse(!collapsed, data.id)}
-            color='#e2e2e2' // $gray-200
-            variant='ontime-ghosted'
-            size='sm'
-          >
+          <IconButton aria-label='Collapse' variant='subtle-white' onClick={() => onCollapse(!collapsed, data.id)}>
             {collapsed ? <IoChevronUp /> : <IoChevronDown />}
           </IconButton>
         </div>

apps/client/src/features/rundown/rundown-delay/RundownDelay.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { IoCheckmarkDone, IoClose, IoReorderTwo } from 'react-icons/io5';
-import { Button } from '@chakra-ui/react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { OntimeDelay } from 'ontime-types';
 
+import Button from '../../../common/components/buttons/Button';
 import DelayInput from '../../../common/components/input/delay-input/DelayInput';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx } from '../../../common/utils/styleUtils';
@@ -64,10 +64,11 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
       </span>
       <DelayInput eventId={data.id} duration={data.duration} />
       <div className={style.actionButtons}>
-        <Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmarkDone />} variant='ontime-ghosted-white'>
-          Make permanent
+        <Button onClick={applyDelayHandler} variant='ghosted-white'>
+          <IoCheckmarkDone /> Make permanent
         </Button>
-        <Button onClick={cancelDelayHandler} size='sm' leftIcon={<IoClose />} variant='ontime-ghosted-white'>
+        <Button onClick={cancelDelayHandler} variant='ghosted-white'>
+          <IoClose />
           Cancel
         </Button>
       </div>