chore: reverting changes to icons in nav and account info panel

Author: ben-basten

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { page } from '$app/state';
   import { focusTrap } from '$lib/actions/focus-trap';
+  import Button from '$lib/components/elements/buttons/button.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
   import { preferences, user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
@@ -11,14 +14,13 @@
   import { NotificationType, notificationController } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
-  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
-  import { Button } from '@immich/ui';
 
   interface Props {
     onLogout: () => void;
+    onClose?: () => void;
   }
 
-  let { onLogout }: Props = $props();
+  let { onLogout, onClose = () => {} }: Props = $props();
 
   let isShowSelectAvatar = $state(false);
 
@@ -46,11 +48,11 @@
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
   id="account-info-panel"
-  class="absolute right-[25px] top-[75px] z-[100] w-[min(360px,100vw-50px)] rounded-3xl px-4 bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
+  class="absolute right-[25px] top-[75px] z-[100] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   use:focusTrap
 >
   <div
-    class="mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
+    class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
   >
     <div class="relative">
       <UserAvatar user={$user} size="xl" />
@@ -70,40 +72,44 @@
       <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
         {$user.name}
       </p>
-      <p class="text-center text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
+      <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
     </div>
 
     <div class="flex flex-col gap-1">
-      <Button
-        href={AppRoute.USER_SETTINGS}
-        leadingIcon={mdiCog}
-        variant="outline"
-        color="secondary"
-        size="small"
-        shape="round"
-      >
-        {$t('account_settings')}
+      <Button href={AppRoute.USER_SETTINGS} onclick={onClose} color="dark-gray" size="sm" shadow={false} border>
+        <div class="flex place-content-center place-items-center text-center gap-2 px-2">
+          <Icon path={mdiCog} size="18" ariaHidden />
+          {$t('account_settings')}
+        </div>
       </Button>
       {#if $user.isAdmin}
         <Button
           href={AppRoute.ADMIN_USER_MANAGEMENT}
-          leadingIcon={mdiWrench}
-          variant="outline"
-          color="secondary"
-          size="small"
-          shape="round"
+          onclick={onClose}
+          color="dark-gray"
+          size="sm"
+          shadow={false}
+          border
+          aria-current={page.url.pathname.includes('/admin') ? 'page' : undefined}
         >
-          {$t('administration')}
+          <div class="flex place-content-center place-items-center text-center gap-2 px-2">
+            <Icon path={mdiWrench} size="18" ariaHidden />
+            {$t('administration')}
+          </div>
         </Button>
       {/if}
     </div>
   </div>
 
-  <div class="mb-4 mt-2 flex flex-row justify-center gap-1">
-    <ThemeButton padding="2" />
-    <Button variant="ghost" color="secondary" leadingIcon={mdiLogout} onclick={onLogout}>
-      {$t('sign_out')}
-    </Button>
+  <div class="mb-4 flex flex-col">
+    <button
+      type="button"
+      class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
+      onclick={onLogout}
+    >
+      <Icon path={mdiLogout} size={24} />
+      {$t('sign_out')}</button
+    >
   </div>
 </div>
 

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

@@ -20,6 +20,7 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
+  import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
   import { isSidebarOpen } from '$lib/stores/side-bar.svelte';
@@ -92,7 +93,7 @@
         {/if}
       </div>
 
-      <section class="flex place-items-center justify-end gap-1 w-full sm:w-auto">
+      <section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
         {#if $featureFlags.search}
           <IconButton
             color="secondary"
@@ -130,6 +131,8 @@
           />
         {/if}
 
+        <ThemeButton padding="2" />
+
         <div
           use:clickOutside={{
             onEscape: () => (shouldShowHelpPanel = false),