From f09e4de87e3309eae3bb830ebe14f36b14d6ad63 Mon Sep 17 00:00:00 2001
From: Aliothmoon <107878625+Aliothmoon@users.noreply.github.com>
Date: Sat, 19 Apr 2025 23:15:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=8B=E8=BD=BD=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E9=80=82=E9=85=8D=E6=B5=85=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20(#12410)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 docs/staticwebapp.config.json                 | 14 +++++------
 .../HomeActionsRelease/HomeActionsRelease.tsx | 25 ++++++++++---------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/docs/staticwebapp.config.json b/docs/staticwebapp.config.json
index f92d44cfd2..8569ee0e44 100644
--- a/docs/staticwebapp.config.json
+++ b/docs/staticwebapp.config.json
@@ -5,11 +5,11 @@
         }
     },
     "routes": [
-    {
-      "route": "/*.{jpg,gif,png,ico,svg,css,scss,js,webp,webmanifest}",
-      "headers": {
-        "cache-control": "public, max-age=604800, immutable"
-      }
-    }
-  ]
+        {
+            "route": "/*.{jpg,gif,png,ico,svg,css,scss,js,webp,webmanifest}",
+            "headers": {
+                "cache-control": "public, max-age=604800, immutable"
+            }
+        }
+    ]
 }
diff --git a/website/apps/web/src/components/home/HomeActionsRelease/HomeActionsRelease.tsx b/website/apps/web/src/components/home/HomeActionsRelease/HomeActionsRelease.tsx
index 3610d3d0b0..faeed3e48f 100644
--- a/website/apps/web/src/components/home/HomeActionsRelease/HomeActionsRelease.tsx
+++ b/website/apps/web/src/components/home/HomeActionsRelease/HomeActionsRelease.tsx
@@ -21,14 +21,14 @@ import {
 } from 'react'
 import { useMount } from 'react-use'
 
-import { downloadBlob } from '../../../utils/blob'
+import { downloadBlob } from '@/utils/blob'
 import {
   checkUrlConnectivity,
   checkUrlSpeed,
   download,
-} from '../../../utils/fetch'
-import { formatBytes } from '../../../utils/format'
-import sleep from '../../../utils/sleep'
+} from '@/utils/fetch'
+import { formatBytes } from '@/utils/format'
+import sleep from '@/utils/sleep'
 import {
   DetectionFailedSymbol,
   PLATFORMS,
@@ -60,17 +60,17 @@ const DataLoadRate: FC<{ loaded: number; total: number }> = ({
   return (
     <div className="flex flex-row items-center justify-center gap-2 font-mono">
       <div className="flex flex-col items-start justify-center gap-1">
-        <div className="text-sm">{percentage.toFixed(0)}%</div>
-        <div className="w-12 h-1 bg-white/10 rounded-full">
+        <div className="text-sm transition-colors duration-300">{percentage.toFixed(0)}%</div>
+        <div className={clsx("w-12 h-1 rounded-full", "dark:bg-white/10" , "bg-stone-800/10")}>
           <div
-            className="h-full rounded-full bg-white"
+            className={clsx("h-full rounded-full", 'dark:text-white', 'text-stone-800')}
             style={{ width: `${percentage}%` }}
           />
         </div>
       </div>
       <div className="flex flex-col items-end justify-center">
-        <div className="text-sm">{formatBytes(loaded, 1)}</div>
-        <div className="text-sm">{formatBytes(total, 1)}</div>
+        <div className="text-sm transition-colors duration-300">{formatBytes(loaded, 1)}</div>
+        <div className="text-sm transition-colors duration-300">{formatBytes(total, 1)}</div>
       </div>
     </div>
   )
@@ -90,7 +90,8 @@ export const DownloadState: FC<DownloadStateProps> = forwardRef<
   return (
     <motion.div
       className={clsx(
-        'flex py-6 px-3 flex-col items-center justify-center text-white font-normal',
+        'flex py-6 px-3 flex-col items-center justify-center font-normal transition-colors duration-300',
+        'dark:text-white', 'text-stone-800',
         className,
       )}
       {...{
@@ -115,8 +116,8 @@ export const DownloadState: FC<DownloadStateProps> = forwardRef<
       ref={ref}
     >
       <div className="flex items-center -ml-1">
-        <Icon className={iconClassName} icon={icon} fontSize="28px" />
-        <span className="ml-2">{title}</span>
+        <Icon className={clsx(iconClassName, "transition-colors duration-300")} icon={icon} fontSize="28px" />
+        <span className="ml-2 transition-colors duration-300">{title}</span>
       </div>
     </motion.div>
   )