From 5897b7b4f57335beadc3cc4aba9ff5f54bb5166b Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 30 Aug 2026 21:27:34 -0700
Subject: [PATCH] ui: highlight completed downloads with success styling
 (#17617)

Completed downloads now display with a success background and text color to make their completion status more visually obvious.
---
 .../navigate/browser-page-download-list.tsx    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/browser-pane/navigate/browser-page-download-list.tsx b/src/renderer/src/components/browser-pane/navigate/browser-page-download-list.tsx
index 6cc53cb1a61..c1607ab3803 100644
--- a/src/renderer/src/components/browser-pane/navigate/browser-page-download-list.tsx
+++ b/src/renderer/src/components/browser-pane/navigate/browser-page-download-list.tsx
@@ -22,7 +22,7 @@ export function BrowserPageDownloadList({
   }
 
   return (
-    <div className="border-b border-border/60 bg-background px-3 py-1.5">
+    <div className="border-b border-border/60 bg-background">
       <div className="scrollbar-sleek flex max-h-36 flex-col gap-1 overflow-y-auto">
         {visibleDownloads.map((download) => {
           const progressLabel = formatBrowserDownloadProgress(download)
@@ -47,10 +47,14 @@ export function BrowserPageDownloadList({
           return (
             <div
               key={download.downloadId}
-              className="flex min-h-8 items-center gap-2 text-xs text-foreground"
+              className={
+                download.status === 'completed'
+                  ? 'flex min-h-8 items-center gap-2 bg-status-success-background px-3 py-1.5 text-xs text-foreground'
+                  : 'flex min-h-8 items-center gap-2 px-3 py-1.5 text-xs text-foreground'
+              }
             >
               {download.status === 'completed' ? (
-                <CircleCheck className="size-3.5 shrink-0 text-muted-foreground" />
+                <CircleCheck className="size-3.5 shrink-0 text-status-success" />
               ) : download.status === 'failed' ? (
                 <OctagonX className="size-3.5 shrink-0 text-muted-foreground" />
               ) : (
@@ -58,7 +62,13 @@ export function BrowserPageDownloadList({
               )}
               <div className="min-w-0 flex-1">
                 <div className="truncate font-medium">{download.filename}</div>
-                <div className="truncate text-muted-foreground">
+                <div
+                  className={
+                    download.status === 'completed'
+                      ? 'truncate font-medium text-status-success'
+                      : 'truncate text-muted-foreground'
+                  }
+                >
                   {download.status === 'downloading'
                     ? translate(
                         'auto.components.browser.pane.BrowserPane.4300f38145',