From 78464a4ba3f1ea4113b0bcf319a18ad0d5c2a9d2 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 22 Jan 2025 16:44:59 -0500
Subject: [PATCH] refactor: ui icon buttons (#15531)

---
 web/package-lock.json                         |   8 +-
 web/package.json                              |   2 +-
 .../album-page/albums-controls.svelte         |  36 ++++--
 .../navigation-bar/navigation-bar.svelte      |  13 +-
 web/src/routes/(user)/people/+page.svelte     |  13 +-
 web/src/routes/(user)/sharing/+page.svelte    |  20 +--
 .../[[assetId=id]]/+page.svelte               |  12 +-
 .../[[assetId=id]]/+page.svelte               |  11 +-
 .../[[assetId=id]]/+page.svelte               |  19 +--
 web/src/routes/admin/jobs-status/+page.svelte |  19 +--
 .../admin/library-management/+page.svelte     |  22 ++--
 web/src/routes/admin/repair/+page.svelte      |  20 ++-
 .../routes/admin/system-settings/+page.svelte | 114 +++++++++---------
 13 files changed, 163 insertions(+), 146 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 88fa3671a1..cee710f14d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.14.1",
+        "@immich/ui": "^0.15.0",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1343,9 +1343,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.14.1.tgz",
-      "integrity": "sha512-s5HGT35Odu6PrjO49xJ1Kpe7v1K53iMV03tv6MePVIdIM9sZHA04+o0tJgMm2KqLPZrkU+jhKPSfSy0PqkoEyQ==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.15.0.tgz",
+      "integrity": "sha512-vGDNEOGj5Ma/BAIgj31M1roAVoEOVWws5lkgt1xPlIxSHk4pMhGRFMQaJaCsfXeX/nTRsQCd3gOk7Yo0XNrVfg==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/web/package.json b/web/package.json
index 0f88169ac0..8d2d22313a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -67,7 +67,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.14.1",
+    "@immich/ui": "^0.15.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",
diff --git a/web/src/lib/components/album-page/albums-controls.svelte b/web/src/lib/components/album-page/albums-controls.svelte
index 12b83a2b4c..b518c56b66 100644
--- a/web/src/lib/components/album-page/albums-controls.svelte
+++ b/web/src/lib/components/album-page/albums-controls.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import GroupTab from '$lib/components/elements/group-tab.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import SearchBar from '$lib/components/elements/search-bar.svelte';
   import {
     AlbumFilter,
@@ -129,8 +128,13 @@
 </div>
 
 <!-- Create Album -->
-<Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
-  <Icon path={mdiPlusBoxOutline} />
+<Button
+  leadingIcon={mdiPlusBoxOutline}
+  onclick={() => createAlbumAndRedirect()}
+  size="small"
+  variant="ghost"
+  color="secondary"
+>
   <p class="hidden md:block">{$t('create_album')}</p>
 </Button>
 
@@ -190,12 +194,24 @@
 {/if}
 
 <!-- Cover/List Display Toggle -->
-<Button onclick={() => handleChangeListMode()} size="small" variant="ghost" color="secondary">
-  {#if $albumViewSettings.view === AlbumViewMode.List}
-    <Icon path={mdiViewGridOutline} />
+{#if $albumViewSettings.view === AlbumViewMode.List}
+  <Button
+    leadingIcon={mdiViewGridOutline}
+    onclick={() => handleChangeListMode()}
+    size="small"
+    variant="ghost"
+    color="secondary"
+  >
     <Text class="hidden md:block">{$t('covers')}</Text>
-  {:else}
-    <Icon path={mdiFormatListBulletedSquare} size="18" />
+  </Button>
+{:else}
+  <Button
+    leadingIcon={mdiFormatListBulletedSquare}
+    onclick={() => handleChangeListMode()}
+    size="small"
+    variant="ghost"
+    color="secondary"
+  >
     <Text class="hidden md:block">{$t('list')}</Text>
-  {/if}
-</Button>
+  </Button>
+{/if}
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 193cc2ed43..ced82c7eeb 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -3,7 +3,6 @@
   import { clickOutside } from '$lib/actions/click-outside';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
@@ -99,11 +98,13 @@
         </div>
 
         {#if !page.url.pathname.includes('/admin') && showUploadButton}
-          <Button onclick={onUploadClick} class="hidden lg:block" variant="ghost" color="secondary">
-            <div class="flex gap-2">
-              <Icon path={mdiTrayArrowUp} size="1.5em" />
-              <span>{$t('upload')}</span>
-            </div>
+          <Button
+            leadingIcon={mdiTrayArrowUp}
+            onclick={onUploadClick}
+            class="hidden lg:flex"
+            variant="ghost"
+            color="secondary"
+            >{$t('upload')}
           </Button>
           <CircleIconButton
             onclick={onUploadClick}
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index c367010353..cdfd0045c6 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -30,7 +30,7 @@
     updatePerson,
     type PersonResponseDto,
   } from '@immich/sdk';
-  import { Button, Text } from '@immich/ui';
+  import { Button } from '@immich/ui';
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -392,10 +392,13 @@
             />
           </div>
         </div>
-        <Button onclick={() => (selectHidden = !selectHidden)} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiEyeOutline} />
-          <Text>{$t('show_and_hide_people')}</Text>
-        </Button>
+        <Button
+          leadingIcon={mdiEyeOutline}
+          onclick={() => (selectHidden = !selectHidden)}
+          size="small"
+          variant="ghost"
+          color="secondary">{$t('show_and_hide_people')}</Button
+        >
       </div>
     {/if}
   {/snippet}
diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
index 33282761aa..e3d6ac1ced 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import empty2Url from '$lib/assets/empty-2.svg';
   import Albums from '$lib/components/album-page/albums-list.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
@@ -15,7 +14,7 @@
     type AlbumViewSettings,
   } from '$lib/stores/preferences.store';
   import { createAlbumAndRedirect } from '$lib/utils/album-utils';
-  import { Button, HStack } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -40,14 +39,17 @@
 <UserPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <HStack gap={0}>
-      <Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiPlusBoxOutline} class="shrink-0" />
-        <span class="leading-none max-sm:text-xs">{$t('create_album')}</span>
+      <Button
+        leadingIcon={mdiPlusBoxOutline}
+        onclick={() => createAlbumAndRedirect()}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('create_album')}</Text>
       </Button>
