From 98bd320cbd7daa2f6b5d123809dbdaf400bb4247 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 5 Nov 2023 09:47:55 +0100
Subject: [PATCH] style: coloured row background (#571)

* style: coloured row background
---
 apps/client/src/common/utils/styleUtils.ts     | 4 ++--
 apps/client/src/features/cuesheet/Cuesheet.tsx | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/common/utils/styleUtils.ts b/apps/client/src/common/utils/styleUtils.ts
index 488a0137d..5453221f7 100644
--- 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
index 928766528..a674ec79d 100644
--- 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 (