mirror of
https://github.com/luxfi/mpc.git
synced 2026-09-24 00:26:24 +00:00
zeekay
a648eaec80
The dashboard had its own header, its own user menu (components/layout/user-menu.tsx) and its own branding table (lib/branding.ts) that mapped a hostname to a brand a second time — a copy of what @luxfi/ui/white-label already answers, and one that drifted (it had no bootno.de row and pointed zoo at the wrong issuer). Both are deleted. The nav is now `AppNav` from @luxfi/ui: brand, org switcher, links, settings and the user menu, with the links collapsing into the same gui Sheet the switchers use instead of the old `hidden md:flex` that simply vanished on a phone with nothing to replace it. Identity comes from IdentityProvider (IAM: get-account / get-organizations / get-organization-projects). Credentials stay with @hanzo/iam — one PKCE flow and one token store per surface; the chrome borrows only signIn and signOut. `next build` passes: 60 routes.
72 lines
1.7 KiB
CSS
72 lines
1.7 KiB
CSS
/*
|
|
* The MPC dashboard rides the canonical Lux token set.
|
|
*
|
|
* @luxfi/ui/tokens.css supplies every --background / --foreground / --card /
|
|
* --muted / --border / --input / --ring / --primary / --secondary / --accent /
|
|
* --destructive value, in both modes, off one achromatic ladder.
|
|
*
|
|
* What it replaced: a hand-rolled shadcn block whose neutrals were not neutral —
|
|
* every rung carried hue 240 at up to 10% saturation (--background 240 10% 3.9%,
|
|
* --muted 240 3.7% 15.9%, --border 240 3.7% 15.9%, --ring 240 4.9% 83.9%). Next
|
|
* to explore and the bootnode console, which are both true achromatic, this read
|
|
* as a different product. The tokens are hex now, not bare HSL triples, so
|
|
* tailwind.config.ts consumes var(--x) directly instead of hsl(var(--x)).
|
|
*/
|
|
@import '@luxfi/ui/tokens.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Radius is the one non-colour value this app owns. */
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar styles */
|
|
@layer utilities {
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--muted) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: var(--muted);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--muted-foreground);
|
|
}
|
|
|
|
.scrollbar-none {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|