refactor: use more immich ui buttons (#16840)

web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@immich/sdk';
-  import { isEqual } from 'lodash-es';
-  import { fade } from 'svelte/transition';
-  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { t } from 'svelte-i18n';
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import type { SystemConfigDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiMinusCircle } from '@mdi/js';
+  import { isEqual } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
 
   interface Props {
     savedConfig: SystemConfigDto;
@@ -76,8 +76,8 @@
 
         <Button
           class="mb-2"
-          type="button"
-          size="sm"
+          size="small"
+          shape="round"
           onclick={() => config.machineLearning.urls.splice(0, 0, '')}
           disabled={disabled || !config.machineLearning.enabled}>{$t('add_url')}</Button
         >

web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-  import { sendTestEmail, type SystemConfigDto } from '@immich/sdk';
-  import { isEqual } from 'lodash-es';
-  import { fade } from 'svelte/transition';
-  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { t } from 'svelte-i18n';
-  import Button from '$lib/components/elements/buttons/button.svelte';
+  import TemplateSettings from '$lib/components/admin-page/settings/template-settings/template-settings.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import { user } from '$lib/stores/user.store';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import { handleError } from '$lib/utils/handle-error';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import TemplateSettings from '$lib/components/admin-page/settings/template-settings/template-settings.svelte';
+  import { user } from '$lib/stores/user.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { sendTestEmail, type SystemConfigDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { isEqual } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
 
   interface Props {
     savedConfig: SystemConfigDto;
@@ -149,7 +149,12 @@
             />
 
             <div class="flex gap-2 place-items-center">
-              <Button size="sm" disabled={!config.notifications.smtp.enabled} onclick={handleSendTestEmail}>
+              <Button
+                size="small"
+                shape="round"
+                disabled={!config.notifications.smtp.enabled}
+                onclick={handleSendTestEmail}
+              >
                 {#if disabled}
                   {$t('admin.notification_email_test_email')}
                 {:else}

web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
+  import { handleError } from '$lib/utils/handle-error';
   import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplate } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { mdiEyeOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import { t } from 'svelte-i18n';
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiEyeOutline } from '@mdi/js';
-  import { handleError } from '$lib/utils/handle-error';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
 
   interface Props {
     savedConfig: SystemConfigDto;
@@ -102,7 +102,8 @@
               />
               <div class="flex justify-between">
                 <Button
-                  size="sm"
+                  size="small"
+                  shape="round"
                   onclick={() => getTemplate(templateName, config.templates.email[templateKey])}
                   title={$t('admin.template_email_preview')}
                 >

web/src/lib/components/asset-viewer/editor/crop-tool/crop-preset.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Button, { type Color } from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import type { CropAspectRatio } from '$lib/stores/asset-editor.store';
+  import { Button, type Color } from '@immich/ui';
 
   interface Props {
     size: {
@@ -18,7 +18,7 @@
   let { size, selectedSize, rotateHorizontal, selectType }: Props = $props();
 
   let isSelected = $derived(selectedSize === size.name);
-  let buttonColor = $derived((isSelected ? 'primary' : 'transparent-gray') as Color);
+  let buttonColor = $derived<Color>(isSelected ? 'primary' : 'secondary');
 
   let rotatedTitle = $derived((title: string, toRotate: boolean) => {
     let sides = title.split(':');
@@ -37,7 +37,7 @@
 </script>
 
 <li>
-  <Button color={buttonColor} class="flex-col gap-1" size="sm" rounded="lg" onclick={() => selectType(size.name)}>
+  <Button shape="round" color={buttonColor} class="flex-col gap-1" size="small" onclick={() => selectType(size.name)}>
     <Icon size="1.75em" path={size.icon} viewBox={size.viewBox} class={toRotate(size.rotate) ? 'rotate-90' : ''} />
     <span>{rotatedTitle(size.name, rotateHorizontal)}</span>
   </Button>

web/src/lib/components/forms/api-key-form.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { mdiKeyVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import { Button } from '@immich/ui';
 
   interface Props {
     apiKey: { name: string };
@@ -49,7 +49,7 @@
   </form>
 
   {#snippet stickyBottom()}
-    <Button color="gray" fullwidth onclick={() => onCancel()}>{cancelText}</Button>
-    <Button type="submit" fullwidth form="api-key-form">{submitText}</Button>
+    <Button shape="round" color="secondary" fullWidth onclick={() => onCancel()}>{cancelText}</Button>
+    <Button shape="round" type="submit" fullWidth form="api-key-form">{submitText}</Button>
   {/snippet}
 </FullScreenModal>

web/src/lib/components/forms/api-key-secret.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { copyToClipboard } from '$lib/utils';
+  import { Button } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
-  import Button from '../elements/buttons/button.svelte';
-  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { t } from 'svelte-i18n';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
 
   interface Props {
     secret?: string;
@@ -26,7 +26,7 @@
   </div>
 
   {#snippet stickyBottom()}
-    <Button onclick={() => copyToClipboard(secret)} fullwidth>{$t('copy_to_clipboard')}</Button>
-    <Button onclick={onDone} fullwidth>{$t('done')}</Button>
+    <Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button>
+    <Button shape="round" onclick={onDone} fullWidth>{$t('done')}</Button>
   {/snippet}
 </FullScreenModal>

web/src/lib/components/forms/edit-album-form.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
-  import { handleError } from '$lib/utils/handle-error';
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { mdiRenameOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -46,7 +47,7 @@
   };
 </script>
 
-<FullScreenModal title={$t('edit_album')} width="wide" {onClose}>
+<FullScreenModal icon={mdiRenameOutline} title={$t('edit_album')} width="wide" {onClose}>
   <form {onsubmit} autocomplete="off" id="edit-album-form">
     <div class="flex items-center">
       <div class="hidden sm:flex">
@@ -68,7 +69,7 @@
   </form>
 
   {#snippet stickyBottom()}
-    <Button color="gray" fullwidth onclick={() => onCancel?.()}>{$t('cancel')}</Button>
-    <Button type="submit" fullwidth disabled={isSubmitting} form="edit-album-form">{$t('ok')}</Button>
+    <Button shape="round" color="secondary" fullWidth onclick={() => onCancel?.()}>{$t('cancel')}</Button>
+    <Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
   {/snippet}
 </FullScreenModal>

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

@@ -1,14 +1,14 @@
 <script lang="ts">
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { AppRoute } from '$lib/constants';
   import { userInteraction } from '$lib/stores/user.svelte';
+  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiAccountEditOutline } from '@mdi/js';
-  import Button from '../elements/buttons/button.svelte';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
-  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
 
   interface Props {
     user: UserAdminResponseDto;
@@ -151,8 +151,10 @@
 
   {#snippet stickyBottom()}
     {#if canResetPassword}
-      <Button color="light-red" fullwidth onclick={resetPassword}>{$t('reset_password')}</Button>
+      <Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
+        >{$t('reset_password')}</Button
+      >
     {/if}
-    <Button type="submit" fullwidth form="edit-user-form">{$t('confirm')}</Button>
+    <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
   {/snippet}
 </FullScreenModal>

web/src/lib/components/photos-page/actions/restore-assets.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import {
     NotificationType,
     notificationController,
@@ -8,9 +7,9 @@
   import { handleError } from '$lib/utils/handle-error';
   import { restoreAssets } from '@immich/sdk';
   import { mdiHistory } from '@mdi/js';
-  import Button from '../../elements/buttons/button.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { t } from 'svelte-i18n';
+  import { Button } from '@immich/ui';
 
   interface Props {
     onRestore: OnRestore | undefined;
@@ -44,7 +43,13 @@
   };
 </script>
 
-<Button disabled={loading} size="sm" color="transparent-gray" shadow={false} rounded="lg" onclick={handleRestore}>
-  <Icon path={mdiHistory} size="24" />
-  <span class="ml-2">{$t('restore')}</span>
+<Button
+  leadingIcon={mdiHistory}
+  disabled={loading}
+  size="medium"
+  color="secondary"
+  variant="ghost"
+  onclick={handleRestore}
+>
+  {$t('restore')}
 </Button>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import { SettingInputFieldType } from '$lib/constants';
@@ -8,7 +7,7 @@
   import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
-  import { HStack, IconButton, Input } from '@immich/ui';
+  import { Button, HStack, IconButton, Input } from '@immich/ui';
   import { mdiContentCopy, mdiLink } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -242,9 +241,9 @@
 
     {#snippet stickyBottom()}
       {#if editingLink}
-        <Button size="sm" fullwidth onclick={handleEditLink}>{$t('confirm')}</Button>
+        <Button fullWidth onclick={handleEditLink}>{$t('confirm')}</Button>
       {:else}
-        <Button size="sm" fullwidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
+        <Button fullWidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
       {/if}
     {/snippet}
   </FullScreenModal>

web/src/lib/components/shared-components/settings/setting-buttons-row.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import type { ResetOptions } from '$lib/utils/dipatch';
+  import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -26,8 +26,10 @@
     {/if}
   </div>
 
-  <div class="right">
-    <Button {disabled} size="sm" color="gray" onclick={() => onReset({ default: false })}>{$t('reset')}</Button>
-    <Button type="submit" {disabled} size="sm" onclick={() => onSave()}>{$t('save')}</Button>
+  <div class="flex gap-1">
+    <Button shape="round" {disabled} size="small" color="secondary" onclick={() => onReset({ default: false })}
+      >{$t('reset')}</Button
+    >
+    <Button shape="round" type="submit" {disabled} size="small" onclick={() => onSave()}>{$t('save')}</Button>
   </div>
 </div>

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiClose, mdiInformationOutline } from '@mdi/js';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
-  import { purchaseStore } from '$lib/stores/purchase.store';
-  import { t } from 'svelte-i18n';
   import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
-  import { getAccountAge } from '$lib/utils/auth';
-  import { fade } from 'svelte/transition';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import { updateMyPreferences } from '@immich/sdk';
-  import { handleError } from '$lib/utils/handle-error';
-  import { preferences } from '$lib/stores/user.store';
-  import { getButtonVisibility } from '$lib/utils/purchase-utils';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { purchaseStore } from '$lib/stores/purchase.store';
+  import { preferences } from '$lib/stores/user.store';
+  import { getAccountAge } from '$lib/utils/auth';
+  import { handleError } from '$lib/utils/handle-error';
+  import { getButtonVisibility } from '$lib/utils/purchase-utils';
+  import { updateMyPreferences } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { mdiClose, mdiInformationOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   let showMessage = $state(false);
   let isOpen = $state(false);
@@ -160,12 +160,21 @@
         </p>
       </div>
 
-      <Button class="mt-2" fullwidth onclick={openPurchaseModal}>{$t('purchase_button_buy_immich')}</Button>
+      <Button shape="round" class="mt-2" fullWidth onclick={openPurchaseModal}
+        >{$t('purchase_button_buy_immich')}</Button
+      >
       <div class="mt-3 flex gap-4">
-        <Button size="sm" fullwidth shadow={false} color="transparent-gray" onclick={() => hideButton(true)}>
+        <Button shape="round" size="small" fullWidth color="secondary" variant="ghost" onclick={() => hideButton(true)}>
           {$t('purchase_button_never_show_again')}
         </Button>
-        <Button size="sm" fullwidth shadow={false} color="transparent-gray" onclick={() => hideButton(false)}>
+        <Button
+          shape="round"
+          size="small"
+          fullWidth
+          color="secondary"
+          variant="ghost"
+          onclick={() => hideButton(false)}
+        >
           {$t('purchase_button_reminder')}
         </Button>
       </div>