apps/portal-shell/src/app/components/header/header.html

@@ -73,11 +73,11 @@
       <button
         type="button"
         (click)="signIn()"
-        class="ml-1 inline-flex h-11 items-center gap-2 rounded-md bg-brand-primary-500 px-4 text-sm font-semibold text-white transition-colors hover:bg-brand-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500"
+        class="ml-1 inline-flex h-11 items-center gap-1.5 rounded-md bg-transparent px-3 text-sm font-semibold text-brand-primary-500 transition-colors hover:bg-brand-primary-50 hover:text-brand-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 dark:text-brand-primary-300 dark:hover:bg-gray-800 dark:hover:text-brand-primary-200"
         data-testid="sign-in-button"
-        i18n="@@header.signIn"
       >
-        Sign in
+        <lib-icon name="log-in" [size]="16" aria-hidden="true" />
+        <span i18n="@@header.signIn">Sign in</span>
       </button>
       } @case ('authenticated') { @if (authState(); as state) { @if (state.kind === 'authenticated')
       {

libs/shared/ui/src/lib/icon/icon.ts

@@ -15,6 +15,7 @@ import {
   Grid2x2,
   House,
   LayoutDashboard,
+  LogIn,
   LogOut,
   type LucideIconData,
   LucideAngularModule,
@@ -67,6 +68,7 @@ const ICON_REGISTRY = {
   'grid-2x2': Grid2x2,
   home: House,
   'layout-dashboard': LayoutDashboard,
+  'log-in': LogIn,
   'log-out': LogOut,
   mail: Mail,
   monitor: Monitor,