-
-      <Button href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiLink} class="shrink-0" />
-        <span class="leading-none max-sm:text-xs">{$t('shared_links')}</span>
+      <Button leadingIcon={mdiLink} href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('shared_links')}</Text>
       </Button>
     </HStack>
   {/snippet}
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 742e386722..4c0e90e97c 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -2,7 +2,6 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@@ -169,18 +168,15 @@
 
   {#snippet buttons()}
     <HStack>
-      <Button onclick={handleCreate} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiPlus} />
-        <p class="hidden md:block">{$t('create_tag')}</p>
+      <Button leadingIcon={mdiPlus} onclick={handleCreate} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('create_tag')}</Text>
       </Button>
 
       {#if pathSegments.length > 0 && tag}
-        <Button onclick={handleEdit} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiPencil} size="18" />
+        <Button leadingIcon={mdiPencil} onclick={handleEdit} size="small" variant="ghost" color="secondary">
           <Text class="hidden md:block">{$t('edit_tag')}</Text>
         </Button>
-        <Button onclick={handleDelete} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiTrashCanOutline} />
+        <Button leadingIcon={mdiTrashCanOutline} onclick={handleDelete} size="small" variant="ghost" color="secondary">
           <Text class="hidden md:block">{$t('delete_tag')}</Text>
         </Button>
       {/if}
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 031d2a6268..5246f3b797 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import empty3Url from '$lib/assets/empty-3.svg';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
@@ -21,7 +20,7 @@
   import { handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { emptyTrash, restoreTrash } from '@immich/sdk';
-  import { Button, HStack } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -115,24 +114,24 @@
     {#snippet buttons()}
       <HStack gap={0}>
         <Button
+          leadingIcon={mdiHistory}
           onclick={handleRestoreTrash}
           disabled={assetInteraction.selectionActive}
           variant="ghost"
           color="secondary"
           size="small"
         >
-          <Icon path={mdiHistory} />
-          {$t('restore_all')}
+          <Text class="hidden md:block">{$t('restore_all')}</Text>
         </Button>
         <Button
+          leadingIcon={mdiDeleteForeverOutline}
           onclick={() => handleEmptyTrash()}
           disabled={assetInteraction.selectionActive}
           variant="ghost"
           color="secondary"
           size="small"
         >
-          <Icon path={mdiDeleteForeverOutline} />
-          {$t('empty_trash')}
+          <Text class="hidden md:block">{$t('empty_trash')}</Text>
         </Button>
       </HStack>
     {/snippet}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 8515d163ab..4627d981b6 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
@@ -17,7 +16,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import type { AssetResponseDto } from '@immich/sdk';
   import { deleteAssets, updateAssets } from '@immich/sdk';
-  import { Button, HStack, IconButton } from '@immich/ui';
+  import { Button, HStack, IconButton, Text } from '@immich/ui';
   import { mdiCheckOutline, mdiInformationOutline, mdiKeyboard, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -164,18 +163,24 @@
   {#snippet buttons()}
     <HStack gap={0}>
       <Button
+        leadingIcon={mdiTrashCanOutline}
         onclick={() => handleDeduplicateAll()}
         disabled={!hasDuplicates}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiTrashCanOutline} />
-        {$t('deduplicate_all')}
+        <Text class="hidden md:block">{$t('deduplicate_all')}</Text>
       </Button>
-      <Button onclick={() => handleKeepAll()} disabled={!hasDuplicates} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiCheckOutline} />
-        {$t('keep_all')}
+      <Button
+        leadingIcon={mdiCheckOutline}
+        onclick={() => handleKeepAll()}
+        disabled={!hasDuplicates}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('keep_all')}</Text>
       </Button>
       <IconButton
         shape="round"
diff --git a/web/src/routes/admin/jobs-status/+page.svelte b/web/src/routes/admin/jobs-status/+page.svelte
index e3657f805a..6ab5cd33be 100644
--- a/web/src/routes/admin/jobs-status/+page.svelte
+++ b/web/src/routes/admin/jobs-status/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
@@ -12,7 +11,7 @@
   import { asyncTimeout } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createJob, getAllJobsStatus, ManualJobName, type AllJobStatusResponseDto } from '@immich/sdk';
