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

@@ -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

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",
+    active: "font-bold text-primary-foreground bg-selected",
-    inactive: "text-muted-foreground bg-muted",
+    inactive: "text-secondary-foreground bg-secondary",
   },
   secondary: {
     active: "font-bold text-primary",
-    inactive: "text-muted-foreground",
+    inactive: "text-secondary-foreground",
   },
 };
 

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
+        <Button size="sm" className="mx-1 capitalize" variant="secondary">
-          size={isMobile ? "sm" : "default"}
+          <FaVideo className="md:mr-[10px] text-muted-foreground" />
-          className="mx-1 capitalize"
-          variant="secondary"
-        >
-          <LuVideo className="md:mr-[10px]" />
           <div className="hidden md:block">
             {selectedCameras == undefined
               ? "All Cameras"
@@ -212,12 +208,8 @@ function CalendarFilterButton({
       }}
     >
       <PopoverTrigger asChild>
-        <Button
+        <Button size="sm" className="mx-1" variant="secondary">
-          size={isMobile ? "sm" : "default"}
+          <FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
-          className="mx-1"
-          variant="secondary"
-        >
-          <LuCalendar className="md:mr-[10px]" />
           <div className="hidden md:block">
             {day == undefined ? "Last 24 Hours" : selectedDate}
           </div>
@@ -254,12 +246,8 @@ function GeneralFilterButton({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button
+        <Button size="sm" className="mx-1" variant="secondary">
-          size={isMobile ? "sm" : "default"}
+          <FaFilter className="md:mr-[10px] text-muted-foreground" />
-          className="mx-1"
-          variant="secondary"
-        >
-          <LuFilter className="md:mr-[10px]" />
           <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)}
     >

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",
+    active: "font-bold text-white bg-selected",
-    inactive: "text-muted-foreground bg-muted",
+    inactive: "text-muted-foreground bg-secondary",
   },
   secondary: {
-    active: "font-bold text-primary",
+    active: "font-bold text-selected",
     inactive: "text-muted-foreground",
   },
 };

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" />

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",
   },

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" />
         )}

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"

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" />

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))",

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: hsl(0 0% 100%);
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 0 0% 100%;
 
-    --primary-foreground: hsl(210 40% 98%);
+    --primary-foreground: hsl(0, 0%, 0%);
-    --primary-foreground: 210 40% 98%;
+    --primary-foreground: 0, 0%, 0%;
 
-    --secondary: hsl(210 40% 96.1%);
+    --secondary: hsl(0, 0%, 96%);
-    --secondary: 210 40% 96.1%;
+    --secondary: 0, 0%, 96%;
 
-    --secondary-foreground: hsl(222.2 47.4% 11.2%);
+    --secondary-foreground: hsl(0, 0%, 45%);
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --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: hsl(0, 0%, 64%);
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --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-hsl: hsl(0 0 0%);
-    --background: 222.2 84% 4.9%;
+    --background: 0 0% 0%;
 
-    --foreground: hsl(210 40% 98%);
+    --foreground: hsl(0, 0%, 100%);
-    --foreground: 210 40% 98%;
+    --foreground: 0, 0%, 100%;
 
-    --card: hsl(222.2 84% 4.9%);
+    --card: hsl(0, 0%, 15%);
-    --card: 222.2 84% 4.9%;
+    --card: 0, 0%, 15%;
 
     --card-foreground: hsl(210 40% 98%);
     --card-foreground: 210 40% 98%;
 
-    --popover: hsl(222.2 84% 4.9%);
+    --popover: hsl(0, 0%, 15%);
-    --popover: 222.2 84% 4.9%;
+    --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: hsl(0, 0%, 9%);
-    --primary: 210 40% 98%;
+    --primary: 0, 0%, 9%;
 
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
+    --primary-foreground: hsl(0, 0%, 100%);
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary-foreground: 0, 0%, 100%;
 
-    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary: hsl(0, 0%, 15%);
-    --secondary: 217.2 32.6% 17.5%;
+    --secondary: 0, 0%, 15%;
 
-    --secondary-foreground: hsl(210 40% 98%);
+    --secondary-foreground: hsl(0, 0%, 83%);
-    --secondary-foreground: 210 40% 98%;
+    --secondary-foreground: 0, 0%, 83%;
 
-    --muted: hsl(217.2 32.6% 17.5%);
+    --muted: hsl(0, 0%, 8%);
-    --muted: 217.2 32.6% 17.5%;
+    --muted: 0, 0%, 8%;
 
-    --muted-foreground: hsl(215 20.2% 65.1%);
+    --muted-foreground: hsl(0, 0%, 32%);
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted-foreground: 0, 0%, 32%;
 
-    --accent: hsl(217.2 32.6% 17.5%);
+    --accent: hsl(0, 0%, 15%);
-    --accent: 217.2 32.6% 17.5%;
+    --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: hsl(0, 0%, 32%);
-    --border: 217.2 32.6% 17.5%;
+    --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%;
   }
 }