From 9b5cbaa7e90b826c1e0e38cd9dede78457839db5 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Wed, 14 Jun 2023 13:59:34 +1000
Subject: [PATCH] Show hover effect on active time slot

---
 .../AvailabilityViewer.module.scss                   |  8 ++++++++
 .../AvailabilityViewer/AvailabilityViewer.tsx        |  1 +
 frontend/src/hooks/usePalette.ts                     | 12 ++++++++----
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
index 80606b9..a2d2495 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
@@ -98,6 +98,7 @@
   background-origin: border-box;
   transition: background-color .1s;
   touch-action: none;
+  position: relative;
 
   border-top-width: 2px;
   border-top-style: solid;
@@ -108,6 +109,13 @@
   }
 }
 
+.nonEditable:hover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: var(--highlight-color, rgba(0,0,0,.3));
+}
+
 .editable {
   @media (hover: hover) {
     &:hover:not(:active) {
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index 530be2f..eee8bad 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -83,6 +83,7 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
             key={y}
             className={makeClass(
               styles.time,
+              styles.nonEditable,
               (focusCount === undefined || focusCount === peopleHere.length) && highlight && (peopleHere.length === max || tempFocus) && peopleHere.length > 0 && styles.highlight,
             )}
             style={{
diff --git a/frontend/src/hooks/usePalette.ts b/frontend/src/hooks/usePalette.ts
index 154c5d1..b1573b4 100644
--- a/frontend/src/hooks/usePalette.ts
+++ b/frontend/src/hooks/usePalette.ts
@@ -15,9 +15,13 @@ export const usePalette = (steps: number) => {
     })
       .format('rgba')
       .map(([r, g, b, a]) => color(r, g, b, a / 255))
-      .map(c => ({
-        string: c.hex('rgba'),
-        highlight: c.luminance() > .5 ? c.darker().hex('rgba') : c.brighter().hex('rgba'),
-      })),
+      .map(c => {
+        let highlight = c.luminance() > .5 ? c.darker() : c.brighter()
+        highlight = highlight.alpha(highlight.alpha() + .3)
+        return {
+          string: c.hex('rgba'),
+          highlight: highlight.hex('rgba'),
+        }
+      }),
   [steps, colormap])
 }