From a402691871c09b16d01e86ed943a459c49654f7a Mon Sep 17 00:00:00 2001 From: 0raclus Date: Sat, 9 May 2026 23:25:33 +0300 Subject: [PATCH] refactor: polish Trade UI + Schedule components + nav pills MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit HeaderBar NavPill — active state now solid accent (pink) with subtle glow shadow, hovered state lights up with soft accent bg. Far stronger visual feedback than the previous accent-bg-strong ghost variant. DcaSchedulesPanel — minimalist redo. Header drops the rotation glyph, becomes a thin uppercase mono label + tabular count. Rows lose the raised surface and become flat with a 6px status dot (live = pink + glow, paused = muted). Title becomes mono with arrow notation; meta line uses subtle bullet dividers. Action buttons go fully ghost (transparent, muted) — they only carry weight on hover. Footnote becomes a single-line dashed-rule foot, no italics. ExecutionPanel FormCard — step number becomes a thin 22px outline circle (mono digit) instead of an accent-filled pill — title leads the eye. Subtitle moves to right with uppercase mono treatment. Card surface gets a faint glass tint + soft inset highlight so it reads as a layered surface instead of a stark outlined box. Header gets a dashed underline for tight visual separation. Sub-labels become uppercase mono caps for label/value clarity. All values driven by design-system tokens; no new colours introduced. --- src/components/DcaSchedulesPanel.tsx | 163 ++++++++++++++++----------- src/components/ExecutionPanel.tsx | 80 +++++++------ src/components/HeaderBar.tsx | 20 +++- 3 files changed, 157 insertions(+), 106 deletions(-) diff --git a/src/components/DcaSchedulesPanel.tsx b/src/components/DcaSchedulesPanel.tsx index ef40499..6153e13 100644 --- a/src/components/DcaSchedulesPanel.tsx +++ b/src/components/DcaSchedulesPanel.tsx @@ -61,37 +61,53 @@ export const DcaSchedulesPanel: FC = () => { return (
- - DCA schedules + Schedules {list.length}
- DCA is local-first: this tab must stay open for cycles to fire. - Closing the tab pauses the schedule until you return. + Local-first — keep this tab open for cycles to fire.
); @@ -121,40 +136,36 @@ export const DcaSchedulesPanel: FC = () => { const styles: Record = { root: { margin: "10px 16px", - padding: "14px 16px", + padding: "12px 14px", background: "var(--surface-card)", border: "1px solid var(--color-stroke)", borderRadius: 12, display: "flex", flexDirection: "column", - gap: 10, - backdropFilter: "blur(12px) saturate(130%)", - WebkitBackdropFilter: "blur(12px) saturate(130%)", + gap: 8, }, header: { display: "flex", alignItems: "center", gap: 8, + paddingBottom: 2, + }, + headerLabel: { fontFamily: MONO, - fontSize: 13, - fontWeight: 700, + fontSize: 10, + fontWeight: 600, color: "var(--color-text-muted)", textTransform: "uppercase", - letterSpacing: "0.06em", - }, - headerIcon: { - fontSize: 14, + letterSpacing: "0.14em", }, headerCount: { - marginLeft: "auto", fontFamily: MONO, - fontSize: 11, - fontWeight: 700, - background: "var(--color-accent-bg-soft)", - color: "var(--color-5-strong)", - border: "1px solid var(--color-accent-border)", - borderRadius: 999, - padding: "1px 7px", + fontSize: 10, + fontWeight: 600, + color: "var(--color-text-muted)", + fontVariantNumeric: "tabular-nums", + letterSpacing: "0.06em", + marginLeft: "auto", }, list: { listStyle: "none", @@ -162,74 +173,94 @@ const styles: Record = { padding: 0, display: "flex", flexDirection: "column", - gap: 8, + gap: 4, }, row: { display: "flex", gap: 10, - padding: "10px 12px", - background: "var(--surface-raised)", - border: "1px solid var(--color-stroke)", + padding: "8px 10px", + background: "transparent", + border: "1px solid transparent", borderRadius: 8, alignItems: "center", + transition: + "background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out)", + }, + statusDot: { + width: 6, + height: 6, + borderRadius: "50%", + flexShrink: 0, + transition: "background var(--motion-base) var(--ease-out)", }, rowMain: { flex: 1, display: "flex", flexDirection: "column", - gap: 4, + gap: 2, minWidth: 0, }, rowTitle: { - fontFamily: SANS, - fontWeight: 700, - fontSize: 14, + display: "flex", + alignItems: "baseline", + gap: 6, + fontFamily: MONO, + fontSize: 13, color: "var(--color-text)", + fontVariantNumeric: "tabular-nums", + }, + pair: { + fontWeight: 600, + letterSpacing: "0.01em", }, - rowCadence: { + cadence: { fontWeight: 400, color: "var(--color-text-muted)", - marginLeft: 6, + }, + dot: { + color: "var(--color-text-muted)", + opacity: 0.5, }, rowMeta: { + display: "flex", + flexWrap: "wrap", + gap: 6, fontFamily: MONO, - fontSize: 12, + fontSize: 11, color: "var(--color-text-muted)", fontVariantNumeric: "tabular-nums", }, + metaDivider: { + opacity: 0.4, + }, rowActions: { display: "inline-flex", - gap: 6, + gap: 4, flexShrink: 0, }, - pauseButton: { - padding: "5px 10px", + ghostButton: { + padding: "4px 10px", fontFamily: MONO, - fontSize: 12, - fontWeight: 600, - color: "var(--color-text)", - background: "var(--surface-card)", - border: "1px solid var(--color-stroke)", - borderRadius: 6, - cursor: "pointer", - }, - cancelButton: { - padding: "5px 10px", - fontFamily: MONO, - fontSize: 12, - fontWeight: 600, - color: "var(--color-warn)", + fontSize: 11, + fontWeight: 500, + color: "var(--color-text-muted)", background: "transparent", - border: "1px solid var(--color-stroke)", + border: "1px solid transparent", borderRadius: 6, cursor: "pointer", + letterSpacing: "0.04em", + transition: + "color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out)", }, footnote: { - fontFamily: SANS, - fontSize: 12, + fontFamily: MONO, + fontSize: 10, color: "var(--color-text-muted)", - fontStyle: "italic", - lineHeight: 1.4, + letterSpacing: "0.04em", + paddingTop: 2, + borderTop: "1px dashed var(--color-stroke)", + marginTop: 2, + paddingLeft: 2, }, }; diff --git a/src/components/ExecutionPanel.tsx b/src/components/ExecutionPanel.tsx index 96b90ee..f56b3f4 100644 --- a/src/components/ExecutionPanel.tsx +++ b/src/components/ExecutionPanel.tsx @@ -2201,77 +2201,83 @@ const styles: Record = { textTransform: "none", opacity: 0.75, }, - // ----- Grouped form cards (PR #5b form-flow refactor) ----------------- + // ----- Grouped form cards — refined hierarchy -------------------------- + // Step pill becomes a thin 24px circle (mono digit, no background fill) + // so the eye lands on the title first. Card surface gains a faint + // glass tint for depth without colour wash. Body padding tightened + // for denser, more terminal-like reading rhythm. formCard: { margin: "10px 16px", - padding: "16px 18px", - // Fully transparent surface — only the border + chapter pill + - // content sits between the user and the panel's frosted glass + - // the Unicorn Studio scene behind it. We keep a tiny backdrop - // blur so any text directly under the card body still stays - // legible, but no coloured wash. Border carries the visual - // structure of the card on its own. - background: "transparent", - backdropFilter: "blur(6px)", - WebkitBackdropFilter: "blur(6px)", - border: `1px solid var(--color-stroke)`, - borderRadius: 12, - boxShadow: "var(--shadow-component-soft, none)", + padding: "18px 20px 16px", + background: "var(--surface-card)", + backdropFilter: "blur(10px) saturate(120%)", + WebkitBackdropFilter: "blur(10px) saturate(120%)", + border: "1px solid var(--color-stroke)", + borderRadius: 14, + boxShadow: + "0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 6px 24px -8px rgba(0, 0, 0, 0.06)", display: "flex", flexDirection: "column", - gap: 12, + gap: 14, }, formCardHeader: { display: "flex", - alignItems: "baseline", - gap: 10, - flexWrap: "wrap", - paddingBottom: 4, + alignItems: "center", + gap: 12, + paddingBottom: 6, + borderBottom: "1px dashed var(--color-stroke)", }, formCardStep: { + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + width: 22, + height: 22, fontFamily: MONO, - fontSize: 13, - fontWeight: 700, - color: "var(--color-5-strong, var(--color-5))", - letterSpacing: 0, - background: "var(--color-accent-bg-soft)", - border: "1px solid var(--color-accent-border)", - padding: "2px 7px", - borderRadius: 999, + fontSize: 11, + fontWeight: 600, + color: "var(--color-text-muted)", + background: "transparent", + border: "1px solid var(--color-stroke)", + borderRadius: "50%", fontVariantNumeric: "tabular-nums", flexShrink: 0, + letterSpacing: 0, }, formCardTitle: { fontFamily: SANS, - fontSize: 18, - fontWeight: 700, + fontSize: 16, + fontWeight: 600, color: THEME.text, - letterSpacing: 0, + letterSpacing: "-0.005em", }, formCardSubtitle: { fontFamily: MONO, - fontSize: 14, + fontSize: 11, color: THEME.textMuted, fontVariantNumeric: "tabular-nums", marginLeft: "auto", + letterSpacing: "0.04em", + textTransform: "uppercase", }, formCardBody: { display: "flex", flexDirection: "column", - gap: 10, + gap: 12, }, formCardSubLabel: { fontFamily: MONO, - fontSize: 14, + fontSize: 11, fontWeight: 600, color: THEME.textMuted, - letterSpacing: 0, - marginTop: 2, + letterSpacing: "0.08em", + textTransform: "uppercase", + marginTop: 4, }, formCardFootnote: { - marginTop: 4, + marginTop: 6, fontFamily: MONO, - fontSize: 14, + fontSize: 12, color: THEME.textMuted, lineHeight: 1.5, }, diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx index 2227c0c..7e82342 100644 --- a/src/components/HeaderBar.tsx +++ b/src/components/HeaderBar.tsx @@ -300,20 +300,34 @@ const NavPill: FC<{ label: string; active: boolean; onClick: () => void }> = ({ active, onClick, }) => { + const [hovered, setHovered] = useState(false); return (