theme updates to match design corretly

web/src/components/filter/CameraGroupSelector.tsx

@@ -87,7 +87,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
             className={
               group == "default"
                 ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                : "text-muted-foreground bg-secondary focus:text-muted-foreground focus:bg-secondary"
+                : "text-secondary-foreground bg-secondary focus:text-secondary-foreground focus:bg-secondary"
             }
             size="xs"
             onClick={() => (group ? setGroup("default", true) : null)}
@@ -109,7 +109,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                 className={
                   group == name
                     ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                    : "text-muted-foreground bg-secondary"
+                    : "text-secondary-foreground bg-secondary"
                 }
                 size="xs"
                 onClick={() => setGroup(name, group != "default")}

web/src/components/filter/ReviewActionGroup.tsx

@@ -35,7 +35,7 @@ export default function ReviewActionGroup({
   }, [selectedReviews, setSelectedReviews, pullLatestData]);
 
   return (
-    <div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center bg-background">
+    <div className="absolute inset-x-2 inset-y-0 md:left-auto py-2 flex gap-2 justify-between items-center bg-background">
       <div className="mx-1 flex justify-center items-center text-sm text-muted-foreground">
         <div className="p-1">{`${selectedReviews.length} selected`}</div>
         <div className="p-1">{"|"}</div>
@@ -58,7 +58,7 @@ export default function ReviewActionGroup({
             }}
           >
             <FaCompactDisc />
-            {isDesktop && "Export"}
+            {isDesktop && <div className="text-primary-foreground">Export</div>}
           </Button>
         )}
         <Button