-  import { Button, HStack } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiCog, mdiPlus } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -72,13 +71,17 @@
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
     <HStack gap={0}>
-      <Button onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiPlus} size="18" />
-        {$t('admin.create_job')}
+      <Button leadingIcon={mdiPlus} onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('admin.create_job')}</Text>
       </Button>
-      <Button href="{AppRoute.ADMIN_SETTINGS}?isOpen=job" size="small" variant="ghost" color="secondary">
-        <Icon path={mdiCog} size="18" />
-        {$t('admin.manage_concurrency')}
+      <Button
+        leadingIcon={mdiCog}
+        href="{AppRoute.ADMIN_SETTINGS}?isOpen=job"
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
       </Button>
     </HStack>
   {/snippet}
diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index eb3f22878e..34a42446cd 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -29,7 +29,7 @@
     type LibraryStatsResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Text } from '@immich/ui';
   import { mdiDatabase, mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -220,18 +220,18 @@
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
       {#if libraries.length > 0}
-        <Button onclick={handleScanAll} size="small" variant="ghost" color="secondary">
-          <div class="flex gap-1 text-sm">
-            <Icon path={mdiSync} size="18" />
-            <span>{$t('scan_all_libraries')}</span>
-          </div>
+        <Button leadingIcon={mdiSync} onclick={handleScanAll} size="small" variant="ghost" color="secondary">
+          <Text class="hidden md:block">{$t('scan_all_libraries')}</Text>
         </Button>
       {/if}
-      <Button onclick={() => (toCreateLibrary = true)} size="small" variant="ghost" color="secondary">
-        <div class="flex gap-1 text-sm">
-          <Icon path={mdiPlusBoxOutline} size="18" />
-          <span>{$t('create_library')}</span>
-        </div>
+      <Button
+        leadingIcon={mdiPlusBoxOutline}
+        onclick={() => (toCreateLibrary = true)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('create_library')}</Text>
       </Button>
     </div>
   {/snippet}
diff --git a/web/src/routes/admin/repair/+page.svelte b/web/src/routes/admin/repair/+page.svelte
index a6ffd52322..17896d2e51 100644
--- a/web/src/routes/admin/repair/+page.svelte
+++ b/web/src/routes/admin/repair/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import empty4Url from '$lib/assets/empty-4.svg';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
@@ -14,7 +13,7 @@
   import { downloadBlob } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { fixAuditFiles, getAuditFiles, getFileChecksums, type FileReportItemDto } from '@immich/sdk';
-  import { Button, HStack } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiCheckAll, mdiContentCopy, mdiDownload, mdiRefresh, mdiWrench } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -187,38 +186,37 @@
   {#snippet buttons()}
     <HStack gap={0}>
       <Button
+        leadingIcon={mdiWrench}
         onclick={() => handleRepair()}
         disabled={matches.length === 0 || repairing}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiWrench} />
-        {$t('admin.repair_all')}
+        <Text class="hidden md:block">{$t('admin.repair_all')}</Text>
       </Button>
       <Button
+        leadingIcon={mdiCheckAll}
         onclick={() => handleCheckAll()}
         disabled={extras.length === 0 || checking}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiCheckAll} />
-        {$t('admin.check_all')}
+        <Text class="hidden md:block">{$t('admin.check_all')}</Text>
       </Button>
       <Button
+        leadingIcon={mdiDownload}
         onclick={() => handleDownload()}
         disabled={extras.length + orphans.length === 0}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiDownload} />
