From 19c5c51b426b09fa2d4b90cd041ceee2200a8699 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Fri, 9 Jun 2023 16:44:56 +1000
Subject: [PATCH] Add a hover effect when editing availabilities

---
 .../AvailabilityEditor/AvailabilityEditor.tsx    | 16 ++++++++++------
 .../AvailabilityViewer.module.scss               |  9 +++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
index 4f48799..e650488 100644
--- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
+++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
@@ -108,17 +108,20 @@ const AvailabilityEditor = ({
                     title={t<string>('greyed_times')}
                   />
 
+                  const isSelected = (
+                    (!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized))
+                    || (mode.current === 'add' && selecting.includes(cell.serialized))
+                  )
+
                   return <div
                     key={y}
-                    className={styles.time}
+                    className={makeClass(styles.time, selecting.length === 0 && styles.editable)}
                     style={{
-                      backgroundColor: (
-                        (!(mode.current === 'remove' && selecting.includes(cell.serialized)) && value.includes(cell.serialized))
-                        || (mode.current === 'add' && selecting.includes(cell.serialized))
-                      ) ? palette[1].string : palette[0].string,
+                      backgroundColor: isSelected ? palette[1].string : palette[0].string,
+                      '--hover-color': isSelected ? palette[0].highlight : palette[1].highlight,
                       ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
                       ...cell.minute === 30 && { borderTopStyle: 'dotted' },
-                    }}
+                    } as React.CSSProperties}
                     onPointerDown={e => {
                       e.preventDefault()
                       startPos.current = { x, y }
@@ -132,6 +135,7 @@ const AvailabilityEditor = ({
                         } else if (mode.current === 'remove') {
                           onChange(value.filter(t => !selectingRef.current.includes(t)))
                         }
+                        setSelecting([])
                         mode.current = undefined
                       }, { once: true })
                     }}
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
index 5cc0973..ac1acab 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
@@ -108,6 +108,15 @@
   }
 }
 
+.editable {
+  @media (hover: hover) {
+    &:hover:not(:active) {
+      opacity: .8;
+      background-image: linear-gradient(var(--hover-color), var(--hover-color));
+    }
+  }
+}
+
 .highlight {
   background-image: repeating-linear-gradient(
     45deg,