From a3698c2f3c163d8072b986d276c988293bd4d1f9 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 2 Dec 2024 03:05:48 +0800
Subject: [PATCH] style: better cycle transfer card

---
 src/components/CycleTransferStatsClient.tsx | 26 ++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/CycleTransferStatsClient.tsx b/src/components/CycleTransferStatsClient.tsx
index cbc9f31..541dc3b 100644
--- a/src/components/CycleTransferStatsClient.tsx
+++ b/src/components/CycleTransferStatsClient.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { cn } from "@/lib/utils";
 import { formatBytes } from "@/lib/format";
 import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
+import { CircleStackIcon } from "@heroicons/react/24/outline";
 
 interface CycleTransferStatsClientProps {
   name: string;
@@ -35,7 +36,7 @@ export const CycleTransferStatsClient: React.FC<
             return (
               <div key={serverId} className="space-y-2">
                 <section className="flex justify-between items-center">
-                  <div className=" bg-blue-600 w-fit text-white px-1 py-0.5 rounded text-[10px]">
+                  <div className=" bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
                     {name}
                   </div>
                   <span className="text-stone-600 dark:text-stone-400 text-xs">
@@ -44,7 +45,10 @@ export const CycleTransferStatsClient: React.FC<
                   </span>
                 </section>
                 <section className="flex justify-between items-center">
-                  <span className="text-sm font-semibold">{serverName}</span>
+                  <div className="flex gap-1 items-center">
+                    <CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
+                    <span className="text-sm font-semibold">{serverName}</span>
+                  </div>
                   <div className="flex items-center gap-1">
                     <p className="text-xs text-end w-10 font-medium">
                       {progress.toFixed(0)}%
@@ -54,24 +58,30 @@ export const CycleTransferStatsClient: React.FC<
                       max={100}
                       min={0}
                       value={progress}
-                      primaryColor="hsl(var(--chart-1))"
+                      primaryColor="hsl(var(--chart-5))"
                     />
                   </div>
                 </section>
-                <div className="w-full bg-neutral-200 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5">
+                <div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5">
                   <div
-                    className="bg-blue-600 h-2.5 rounded-full"
+                    className="bg-green-600 h-2.5 rounded-full"
                     style={{ width: `${Math.min(progress, 100)}%` }}
                   />
                 </div>
 
+                <section className="flex justify-between items-center">
+                  <span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
+                    {formatBytes(transfer)} used
+                  </span>
+                  <span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
+                    {formatBytes(max)} total
+                  </span>
+                </section>
+
                 <section className="flex justify-between items-center">
                   <div className="text-xs text-stone-500 dark:text-stone-400">
                     Next update: {new Date(nextUpdate).toLocaleString()}
                   </div>
-                  <span className="text-xs text-stone-600 dark:text-stone-400 font-semibold">
-                    {formatBytes(transfer)} / {formatBytes(max)}
-                  </span>
                 </section>
               </div>
             );