From c27316967b8685e600a3af9dd7698498f838bdda Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Mon, 28 Aug 2023 00:28:06 +0800
Subject: [PATCH] feat: add bg color and text color for stats

---
 src/pages/Overview.tsx | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
index d6e6fb1..a4af9ca 100644
--- a/src/pages/Overview.tsx
+++ b/src/pages/Overview.tsx
@@ -134,38 +134,44 @@ export const Overview = () => {
 
   return (
     <div class="flex flex-col gap-4">
-      <div class="stats w-full shadow">
+      <div class="stats w-full bg-primary shadow">
         <div class="stat">
-          <div class="stat-title">Upload</div>
-          <div class="stat-value">
+          <div class="stat-title text-secondary-content">Upload</div>
+          <div class="stat-value text-primary-content">
             {byteSize(traffic()?.up || 0).toString()}/s
           </div>
         </div>
         <div class="stat">
-          <div class="stat-title">Download</div>
-          <div class="stat-value">
+          <div class="stat-title text-secondary-content">Download</div>
+          <div class="stat-value text-primary-content">
             {byteSize(traffic()?.down || 0).toString()}/s
           </div>
         </div>
         <div class="stat">
-          <div class="stat-title">Upload Total</div>
-          <div class="stat-value">
+          <div class="stat-title text-secondary-content">Upload Total</div>
+          <div class="stat-value text-primary-content">
             {byteSize(connection()?.uploadTotal || 0).toString()}
           </div>
         </div>
         <div class="stat">
-          <div class="stat-title">Download Total</div>
-          <div class="stat-value">
+          <div class="stat-title text-secondary-content">Download Total</div>
+          <div class="stat-value text-primary-content">
             {byteSize(connection()?.downloadTotal || 0).toString()}
           </div>
         </div>
         <div class="stat">
-          <div class="stat-title">Active Connections</div>
-          <div class="stat-value">{connection()?.connections.length || 0}</div>
+          <div class="stat-title text-secondary-content">
+            Active Connections
+          </div>
+          <div class="stat-value text-primary-content">
+            {connection()?.connections.length || 0}
+          </div>
         </div>
         <div class="stat">
-          <div class="stat-title">Memory Usage</div>
-          <div class="stat-value">{byteSize(memory() || 0).toString()}</div>
+          <div class="stat-title text-secondary-content">Memory Usage</div>
+          <div class="stat-value text-primary-content">
+            {byteSize(memory() || 0).toString()}
+          </div>
         </div>
       </div>