fix: immich ui toggles and switches (#16834)

* fix: immich ui toggles and switches

* Update web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

Co-authored-by: Alex <alex.tran1502@gmail.com>

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

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.17.0",
+        "@immich/ui": "^0.17.3",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -87,7 +87,7 @@
         "@oazapfts/runtime": "^1.0.2"
       },
       "devDependencies": {
-        "@types/node": "^22.13.5",
+        "@types/node": "^22.13.9",
         "typescript": "^5.3.3"
       }
     },
@@ -1322,9 +1322,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.17.1",
+      "version": "0.17.3",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.17.3.tgz",
-      "integrity": "sha512-VB8a4t09paza6QoUnGtOsFG/XcjBfRqSiPsG2eUKRIavlpBYuNB5INZXV/207EfWX9TVnQND7ZitdTi39bZDvg==",
+      "integrity": "sha512-oZ8lJCa/bC+HQYxi4Qi7syW4jWpyyGM4Mue55cvXCECj+292Mu4aOC6oDt7617vMPF7kPblE2A7CpGqJxy5T8g==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

web/package.json

@@ -68,7 +68,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.17.0",
+    "@immich/ui": "^0.17.3",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/lib/components/forms/create-user-form.svelte

@@ -91,7 +91,7 @@
 
       {#if $featureFlags.email}
         <Field label={$t('admin.send_welcome_email')}>
-          <Switch id="send-welcome-email" bind:checked={notify} class="flex justify-between text-sm" />
+          <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
         </Field>
       {/if}
 
@@ -105,7 +105,7 @@
       </Field>
 
       <Field label={$t('admin.require_password_change_on_login')}>
-        <Switch id="require-password-change" bind:checked={shouldChangePassword} class="flex justify-between text-sm" />
+        <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm" />
       </Field>
 
       <Field label={$t('name')} required>

web/src/lib/components/map-page/map-settings-modal.svelte

@@ -29,19 +29,19 @@
   <FullScreenModal title={$t('map_settings')} {onClose}>
     <Stack gap={4}>
       <Field label={$t('allow_dark_mode')}>
-        <Switch bind:checked={settings.allowDarkMode} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.allowDarkMode} />
       </Field>
       <Field label={$t('only_favorites')}>
-        <Switch bind:checked={settings.onlyFavorites} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.onlyFavorites} />
       </Field>
       <Field label={$t('include_archived')}>
-        <Switch bind:checked={settings.includeArchived} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.includeArchived} />
       </Field>
       <Field label={$t('include_shared_partner_assets')}>
-        <Switch bind:checked={settings.withPartners} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.withPartners} />
       </Field>
       <Field label={$t('include_shared_albums')}>
-        <Switch bind:checked={settings.withSharedAlbums} class="flex justify-between items-center text-sm" />
+        <Switch bind:checked={settings.withSharedAlbums} />
       </Field>
 
       {#if customDateRange}

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -503,12 +503,11 @@
               class:opacity-0={galleryInView}
               class:opacity-100={!galleryInView}
             >
-              <div class="flex">
+              <div class="flex items-center">
                 <IconButton
                   icon={isSaved ? mdiHeart : mdiHeartOutline}
                   shape="round"
                   variant="ghost"
-                  size="giant"
                   color="secondary"
                   aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
                   onclick={() => handleSaveMemory(current)}
@@ -524,9 +523,11 @@
                 /> -->
                 <ButtonContextMenu
                   icon={mdiDotsVertical}
+                  padding="3"
                   title={$t('menu')}
                   onclick={() => handleAction('pause')}
                   direction="left"
+                  size="20"
                   align="bottom-right"
                   class="text-white dark:text-white"
                 >
@@ -548,7 +549,6 @@
                   color="secondary"
                   variant="ghost"
                   shape="round"
-                  size="giant"
                   class="text-white dark:text-white"
                 />
               </div>

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -256,14 +256,13 @@
           <QRCode value={sharedLink} width={modalWidth} />
         </div>
       </div>
-      <HStack class="w-full p-3">
+      <HStack class="w-full pt-3" gap={1}>
         <Input bind:value={sharedLink} disabled class="flex flex-row" />
         <div>
           <IconButton
             variant="ghost"
             shape="round"
             color="secondary"
-            size="large"
             icon={mdiContentCopy}
             onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
             aria-label={$t('copy_link_to_clipboard')}

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
   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 HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
@@ -68,14 +67,40 @@
 
       <section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
         {#if $featureFlags.search}
-          <CircleIconButton
+          <IconButton
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            size="large"
+            icon={mdiMagnify}
             href={AppRoute.SEARCH}
             id="search-button"
             class="sm:hidden"
             title={$t('go_to_search')}
-            icon={mdiMagnify}
+            aria-label={$t('go_to_search')}
-            padding="2"
+          />
-            onclick={() => {}}
+        {/if}
+
+        {#if !page.url.pathname.includes('/admin') && showUploadButton}
+          <Button
+            leadingIcon={mdiTrayArrowUp}
+            onclick={onUploadClick}
+            class="hidden lg:flex"
+            variant="ghost"
+            size="medium"
+            color="secondary"
+            >{$t('upload')}
+          </Button>
+          <IconButton
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            size="large"
+            onclick={onUploadClick}
+            title={$t('upload')}
+            aria-label={$t('upload')}
+            icon={mdiTrayArrowUp}
+            class="lg:hidden"
           />
         {/if}
 
@@ -90,7 +115,7 @@
             shape="round"
             color="secondary"
             variant="ghost"
-            size="giant"
+            size="large"
             title={$t('support_and_feedback')}
             icon={mdiHelpCircleOutline}
             onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
@@ -98,24 +123,6 @@
           />
         </div>
 
-        {#if !page.url.pathname.includes('/admin') && showUploadButton}
-          <Button
-            leadingIcon={mdiTrayArrowUp}
-            onclick={onUploadClick}
-            class="hidden lg:flex"
-            variant="ghost"
-            color="secondary"
-            >{$t('upload')}
-          </Button>
-          <CircleIconButton
-            onclick={onUploadClick}
-            title={$t('upload')}
-            icon={mdiTrayArrowUp}
-            class="lg:hidden"
-            padding="2"
-          />
-        {/if}
-
         <div
           use:clickOutside={{
             onOutclick: () => (shouldShowAccountInfoPanel = false),

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -186,7 +186,6 @@
         shape="round"
         variant="ghost"
         color="secondary"
-        size="large"
         icon={mdiKeyboard}
         title={$t('show_keyboard_shortcuts')}
         onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}

web/src/routes/admin/user-management/+page.svelte

@@ -222,7 +222,7 @@
                   {#if !immichUser.deletedAt}
                     <IconButton
                       shape="round"
-                      size="large"
+                      size="small"
                       icon={mdiPencilOutline}
                       title={$t('edit_user')}
                       onclick={() => editUserHandler(immichUser)}
@@ -231,7 +231,7 @@
                     {#if immichUser.id !== $user.id}
                       <IconButton
                         shape="round"
-                        size="large"
+                        size="small"
                         icon={mdiTrashCanOutline}
                         title={$t('delete_user')}
                         onclick={() => deleteUserHandler(immichUser)}
@@ -242,7 +242,7 @@
                   {#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted}
                     <IconButton
                       shape="round"
-                      size="large"
+                      size="small"
                       icon={mdiDeleteRestore}
                       title={$t('admin.user_restore_scheduled_removal', {
                         values: { date: getDeleteDate(immichUser.deletedAt) },