feat(portal-shell): ghost-style Sign-in button with log-in icon
CI / scan (pull_request) Failing after 3m4s
CI / commits (pull_request) Successful in 3m23s
CI / check (pull_request) Successful in 4m48s
CI / a11y (pull_request) Successful in 1m50s
CI / perf (pull_request) Successful in 3m40s

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'.
This commit is contained in:
Julien Gautier
2026-05-19 11:14:59 +02:00
parent 5ef1e3d9bb
commit 3f8e33f730
2 changed files with 5 additions and 3 deletions
@@ -73,11 +73,11 @@
<button <button
type="button" type="button"
(click)="signIn()" (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" 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> </button>
} @case ('authenticated') { @if (authState(); as state) { @if (state.kind === 'authenticated') } @case ('authenticated') { @if (authState(); as state) { @if (state.kind === 'authenticated')
{ {
+2
View File
@@ -15,6 +15,7 @@ import {
Grid2x2, Grid2x2,
House, House,
LayoutDashboard, LayoutDashboard,
LogIn,
LogOut, LogOut,
type LucideIconData, type LucideIconData,
LucideAngularModule, LucideAngularModule,
@@ -67,6 +68,7 @@ const ICON_REGISTRY = {
'grid-2x2': Grid2x2, 'grid-2x2': Grid2x2,
home: House, home: House,
'layout-dashboard': LayoutDashboard, 'layout-dashboard': LayoutDashboard,
'log-in': LogIn,
'log-out': LogOut, 'log-out': LogOut,
mail: Mail, mail: Mail,
monitor: Monitor, monitor: Monitor,