From cd8d66f5ddd3e91820efd66d0c945b9030e1c25a Mon Sep 17 00:00:00 2001
From: aviv926 <51673860+aviv926@users.noreply.github.com>
Date: Wed, 22 Oct 2025 18:40:10 +0300
Subject: [PATCH] fix(web): show upload speed (#23138)

* remove unnecessary else

* Better fix

* fix: update text color

* chore: stylings

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../shared-components/upload-asset-preview.svelte | 15 ++++++++++-----
 .../shared-components/upload-panel.svelte         |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/shared-components/upload-asset-preview.svelte b/web/src/lib/components/shared-components/upload-asset-preview.svelte
index 43855a9e28..6a9549ab17 100644
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@@ -40,7 +40,11 @@
   };
 </script>
 
-<div in:fade={{ duration: 250 }} out:fade={{ duration: 100 }} class="flex flex-col rounded-lg text-xs p-2 gap-1">
+<div
+  in:fade={{ duration: 250 }}
+  out:fade={{ duration: 100 }}
+  class="flex flex-col rounded-xl text-xs p-2 gap-1 border border-gray-300 dark:border-subtle bg-primary/10"
+>
   <div class="flex items-center gap-2">
     <div class="flex items-center justify-center">
       {#if uploadAsset.state === UploadState.PENDING}
@@ -91,12 +95,13 @@
   </div>
 
   {#if uploadAsset.state === UploadState.STARTED}
-    <div class="text-black relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 dark:bg-gray-700">
-      <div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
-      <p class="absolute top-0 h-full w-full text-center text-primary text-[10px]">
-        {#if uploadAsset.message}
+    <div class="text-black relative mt-[5px] h-[18px] w-full rounded-md bg-gray-300 dark:bg-gray-700">
+      <div class="h-[18px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
+      <p class="absolute top-0.5 h-full w-full text-center text-white text-[10px]">
+        {#if uploadAsset.message === $t('asset_hashing')}
           {uploadAsset.message}
         {:else}
+          {uploadAsset.message}
           {uploadAsset.progress}% - {getByteUnitString(uploadAsset.speed || 0, $locale)}/s - {uploadAsset.eta}s
         {/if}
       </p>
diff --git a/web/src/lib/components/shared-components/upload-panel.svelte b/web/src/lib/components/shared-components/upload-panel.svelte
index 658d48ae6a..68b39e163d 100644
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/web/src/lib/components/shared-components/upload-panel.svelte
@@ -52,7 +52,7 @@
     {#if showDetail}
       <div
         in:scale={{ duration: 250, easing: quartInOut }}
-        class="w-[300px] rounded-lg border bg-gray-100 p-4 text-sm shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-white"
+        class="w-[325px] rounded-xl border border-gray-200 dark:border-subtle p-4 text-sm shadow-xs bg-subtle"
       >
         <div class="place-item-center mb-4 flex justify-between">
           <div class="flex flex-col gap-1">