feat(web,a11y): replace IconButton with CircleIconButton (#9153)

* feat(web,a11y): replace IconButton with CircleIconButton

* wip: cleanup

* wip: bring back viewbox

* fix: add label to search bar

web/src/routes/(user)/user-settings/+page.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
   import { mdiKeyboard } from '@mdi/js';
   import type { PageData } from './$types';
-  import Icon from '$lib/components/elements/icon.svelte';
   import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let data: PageData;
   export let isShowKeyboardShortcut = false;
@@ -13,9 +12,11 @@
 
 <UserPageLayout title={data.meta.title}>
   <svelte:fragment slot="buttons">
-    <IconButton on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}>
-      <Icon path={mdiKeyboard} />
-    </IconButton>
+    <CircleIconButton
+      icon={mdiKeyboard}
+      title="Show keyboard shortcuts"
+      on:click={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
+    />
   </svelte:fragment>
   <section class="mx-4 flex place-content-center">
     <div class="w-full max-w-3xl">