Move the console onto ReUI PRO
Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
This commit is contained in:
DenozordecandClaude Sonnet 5.5 committed
commit
f3531c64f9
680 files changed
+139836
No files matched your search
@@ -0,0 +1,127 @@
|
||||
/*
|
||||
The versions block, at the foot of the side panel.
|
||||
|
||||
It is the same idea NetBird uses at the bottom-left of its dashboard: the
|
||||
components that make up what you are looking at, each with the version it is
|
||||
running, in a quiet framed block that is out of the way but never off screen.
|
||||
Here there are two, and they are genuinely two different things that update
|
||||
separately: the DNS server, which Technitium ships, and this console, which does
|
||||
not come with it.
|
||||
|
||||
Upstream keeps the server's domain in the panel title next to "DNS Server". Same
|
||||
pairing here: the domain heads the block that talks about that server.
|
||||
*/
|
||||
.block {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-3);
|
||||
background: var(--pan2);
|
||||
padding: var(--s-5) var(--s-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-3);
|
||||
}
|
||||
|
||||
/* The server's domain wraps at its dots only (`ui/DomainName`): `break-all` cut it
|
||||
wherever the card's edge fell, mid-label. A name with no dot, which DomainName
|
||||
leaves as plain text, still breaks rather than leave the card. */
|
||||
.host {
|
||||
font-family: var(--font-mono);
|
||||
overflow-wrap: break-word;
|
||||
font-size: var(--t-1);
|
||||
color: var(--faint);
|
||||
padding-bottom: var(--s-3);
|
||||
border-bottom: 1px solid var(--line2);
|
||||
margin-bottom: var(--s-2);
|
||||
}
|
||||
|
||||
/* Label left, version right: the eye reads down the versions in one column.
|
||||
When a mark leaves no room beside the label, the version and its mark move to
|
||||
the next line, still on the right, rather than cut "Web Console" in two. */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-2) var(--s-5);
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
|
||||
.name { color: var(--mute); white-space: nowrap; }
|
||||
|
||||
.ver {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--s-4);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.num { font-family: var(--font-mono); color: var(--ink); }
|
||||
|
||||
/*
|
||||
The mark rides on the version it is about, which is the whole point of putting
|
||||
it here: an update to the DNS server and an update to this console are not the
|
||||
same news, and a notice floating on its own could not say which one it meant.
|
||||
|
||||
Amber and not the red upstream uses: in this console red is what destroys
|
||||
(Delete Zones, Flush Cache) and an available update destroys nothing.
|
||||
*/
|
||||
.mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 1px var(--s-4) 1px var(--s-3);
|
||||
border: 1px solid var(--acc-ink);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--acc-ink);
|
||||
font: inherit;
|
||||
font-size: var(--t-1);
|
||||
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mark:hover,
|
||||
.mark:focus-visible { background: color-mix(in srgb, var(--acc) 14%, transparent); }
|
||||
|
||||
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acc-ink); }
|
||||
|
||||
/* Inside the dialog. */
|
||||
.jump {
|
||||
display: flex; align-items: baseline; gap: var(--s-5);
|
||||
margin-bottom: var(--s-7); font-family: var(--font-mono);
|
||||
}
|
||||
.from { color: var(--mute); }
|
||||
.arrow { color: var(--faint); }
|
||||
.to { color: var(--acc-ink); font-weight: 600; }
|
||||
.message { margin-bottom: var(--s-7); }
|
||||
.links { display: flex; flex-wrap: wrap; gap: var(--s-7); }
|
||||
|
||||
/* The console's update commands: one line each, read and copied whole. They
|
||||
are long, so they wrap between words rather than push the dialog wider. */
|
||||
/* The command and its Copy button on one line; the command takes the width. */
|
||||
.commandRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-4);
|
||||
margin: calc(-1 * var(--s-5)) 0 var(--s-7);
|
||||
}
|
||||
.commandRow > button { flex: none; }
|
||||
|
||||
.command {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: var(--s-4) var(--s-5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-2);
|
||||
background: var(--pan2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--t-1);
|
||||
overflow-wrap: break-word;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
/* Upstream's two `Note!`, after the links: they explain, they do not change the
|
||||
decision. Same rule as every other `Note!` in the console. */
|
||||
.notes { display: grid; gap: var(--s-5); margin-top: var(--s-9); }
|
||||
Reference in new issue
Block a user