From 08ca0244263e431b323a2bcfc02e22219093ec30 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 2 Jan 2024 11:20:32 -0700
Subject: [PATCH] Add more custom colors and improve graph

---
 .../components/camera/DynamicCameraImage.tsx  |  6 +++---
 web/src/components/graph/TimelineGraph.tsx    | 21 ++++++++++++++++++-
 web/tailwind.config.js                        |  4 ++++
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/src/components/camera/DynamicCameraImage.tsx b/web/src/components/camera/DynamicCameraImage.tsx
index 875a21e99..091fcda2e 100644
--- a/web/src/components/camera/DynamicCameraImage.tsx
+++ b/web/src/components/camera/DynamicCameraImage.tsx
@@ -83,19 +83,19 @@ export default function DynamicCameraImage({
       <div className="flex absolute right-0 bottom-0 bg-black bg-opacity-20 rounded p-1">
         <MdLeakAdd
           className={`${
-            detectingMotion == "ON" ? "text-red-500" : "text-gray-600"
+            detectingMotion == "ON" ? "text-motion" : "text-gray-600"
           }`}
         />
         <TbUserScan
           className={`${
-            activeObjects.length > 0 ? "text-cyan-500" : "text-gray-600"
+            activeObjects.length > 0 ? "text-object" : "text-gray-600"
           }`}
         />
         {camera.audio.enabled && (
           <LuEar
             className={`${
               parseInt(audioRms) >= camera.audio.min_volume
-                ? "text-orange-500"
+                ? "text-audio"
                 : "text-gray-600"
             }`}
           />
diff --git a/web/src/components/graph/TimelineGraph.tsx b/web/src/components/graph/TimelineGraph.tsx
index 2e422c3a4..80722b81c 100644
--- a/web/src/components/graph/TimelineGraph.tsx
+++ b/web/src/components/graph/TimelineGraph.tsx
@@ -16,16 +16,35 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
       options={{
         chart: {
           id: id,
+          selection: {
+            enabled: false,
+          },
           toolbar: {
             show: false,
           },
+          zoom: {
+            enabled: false,
+          },
         },
         dataLabels: { enabled: false },
         grid: {
           show: false,
         },
+        legend: {
+          show: false,
+          position: "top",
+        },
+        tooltip: {
+          enabled: false,
+        },
         xaxis: {
           type: "datetime",
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false,
+          },
           labels: {
             show: false,
           },
@@ -37,7 +56,7 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
         },
       }}
       series={data}
-      height={100}
+      height="100%"
     />
   );
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 7d0c7f9c0..696829f5e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -22,6 +22,10 @@ module.exports = {
         ring: "hsl(var(--ring))",
         danger: "#ef4444",
         success: "#22c55e",
+        // detection colors
+        motion: "#991b1b",
+        object: "#06b6d4",
+        audio: "#ea580c",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {