From 908c9e9ccc8ab857dc5389f28da7a15f3ca167ea Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Wed, 5 Feb 2025 11:50:49 -0800
Subject: [PATCH] Enable consistent styling on chart items

---
 .../ChatHistory/Chartable/CustomTooltip.jsx   |  6 +-
 .../ChatHistory/Chartable/index.jsx           | 66 ++++++++++++-------
 frontend/src/index.css                        |  4 ++
 3 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
index b2002e23f8c..222209055f7 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/CustomTooltip.jsx
@@ -46,9 +46,9 @@ export default function Tooltip({ legendColor, ...props }) {
       {...props}
       content={({ active, payload, label }) => {
         return active && payload ? (
-          <div className="bg-white text-sm rounded-md border shadow-lg">
+          <div className="bg-theme-bg-primary text-sm rounded-md border shadow-lg">
             <div className="border-b py-2 px-4">
-              <p className="text-elem text-gray-700 font-medium">{label}</p>
+              <p className="text-theme-bg-primary font-medium">{label}</p>
             </div>
             <div className="space-y-1 py-2 px-4">
               {payload.map(({ value, name }, idx) => (
@@ -58,7 +58,7 @@ export default function Tooltip({ legendColor, ...props }) {
                 >
                   <div className="flex items-center space-x-2">
                     <span
-                      className="shrink-0 h-3 w-3 border-white rounded-md rounded-full border-2 shadow-md"
+                      className="shrink-0 h-3 w-3 border-theme-bg-primary rounded-md rounded-full border-2 shadow-md"
                       style={{ backgroundColor: legendColor }}
                     />
                     <p
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx
index 7d2266e7460..f47c5852af4 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx
@@ -75,8 +75,10 @@ export function Chartable({ props, workspace }) {
     switch (chartType) {
       case "area":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             <AreaChart
               className="h-[350px]"
               data={data}
@@ -90,8 +92,10 @@ export function Chartable({ props, workspace }) {
         );
       case "bar":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             <BarChart
               className="h-[350px]"
               data={data}
@@ -107,8 +111,10 @@ export function Chartable({ props, workspace }) {
         );
       case "line":
         return (
-          <div className="bg-zinc-900 p-8 pb-12 rounded-xl text-white h-[500px] w-full">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 pb-12 rounded-xl text-white h-[500px] w-full light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             <LineChart
               className="h-[400px]"
               data={data}
@@ -122,8 +128,10 @@ export function Chartable({ props, workspace }) {
         );
       case "composed":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             {showLegend && (
               <Legend
                 categories={[value]}
@@ -178,8 +186,10 @@ export function Chartable({ props, workspace }) {
         );
       case "scatter":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             {showLegend && (
               <div className="flex justify-end">
                 <Legend
@@ -224,8 +234,10 @@ export function Chartable({ props, workspace }) {
         );
       case "pie":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             <DonutChart
               data={data}
               category={value}
@@ -248,8 +260,10 @@ export function Chartable({ props, workspace }) {
         );
       case "radar":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             {showLegend && (
               <div className="flex justify-end">
                 <Legend
@@ -282,8 +296,10 @@ export function Chartable({ props, workspace }) {
         );
       case "radialbar":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             {showLegend && (
               <div className="flex justify-end">
                 <Legend
@@ -317,8 +333,10 @@ export function Chartable({ props, workspace }) {
         );
       case "treemap":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             {showLegend && (
               <div className="flex justify-end">
                 <Legend
@@ -343,8 +361,10 @@ export function Chartable({ props, workspace }) {
         );
       case "funnel":
         return (
-          <div className="bg-zinc-900 p-8 rounded-xl text-white">
-            <h3 className="text-lg font-medium">{title}</h3>
+          <div className="bg-theme-bg-primary p-8 rounded-xl text-white light:border light:border-theme-border-primary">
+            <h3 className="text-lg text-theme-text-primary font-medium">
+              {title}
+            </h3>
             {showLegend && (
               <div className="flex justify-end">
                 <Legend
@@ -413,7 +433,7 @@ const customTooltip = (props) => {
   const categoryPayload = payload?.[0];
   if (!categoryPayload) return null;
   return (
-    <div className="w-56 bg-zinc-400 rounded-lg border p-2 text-white">
+    <div className="w-56 bg-theme-bg-primary rounded-lg border p-2 text-white">
       <div className="flex flex-1 space-x-2.5">
         <div
           className={`flex w-1.5 flex-col bg-${categoryPayload?.color}-500 rounded`}
@@ -447,13 +467,13 @@ function DownloadGraph({ onClick }) {
         <div className="p-1 rounded-full border-none">
           {loading ? (
             <CircleNotch
-              className="text-white/50 w-5 h-5 animate-spin"
+              className="text-theme-text-primary w-5 h-5 animate-spin"
               aria-label="Downloading image..."
             />
           ) : (
             <DownloadSimple
               weight="bold"
-              className="text-white/50 w-5 h-5 hover:text-white"
+              className="text-theme-text-primary w-5 h-5 hover:text-theme-text-primary"
               onClick={handleClick}
               aria-label="Download graph image"
             />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 539b5866582..4a20843d503 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -836,6 +836,10 @@ does not extend the close button beyond the viewport. */
   fill: #fff;
 }
 
+[data-theme="light"] .recharts-text > * {
+  fill: #000;
+}
+
 .recharts-legend-wrapper {
   margin-bottom: 10px;
 }