From 1c826f3c09d4121602b4215a065958467d028400 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 21 Apr 2023 07:46:14 -0600
Subject: [PATCH] Add tooltip with info

---
 web/src/components/TimelineSummary.jsx | 31 +++++++++++++++++++-------
 web/src/components/Tooltip.jsx         |  2 +-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 52cf09fb8..6b427688d 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -33,11 +33,23 @@ export default function TimelineSummary({ event }) {
         <div className="w-1/4 flex flex-row flex-nowrap justify-between">
           {eventTimeline.map((item, index) =>
             item.class_type == 'visible' || item.class_type == 'gone' ? (
-              <Button className="rounded-full" type="text" onClick={() => setTimeIndex(index)}>
+              <Button
+                className="rounded-full"
+                type="text"
+                color={index == timeIndex ? 'blue' : 'gray'}
+                aria-label={getTimelineItemDescription(config, item, event)}
+                onClick={() => setTimeIndex(index)}
+              >
                 <MotionIcon className="w-8" />
               </Button>
             ) : (
-              <Button className="rounded-full" type="text" onClick={() => setTimeIndex(index)}>
+              <Button
+                className="rounded-full"
+                type="text"
+                color={index == timeIndex ? 'blue' : 'gray'}
+                aria-label={getTimelineItemDescription(config, item, event)}
+                onClick={() => setTimeIndex(index)}
+              >
                 <Zone className="w-8" />
               </Button>
             )
@@ -46,8 +58,8 @@ export default function TimelineSummary({ event }) {
       </div>
 
       <div className="text-center">
-        <Heading size="md">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
-        <div className="flex justify-center p-2">
+        <Heading size="sm">{getTimelineItemDescription(config, eventTimeline[timeIndex], event)}</Heading>
+        <div className="flex justify-center p-2 py-4">
           <img
             className="flex-grow-0"
             src={`${apiHost}/api/${event.camera}/recordings/${eventTimeline[timeIndex].timestamp}/snapshot.png`}
@@ -66,10 +78,13 @@ function getTimelineItemDescription(config, timelineItem, event) {
       time_format: config.ui.time_format,
     })}`;
   } else if (timelineItem.class_type == 'entered_zone') {
-    return `${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime(
-      timelineItem.timestamp,
-      { date_style: 'short', time_style: 'medium', time_format: config.ui.time_format }
-    )}`;
+    return `${event.label.replaceAll('_', ' ')} entered ${timelineItem.data.zones
+      .join(' and ')
+      .replaceAll('_', ' ')} at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
+      date_style: 'short',
+      time_style: 'medium',
+      time_format: config.ui.time_format,
+    })}`;
   }
 
   return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
diff --git a/web/src/components/Tooltip.jsx b/web/src/components/Tooltip.jsx
index 034623af2..ba56f20b8 100644
--- a/web/src/components/Tooltip.jsx
+++ b/web/src/components/Tooltip.jsx
@@ -49,7 +49,7 @@ export default function Tooltip({ relativeTo, text }) {
   const tooltip = (
     <div
       role="tooltip"
-      className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm ${
+      className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm capitalize ${
         position.top >= 0 ? 'opacity-100 scale-100' : ''
       }`}
       ref={ref}