From dfa38ec3efc8cf919a46f6f6bb8bc1c98d144057 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 17 Sep 2025 16:40:11 -0400
Subject: [PATCH] fix(web): download panel (#22150)

---
 .../asset-viewer/download-panel.svelte        | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/download-panel.svelte b/web/src/lib/components/asset-viewer/download-panel.svelte
index 9fd2ff3511..00e8a1b5e2 100644
--- a/web/src/lib/components/asset-viewer/download-panel.svelte
+++ b/web/src/lib/components/asset-viewer/download-panel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { type DownloadProgress, downloadManager } from '$lib/managers/download-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
+  import { Heading, IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly, slide } from 'svelte/transition';
   import { getByteUnitString } from '../../utils/byte-units';
-  import { IconButton } from '@immich/ui';
 
   const abort = (downloadKey: string, download: DownloadProgress) => {
     download.abort?.abort();
@@ -16,41 +16,40 @@
 {#if downloadManager.isDownloading}
   <div
     transition:fly={{ x: -100, duration: 350 }}
-    class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border p-4 text-sm shadow-sm bg-light"
+    class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border dark:border-white/10 p-4 shadow-lg bg-subtle"
   >
-    <p class="uppercase mb-2 text-xs text-gray-500">{$t('downloading')}</p>
+    <Heading size="tiny">{$t('downloading')}</Heading>
     <div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">
       {#each Object.keys(downloadManager.assets) as downloadKey (downloadKey)}
         {@const download = downloadManager.assets[downloadKey]}
         <div class="mb-2 flex place-items-center" transition:slide>
           <div class="w-full pe-10">
             <div class="flex place-items-center justify-between gap-2 text-xs font-medium">
-              <p class="truncate">■ {downloadKey}</p>
+              <p class="truncate">{downloadKey}</p>
               {#if download.total}
                 <p class="whitespace-nowrap">{getByteUnitString(download.total, $locale)}</p>
               {/if}
             </div>
             <div class="flex place-items-center gap-2">
-              <div class="h-[7px] w-full rounded-full bg-gray-200">
-                <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`}></div>
+              <div class="h-[10px] w-full rounded-full bg-neutral-200 dark:bg-neutral-600">
+                <div class="h-[10px] rounded-full bg-primary" style={`width: ${download.percentage}%`}></div>
               </div>
               <p class="min-w-[4em] whitespace-nowrap text-right">
-                <span class="text-immich-primary">
+                <span class="text-primary">
                   {(download.percentage / 100).toLocaleString($locale, { style: 'percent' })}
                 </span>
               </p>
             </div>
           </div>
-          <div class="absolute end-2">
+          <div class="absolute end-4">
             <IconButton
-              variant="ghost"
-              shape="round"
               color="secondary"
+              variant="outline"
+              shape="round"
               aria-label={$t('close')}
               onclick={() => abort(downloadKey, download)}
-              size="large"
+              size="tiny"
               icon={mdiClose}
-              class="dark:text-immich-dark-gray"
             />
           </div>
         </div>