@@ -68,7 +68,9 @@ export default function ReviewActionGroup({
           onClick={onMarkAsReviewed}
         >
           <FaCircleCheck />
-          {isDesktop && "Mark as reviewed"}
+          {isDesktop && (
+            <div className="text-primary-foreground">Mark as reviewed</div>
+          )}
         </Button>
         <Button
           className="p-2 flex items-center gap-1"
@@ -77,7 +79,7 @@ export default function ReviewActionGroup({
           onClick={onDelete}
         >
           <HiTrash />
-          {isDesktop && "Delete"}
+          {isDesktop && <div className="text-primary-foreground">Delete</div>}
         </Button>
       </div>
     </div>

web/src/components/filter/ReviewFilterGroup.tsx

@@ -223,8 +223,8 @@ function CamerasFilterButton({
       variant="secondary"
       size="sm"
     >
-      <FaVideo className="text-muted-foreground" />
-      <div className="hidden md:block">
+      <FaVideo className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">
         {selectedCameras == undefined
           ? "All Cameras"
           : `${selectedCameras.length} Cameras`}
@@ -368,7 +368,7 @@ function ShowReviewFilter({
   );
   return (
     <>
-      <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 text-secondary-foreground rounded-md cursor-pointer">
+      <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 text-primary-foreground rounded-md cursor-pointer">
         <Switch
           id="reviewed"
           checked={showReviewedSwitch == 1}
@@ -412,8 +412,8 @@ function CalendarFilterButton({
 
   const trigger = (
     <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaCalendarAlt className="text-muted-foreground" />
-      <div className="hidden md:block">
+      <FaCalendarAlt className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
     </Button>
@@ -473,8 +473,8 @@ function GeneralFilterButton({
 
   const trigger = (
     <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaFilter className="text-muted-foreground" />
-      <div className="hidden md:block">Filter</div>
+      <FaFilter className="text-secondary-foreground" />
+      <div className="hidden md:block text-primary-foreground">Filter</div>
     </Button>
   );
   const content = (
@@ -546,7 +546,7 @@ export function GeneralFilterContent({
       <div className="h-auto overflow-y-auto overflow-x-hidden">
         <div className="flex justify-between items-center my-2.5">
           <Label
-            className="mx-2 text-secondary-foreground cursor-pointer"
+            className="mx-2 text-primary-foreground cursor-pointer"
             htmlFor="allLabels"
           >
             All Labels
@@ -653,7 +653,7 @@ function ShowMotionOnlyButton({
           onCheckedChange={setMotionOnlyButton}
         />
         <Label
-          className="mx-2 text-secondary-foreground cursor-pointer"
+          className="mx-2 text-primary-foreground cursor-pointer"
           htmlFor="collapse-motion"
         >
           Motion only

web/src/components/graph/SystemGraph.tsx

@@ -187,7 +187,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
         },
       },
       tooltip: {
-        theme: systemTheme || theme,
+        show: false,
       },
       xaxis: {
         axisBorder: {
@@ -205,7 +205,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
         min: 0,
         max: 100,
       },
-    };
+    } as ApexCharts.ApexOptions;
   }, [graphId, systemTheme, theme]);
 
   useEffect(() => {
@@ -293,7 +293,6 @@ export function CameraLineGraph({
   );
 
   const options = useMemo(() => {
-    console.log(`new options`);
     return {
       chart: {
         id: graphId,

web/src/components/graph/TimelineGraph.tsx

@@ -1,101 +0,0 @@
-import { GraphData } from "@/types/graph";
-import Chart from "react-apexcharts";
-
-type TimelineGraphProps = {
-  id: string;
-  data: GraphData[];
-  start: number;
-  end: number;
-  objects: number[];
-};
-
-/**
- * A graph meant to be overlaid on top of a timeline
- */
-export default function TimelineGraph({
-  id,
-  data,
-  start,
-  end,
-  objects,
-}: TimelineGraphProps) {
-  return (
-    <Chart
-      type="bar"
-      options={{
-        colors: [
-          ({ dataPointIndex }: { dataPointIndex: number }) => {
-            if (objects.includes(dataPointIndex)) {
-              return "#06b6d4";
-            } else {
-              return "#991b1b";
-            }
-          },
-        ],
-        chart: {
-          id: id,
-          selection: {
-            enabled: false,
-          },
-          toolbar: {
-            show: false,
-          },
-          zoom: {
-            enabled: false,
-          },
-        },
-        dataLabels: { enabled: false },
-        grid: {
-          show: false,
-          padding: {
-            bottom: 2,
-            top: -12,
-            left: -20,
-            right: 0,
-          },
-        },
-        legend: {
-          show: false,
-          position: "top",
-        },
-        plotOptions: {
-          bar: {
-            columnWidth: "100%",
-            barHeight: "100%",
-            hideZeroBarsWhenGrouped: true,
-          },
-        },
-        stroke: {
-          width: 0,
-        },
-        tooltip: {
-          enabled: false,
-        },
-        xaxis: {
-          type: "datetime",
-          axisBorder: {
-            show: false,
-          },
-          axisTicks: {
-            show: false,
-          },
-          labels: {
-            show: false,
-          },
-          min: start,
-          max: end,
-        },
-        yaxis: {
-          axisBorder: {
-            show: false,
-          },
-          labels: {
-            show: false,
-          },
-        },
-      }}
-      series={data}
-      height="100%"
-    />
-  );
-}

web/src/components/navigation/NavItem.tsx

@@ -12,11 +12,11 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 const variants = {
   primary: {
     active: "font-bold text-white bg-selected",
-    inactive: "text-muted-foreground bg-secondary",
+    inactive: "text-secondary-foreground bg-secondary",
   },
   secondary: {
     active: "font-bold text-selected",
-    inactive: "text-muted-foreground",
+    inactive: "text-secondary-foreground",
   },
 };
 

web/src/components/overlay/ExportDialog.tsx

@@ -122,8 +122,8 @@ export default function ExportDialog({
               setMode("select");
             }}
           >
-            <FaArrowDown className="p-1 fill-secondary bg-muted-foreground rounded-md" />
-            {isDesktop && "Export"}
+            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
+            {isDesktop && <div className="text-primary-foreground">Export</div>}
           </Button>
         </Trigger>
         <Content

web/src/pages/SubmitPlus.tsx

@@ -237,8 +237,8 @@ function PlusFilterGroup({
       >
         <Trigger asChild>
           <Button size="sm" className="mx-1 capitalize" variant="secondary">
-            <FaVideo className="md:mr-[10px] text-muted-foreground" />
-            <div className="hidden md:block">
+            <FaVideo className="md:mr-[10px] text-secondary-foreground" />
+            <div className="hidden md:block text-primary-foreground">
               {selectedCameras == undefined
                 ? "All Cameras"
                 : `${selectedCameras.length} Cameras`}
@@ -314,8 +314,8 @@ function PlusFilterGroup({
       >
         <Trigger asChild>
           <Button size="sm" className="mx-1 capitalize" variant="secondary">
-            <FaList className="md:mr-[10px] text-muted-foreground" />
-            <div className="hidden md:block">
+            <FaList className="md:mr-[10px] text-secondary-foreground" />
+            <div className="hidden md:block text-primary-foreground">
               {selectedLabels == undefined
                 ? "All Labels"
                 : `${selectedLabels.length} Labels`}

web/src/views/events/RecordingView.tsx

@@ -257,7 +257,7 @@ export function RecordingView({
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />
-          {isDesktop && "Back"}
+          {isDesktop && <div className="text-primary-foreground">Back</div>}
         </Button>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer

web/src/views/live/LiveBirdseyeView.tsx

@@ -133,7 +133,7 @@ export default function LiveBirdseyeView() {
               onClick={() => navigate(-1)}
             >
               <IoMdArrowBack className="size-5" />
-              {isDesktop && "Back"}
+              {isDesktop && <div className="text-primary-foreground">Back</div>}
             </Button>
           ) : (
             <div />

web/src/views/live/LiveCameraView.tsx

@@ -228,7 +228,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 onClick={() => navigate(-1)}
               >
                 <IoMdArrowRoundBack className="size-5" />
-                {isDesktop && "Back"}
+                {isDesktop && (
+                  <div className="text-primary-foreground">Back</div>
+                )}
               </Button>
               <Button
                 className="flex items-center gap-2.5 rounded-lg"
@@ -248,7 +250,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 }}
               >
                 <LuHistory className="size-5" />
-                {isDesktop && "History"}
+                {isDesktop && (
+                  <div className="text-primary-foreground">History</div>
+                )}
               </Button>
             </div>
           ) : (

web/src/views/system/CameraMetrics.tsx

@@ -159,7 +159,7 @@ export default function CameraMetrics({
                   </div>
                   <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
                     {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
                         <div className="mb-5">CPU</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-cpu`}
@@ -175,7 +175,7 @@ export default function CameraMetrics({
                       <Skeleton className="size-full aspect-video" />
                     )}
                     {Object.keys(cameraFpsSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
                         <div className="mb-5">DPS</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-dps`}

web/src/views/system/GeneralMetrics.tsx

@@ -285,7 +285,7 @@ export default function GeneralMetrics({
         </div>
         <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
                 <ThresholdBarGraph
@@ -303,7 +303,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -321,7 +321,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -359,7 +359,7 @@ export default function GeneralMetrics({
             </div>
             <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
                     <ThresholdBarGraph
@@ -377,7 +377,7 @@ export default function GeneralMetrics({
                 <Skeleton className="w-full aspect-video" />
               )}
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
                   <div className="mb-5">GPU Memory</div>
                   {gpuMemSeries.map((series) => (
                     <ThresholdBarGraph
@@ -403,7 +403,7 @@ export default function GeneralMetrics({
         </div>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -421,7 +421,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-tall" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
                 <ThresholdBarGraph

web/src/views/system/StorageMetrics.tsx

@@ -47,7 +47,7 @@ export default function StorageMetrics({
         General Storage
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
@@ -55,7 +55,7 @@ export default function StorageMetrics({
             total={totalStorage.total}
           />
         </div>
-        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
           <div className="mb-5">/tmp/cache</div>
           <StorageGraph
             graphId="general-cache"
@@ -63,7 +63,7 @@ export default function StorageMetrics({
             total={stats.service.storage["/tmp/cache"]["total"]}
           />
         </div>
-        <div className="p-2.5 bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
           <div className="mb-5">/dev/shm</div>
           <StorageGraph
             graphId="general-shared-memory"
@@ -77,7 +77,7 @@ export default function StorageMetrics({
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
         {Object.keys(cameraStorage).map((camera) => (
-          <div className="p-2.5 bg-primary rounded-2xl flex-col">
+          <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
             <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
             <StorageGraph
               graphId={`${camera}-storage`}

web/themes/theme-default.css

@@ -27,8 +27,8 @@
     --secondary: hsl(0, 0%, 96%);
     --secondary: 0 0% 96%;
 
-    --secondary-foreground: hsl(0, 0%, 32%);
-    --secondary-foreground: 0 0% 32%;
+    --secondary-foreground: hsl(0, 0%, 83%);
+    --secondary-foreground: 0 0% 83%;
 
     --secondary-highlight: hsl(0, 0%, 94%);
     --secondary-highlight: 0 0% 94%;
@@ -112,8 +112,8 @@
     --secondary: hsl(0, 0%, 15%);
     --secondary: 0 0% 15%;
 
-    --secondary-foreground: hsl(0, 0%, 83%);
-    --secondary-foreground: 0 0% 83%;
+    --secondary-foreground: hsl(0, 0%, 32%);
+    --secondary-foreground: 0 0% 32%;
 
     --secondary-highlight: hsl(0, 0%, 25%);
     --secondary-highlight: 0 0% 25%;