-        {$t('export')}
+        <Text class="hidden md:block">{$t('export')}</Text>
       </Button>
-      <Button onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiRefresh} />
-        {$t('refresh')}
+      <Button leadingIcon={mdiRefresh} onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('refresh')}</Text>
       </Button>
     </HStack>
   {/snippet}
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index c54aeba631..6fe4275303 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -17,8 +17,7 @@
   import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
   import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
   import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
-  import { Button, HStack } from '@immich/ui';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import { Button, Text, HStack, Alert } from '@immich/ui';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@@ -29,7 +28,6 @@
   import { downloadBlob } from '$lib/utils/asset-utils';
   import {
     mdiAccountOutline,
-    mdiAlert,
     mdiBackupRestore,
     mdiBellOutline,
     mdiBookshelf,
@@ -243,68 +241,64 @@
 
 <input bind:this={inputElement} type="file" accept=".json" style="display: none" onchange={uploadConfig} />
 
-<div class="h-svh flex flex-col overflow-hidden">
-  {#if $featureFlags.configFile}
-    <div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800">
-      <Icon path={mdiAlert} class="text-yellow-400" size={18} />
-      <h2 class="text-md text-immich-primary dark:text-immich-dark-primary">
-        {$t('admin.config_set_by_file')}
-      </h2>
-    </div>
-  {/if}
-
-  <UserPageLayout title={data.meta.title} admin>
-    {#snippet buttons()}
-      <HStack gap={1}>
-        <div class="hidden lg:block">
-          <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-        </div>
+<UserPageLayout title={data.meta.title} admin>
+  {#snippet buttons()}
+    <HStack gap={1}>
+      <div class="hidden lg:block">
+        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+      </div>
+      <Button
+        leadingIcon={mdiContentCopy}
+        onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('copy_to_clipboard')}</Text>
+      </Button>
+      <Button leadingIcon={mdiDownload} onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('export_as_json')}</Text>
+      </Button>
+      {#if !$featureFlags.configFile}
         <Button
-          onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
+          leadingIcon={mdiUpload}
+          onclick={() => inputElement?.click()}
           size="small"
           variant="ghost"
           color="secondary"
         >
-          <Icon path={mdiContentCopy} />
-          {$t('copy_to_clipboard')}
+          <Text class="hidden md:block">{$t('import_from_json')}</Text>
         </Button>
-        <Button onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiDownload} />
-          {$t('export_as_json')}
-        </Button>
-        {#if !$featureFlags.configFile}
-          <Button onclick={() => inputElement?.click()} size="small" variant="ghost" color="secondary">
-            <Icon path={mdiUpload} />
-            {$t('import_from_json')}
-          </Button>
-        {/if}
-      </HStack>
-    {/snippet}
+      {/if}
+    </HStack>
+  {/snippet}
 
-    <AdminSettings bind:config bind:this={adminSettingElement}>
-      {#snippet children({ savedConfig, defaultConfig })}
-        <section id="setting-content" class="flex place-content-center sm:mx-4">
-          <section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
-            <div class="block lg:hidden">
-              <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-            </div>
-            <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-              {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
-                <SettingAccordion {title} {subtitle} {key} {icon}>
-                  <Component
-                    onSave={(config) => adminSettingElement?.handleSave(config)}
-                    onReset={(options) => adminSettingElement?.handleReset(options)}
-                    disabled={$featureFlags.configFile}
-                    bind:config
-                    {defaultConfig}
-                    {savedConfig}
-                  />
-                </SettingAccordion>
-              {/each}
-            </SettingAccordionState>
-          </section>
+  <AdminSettings bind:config bind:this={adminSettingElement}>
+    {#snippet children({ savedConfig, defaultConfig })}
+      <section id="setting-content" class="flex place-content-center sm:mx-4">
+        <section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
+          {#if $featureFlags.configFile}
+            <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
+          {/if}
+          <div class="block lg:hidden">
+            <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+          </div>
+          <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+            {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
+              <SettingAccordion {title} {subtitle} {key} {icon}>
+                <Component
+                  onSave={(config) => adminSettingElement?.handleSave(config)}
+                  onReset={(options) => adminSettingElement?.handleReset(options)}
+                  disabled={$featureFlags.configFile}
+                  bind:config
+                  {defaultConfig}
+                  {savedConfig}
+                />
+              </SettingAccordion>
+            {/each}
+          </SettingAccordionState>
         </section>
-      {/snippet}
-    </AdminSettings>
-  </UserPageLayout>
-</div>
+      </section>
+    {/snippet}
+  </AdminSettings>
+</UserPageLayout>