Show hover effect on active time slot

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) {

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={{

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 => ({
+      .map(c => {
+        let highlight = c.luminance() > .5 ? c.darker() : c.brighter()
+        highlight = highlight.alpha(highlight.alpha() + .3)
+        return {
           string: c.hex('rgba'),
-        highlight: c.luminance() > .5 ? c.darker().hex('rgba') : c.brighter().hex('rgba'),
+          highlight: highlight.hex('rgba'),
-      })),
+        }
+      }),
   [steps, colormap])
 }