From 6eb24d909ff4a8421f0be1a7444d5810919420bb Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 2 Mar 2024 06:48:15 -0700
Subject: [PATCH] Get light mode colors working

---
 web/src/components/Statusbar.tsx              |  2 +-
 .../components/filter/ReviewFilterGroup.tsx   | 29 ++++--------
 web/src/components/navigation/NavItem.tsx     |  2 +-
 web/src/views/events/EventView.tsx            |  2 +-
 web/themes/theme-default.css                  | 45 ++++++++++---------
 5 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index db5473125..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 bg-primary z-10">
+    <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/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 0da125795..6abd053bd 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";
@@ -16,6 +16,7 @@ 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 +124,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 +209,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 +247,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 +362,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 26321d69a..6dbc747b7 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -11,7 +11,7 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-selected",
+    active: "font-bold text-white bg-selected",
     inactive: "text-muted-foreground bg-secondary",
   },
   secondary: {
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/themes/theme-default.css b/web/themes/theme-default.css
index 74743d82f..9fd1da28b 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);
@@ -76,16 +79,16 @@
     --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(0, 0%, 9%);
@@ -100,14 +103,14 @@
     --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(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,8 +121,8 @@
     --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%, 58%);
+    --border: 0, 0%, 58%;
 
     --input: hsl(217.2 32.6% 17.5%);
     --input: 217.2 32.6% 17.5%;