refactor: tweak table element styles

apps/client/src/theme/ontimeTextInputs.ts

@@ -43,7 +43,7 @@ export const ontimeInputTransparent = {
     ...commonStyles,
     backgroundColor: 'transparent',
     _hover: {
-      backgroundColor: 'rgba(255, 255, 255, 0.10)', // $white-10
+      backgroundColor: '#2d2d2d', // $gray-1100
     },
   },
 };
@@ -56,6 +56,6 @@ export const ontimeTextAreaTransparent = {
   ...commonStyles,
   backgroundColor: 'transparent',
   _hover: {
-    backgroundColor: 'rgba(255, 255, 255, 0.10)', // $white-10
+    backgroundColor: '#2d2d2d', // $gray-1100
   },
 };

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss

@@ -48,7 +48,7 @@ $table-header-font-size: calc(1rem - 2px);
   }
 
   .actionColumn {
-    width: calc(1.5rem + 0.5rem); // sm button size (--chakra-sizes-6) + 2 * padding
+    width: calc(2rem + 0.5rem); // sm button size (--chakra-sizes-8) + 2 * padding
   }
 }
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -150,10 +150,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                       <td>
                         <MenuButton
                           as={IconButton}
-                          size='xs'
+                          size='sm'
                           aria-label='Options'
                           icon={<IoEllipsisHorizontal />}
-                          variant='ontime-ghosted'
+                          variant='ontime-subtle'
                         />
                       </td>
                       {row.getVisibleCells().map((cell) => {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx

@@ -8,7 +8,9 @@ interface MultiLineCellProps {
   handleUpdate: (newValue: string) => void;
 }
 
-const MultiLineCell = (props: MultiLineCellProps) => {
+export default memo(MultiLineCell);
+
+function MultiLineCell(props: MultiLineCellProps) {
   const { initialValue, handleUpdate } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
@@ -22,8 +24,12 @@ const MultiLineCell = (props: MultiLineCellProps) => {
       inputref={ref}
       rows={1}
       size='sm'
-      padding={0}
+      style={{
-      fontSize='1rem'
+        minHeight: '2rem',
+        padding: '0',
+        paddingTop: '0.25rem',
+        fontSize: '1rem',
+      }}
       transition='none'
       variant='ontime-transparent'
       value={value}
@@ -33,6 +39,4 @@ const MultiLineCell = (props: MultiLineCellProps) => {
       spellCheck={false}
     />
   );
-};
+}
-
-export default memo(MultiLineCell);

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx

@@ -8,7 +8,9 @@ interface SingleLineCellProps {
   handleUpdate: (newValue: string) => void;
 }
 
-const SingleLineCell = (props: SingleLineCellProps) => {
+export default memo(SingleLineCell);
+
+function SingleLineCell(props: SingleLineCellProps) {
   const { initialValue, handleUpdate } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
@@ -20,8 +22,10 @@ const SingleLineCell = (props: SingleLineCellProps) => {
   return (
     <Input
       ref={ref}
-      size='sx'
+      size='sm'
       variant='ontime-transparent'
+      padding={0}
+      fontSize='md'
       value={value}
       onChange={onChange}
       onBlur={onBlur}
@@ -30,6 +34,4 @@ const SingleLineCell = (props: SingleLineCellProps) => {
       autoComplete='off'
     />
   );
-};
+}
-
-export default memo(SingleLineCell);

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetCols.tsx

@@ -102,6 +102,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
     meta: { colour: customFields[key].colour },
     cell: MakeCustomField,
     size: 250,
+    minSize: 75,
   }));
 
   return [
@@ -111,6 +112,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       header: 'Cue',
       cell: MakeSingleLineField,
       size: 75,
+      minSize: 40,
     },
     {
       accessorKey: 'timeStart',
@@ -118,6 +120,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       header: 'Start',
       cell: MakeTimer,
       size: 75,
+      minSize: 75,
     },
     {
       accessorKey: 'timeEnd',
@@ -125,6 +128,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       header: 'End',
       cell: MakeTimer,
       size: 75,
+      minSize: 75,
     },
     {
       accessorKey: 'duration',
@@ -132,6 +136,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       header: 'Duration',
       cell: MakeDuration,
       size: 75,
+      minSize: 75,
     },
     {
       accessorKey: 'title',
@@ -139,6 +144,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       header: 'Title',
       cell: MakeSingleLineField,
       size: 250,
+      minSize: 75,
     },
     {
       accessorKey: 'note',
@@ -146,6 +152,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
       header: 'Note',
       cell: MakeMultiLineField,
       size: 250,
+      minSize: 75,
     },
     ...dynamicCustomFields,
   ];