From 0a62ec7e2945c622890e2509ba59ea8fdb898bf0 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Wed, 14 Jan 2026 16:52:33 -0600
Subject: [PATCH] chore: album option modal styling (#25269)

* chore: album option modal styling

* header action button color
---
 web/src/lib/modals/AlbumAddUsersModal.svelte | 15 +++++++---
 web/src/lib/modals/AlbumOptionsModal.svelte  | 31 +++++++++++---------
 web/src/lib/services/album.service.ts        |  3 ++
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/web/src/lib/modals/AlbumAddUsersModal.svelte b/web/src/lib/modals/AlbumAddUsersModal.svelte
index a7e976278b..724317ac47 100644
--- a/web/src/lib/modals/AlbumAddUsersModal.svelte
+++ b/web/src/lib/modals/AlbumAddUsersModal.svelte
@@ -39,18 +39,25 @@
   });
 </script>
 
-<FormModal title={$t('users')} submitText={$t('add')} {onSubmit} disabled={selectedUsers.size === 0} {onClose}>
+<FormModal
+  title={$t('users')}
+  submitText={$t('add')}
+  cancelText={$t('back')}
+  {onSubmit}
+  disabled={selectedUsers.size === 0}
+  {onClose}
+>
   <Stack>
     {#each filteredUsers as user (user.id)}
       <ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}>
         <UserAvatar {user} size="md" />
         <div class="text-start grow">
-          <Text>{user.name}</Text>
-          <Text size="small">{user.email}</Text>
+          <Text fontWeight="medium">{user.name}</Text>
+          <Text size="tiny" color="muted">{user.email}</Text>
         </div>
       </ListButton>
     {:else}
-      <Text>{$t('album_share_no_users')}</Text>
+      <Text class="py-6">{$t('album_share_no_users')}</Text>
     {/each}
   </Stack>
 </FormModal>
diff --git a/web/src/lib/modals/AlbumOptionsModal.svelte b/web/src/lib/modals/AlbumOptionsModal.svelte
index cb294227f4..0cc119347b 100644
--- a/web/src/lib/modals/AlbumOptionsModal.svelte
+++ b/web/src/lib/modals/AlbumOptionsModal.svelte
@@ -19,7 +19,7 @@
     type SharedLinkResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Field, Heading, HStack, Modal, ModalBody, Select, Stack, Switch, Text } from '@immich/ui';
+  import { Field, HStack, Modal, ModalBody, Select, Stack, Switch, Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -92,8 +92,8 @@
   <ModalBody>
     <Stack gap={6}>
       <div>
-        <Heading size="tiny" class="mb-2">{$t('settings')}</Heading>
-        <div class="grid gap-y-2 ps-2">
+        <Text size="medium" fontWeight="semi-bold">{$t('settings')}</Text>
+        <div class="grid gap-y-3 ps-2 mt-2">
           {#if album.order}
             <Field label={$t('display_order')}>
               <Select
@@ -111,17 +111,18 @@
           </Field>
         </div>
       </div>
+
       <div>
         <HStack fullWidth class="justify-between mb-2">
-          <Heading size="tiny">{$t('people')}</Heading>
+          <Text size="medium" fontWeight="semi-bold">{$t('people')}</Text>
           <HeaderActionButton action={AddUsers} />
         </HStack>
         <div class="ps-2">
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 mb-2">
             <div>
               <UserAvatar user={$user} size="md" />
             </div>
-            <div class="w-full">{$user.name}</div>
+            <Text class="w-full" size="small">{$user.name}</Text>
             <Field disabled class="w-32 shrink-0">
               <Select data={[{ label: $t('owner'), value: 'owner' }]} value={{ label: $t('owner'), value: 'owner' }} />
             </Field>
@@ -133,7 +134,7 @@
                 <div>
                   <UserAvatar {user} size="md" />
                 </div>
-                <Text>{user.name}</Text>
+                <Text size="small">{user.name}</Text>
               </div>
               <Field class="w-32">
                 <Select
@@ -146,17 +147,19 @@
           {/each}
         </div>
       </div>
-      <div>
+      <div class="mb-4">
         <HStack class="justify-between mb-2">
-          <Heading size="tiny">{$t('shared_links')}</Heading>
+          <Text size="medium" fontWeight="semi-bold">{$t('shared_links')}</Text>
           <HeaderActionButton action={CreateSharedLink} />
         </HStack>
 
-        <Stack gap={4}>
-          {#each sharedLinks as sharedLink (sharedLink.id)}
-            <AlbumSharedLink {album} {sharedLink} />
-          {/each}
-        </Stack>
+        <div class="ps-2">
+          <Stack gap={4}>
+            {#each sharedLinks as sharedLink (sharedLink.id)}
+              <AlbumSharedLink {album} {sharedLink} />
+            {/each}
+          </Stack>
+        </div>
       </div>
     </Stack>
   </ModalBody>
diff --git a/web/src/lib/services/album.service.ts b/web/src/lib/services/album.service.ts
index 670c7f8fd2..076676c30d 100644
--- a/web/src/lib/services/album.service.ts
+++ b/web/src/lib/services/album.service.ts
@@ -43,6 +43,7 @@ export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) =
     title: $t('invite_people'),
     type: $t('command'),
     icon: mdiPlus,
+    color: 'primary',
     onAction: () => modalManager.show(AlbumAddUsersModal, { album }),
   };
 
@@ -50,6 +51,7 @@ export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) =
     title: $t('create_link'),
     type: $t('command'),
     icon: mdiLink,
+    color: 'primary',
     onAction: () => modalManager.show(SharedLinkCreateModal, { albumId: album.id }),
   };
 
@@ -60,6 +62,7 @@ export const getAlbumAssetsActions = ($t: MessageFormatter, album: AlbumResponse
   const AddAssets: ActionItem = {
     title: $t('add_assets'),
     type: $t('command'),
+    color: 'primary',
     icon: mdiPlusBoxOutline,
     $if: () => assets.length > 0,
     onAction: () => addAssets(album, assets),