style: coloured row background (#571)

* style: coloured row background
cpvalente · Nov 5, 2023 · 98bd320 · 98bd320
1 parent f57faf1
commit 98bd320
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/apps/client/src/common/utils/styleUtils.ts b/apps/client/src/common/utils/styleUtils.ts
@@ -15,8 +15,8 @@ export const getAccessibleColour = (bgColour?: string): ColourCombination => {
     try {
       const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
       return { backgroundColor: bgColour, color: textColor };
-    } catch (error) {
-      console.log(`Unable to parse colour: ${bgColour}`);
+    } catch (_error) {
+      /* we do not handle errors here */
     }
   }
   return { backgroundColor: '#000', color: '#fffffa' };

diff --git a/apps/client/src/features/cuesheet/Cuesheet.tsx b/apps/client/src/features/cuesheet/Cuesheet.tsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
 
 import useFollowComponent from '../../common/hooks/useFollowComponent';
@@ -117,6 +118,14 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                 let rowBgColour: string | undefined;
                 if (isSelected) {
                   rowBgColour = 'var(--cuesheet-running-bg-override, #D20300)'; // $red-700
+                } else if (row.original.colour) {
+                  try {
+                    // the colour is user defined and might be invalid
+                    const colour = new Color(row.original.colour).alpha(0.25);
+                    rowBgColour = colour.hsl().string();
+                  } catch (_error) {
+                    /* we do not handle errors here */
+                  }
                 }
 
                 return (