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

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

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

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