From a77bd714fa1cf95b8cdbb5718a7887c36236bfc9 Mon Sep 17 00:00:00 2001 From: Jose Cruz Date: Thu, 2 Jul 2026 22:39:14 -0400 Subject: [PATCH 1/2] fix(ui): clear landing neon-blue + gradebook category side-stripe (#106, #112) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #106 — replace the #3B82F6 neon-blue on landing/hero surfaces with the warmer --info (#3e6f8a), per the issue's fix note: - globals.css: the intro-orbit blue node -> var(--info) (base + .landing-page rule) - (public)/page.tsx: hero-canvas graph palette + CLUSTER_COLORS + OB_STEP_COLORS blue entries -> #3e6f8a (concrete hex; JS canvas / inline sinks where var() doesn't resolve) The hero stat tiles / glass cards were already removed by #102, so #106's AC1 was already met on main; this clears AC2. #112 — the assignment-category list used `2px solid ${color}` as its ONLY category-color indicator, which fails the "no >1px colored side-stripe" bar. Move the category color to a leading dot in the header (the issue's recommended treatment) and make the list border a 1px neutral --border divider — no info lost. #112's other three items (off-white panels, --ease easing, Inter->DM Sans) were already done on main. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/app/(public)/page.tsx | 6 +++--- frontend/src/app/globals.css | 4 ++-- frontend/src/components/Gradebook/AssignmentList.tsx | 6 +++++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx index 1906987a..ecf34385 100644 --- a/frontend/src/app/(public)/page.tsx +++ b/frontend/src/app/(public)/page.tsx @@ -15,8 +15,8 @@ const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:5000'; const SCRAMBLE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#_"; -const CLUSTER_COLORS = ['#9CA3AF', '#D97706', '#3B82F6', '#8A63D2', '#14B8A6', '#EF4444']; -const OB_STEP_COLORS = ['#D97706', '#8A63D2', '#3B82F6', '#14B8A6', '#EF4444']; +const CLUSTER_COLORS = ['#9CA3AF', '#D97706', '#3e6f8a', '#8A63D2', '#14B8A6', '#EF4444']; +const OB_STEP_COLORS = ['#D97706', '#8A63D2', '#3e6f8a', '#14B8A6', '#EF4444']; const CLUSTER_SEEDS_BG = [10.0, 11.3, 12.6, 13.9, 15.2, 16.5]; const CLUSTER_INIT_POS = [ { ox: -222, oy: -29, oz: 15 }, @@ -197,7 +197,7 @@ export default function LandingPage() { let animId: number; const palette = [ - { c: '#8A63D2', w: 0.24 }, { c: '#3B82F6', w: 0.24 }, + { c: '#8A63D2', w: 0.24 }, { c: '#3e6f8a', w: 0.24 }, { c: '#D97706', w: 0.20 }, { c: '#14B8A6', w: 0.15 }, { c: '#9CA3AF', w: 0.10 }, { c: '#D1D5DB', w: 0.07 }, ]; diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 10fdfaed..4dacfd5f 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -524,7 +524,7 @@ body { font-size: 14px; line-height: 1.5; } .landing-intro-orbit-node--green { background: var(--brand-forest); top: -3px; left: 50%; transform: translateX(-50%); } .landing-intro-orbit-node--amber { background: #D97706; right: -3px; top: 45%; transform: translateY(-50%); } -.landing-intro-orbit-node--blue { background: #3B82F6; bottom: -3px; left: 35%; transform: translateX(-50%); } +.landing-intro-orbit-node--blue { background: var(--info); bottom: -3px; left: 35%; transform: translateX(-50%); } .landing-intro-orbit-node--purple { background: #8A63D2; left: -3px; top: 30%; transform: translateY(-50%); } /* ── Button shimmer ────────────────────────────────────────────── */ @@ -860,7 +860,7 @@ input[type="reset"]:disabled { .landing-page .landing-intro-orbit-node { position: absolute; width: 10px; height: 10px; border-radius: 999px; } .landing-page .landing-intro-orbit-node--green { background: var(--brand-forest); top: -3px; left: 50%; transform: translateX(-50%); } .landing-page .landing-intro-orbit-node--amber { background: #D97706; right: -3px; top: 45%; transform: translateY(-50%); } -.landing-page .landing-intro-orbit-node--blue { background: #3B82F6; bottom: -3px; left: 35%; transform: translateX(-50%); } +.landing-page .landing-intro-orbit-node--blue { background: var(--info); bottom: -3px; left: 35%; transform: translateX(-50%); } .landing-page .landing-intro-orbit-node--purple { background: #8A63D2; left: -3px; top: 30%; transform: translateY(-50%); } /* Button shimmer. */ diff --git a/frontend/src/components/Gradebook/AssignmentList.tsx b/frontend/src/components/Gradebook/AssignmentList.tsx index 6fb60462..142e8e6c 100644 --- a/frontend/src/components/Gradebook/AssignmentList.tsx +++ b/frontend/src/components/Gradebook/AssignmentList.tsx @@ -353,6 +353,10 @@ function CategoryGroup({ flexWrap: "wrap", }} > +