feat(portal-shell): ghost-style Sign-in button with log-in icon
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:
@@ -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')
|
||||
{
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user