Merge pull request #291 from caorushizi/dev-icon

fix: 🐛 optimize some styles
caorushizi · Sep 26, 2024 · 215d707 · 215d707
2 parents e7e5280 + 56870a1
commit 215d707
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/packages/renderer/src/components/DownloadTag.tsx b/packages/renderer/src/components/DownloadTag.tsx
@@ -17,7 +17,7 @@ export function DownloadTag({
   return (
     <div
       className={cn(
-        "flex flex-shrink-0 cursor-default flex-row items-center gap-0.5 rounded-2xl rounded-bl-lg py-0.5 pl-1 pr-1.5",
+        "flex flex-shrink-0 cursor-default flex-row items-center gap-0.5 rounded-2xl rounded-bl-lg py-0.5 pl-1.5 pr-1.5",
         className,
       )}
       style={{ background: color }}

diff --git a/packages/renderer/src/components/Loading.tsx b/packages/renderer/src/components/Loading.tsx
@@ -3,7 +3,7 @@ import { Spin } from "antd";
 
 const Loading: FC = () => {
   return (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex h-full w-full items-center justify-center bg-white dark:bg-[#1F2024]">
       <Spin />
     </div>
   );

diff --git a/packages/renderer/src/layout/AppSideBar.tsx b/packages/renderer/src/layout/AppSideBar.tsx
@@ -52,9 +52,10 @@ function AppMenuItem({
     <Link
       to={link}
       className={cn(
-        "flex h-10 flex-row items-center gap-3 rounded-lg bg-[#FAFCFF] px-3 text-sm text-[#636D7E] hover:bg-[#E1F0FF] dark:bg-[#2C2E33] dark:hover:bg-[#3B3C41]",
+        "flex h-10 flex-row items-center gap-3 rounded-lg bg-[#FAFCFF] px-3 text-sm text-[#636D7E] hover:bg-[#E1F0FF] dark:bg-[#2C2E33] dark:text-[rgba(255,255,255,0.85)] dark:hover:bg-[#3B3C41]",
         {
-          "bg-gradient-to-r from-[#127AF3] to-[#06D5FB] text-white": isActive,
+          "bg-gradient-to-r from-[#127AF3] to-[#06D5FB] text-white dark:text-white":
+            isActive,
         },
         className,
       )}

diff --git a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
@@ -246,14 +246,13 @@ export function DownloadItem({
   const renderDescription = (item: DownloadItem): ReactNode => {
     if (progress) {
       const { percent, speed } = progress;
+      const val = Math.round(Number(percent));
 
       return (
-        <div className="flex flex-row items-center gap-3 text-xs">
-          <Progress
-            percent={Math.round(Number(percent))}
-            strokeLinecap="butt"
-          />
-          <span className="flex-shrink-0">{speed}</span>
+        <div className="flex flex-row items-center gap-2 text-xs text-[rgba(0,0,0,0.88)] dark:text-[rgba(255,255,255,0.85)]">
+          <Progress percent={val} strokeLinecap="butt" showInfo={false} />
+          <div className="min-w-5 flex-shrink-0">{val}%</div>
+          <div className="min-w-20 flex-shrink-0">{speed}</div>
         </div>
       );
     }
@@ -306,7 +305,7 @@ export function DownloadItem({
         )}
         <div className="relative flex flex-row items-center justify-between">
           {renderTitle(item)}
-          <div className="flex flex-row items-center gap-3 rounded-md bg-white px-1.5 py-1.5 dark:bg-[#3B3F48]">
+          <div className="flex flex-row items-center gap-3 rounded-md bg-[#eff4fa] px-1.5 py-1.5 dark:bg-[#3B3F48]">
             {renderActionButtons(item)}
           </div>
         </div>

diff --git a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
@@ -220,7 +220,7 @@ export function DownloadList({
 
   if (data.length === 0) {
     return (
-      <div className="flex h-full flex-1 flex-row items-center justify-center rounded-lg bg-white">
+      <div className="flex h-full flex-1 flex-row items-center justify-center rounded-lg bg-white dark:bg-[#1F2024]">
         <Empty />
       </div>
     );