From ee368cca9ce4fff937acadc6ba3e2a3db1f5c8b6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 4 Jun 2025 13:36:24 -0600
Subject: [PATCH] Improve graph axis colors

---
 web/src/components/graph/LineGraph.tsx   | 16 ++++++++++++++--
 web/src/components/graph/SystemGraph.tsx |  8 +++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/src/components/graph/LineGraph.tsx b/web/src/components/graph/LineGraph.tsx
index 76c9c2ce3..ad841dea2 100644
--- a/web/src/components/graph/LineGraph.tsx
+++ b/web/src/components/graph/LineGraph.tsx
@@ -106,6 +106,9 @@ export function CameraLineGraph({
         labels: {
           rotate: 0,
           formatter: formatTime,
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         axisBorder: {
           show: false,
@@ -118,6 +121,9 @@ export function CameraLineGraph({
         show: true,
         labels: {
           formatter: (val: number) => Math.ceil(val).toString(),
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         min: 0,
       },
@@ -138,7 +144,7 @@ export function CameraLineGraph({
                 className="size-2"
                 style={{ color: GRAPH_COLORS[labelIdx] }}
               />
-              <div className="text-xs text-muted-foreground">
+              <div className="text-xs text-secondary-foreground">
                 {t("cameras.label." + label)}
               </div>
               <div className="text-xs text-primary">
@@ -243,6 +249,9 @@ export function EventsPerSecondsLineGraph({
         labels: {
           rotate: 0,
           formatter: formatTime,
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         axisBorder: {
           show: false,
@@ -255,6 +264,9 @@ export function EventsPerSecondsLineGraph({
         show: true,
         labels: {
           formatter: (val: number) => Math.ceil(val).toString(),
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         min: 0,
       },
@@ -268,7 +280,7 @@ export function EventsPerSecondsLineGraph({
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">
-        <div className="text-xs text-muted-foreground">{name}</div>
+        <div className="text-xs text-secondary-foreground">{name}</div>
         <div className="text-xs text-primary">
           {lastValue}
           {unit}
diff --git a/web/src/components/graph/SystemGraph.tsx b/web/src/components/graph/SystemGraph.tsx
index b77231aa7..fcafeda22 100644
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/web/src/components/graph/SystemGraph.tsx
@@ -138,6 +138,9 @@ export function ThresholdBarGraph({
         labels: {
           rotate: 0,
           formatter: formatTime,
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         axisBorder: {
           show: false,
@@ -150,6 +153,9 @@ export function ThresholdBarGraph({
         show: true,
         labels: {
           formatter: (val: number) => Math.ceil(val).toString(),
+          style: {
+            colors: "#6B6B6B",
+          },
         },
         min: 0,
         max: yMax,
@@ -180,7 +186,7 @@ export function ThresholdBarGraph({
   return (
     <div className="flex w-full flex-col">
       <div className="flex items-center gap-1">
-        <div className="text-xs text-muted-foreground">{name}</div>
+        <div className="text-xs text-secondary-foreground">{name}</div>
         <div className="text-xs text-primary">
           {lastValue}
           {unit}