mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

agent: LoginFlow — one card, matching Dropdown's popup visual language

Browse source 
mara: "reuse the popup component for the login, the floating separate
panels should be one card" — the old markup's .agent-status-overlay >
* rule boxed every direct-child <p>/<form> separately, a faithful port
of app.js's el().append()-per-line but not what a hand-authored
component should do. Wraps each state's content in one .login-card
div instead, styled to match Dropdown's .ui-dropdown (@hive/shared)
background/border/radius/shadow values exactly, so this reads as the
same popup family as every other floating surface in the app rather
than a one-off. Not the Dropdown component itself — its options.map
render is menu-item-shaped, not a fit for a login form + output pane.

agent.css's .agent-status-overlay > * rule is untouched (app.js's
still-live markup depends on it verbatim until the index.html
cutover) — .login-card coexists with it rather than editing it,
correctly overriding on equal specificity since main.css loads after
agent.css.
This commit is contained in:
iris 2026-08-28 17:55:12 +02:00
commit b56696d898
1 changed files with 43 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/packages/agent/src/components/LoginFlow.css Normal file
View file

@ -0,0 +1,25 @@
/* .login-card — one elevated-surface card for the whole login-recovery
overlay, replacing the old markup's per-`<p>`/`<form>` boxing
(`agent.css`'s `.agent-status-overlay > *`, still needed there
verbatim since app.js's still-live markup depends on it until the
index.html cutover — this file coexists with it rather than editing
it). Same visual language as `Dropdown`'s `.ui-dropdown`
(`@hive/shared/dropdown/Dropdown.css`) — background/border/radius/
shadow values match exactly, so this reads as the same "popup" family
as every other floating surface in the app, just laid out as a static
block instead of an anchored, position:absolute menu (that part of
`Dropdown` is specific to hanging under a trigger and doesn't apply
here — `.agent-status-overlay` already centres this card itself). */
.login-card {
display: flex;
flex-direction: column;
gap: 0.6em;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 0.5em;
box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
padding: 1em 1.2em;
}
.login-card > * {
margin: 0;
}