From 54960157c0268041b3792003328bbb175e4e1930 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 12 Aug 2025 11:08:31 -0500
Subject: [PATCH] chore: backup info card styling tweak (#20799)

* chore: backup info card styling tweak

* pr feedback
---
 .../onboarding-page/onboarding-backup.svelte  | 87 ++++++++++---------
 .../onboarding-page/onboarding-card.svelte    |  2 +-
 web/src/routes/auth/onboarding/+page.svelte   |  6 +-
 3 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/web/src/lib/components/onboarding-page/onboarding-backup.svelte b/web/src/lib/components/onboarding-page/onboarding-backup.svelte
index 1ae176e1ad..2a2877fa8d 100644
--- a/web/src/lib/components/onboarding-page/onboarding-backup.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-backup.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import { Heading, HStack, Stack } from '@immich/ui';
-  import { mdiAlert } from '@mdi/js';
+  import { Stack } from '@immich/ui';
+  import { mdiAlertCircleOutline } from '@mdi/js';
+  import type { Translations } from 'svelte-i18n';
+
+  const messageKeys = [
+    'admin.backup_onboarding_3_description',
+    'admin.backup_onboarding_2_description',
+    'admin.backup_onboarding_1_description',
+  ];
 </script>
 
 <div class="flex flex-col">
   <Stack gap={2}>
-    <HStack gap={4}>
-      <Icon path={mdiAlert} size="96" class="text-warning" />
-      <p class="mb-2">
+    <div class="flex items-start gap-4 p-6 my-10 bg-gray-100 dark:bg-gray-800/40 rounded-xl border border-gray-700/50">
+      <Icon path={mdiAlertCircleOutline} size="36" class="text-warning flex-shrink-0 mt-0.5" />
+      <div class="text-gray-800 dark:text-gray-300 leading-relaxed">
         <FormatMessage key="admin.backup_onboarding_description">
           {#snippet children({ message })}
             <a
@@ -23,40 +29,41 @@
             </a>
           {/snippet}
         </FormatMessage>
+      </div>
+    </div>
+
+    <div class="space-y-1">
+      <h2 class="mb-6"><FormatMessage key="admin.backup_onboarding_parts_title" /></h2>
+
+      <div class="space-y-6">
+        {#each messageKeys as keyString, index (index)}
+          <div class="flex items-start gap-6">
+            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center">
+              <span class="text-light text-xl font-semibold">{3 - index}</span>
+            </div>
+            <div class="leading-relaxed pt-2">
+              <FormatMessage key={keyString as Translations} />
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <div class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mt-4">
+      <p>
+        <FormatMessage key="admin.backup_onboarding_footer">
+          {#snippet children({ message })}
+            <a
+              href="https://immich.app/docs/administration/backup-and-restore/"
+              class="underline"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {message}
+            </a>
+          {/snippet}
+        </FormatMessage>
       </p>
-    </HStack>
-
-    <p class="text-lg font-semibold">
-      <FormatBoldMessage key="admin.backup_onboarding_parts_title"></FormatBoldMessage>
-    </p>
-
-    <Stack class="bg-gray-100 dark:bg-gray-800 rounded-xl p-4" gap={4}>
-      <HStack gap={6}>
-        <Heading tag="h1" size="title" color="primary">3</Heading>
-        <FormatMessage key="admin.backup_onboarding_3_description" />
-      </HStack>
-      <HStack gap={6}>
-        <Heading tag="h1" size="title" color="primary">2</Heading>
-        <FormatMessage key="admin.backup_onboarding_2_description" />
-      </HStack>
-      <HStack gap={6} class="ml-2">
-        <Heading tag="h1" size="title" color="primary">1</Heading>
-        <FormatMessage key="admin.backup_onboarding_1_description" />
-      </HStack>
-    </Stack>
-    <p>
-      <FormatMessage key="admin.backup_onboarding_footer">
-        {#snippet children({ message })}
-          <a
-            href="https://immich.app/docs/administration/backup-and-restore/"
-            class="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {message}
-          </a>
-        {/snippet}
-      </FormatMessage>
-    </p>
+    </div>
   </Stack>
 </div>
diff --git a/web/src/lib/components/onboarding-page/onboarding-card.svelte b/web/src/lib/components/onboarding-page/onboarding-card.svelte
index 4a373fc310..fd87464bd5 100644
--- a/web/src/lib/components/onboarding-page/onboarding-card.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-card.svelte
@@ -31,7 +31,7 @@
 
 <div
   id="onboarding-card"
-  class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-8 dark:border-immich-dark-gray dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
+  class="flex w-full max-w-4xl flex-col gap-4 rounded-3xl border-2 border-gray-500 px-8 py-8 dark:border-gray-700 dark:bg-immich-dark-gray text-black dark:text-immich-dark-fg bg-gray-50"
   in:fade={{ duration: 250 }}
 >
   {#if title || icon}
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index 679920c971..44f3792a5b 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import OnboardingBackup from '$lib/components/onboarding-page/onboarding-backup.svelte';
   import OnboardingCard from '$lib/components/onboarding-page/onboarding-card.svelte';
   import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
   import OnboardingLocale from '$lib/components/onboarding-page/onboarding-language.svelte';
@@ -8,13 +9,12 @@
   import OnboardingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
   import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
   import OnboardingUserPrivacy from '$lib/components/onboarding-page/onboarding-user-privacy.svelte';
-  import OnboardingBackup from '$lib/components/onboarding-page/onboarding-backup.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { OnboardingRole } from '$lib/models/onboarding-role';
   import { retrieveServerConfig, retrieveSystemConfig, serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { setUserOnboarding, updateAdminOnboarding } from '@immich/sdk';
-  import { mdiCloudUpload, mdiHarddisk, mdiIncognito, mdiThemeLightDark, mdiTranslate } from '@mdi/js';
+  import { mdiCloudCheckOutline, mdiHarddisk, mdiIncognito, mdiThemeLightDark, mdiTranslate } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -74,7 +74,7 @@
       component: OnboardingBackup,
       role: OnboardingRole.SERVER,
       title: $t('admin.backup_onboarding_title'),
-      icon: mdiCloudUpload,
+      icon: mdiCloudCheckOutline,
     },
   ]);