From 36a093068348c6db33039f025b7f95b5623b74f4 Mon Sep 17 00:00:00 2001
From: MytsV <mytsvictoria@gmail.com>
Date: Fri, 27 Sep 2024 20:03:03 +0300
Subject: [PATCH] Add stroke to the rse usage widget

---
 .../pages/Dashboard/widgets/TopStorageUsageWidget.tsx      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx b/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx
index bf006b9d7..1870d1d6f 100644
--- a/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx
+++ b/src/component-library/pages/Dashboard/widgets/TopStorageUsageWidget.tsx
@@ -10,6 +10,7 @@ import Link from 'next/link';
 import { Field } from '@/component-library/atoms/misc/Field';
 import { formatFileSize } from '@/component-library/features/utils/text-formatters';
 import CustomLegend, { LegendOption } from '@/component-library/pages/Dashboard/widgets/CustomLegend';
+import useDarkMode from '@/lib/infrastructure/hooks/useDarkMode';
 
 const CustomTooltip = ({ active, payload, totalBytes }: any) => {
     if (active && payload && payload.length) {
@@ -35,6 +36,10 @@ const UsagePieChart = ({ usage }: { usage: RSEAccountUsageViewModel }) => {
         'rgba(34,197,94,0.8)', // Tailwind base-error-500
     ];
 
+    const isDarkMode = useDarkMode();
+    // Tailwind neutral-100 or neutral-900
+    const borderColor = isDarkMode ? 'rgba(241,245,249,0.15)' : 'rgba(15,23,42,0.15)';
+
     const { rse, used_bytes, bytes_limit } = usage;
     const remainingBytes = bytes_limit - used_bytes;
 
@@ -54,7 +59,7 @@ const UsagePieChart = ({ usage }: { usage: RSEAccountUsageViewModel }) => {
             </Link>
             <ResponsiveContainer height={275}>
                 <PieChart>
-                    <Pie data={pieData} dataKey="value" nameKey="name" strokeWidth={0}>
+                    <Pie data={pieData} dataKey="value" nameKey="name" stroke={borderColor}>
                         {pieData.map((entry, index) => (
                             <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} className="outline-none" />
                         ))}