From 298b9fc13f5e5ff5a1432c2cf2c76c8f65643c62 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 31 Mar 2024 23:29:19 -0500
Subject: [PATCH] pixel alignment, better outlines, and more figma matching

---
 web/src/App.tsx                              |  2 +-
 web/src/components/timeline/EventSegment.tsx | 14 ++---
 web/src/views/events/EventView.tsx           | 60 +++++++++++---------
 web/src/views/events/RecordingView.tsx       |  2 +-
 4 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index c50c53307..743d98711 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -31,7 +31,7 @@ function App() {
             {isMobile && <Bottombar />}
             <div
               id="pageRoot"
-              className={`absolute top-0 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-12 bottom-8"}`}
+              className={`absolute top-0 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-[52px] bottom-8"}`}
             >
               <Suspense>
                 <Routes>
diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 08a78a30b..7f8d0f72c 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -170,24 +170,20 @@ export function EventSegment({
   const segmentClick = useCallback(() => {
     if (contentRef.current && startTimestamp) {
       const element = contentRef.current.querySelector(
-        `[data-segment-start="${startTimestamp - segmentDuration}"]`,
+        `[data-segment-start="${startTimestamp - segmentDuration}"] .review-item-ring`,
       );
       if (element instanceof HTMLElement) {
         scrollIntoView(element, {
           scrollMode: "if-needed",
           behavior: "smooth",
         });
-        element.classList.add(
-          `outline-severity_${severityType}`,
-          `shadow-severity_${severityType}`,
-        );
-        element.classList.add("outline-3");
-        element.classList.remove("outline-0");
+        element.classList.add(`outline-severity_${severityType}`);
+        element.classList.remove("outline-transparent");
 
         // Remove the classes after a short timeout
         setTimeout(() => {
-          element.classList.remove("outline-3");
-          element.classList.add("outline-0");
+          element.classList.remove(`outline-severity_${severityType}`);
+          element.classList.add("outline-transparent");
         }, 3000);
       }
 
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 6d49762e3..9cdbf2c03 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -206,12 +206,12 @@ export default function EventView({
 
   return (
     <div className="py-2 flex flex-col size-full">
-      <div className="h-11 px-2 relative flex justify-between items-center">
+      <div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
         )}
         <ToggleGroup
-          className="*:px-3 *:py-4 *:rounded-2xl"
+          className="*:px-3 *:py-4 *:rounded-md"
           type="single"
           size="sm"
           value={severity}
@@ -518,7 +518,7 @@ function DetectionReview({
         )}
 
         <div
-          className="w-full m-2 p-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
+          className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
           ref={contentRef}
         >
           {currentItems &&
@@ -533,7 +533,7 @@ function DetectionReview({
                   data-segment-start={
                     alignStartDateToTimeline(value.start_time) - segmentDuration
                   }
-                  className={`review-item outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-3 outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
+                  className="review-item relative rounded-lg"
                 >
                   <div className="aspect-video rounded-lg overflow-hidden">
                     <PreviewThumbnailPlayer
@@ -545,6 +545,9 @@ function DetectionReview({
                       onClick={onSelectReview}
                     />
                   </div>
+                  <div
+                    className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-3 ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`}
+                  />
                 </div>
               );
             })}
@@ -563,7 +566,7 @@ function DetectionReview({
           )}
         </div>
       </div>
-      <div className="w-[65px] md:w-[110px] mt-2 flex flex-row">
+      <div className="w-[65px] md:w-[110px] flex flex-row">
         <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
           <EventReviewTimeline
             segmentDuration={segmentDuration}
@@ -809,7 +812,7 @@ function MotionReview({
       <div className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
         <div
           ref={contentRef}
-          className="w-full m-2 p-1 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
+          className="w-full mx-2 px-1 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
         >
           {reviewCameras.map((camera) => {
             let grow;
@@ -823,30 +826,35 @@ function MotionReview({
             }
             const detectionType = getDetectionType(camera.name);
             return (
-              <PreviewPlayer
-                key={camera.name}
-                className={`${detectionType ? `outline outline-3 outline-offset-1 outline-severity_${detectionType}` : "outline-0 shadow-none"} rounded-2xl ${grow}`}
-                camera={camera.name}
-                timeRange={currentTimeRange}
-                startTime={previewStart}
-                cameraPreviews={relevantPreviews || []}
-                isScrubbing={scrubbing}
-                onControllerReady={(controller) => {
-                  videoPlayersRef.current[camera.name] = controller;
-                }}
-                onClick={() =>
-                  onOpenRecording({
-                    camera: camera.name,
-                    startTime: currentTime,
-                    severity: "significant_motion",
-                  })
-                }
-              />
+              <div className={`relative ${grow}`}>
+                <PreviewPlayer
+                  key={camera.name}
+                  className={`rounded-2xl ${grow}`}
+                  camera={camera.name}
+                  timeRange={currentTimeRange}
+                  startTime={previewStart}
+                  cameraPreviews={relevantPreviews || []}
+                  isScrubbing={scrubbing}
+                  onControllerReady={(controller) => {
+                    videoPlayersRef.current[camera.name] = controller;
+                  }}
+                  onClick={() =>
+                    onOpenRecording({
+                      camera: camera.name,
+                      startTime: currentTime,
+                      severity: "significant_motion",
+                    })
+                  }
+                />
+                <div
+                  className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-3 ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
+                />
+              </div>
             );
           })}
         </div>
       </div>
-      <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
+      <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
         <MotionReviewTimeline
           segmentDuration={segmentDuration}
           timestampSpread={15}
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 27f0d060b..722e241f4 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -243,7 +243,7 @@ export function RecordingView({
     <div ref={contentRef} className="size-full pt-2 flex flex-col">
       <Toaster />
       <div
-        className={`w-full h-11 px-2 relative flex items-center justify-between`}
+        className={`w-full h-11 mb-2 px-2 relative flex items-center justify-between`}
       >
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />