diff --git a/src/index.css b/src/index.css index 8b51093..a6be18e 100644 --- a/src/index.css +++ b/src/index.css @@ -1296,6 +1296,41 @@ select.studio-input { background: var(--bp-paper); } flex-direction: column; gap: 12px; } +.login-personas { + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid var(--bp-navy); + border-top-color: color-mix(in srgb, var(--bp-navy) 20%, transparent); +} +.login-persona-label { + font-family: var(--bp-mono); + font-size: 10px; + letter-spacing: 0.1em; + color: var(--bp-muted); + margin-bottom: 8px; +} +.login-persona-row { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +.persona-chip { + flex: 1 1 auto; + padding: 6px 10px; + background: var(--bp-paper); + border: 1px solid var(--bp-navy); + color: var(--bp-navy); + font-family: var(--bp-mono); + font-size: 10px; + letter-spacing: 0.04em; + cursor: pointer; + transition: background 0.1s; +} +.persona-chip:hover:not(:disabled) { + background: var(--bp-amber); + color: var(--bp-paper); +} +.persona-chip:disabled { opacity: 0.5; cursor: not-allowed; } .sso-btn { display: flex; align-items: center; diff --git a/src/scenes/Login.tsx b/src/scenes/Login.tsx index 54ba939..211f4b1 100644 --- a/src/scenes/Login.tsx +++ b/src/scenes/Login.tsx @@ -137,6 +137,30 @@ export default function Login() { )} + + {devLoginEnabled && ( +