Add a hover effect when editing availabilities

frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx

@@ -108,17 +108,20 @@ const AvailabilityEditor = ({
                     title={t<string>('greyed_times')}
                   />
 
-                  return <div
+                  const isSelected = (
-                    key={y}
-                    className={styles.time}
-                    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,
+                  )
+
+                  return <div
+                    key={y}
+                    className={makeClass(styles.time, selecting.length === 0 && styles.editable)}
+                    style={{
+                      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 })
                     }}

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,