feat(web): increase usage of CircleIconButton (#9256)

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>

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">