From 3f8e33f730be0eae325f2efd10e74a5ce939b182 Mon Sep 17 00:00:00 2001
From: Julien Gautier <julien.gautier@apf.asso.fr>
Date: Tue, 19 May 2026 11:14:59 +0200
Subject: [PATCH] feat(portal-shell): ghost-style Sign-in button with log-in
 icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header's anonymous CTA was a filled brand-primary block — visually
loud against the otherwise quiet header icon strip (Notifications,
Help). Switched to a ghost (transparent / no border) button with a
log-in icon ahead of the label:

- bg-transparent, text in brand-primary-500 (dark mode: -300)
- hover surfaces a faint brand-primary-50 fill so the affordance
  stays readable
- gap-1.5 between the new 16 px log-in icon and the label
- h-11 preserved — 44x44 touch target per ADR-0016 still holds

Adds 'log-in' (lucide LogIn) to the shared icon registry; pair
of the existing 'log-out'.
---
 apps/portal-shell/src/app/components/header/header.html | 6 +++---
 libs/shared/ui/src/lib/icon/icon.ts                     | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/portal-shell/src/app/components/header/header.html b/apps/portal-shell/src/app/components/header/header.html
index 7582263..cd54e4a 100644
--- a/apps/portal-shell/src/app/components/header/header.html
+++ b/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')
       {
diff --git a/libs/shared/ui/src/lib/icon/icon.ts b/libs/shared/ui/src/lib/icon/icon.ts
index 7bb2063..51995c5 100644
--- a/libs/shared/ui/src/lib/icon/icon.ts
+++ b/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,