refactor: smaller settings

apps/client/src/theme/_ontimeStyles.scss

@@ -57,6 +57,7 @@ $text-body-size: calc(1rem - 1px);
 
 // media queries
 $min-tablet: 500px;
+$small-screen: 800px;
 
 .blink {
   animation: blink 1s step-start infinite;

apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.module.scss

@@ -1,24 +1,20 @@
 .tableSettings {
   grid-area: settings;
-  padding: 1rem;
-  background-color: $ui-black;
+  padding: 0.5rem 1rem;
   display: flex;
+  gap: 5rem;
   font-size: $inner-section-text-size;
-}
 
-.leftPanel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 0.5rem;
+  @media (max-width: $small-screen) {
+    gap: 1rem;
+  }
 }
 
 .sectionTitle {
-  color: $gray-700;
   text-transform: uppercase;
 }
 
-.options {
+.row {
   display: flex;
   flex-wrap: wrap;
   column-gap: 1rem;
@@ -30,12 +26,4 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-}
-
-.rightPanel {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  padding-left: 2rem;
-}
+}

apps/client/src/views/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx

@@ -1,15 +1,15 @@
 import { memo, ReactNode } from 'react';
-import { Button, Checkbox, Switch } from '@chakra-ui/react';
+import { Button, Checkbox } from '@chakra-ui/react';
 import { Column } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
 
-import { useCuesheetSettings } from '../store/cuesheetSettingsStore';
+import * as Editor from '../../../features/editors/editor-utils/EditorUtils';
 
 import style from './CuesheetTableSettings.module.scss';
 
 // reusable button styles
 const buttonProps = {
-  size: 'sm',
+  size: 'xs',
   variant: 'ontime-subtle',
 };
 
@@ -22,26 +22,12 @@ interface CuesheetTableSettingsProps {
 
 function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
   const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
-  const {
-    followSelected,
-    showIndexColumn,
-    toggleFollow,
-    showPrevious,
-    togglePreviousVisibility,
-    showDelayBlock,
-    hideSeconds,
-    showDelayedTimes,
-    toggleIndexColumn,
-    toggleDelayedTimes,
-    toggleDelayVisibility,
-    toggleSecondsVisibility,
-  } = useCuesheetSettings();
 
   return (
     <div className={style.tableSettings}>
-      <div className={style.leftPanel}>
-        <div className={style.sectionTitle}>Toggle column visibility</div>
-        <div className={style.options}>
+      <div>
+        <Editor.Label className={style.sectionTitle}>Toggle column visibility</Editor.Label>
+        <div className={style.row}>
           {columns.map((column) => {
             const columnHeader = column.columnDef.header;
             const visible = column.getIsVisible();
@@ -57,47 +43,20 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
             );
           })}
         </div>
-        <div className={style.sectionTitle}>Table Options</div>
-        <div className={style.options}>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={followSelected} onChange={() => toggleFollow()} />
-            Follow selected event
-          </label>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={showPrevious} onChange={() => togglePreviousVisibility()} />
-            Show past events
-          </label>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={showIndexColumn} onChange={() => toggleIndexColumn()} />
-            Show Event Order
-          </label>
-        </div>
-        <div className={style.sectionTitle}>Delay Flow</div>
-        <div className={style.options}>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={showDelayedTimes} onChange={() => toggleDelayedTimes()} />
-            Show delayed times
-          </label>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={showDelayBlock} onChange={() => toggleDelayVisibility()} />
-            Show delay blocks
-          </label>
-          <label className={style.option}>
-            <Switch variant='ontime' size='sm' isChecked={hideSeconds} onChange={() => toggleSecondsVisibility()} />
-            Hide seconds
-          </label>
-        </div>
       </div>
-      <div className={style.rightPanel}>
-        <Button onClick={handleClearToggles} {...buttonProps}>
-          Show All
-        </Button>
-        <Button onClick={handleResetResizing} {...buttonProps}>
-          Reset Resizing
-        </Button>
-        <Button onClick={handleResetReordering} {...buttonProps}>
-          Reset Reordering
-        </Button>
+      <div className={style.column}>
+        <Editor.Label className={style.sectionTitle}>Reset Options</Editor.Label>
+        <div className={style.row}>
+          <Button onClick={handleClearToggles} {...buttonProps}>
+            Show All
+          </Button>
+          <Button onClick={handleResetResizing} {...buttonProps}>
+            Reset Resizing
+          </Button>
+          <Button onClick={handleResetReordering} {...buttonProps}>
+            Reset Reordering
+          </Button>
+        </div>
       </div>
     </div>
   );