ui improvement
This commit is contained in:
@@ -2,23 +2,40 @@
|
||||
Curated palette with deep purple/indigo accents (#662582), glassmorphic elements,
|
||||
live telemetry cards and interactive map timelines. */
|
||||
|
||||
/* ── Dispatch's palette is now the console's ────────────────────────────────
|
||||
|
||||
These fourteen names are kept, and every one of them is an ALIAS. About
|
||||
fifty rules in this file reference them, so pointing the names at the shared
|
||||
tokens restyles the whole page at once — and, more to the point, makes it
|
||||
impossible for Dispatch to drift away from the rest of the console again.
|
||||
|
||||
It had drifted. This file arrived as a port of another product and brought
|
||||
that product's palette with it: `#e2e8f0` for a hairline where the console
|
||||
uses `#e0e4ea`, `#1e293b` for body text where the console uses `#0f172a`,
|
||||
`#f8fafc` for a sunken fill against the console's `#fafbfc`. Each is a
|
||||
shade off the real token — close enough to look like a rendering
|
||||
inconsistency rather than a decision, and far enough that a Dispatch card
|
||||
beside a Console card were visibly two different whites.
|
||||
|
||||
The two shadow steps are now the card's, which is to say nothing at all.
|
||||
`--dispatch-shadow-lg` is referenced by no rule in this file and is gone
|
||||
rather than aliased. */
|
||||
:root {
|
||||
--dispatch-bg: #ffffff;
|
||||
--dispatch-bg-sub: #f8fafc;
|
||||
--dispatch-card-bg: #ffffff;
|
||||
--dispatch-border: #e2e8f0;
|
||||
--dispatch-border-active: #662582;
|
||||
--dispatch-text: #1e293b;
|
||||
--dispatch-text-muted: #64748b;
|
||||
--dispatch-accent: #662582;
|
||||
--dispatch-bg: var(--color-surface);
|
||||
--dispatch-bg-sub: var(--color-surface-subtle);
|
||||
--dispatch-card-bg: var(--card-bg);
|
||||
--dispatch-border: var(--color-line);
|
||||
--dispatch-border-active: var(--color-brand);
|
||||
--dispatch-text: var(--color-ink-1);
|
||||
--dispatch-text-muted: var(--color-ink-3);
|
||||
--dispatch-accent: var(--color-brand);
|
||||
--dispatch-accent-light: #9255ab;
|
||||
--dispatch-accent-soft: rgba(102, 37, 130, 0.08);
|
||||
--dispatch-success: #10b981;
|
||||
--dispatch-warning: #f59e0b;
|
||||
--dispatch-error: #ef4444;
|
||||
--dispatch-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
--dispatch-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
|
||||
--dispatch-shadow-lg: 0 12px 30px rgba(102, 37, 130, 0.12);
|
||||
--dispatch-accent-soft: color-mix(in oklab, var(--color-brand) 8%, transparent);
|
||||
--dispatch-success: var(--color-success, #1f9d55);
|
||||
--dispatch-warning: var(--color-warning, #b7860b);
|
||||
--dispatch-error: var(--color-error, #d64545);
|
||||
--dispatch-shadow-sm: var(--card-shadow);
|
||||
--dispatch-shadow-md: var(--card-shadow);
|
||||
}
|
||||
|
||||
.dispatch-container {
|
||||
@@ -30,221 +47,28 @@
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
||||
}
|
||||
|
||||
/* ── Top Operations Header (xpressconsole #hdr) ───────────────────────────── */
|
||||
.dispatch-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 6px 14px;
|
||||
min-height: 44px;
|
||||
background: var(--dispatch-card-bg);
|
||||
border: 1px solid var(--dispatch-border);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--dispatch-shadow-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* ── Top Operations Header (xpressconsole #hdr) ─────────────────────────────
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
GONE, because it was never rendered.
|
||||
|
||||
.logo-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #662582, #9255ab);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 11.5px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(102, 37, 130, 0.25);
|
||||
}
|
||||
This file arrived as a port of another product, and it brought that
|
||||
product's whole operations header with it: `.dispatch-header`, a logo lockup,
|
||||
a city picker, a demo/live toggle, a live-GPS chip, a running clock, and
|
||||
`.date-chip` — a pill with prev/next arrows for stepping through days.
|
||||
|
||||
.logo-name {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--dispatch-text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
Not one of those class names appears in any markup in this repository. The
|
||||
Dispatch page reads the date from `useDateScope()`, which is the range
|
||||
picker in the app's own top bar; two comments in `DispatchPage.tsx` already
|
||||
tell the reader to "change the date range in the top bar". So the header was
|
||||
215 lines of CSS for a component that does not exist, and `.date-chip` was a
|
||||
date filter nobody can see.
|
||||
|
||||
.logo-name em {
|
||||
color: var(--dispatch-accent);
|
||||
font-style: normal;
|
||||
margin-left: 2px;
|
||||
}
|
||||
If the ported header is wanted later it is in the git history, but it would
|
||||
need rebuilding against this console's own controls rather than restoring:
|
||||
the date range, the branch scope and the account menu are all in the app
|
||||
shell, and a second set of them on one page is the drift this pass has been
|
||||
removing everywhere else. */
|
||||
|
||||
.logo-city-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-city {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--dispatch-accent-soft);
|
||||
border: 1px solid rgba(102, 37, 130, 0.25);
|
||||
color: var(--dispatch-accent);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.logo-city:hover {
|
||||
background: rgba(102, 37, 130, 0.14);
|
||||
border-color: rgba(102, 37, 130, 0.45);
|
||||
}
|
||||
|
||||
.demo-toggle-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(102, 37, 130, 0.06));
|
||||
border: 1px solid rgba(16, 185, 129, 0.35);
|
||||
color: #065f46;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.demo-toggle-chip:hover {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(102, 37, 130, 0.12));
|
||||
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.toggle-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.toggle-dot.is-demo {
|
||||
background: var(--dispatch-success);
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
|
||||
animation: pulse-ring 1.8s infinite;
|
||||
}
|
||||
|
||||
.toggle-dot.is-live {
|
||||
background: var(--dispatch-warning);
|
||||
}
|
||||
|
||||
.hdr-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hdr-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
background: var(--dispatch-bg-sub);
|
||||
border: 1px solid var(--dispatch-border);
|
||||
color: var(--dispatch-text);
|
||||
}
|
||||
|
||||
.live-gps-chip {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.live-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--dispatch-success);
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
animation: pulse-ring 1.8s infinite;
|
||||
}
|
||||
|
||||
.strat-stat-orders {
|
||||
background: var(--dispatch-accent-soft);
|
||||
border-color: rgba(102, 37, 130, 0.2);
|
||||
color: var(--dispatch-accent);
|
||||
}
|
||||
|
||||
.strat-stat-profit {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
/* Date Chip */
|
||||
.date-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 3px;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--dispatch-border);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.date-nav-btn {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--dispatch-text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.date-nav-btn:hover {
|
||||
background: var(--dispatch-bg-sub);
|
||||
color: var(--dispatch-accent);
|
||||
}
|
||||
|
||||
.date-chip-main {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.today-badge {
|
||||
font-size: 8.5px;
|
||||
font-weight: 800;
|
||||
padding: 1px 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--dispatch-accent);
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.hdr-clock {
|
||||
font-family: 'JetBrains Mono', monospace, monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
background: #0f172a;
|
||||
color: #38bdf8;
|
||||
border-radius: 6px;
|
||||
letter-spacing: 0.06em;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ── Strategy & View Mode Bar (xpressconsole #strat-row) ───────────────────── */
|
||||
.strat-row {
|
||||
@@ -256,7 +80,7 @@
|
||||
min-height: 42px;
|
||||
background: var(--dispatch-card-bg);
|
||||
border: 1px solid var(--dispatch-border);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--card-radius);
|
||||
box-shadow: var(--dispatch-shadow-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -454,23 +278,21 @@
|
||||
|
||||
.dispatch-container .rcard,
|
||||
.rcard {
|
||||
background: #ffffff;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--dispatch-border);
|
||||
border-radius: 14px;
|
||||
border-radius: var(--card-radius);
|
||||
padding: 14px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Hover is the line, not a lift -- see the note on `.pcard` in index.css. */
|
||||
.dispatch-container .rcard:hover,
|
||||
.rcard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(102, 37, 130, 0.35);
|
||||
border-color: var(--dispatch-accent);
|
||||
}
|
||||
|
||||
.dispatch-container .rcard.is-focused,
|
||||
@@ -645,10 +467,10 @@
|
||||
.dispatch-card-elevated,
|
||||
.dispatch-focus-card,
|
||||
.dispatch-map-card {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid var(--dispatch-border) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: var(--dispatch-shadow-md) !important;
|
||||
background: var(--card-bg) !important;
|
||||
border: var(--card-border) !important;
|
||||
border-radius: var(--card-radius) !important;
|
||||
box-shadow: var(--card-shadow) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -707,7 +529,7 @@
|
||||
padding: 10px 14px;
|
||||
background: var(--dispatch-bg-sub);
|
||||
border: 1px solid var(--dispatch-border);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
.rl-item {
|
||||
@@ -774,19 +596,16 @@
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--card-radius);
|
||||
border: 1px solid var(--dispatch-border);
|
||||
background: #ffffff;
|
||||
background: var(--card-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
transition: border-color 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
|
||||
.timeline-step-card:hover,
|
||||
.stop-timeline-card:hover {
|
||||
border-color: var(--dispatch-accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 18px rgba(102, 37, 130, 0.12);
|
||||
}
|
||||
|
||||
.timeline-step-card.is-current {
|
||||
@@ -981,7 +800,7 @@
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(102, 37, 130, 0.25);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--card-radius);
|
||||
background: linear-gradient(135deg, rgba(102, 37, 130, 0.06), rgba(146, 85, 171, 0.03));
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user