From 1e90ce4c1d5fcf8a6bbcf6ca183e37e5f954c384 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Thu, 2 Nov 2023 20:59:30 +0100
Subject: [PATCH] style: sticky index column (#566)

* style: sticky index column
---
 apps/client/src/common/utils/styleUtils.ts                   | 2 +-
 apps/client/src/features/cuesheet/Cuesheet.module.scss       | 5 +++++
 .../features/cuesheet/cuesheet-table-elements/EventRow.tsx   | 5 ++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/common/utils/styleUtils.ts b/apps/client/src/common/utils/styleUtils.ts
index f0e2a05e6..488a0137d 100644
--- a/apps/client/src/common/utils/styleUtils.ts
+++ b/apps/client/src/common/utils/styleUtils.ts
@@ -10,7 +10,7 @@ type ColourCombination = {
  * @param bgColour
  * @return {{backgroundColor, color: string}}
  */
-export const getAccessibleColour = (bgColour: string): ColourCombination => {
+export const getAccessibleColour = (bgColour?: string): ColourCombination => {
   if (bgColour) {
     try {
       const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
diff --git a/apps/client/src/features/cuesheet/Cuesheet.module.scss b/apps/client/src/features/cuesheet/Cuesheet.module.scss
index 3987c1bd9..7ffead4d9 100644
--- a/apps/client/src/features/cuesheet/Cuesheet.module.scss
+++ b/apps/client/src/features/cuesheet/Cuesheet.module.scss
@@ -44,6 +44,11 @@ $table-header-font-size: calc(1rem - 3px);
     min-width: 2rem;
     text-align: right;
     font-weight: 400;
+
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: $gray-1300;
   }
 }
 
diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
index e53f9ec7c..3e575f42b 100644
--- a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx
@@ -19,9 +19,8 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
   const ownRef = useRef<HTMLTableRowElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
-  const bgFallback = 'transparent';
-  const bgColour = colour || bgFallback;
-  const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
+  const bgColour = colour;
+  const textColour = getAccessibleColour(bgColour);
 
   useLayoutEffect(() => {
     const observer = new IntersectionObserver(