From 837f30cbf0892bbd5df82331e93ee9bc9cf4fb87 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 2 Mar 2024 08:00:50 -0700
Subject: [PATCH] Update frontend colors to match style guide (#10188)

* Get main background colors going

* Finish sidebar

* Get light mode colors working

* Adjust icons

* Adjust icons

* remove unused

* Fix mobile colors
---
 web/src/components/Statusbar.tsx              |  2 +-
 .../dynamic/CameraFeatureToggle.tsx           |  6 +-
 .../components/filter/ReviewFilterGroup.tsx   | 30 +++-----
 web/src/components/navigation/NavItem.tsx     |  6 +-
 web/src/components/navigation/Sidebar.tsx     |  2 +-
 web/src/pages/site-navigation.ts              |  9 ++-
 web/src/views/events/EventView.tsx            |  2 +-
 web/src/views/live/LiveCameraView.tsx         |  2 +-
 web/src/views/live/LiveDashboardView.tsx      | 14 +++-
 web/tailwind.config.js                        |  1 +
 web/themes/theme-default.css                  | 76 ++++++++++---------
 11 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 186b919a7..df77c648f 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -28,7 +28,7 @@ export default function Statusbar() {
   }, [stats]);
 
   return (
-    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4">
+    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground">
       {cpuPercent && (
         <div className="flex items-center text-sm mr-4">
           <MdCircle
diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index 666bfb33b..a3a674c64 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/web/src/components/dynamic/CameraFeatureToggle.tsx
@@ -8,12 +8,12 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-primary",
-    inactive: "text-muted-foreground bg-muted",
+    active: "font-bold text-primary-foreground bg-selected",
+    inactive: "text-secondary-foreground bg-secondary",
   },
   secondary: {
     active: "font-bold text-primary",
-    inactive: "text-muted-foreground",
+    inactive: "text-secondary-foreground",
   },
 };
 
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 0da125795..bdce6bd58 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -1,4 +1,4 @@
-import { LuCalendar, LuCheck, LuFilter, LuVideo } from "react-icons/lu";
+import { LuCheck, LuVideo } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import useSWR from "swr";
@@ -15,7 +15,7 @@ import { Calendar } from "../ui/calendar";
 import { ReviewFilter } from "@/types/review";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
-import { isMobile } from "react-device-detect";
+import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
 
 const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 
@@ -123,12 +123,8 @@ function CamerasFilterButton({
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Button
-          size={isMobile ? "sm" : "default"}
-          className="mx-1 capitalize"
-          variant="secondary"
-        >
-          <LuVideo className="md:mr-[10px]" />
+        <Button size="sm" className="mx-1 capitalize" variant="secondary">
+          <FaVideo className="md:mr-[10px] text-muted-foreground" />
           <div className="hidden md:block">
             {selectedCameras == undefined
               ? "All Cameras"
@@ -212,12 +208,8 @@ function CalendarFilterButton({
       }}
     >
       <PopoverTrigger asChild>
-        <Button
-          size={isMobile ? "sm" : "default"}
-          className="mx-1"
-          variant="secondary"
-        >
-          <LuCalendar className="md:mr-[10px]" />
+        <Button size="sm" className="mx-1" variant="secondary">
+          <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
           <div className="hidden md:block">
             {day == undefined ? "Last 24 Hours" : selectedDate}
           </div>
@@ -254,12 +246,8 @@ function GeneralFilterButton({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button
-          size={isMobile ? "sm" : "default"}
-          className="mx-1"
-          variant="secondary"
-        >
-          <LuFilter className="md:mr-[10px]" />
+        <Button size="sm" className="mx-1" variant="secondary">
+          <FaFilter className="md:mr-[10px] text-muted-foreground" />
           <div className="hidden md:block">Filter</div>
         </Button>
       </PopoverTrigger>
@@ -373,7 +361,7 @@ function FilterCheckBox({
 }: FilterCheckBoxProps) {
   return (
     <Button
-      className="capitalize flex justify-between items-center cursor-pointer w-full"
+      className="capitalize flex justify-between items-center cursor-pointer w-full text-primary-foreground"
       variant="ghost"
       onClick={() => onCheckedChange(!isChecked)}
     >
diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 4725d0eb1..0294ef7ad 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -11,11 +11,11 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-primary",
-    inactive: "text-muted-foreground bg-muted",
+    active: "font-bold text-white bg-selected",
+    inactive: "text-muted-foreground bg-secondary",
   },
   secondary: {
-    active: "font-bold text-primary",
+    active: "font-bold text-selected",
     inactive: "text-muted-foreground",
   },
 };
diff --git a/web/src/components/navigation/Sidebar.tsx b/web/src/components/navigation/Sidebar.tsx
index 201a3fe83..9783fd03b 100644
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/web/src/components/navigation/Sidebar.tsx
@@ -5,7 +5,7 @@ import NavItem from "./NavItem";
 
 function Sidebar() {
   return (
-    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
diff --git a/web/src/pages/site-navigation.ts b/web/src/pages/site-navigation.ts
index 0af342e8f..e23e09a1a 100644
--- a/web/src/pages/site-navigation.ts
+++ b/web/src/pages/site-navigation.ts
@@ -1,21 +1,22 @@
-import { LuConstruction, LuFileUp, LuFlag, LuVideo } from "react-icons/lu";
+import { FaCompactDisc, FaFlag, FaVideo } from "react-icons/fa";
+import { LuConstruction } from "react-icons/lu";
 
 export const navbarLinks = [
   {
     id: 1,
-    icon: LuVideo,
+    icon: FaVideo,
     title: "Live",
     url: "/",
   },
   {
     id: 2,
-    icon: LuFlag,
+    icon: FaFlag,
     title: "Events",
     url: "/events",
   },
   {
     id: 3,
-    icon: LuFileUp,
+    icon: FaCompactDisc,
     title: "Export",
     url: "/export",
   },
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 0bae5eefa..a2086063e 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -247,7 +247,7 @@ export default function EventView({
 
   return (
     <div className="flex flex-col size-full">
-      <div className="h-8 relative flex justify-between items-center mb-2">
+      <div className="h-10 relative flex justify-between items-center mb-2">
         {isMobile && (
           <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
         )}
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 3dfd76109..dff75fc78 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -101,7 +101,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         </Button>
         <TooltipProvider>
           <div
-            className={`flex flex-row items-center gap-1 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
+            className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
           >
             <CameraFeatureToggle
               className="p-2 md:p-0"
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index ba60fadcf..5aa5ca6de 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -81,17 +81,23 @@ export default function LiveDashboardView({
           <div />
           <div className="flex items-center gap-1">
             <Button
-              className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
+              className={
+                layout == "grid"
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
               size="xs"
-              variant="secondary"
               onClick={() => setLayout("grid")}
             >
               <CiGrid31 className="m-1" />
             </Button>
             <Button
-              className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
+              className={
+                layout == "list"
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
               size="xs"
-              variant="secondary"
               onClick={() => setLayout("list")}
             >
               <CiGrid2H className="m-1" />
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2a1978256..167019d9b 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -44,6 +44,7 @@ module.exports = {
         audio: "#ea580c",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        selected: "hsl(var(--selected))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index eef79318a..b8a4ac4cd 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -18,23 +18,23 @@
     --popover-foreground: hsl(222.2 84% 4.9%);
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: hsl(222.2 47.4% 11.2%);
-    --primary: 222.2 47.4% 11.2%;
+    --primary: hsl(0 0% 100%);
+    --primary: 0 0% 100%;
 
-    --primary-foreground: hsl(210 40% 98%);
-    --primary-foreground: 210 40% 98%;
+    --primary-foreground: hsl(0, 0%, 0%);
+    --primary-foreground: 0, 0%, 0%;
 
-    --secondary: hsl(210 40% 96.1%);
-    --secondary: 210 40% 96.1%;
+    --secondary: hsl(0, 0%, 96%);
+    --secondary: 0, 0%, 96%;
 
-    --secondary-foreground: hsl(222.2 47.4% 11.2%);
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary-foreground: hsl(0, 0%, 45%);
+    --secondary-foreground: 0, 0%, 45%;
 
     --muted: hsl(210 40% 96.1%);
     --muted: 210 40% 96.1%;
 
-    --muted-foreground: hsl(215.4 16.3% 46.9%);
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted-foreground: hsl(0, 0%, 64%);
+    --muted-foreground: 0, 0%, 64%;
 
     --accent: hsl(210 40% 96.1%);
     --accent: 210 40% 96.1%;
@@ -57,6 +57,9 @@
     --ring: hsl(222.2 84% 4.9%);
     --ring: 222.2 84% 4.9%;
 
+    --selected: hsl(228, 89%, 63%);
+    --selected: 228, 89%, 63%;
+
     --radius: 0.5rem;
 
     --severity_alert: var(--red-800);
@@ -70,44 +73,44 @@
   }
 
   .dark {
-    --background-hsl: hsl(222.2 84% 4.9%);
-    --background: 222.2 84% 4.9%;
+    --background-hsl: hsl(0 0 0%);
+    --background: 0 0% 0%;
 
-    --foreground: hsl(210 40% 98%);
-    --foreground: 210 40% 98%;
+    --foreground: hsl(0, 0%, 100%);
+    --foreground: 0, 0%, 100%;
 
-    --card: hsl(222.2 84% 4.9%);
-    --card: 222.2 84% 4.9%;
+    --card: hsl(0, 0%, 15%);
+    --card: 0, 0%, 15%;
 
     --card-foreground: hsl(210 40% 98%);
     --card-foreground: 210 40% 98%;
 
-    --popover: hsl(222.2 84% 4.9%);
-    --popover: 222.2 84% 4.9%;
+    --popover: hsl(0, 0%, 15%);
+    --popover: 0, 0%, 15%;
 
-    --popover-foreground: hsl(210 40% 98%);
+    --popover-foreground: hsl(0, 0%, 100%);
     --popover-foreground: 210 40% 98%;
 
-    --primary: hsl(210 40% 98%);
-    --primary: 210 40% 98%;
+    --primary: hsl(0, 0%, 9%);
+    --primary: 0, 0%, 9%;
 
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary-foreground: hsl(0, 0%, 100%);
+    --primary-foreground: 0, 0%, 100%;
 
-    --secondary: hsl(217.2 32.6% 17.5%);
-    --secondary: 217.2 32.6% 17.5%;
+    --secondary: hsl(0, 0%, 15%);
+    --secondary: 0, 0%, 15%;
 
-    --secondary-foreground: hsl(210 40% 98%);
-    --secondary-foreground: 210 40% 98%;
+    --secondary-foreground: hsl(0, 0%, 83%);
+    --secondary-foreground: 0, 0%, 83%;
 
-    --muted: hsl(217.2 32.6% 17.5%);
-    --muted: 217.2 32.6% 17.5%;
+    --muted: hsl(0, 0%, 8%);
+    --muted: 0, 0%, 8%;
 
-    --muted-foreground: hsl(215 20.2% 65.1%);
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted-foreground: hsl(0, 0%, 32%);
+    --muted-foreground: 0, 0%, 32%;
 
-    --accent: hsl(217.2 32.6% 17.5%);
-    --accent: 217.2 32.6% 17.5%;
+    --accent: hsl(0, 0%, 15%);
+    --accent: 0, 0%, 15%;
 
     --accent-foreground: hsl(210 40% 98%);
     --accent-foreground: 210 40% 98%;
@@ -118,13 +121,16 @@
     --destructive-foreground: hsl(210 40% 98%);
     --destructive-foreground: 210 40% 98%;
 
-    --border: hsl(217.2 32.6% 17.5%);
-    --border: 217.2 32.6% 17.5%;
+    --border: hsl(0, 0%, 32%);
+    --border: 0, 0%, 32%;
 
     --input: hsl(217.2 32.6% 17.5%);
     --input: 217.2 32.6% 17.5%;
 
     --ring: hsl(212.7 26.8% 83.9%);
     --ring: 212.7 26.8% 83.9%;
+
+    --selected: hsl(228, 89%, 63%);
+    --selected: 228, 89%, 63%;
   }
 }