From 48b490f5e9a5e8331defdd09deb5d331d65003f7 Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sat, 4 May 2024 18:29:50 +0000
Subject: [PATCH] feat(web): increase usage of CircleIconButton (#9256)

---
 .../admin-page/jobs/job-tile.svelte           | 25 ++++----
 .../components/album-page/album-card.svelte   |  2 +-
 .../asset-viewer/activity-status.svelte       |  1 -
 .../asset-viewer/activity-viewer.svelte       | 29 +++++-----
 .../asset-viewer/detail-panel.svelte          | 18 +++---
 .../lib/components/elements/search-bar.svelte | 22 ++++---
 .../faces-page/assign-face-side-panel.svelte  | 51 +++--------------
 .../components/faces-page/people-card.svelte  |  2 +-
 .../faces-page/person-side-panel.svelte       | 57 +++++++++----------
 .../forms/library-import-paths-form.svelte    | 15 ++---
 .../forms/library-scan-settings-form.svelte   | 16 +++---
 .../memory-page/memory-viewer.svelte          |  9 ++-
 .../navigation-bar/account-info-panel.svelte  | 18 +++---
 .../notification/notification-card.svelte     | 12 +++-
 .../user-settings-page/device-card.svelte     | 15 ++---
 .../user-api-key-list.svelte                  | 26 +++++----
 web/src/routes/+error.svelte                  | 11 ++--
 .../admin/library-management/+page.svelte     | 14 +++--
 18 files changed, 166 insertions(+), 177 deletions(-)

diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index 9e47386692f44..b7750846614bd 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import Badge from '$lib/components/elements/badge.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
@@ -16,6 +15,7 @@
   import { createEventDispatcher } from 'svelte';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let title: string;
   export let subtitle: string | undefined;
@@ -56,16 +56,19 @@
         <div class="flex gap-2">
           {#if jobCounts.failed > 0}
             <Badge color="primary">
-              <span class="text-sm">
-                {jobCounts.failed.toLocaleString($locale)} failed
-              </span>
-              <Button
-                size="tiny"
-                shadow={false}
-                on:click={() => dispatch('command', { command: JobCommand.ClearFailed, force: false })}
-              >
-                <Icon path={mdiClose} size="18" />
-              </Button>
+              <div class="flex flex-row gap-1">
+                <span class="text-sm">
+                  {jobCounts.failed.toLocaleString($locale)} failed
+                </span>
+                <CircleIconButton
+                  color="primary"
+                  icon={mdiClose}
+                  title="Clear message"
+                  size="12"
+                  padding="1"
+                  on:click={() => dispatch('command', { command: JobCommand.ClearFailed, force: false })}
+                />
+              </div>
             </Badge>
           {/if}
           {#if jobCounts.delayed > 0}
diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index 9dce0b739d0fd..fd0f23131633d 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -33,7 +33,7 @@
       data-testid="context-button-parent"
     >
       <CircleIconButton
-        color="light"
+        color="opaque"
         title="Show album options"
         icon={mdiDotsVertical}
         size="20"
diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/activity-status.svelte
index 02d37c41da074..9a561eb6c327e 100644
--- a/web/src/lib/components/asset-viewer/activity-status.svelte
+++ b/web/src/lib/components/asset-viewer/activity-status.svelte
@@ -19,7 +19,6 @@
   class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
 >
   <button class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
-    <!-- svelte-ignore missing-declaration -->
     <div class="items-center justify-center">
       <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
     </div>
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index ba061344f19e2..6f3c9629f1ddd 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -160,12 +160,7 @@
       bind:clientHeight={activityHeight}
     >
       <div class="flex place-items-center gap-2">
-        <button
-          class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-          on:click={() => dispatch('close')}
-        >
-          <Icon path={mdiClose} size="24" />
-        </button>
+        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} title="Close" />
 
         <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Activity</p>
       </div>
@@ -193,10 +188,13 @@
                 </a>
               {/if}
               {#if reaction.user.id === user.id || albumOwnerId === user.id}
-                <div class="flex items-start w-fit pt-[5px]" title="Delete comment">
-                  <button on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}>
-                    <Icon path={mdiDotsVertical} />
-                  </button>
+                <div class="flex items-start w-fit pt-[5px]">
+                  <CircleIconButton
+                    icon={mdiDotsVertical}
+                    title="Comment options"
+                    size="16"
+                    on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
+                  />
                 </div>
               {/if}
               <div>
@@ -242,10 +240,13 @@
                   </a>
                 {/if}
                 {#if reaction.user.id === user.id || albumOwnerId === user.id}
-                  <div class="flex items-start w-fit" title="Delete like">
-                    <button on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}>
-                      <Icon path={mdiDotsVertical} />
-                    </button>
+                  <div class="flex items-start w-fit">
+                    <CircleIconButton
+                      icon={mdiDotsVertical}
+                      title="Reaction options"
+                      size="16"
+                      on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
+                    />
                   </div>
                 {/if}
                 <div>
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 893cd047ab382..014db827fb763 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -169,13 +169,7 @@
 
 <section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
   <div class="flex place-items-center gap-2">
-    <button
-      class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-      on:click={() => dispatch('close')}
-    >
-      <Icon path={mdiClose} size="24" />
-    </button>
-
+    <CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
     <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
   </div>
 
@@ -401,9 +395,13 @@
           <p class="break-all flex place-items-center gap-2">
             {asset.originalFileName}
             {#if isOwner}
-              <button title="Show File Location" on:click={toggleAssetPath} class="-translate-y-[2px]">
-                <Icon path={mdiInformationOutline} />
-              </button>
+              <CircleIconButton
+                icon={mdiInformationOutline}
+                title="Show file location"
+                size="16"
+                padding="2"
+                on:click={toggleAssetPath}
+              />
             {/if}
           </p>
           <div class="flex gap-2 text-sm">
diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte
index 4336656e75307..3ac0dc8fc32db 100644
--- a/web/src/lib/components/elements/search-bar.svelte
+++ b/web/src/lib/components/elements/search-bar.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
   import { mdiClose, mdiMagnify } from '@mdi/js';
-  import Icon from './icon.svelte';
   import { createEventDispatcher } from 'svelte';
   import type { SearchOptions } from '$lib/utils/dipatch';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let name: string;
   export let roundedBottom = true;
   export let showLoadingSpinner: boolean;
   export let placeholder: string;
 
+  let inputRef: HTMLElement;
+
   const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
 
   const resetSearch = () => {
     name = '';
     dispatch('reset');
+    inputRef?.focus();
   };
 
   const handleSearch = (event: KeyboardEvent) => {
@@ -29,16 +32,19 @@
     ? 'rounded-2xl'
     : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
 >
-  <button type="button" on:click={() => dispatch('search', { force: true })}>
-    <div class="w-fit">
-      <Icon path={mdiMagnify} size="24" />
-    </div>
-  </button>
+  <CircleIconButton
+    icon={mdiMagnify}
+    title="Search"
+    size="16"
+    padding="2"
+    on:click={() => dispatch('search', { force: true })}
+  />
   <input
     class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
     type="text"
     {placeholder}
     bind:value={name}
+    bind:this={inputRef}
     on:keydown={handleSearch}
     on:input={() => dispatch('search', { force: false })}
   />
@@ -48,8 +54,6 @@
     </div>
   {/if}
   {#if name}
-    <button on:click={resetSearch}>
-      <Icon path={mdiClose} />
-    </button>
+    <CircleIconButton icon={mdiClose} title="Clear value" size="16" padding="2" on:click={resetSearch} />
   {/if}
 </div>
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
index a329b3e4ed26d..b47810028e641 100644
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -9,9 +9,9 @@
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import Icon from '../elements/icon.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
@@ -119,38 +119,19 @@
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}
       <div class="flex items-center gap-2">
-        <button
-          class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-          on:click={handleBackButton}
-        >
-          <div>
-            <Icon path={mdiArrowLeftThin} size="24" />
-          </div>
-        </button>
+        <CircleIconButton icon={mdiArrowLeftThin} title="Back" on:click={handleBackButton} />
         <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Select face</p>
       </div>
       <div class="flex justify-end gap-2">
-        <button
-          class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-          title="Search existing person"
+        <CircleIconButton
+          icon={mdiMagnify}
+          title="Search for existing person"
           on:click={() => {
             searchFaces = true;
           }}
-        >
-          <div>
-            <Icon path={mdiMagnify} size="24" />
-          </div>
-        </button>
+        />
         {#if !isShowLoadingNewPerson}
-          <button
-            class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-            on:click={handleCreatePerson}
-            title="Create new person"
-          >
-            <div>
-              <Icon path={mdiPlus} size="24" />
-            </div>
-          </button>
+          <CircleIconButton icon={mdiPlus} title="Create new person" on:click={handleCreatePerson} />
         {:else}
           <div class="flex place-content-center place-items-center">
             <LoadingSpinner />
@@ -158,14 +139,7 @@
         {/if}
       </div>
     {:else}
-      <button
-        class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-        on:click={handleBackButton}
-      >
-        <div>
-          <Icon path={mdiArrowLeftThin} size="24" />
-        </div>
-      </button>
+      <CircleIconButton icon={mdiArrowLeftThin} title="Back" on:click={handleBackButton} />
       <div class="w-full flex">
         <SearchPeople
           type="input"
@@ -179,14 +153,7 @@
           </div>
         {/if}
       </div>
-      <button
-        class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-        on:click={() => (searchFaces = false)}
-      >
-        <div>
-          <Icon path={mdiClose} size="24" />
-        </div>
-      </button>
+      <CircleIconButton icon={mdiClose} title="Cancel search" on:click={() => (searchFaces = false)} />
     {/if}
   </div>
   <div class="px-4 py-4 text-sm">
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index 8daac796d8173..caa9075cdc619 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -74,7 +74,7 @@
 
   <div class="absolute right-2 top-2" class:hidden={!showVerticalDots}>
     <CircleIconButton
-      color="light"
+      color="opaque"
       icon={mdiDotsVertical}
       title="Show person options"
       size="20"
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte
index 489cfeb170c03..c712a1090c4ec 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -15,14 +15,14 @@
     type AssetFaceResponseDto,
     type PersonResponseDto,
   } from '@immich/sdk';
-  import { mdiArrowLeftThin, mdiRestart } from '@mdi/js';
+  import { mdiArrowLeftThin, mdiMinus, mdiRestart } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import Icon from '../elements/icon.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let assetId: string;
   export let assetType: AssetTypeEnum;
@@ -42,7 +42,7 @@
   let isShowLoadingPeople = false;
 
   // search people
-  let showSeletecFaces = false;
+  let showSelectedFaces = false;
   let allPeople: PersonResponseDto[] = [];
 
   // timers
@@ -159,21 +159,21 @@
     if (newFeaturePhoto && personToUpdate) {
       selectedPersonToCreate[personToUpdate.id] = newFeaturePhoto;
     }
-    showSeletecFaces = false;
+    showSelectedFaces = false;
   };
 
   const handleReassignFace = (person: PersonResponseDto | null) => {
     const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
     if (person && personToUpdate) {
       selectedPersonToReassign[personToUpdate.id] = person;
-      showSeletecFaces = false;
+      showSelectedFaces = false;
     }
   };
 
   const handlePersonPicker = (person: PersonResponseDto | null) => {
     if (person) {
       editedPerson = person;
-      showSeletecFaces = true;
+      showSelectedFaces = true;
     }
   };
 </script>
@@ -184,14 +184,7 @@
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">
-      <button
-        class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-        on:click={handleBackButton}
-      >
-        <div>
-          <Icon path={mdiArrowLeftThin} size="24" />
-        </div>
-      </button>
+      <CircleIconButton icon={mdiArrowLeftThin} title="Back" on:click={handleBackButton} />
       <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Edit faces</p>
     </div>
     {#if !isShowLoadingDone}
@@ -273,21 +266,27 @@
                   </p>
                 {/if}
 
-                <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-blue-700">
+                <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full">
                   {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
-                    <button on:click={() => handleReset(face.id)} class="flex h-full w-full">
-                      <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
-                        <div>
-                          <Icon path={mdiRestart} size={18} />
-                        </div>
-                      </div>
-                    </button>
+                    <CircleIconButton
+                      color="primary"
+                      icon={mdiRestart}
+                      title="Reset"
+                      size="18"
+                      padding="1"
+                      class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
+                      on:click={() => handleReset(face.id)}
+                    />
                   {:else}
-                    <button on:click={() => handlePersonPicker(face.person)} class="flex h-full w-full">
-                      <div
-                        class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
-                      />
-                    </button>
+                    <CircleIconButton
+                      color="primary"
+                      icon={mdiMinus}
+                      title="Select new face"
+                      size="18"
+                      padding="1"
+                      class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
+                      on:click={() => handlePersonPicker(face.person)}
+                    />
                   {/if}
                 </div>
               </div>
@@ -299,14 +298,14 @@
   </div>
 </section>
 
-{#if showSeletecFaces}
+{#if showSelectedFaces}
   <AssignFaceSidePanel
     {peopleWithFaces}
     {allPeople}
     {editedPerson}
     {assetType}
     {assetId}
-    on:close={() => (showSeletecFaces = false)}
+    on:close={() => (showSelectedFaces = false)}
     on:createPerson={(event) => handleCreatePerson(event.detail)}
     on:reassign={(event) => handleReassignFace(event.detail)}
   />
diff --git a/web/src/lib/components/forms/library-import-paths-form.svelte b/web/src/lib/components/forms/library-import-paths-form.svelte
index 82789231b2bc8..dca565ce31cfa 100644
--- a/web/src/lib/components/forms/library-import-paths-form.svelte
+++ b/web/src/lib/components/forms/library-import-paths-form.svelte
@@ -8,6 +8,7 @@
   import { validate, type LibraryResponseDto } from '@immich/sdk';
   import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let library: LibraryResponseDto;
 
@@ -209,17 +210,17 @@
           </td>
 
           <td class="w-4/5 text-ellipsis px-4 text-sm">{validatedPath.importPath}</td>
-          <td class="w-1/5 text-ellipsis px-4 text-sm flex flex-row">
-            <button
-              type="button"
+          <td class="w-1/5 text-ellipsis flex justify-center">
+            <CircleIconButton
+              color="primary"
+              icon={mdiPencilOutline}
+              title="Edit import path"
+              size="16"
               on:click={() => {
                 editImportPath = listIndex;
                 editedImportPath = validatedPath.importPath;
               }}
-              class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-            >
-              <Icon path={mdiPencilOutline} size="16" />
-            </button>
+            />
           </td>
         </tr>
       {/each}
diff --git a/web/src/lib/components/forms/library-scan-settings-form.svelte b/web/src/lib/components/forms/library-scan-settings-form.svelte
index f850e66b400ee..3896d7df78380 100644
--- a/web/src/lib/components/forms/library-scan-settings-form.svelte
+++ b/web/src/lib/components/forms/library-scan-settings-form.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { LibraryType, type LibraryResponseDto } from '@immich/sdk';
   import { mdiPencilOutline } from '@mdi/js';
   import { createEventDispatcher, onMount } from 'svelte';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
   import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let library: Partial<LibraryResponseDto>;
 
@@ -138,17 +138,17 @@
           }`}
         >
           <td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
-          <td class="w-1/4 text-ellipsis px-4 text-sm">
-            <button
-              type="button"
+          <td class="w-1/4 text-ellipsis flex justify-center">
+            <CircleIconButton
+              color="primary"
+              icon={mdiPencilOutline}
+              title="Edit exclusion pattern"
+              size="16"
               on:click={() => {
                 editExclusionPattern = listIndex;
                 editedExclusionPattern = exclusionPattern;
               }}
-              class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-            >
-              <Icon path={mdiPencilOutline} size="16" />
-            </button>
+            />
           </td>
         </tr>
       {/each}
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 2baaf0e6109fc..c6b922dccf145 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -340,9 +340,12 @@
         class:opacity-0={galleryInView}
         class:opacity-100={!galleryInView}
       >
-        <button on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}>
-          <CircleIconButton title="Show gallery" icon={mdiChevronDown} color="light" />
-        </button>
+        <CircleIconButton
+          title="Show gallery"
+          icon={mdiChevronDown}
+          color="light"
+          on:click={() => memoryGallery.scrollIntoView({ behavior: 'smooth' })}
+        />
       </div>
 
       <IntersectionObserver
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index d97b939b0f7be..1dec6019b7cc9 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -12,6 +12,7 @@
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   let isShowSelectAvatar = false;
 
@@ -61,15 +62,16 @@
         {#key $user}
           <UserAvatar user={$user} size="xl" />
         {/key}
-        <div
-          class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
-        >
-          <button
-            class="flex items-center justify-center w-full h-full text-white"
+        <div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
+          <CircleIconButton
+            color="primary"
+            icon={mdiPencil}
+            title="Edit avatar"
+            class="border"
+            size="12"
+            padding="2"
             on:click={() => (isShowSelectAvatar = true)}
-          >
-            <Icon path={mdiPencil} />
-          </button>
+          />
         </div>
       </div>
       <div>
diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
index ac93f9a3b3230..d98d2f6066dd2 100644
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -8,6 +8,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { onMount } from 'svelte';
   import { mdiCloseCircleOutline, mdiInformationOutline, mdiWindowClose } from '@mdi/js';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let notification: Notification;
 
@@ -78,9 +79,14 @@
         {notification.type.toString()}
       </h2>
     </div>
-    <button on:click|stopPropagation={discard}>
-      <Icon path={mdiWindowClose} size="20" />
-    </button>
+    <CircleIconButton
+      icon={mdiWindowClose}
+      title="Close"
+      class="dark:text-immich-dark-gray"
+      size="20"
+      padding="2"
+      on:click={discard}
+    />
   </div>
 
   <p class="whitespace-pre-wrap pl-[28px] pr-[16px] text-sm" data-testid="message">
diff --git a/web/src/lib/components/user-settings-page/device-card.svelte b/web/src/lib/components/user-settings-page/device-card.svelte
index 8821ed970aa73..34304fa9131b7 100644
--- a/web/src/lib/components/user-settings-page/device-card.svelte
+++ b/web/src/lib/components/user-settings-page/device-card.svelte
@@ -1,4 +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 { locale } from '$lib/stores/preferences.store';
   import type { SessionResponseDto } from '@immich/sdk';
@@ -64,14 +65,14 @@
       </div>
     </div>
     {#if !device.current}
-      <div class="flex flex-col justify-center text-sm">
-        <button
-          on:click={() => dispatcher('delete')}
-          class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+      <div>
+        <CircleIconButton
+          color="primary"
+          icon={mdiTrashCanOutline}
           title="Log out"
-        >
-          <Icon path={mdiTrashCanOutline} size="16" />
-        </button>
+          size="16"
+          on:click={() => dispatcher('delete')}
+        />
       </div>
     {/if}
   </div>
diff --git a/web/src/lib/components/user-settings-page/user-api-key-list.svelte b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
index b59874774dc54..b13d2a9019bad 100644
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
   import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
@@ -10,6 +9,7 @@
   import APIKeySecret from '../forms/api-key-secret.svelte';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let keys: ApiKeyResponseDto[];
 
@@ -143,19 +143,21 @@
                 <td class="w-1/3 text-ellipsis px-4 text-sm"
                   >{new Date(key.createdAt).toLocaleDateString($locale, format)}
                 </td>
-                <td class="w-1/3 text-ellipsis px-4 text-sm">
-                  <button
+                <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/3">
+                  <CircleIconButton
+                    color="primary"
+                    icon={mdiPencilOutline}
+                    title="Edit key"
+                    size="16"
                     on:click={() => (editKey = key)}
-                    class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-                  >
-                    <Icon path={mdiPencilOutline} size="16" />
-                  </button>
-                  <button
+                  />
+                  <CircleIconButton
+                    color="primary"
+                    icon={mdiTrashCanOutline}
+                    title="Delete key"
+                    size="16"
                     on:click={() => (deleteKey = key)}
-                    class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-                  >
-                    <Icon path={mdiTrashCanOutline} size="16" />
-                  </button>
+                  />
                 </td>
               </tr>
             {/key}
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index 1bd02ccfd936d..a97da5620f144 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import Icon from '$lib/components/elements/icon.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { copyToClipboard } from '$lib/utils';
   import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
 
@@ -36,12 +37,12 @@
               🚨 Error - Something went wrong
             </h1>
             <div class="flex justify-end">
-              <button
+              <CircleIconButton
+                color="primary"
+                icon={mdiContentCopy}
+                title="Copy error"
                 on:click={() => handleCopy()}
-                class="rounded-full bg-immich-primary px-3 py-2 text-sm text-white shadow-md transition-colors hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80"
-              >
-                <Icon path={mdiContentCopy} size={24} />
-              </button>
+              />
             </div>
           </div>
 
diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index 5bd3cfb09e86d..a080474ea9b34 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -37,6 +37,7 @@
   import { fade, slide } from 'svelte/transition';
   import LinkButton from '../../../lib/components/elements/buttons/link-button.svelte';
   import type { PageData } from './$types';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let data: PageData;
 
@@ -386,12 +387,13 @@
                 {/if}
 
                 <td class=" text-ellipsis px-4 text-sm">
-                  <button
-                    class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-                    on:click|stopPropagation|preventDefault={(e) => showMenu(e, library, index)}
-                  >
-                    <Icon path={mdiDotsVertical} size="16" />
-                  </button>
+                  <CircleIconButton
+                    color="primary"
+                    icon={mdiDotsVertical}
+                    title="Library options"
+                    size="16"
+                    on:click={(e) => showMenu(e, library, index)}
+                  />
 
                   {#if showContextMenu}
                     <Portal target="body">