feat(ui): glassmorphic enterprise redesign with cosmic dark theme#5
Merged
marceloceccon merged 3 commits intomainfrom Apr 25, 2026
Merged
feat(ui): glassmorphic enterprise redesign with cosmic dark theme#5marceloceccon merged 3 commits intomainfrom
marceloceccon merged 3 commits intomainfrom
Conversation
Premium dark-mode interface using sophisticated glassmorphism over a deep-navy cosmic background with vibrant orange (#FF6200) accents. Design - New cosmic shell: layered radial gradients, single GPU-composited ray sweep, twinkling starfield, two slow drifting orbs over a fixed background image. - Glass utility scale (.glass / .glass-soft / .glass-strong / .glass-input / .glass-pill / .glass-fixed) with luminous blue borders, inner highlight, and layered drop shadows. - Custom premium SVG hero illustrations per major panel (consensus nodes in glass cylinders, concentric rings, trajectory glow, coin stack, opposing nodes, orbiting roundtable, circuit config) with subtle animated highlights. - Orange CTA system (.btn-orange) with hover lift + glow, ghost buttons, refined glass toggles, shimmering progress bar, animated shine sweep on primary actions. - New header with luminous logo mark, live participants pill, and responsive subtitle. Layout & responsiveness - Header height unified via --rt-header-h CSS variable (65px / 73px responsive) so sidebar sticky top and right-rail offset always match. - Below lg the sidebar collapses behind a hamburger and slides in as a dialog drawer (backdrop, ESC close, body-scroll lock). - Hero card, prompt textarea, response cards, judge card, and progress bar scale paddings/font sizes from sm: upward. - Floating right rail stays xl-only; its panels reappear inline in the sidebar at smaller breakpoints. Performance - Removed stacked backdrop-filter from inline cards (the dominant paint cost when scrolling); kept it only on transient/fixed surfaces (header, sticky progress bar, modal, drawer, toast, back-to-top). Card alpha bumped to compensate visually. - Coalesced SSE token events through a per-participant rAF buffer in processEvent so React/paint work is capped at ~60Hz instead of running on every chunk; explicit flushes on round/participant boundaries prevent dropped trailing characters. - Memoized StreamingCard + Header, stabilized inline boxShadow via useMemo keyed on persona color to avoid object churn. - Result cards opt into content-visibility: auto and contain so offscreen completed cards skip layout/paint entirely. - Cosmic background animations slowed and consolidated (one ray sweep, two orbs at 56px blur dropping to 40px on phones), all GPU-composited (translate3d / will-change / contain). Honors prefers-reduced-motion. - body switched from overflow-x: hidden to overflow-x: clip so it no longer establishes a scroll container that derails sticky. - Aside given self-start and CSS-variable-based top/max-height for reliable sticky behavior inside the flex parent. Accessibility - Onboarding modal and mobile drawer marked as role="dialog" with aria-modal and aria-labelledby/aria-label. - Copy buttons, hamburger, drawer close, and chart all carry aria-label; decorative streaming cursor is aria-hidden. - Reduced-motion media query disables ambient animations. Tests - Updated 22 assertions to match redesigned copy (model/persona selectors, "Seat at the Table", "Convene the RoundTable", "Reset session", "Final Consensus" + score split, "tok" short label). - Confidence trajectory test now scopes path queries to the chart SVG so it ignores the new hero illustration above it. - All 207 tests pass; lint clean; production build clean.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design: New cosmic shell:
Layout & responsiveness for mobile
Accessibility
Tests