feat(ui): comprehensive spacing and design system overhaul#39
Open
antmikinka wants to merge 11 commits intomainfrom
Open
feat(ui): comprehensive spacing and design system overhaul#39antmikinka wants to merge 11 commits intomainfrom
antmikinka wants to merge 11 commits intomainfrom
Conversation
Complete UI revamp with systematic spacing improvements across all components and pages. Spacing System Changes: - Inner padding: p-6 → p-8 (24px → 32px) for main containers - Outer gaps: gap-6 → gap-8, gap-4 → gap-6 for consistent breathing room - Margins: mb-4 → mb-5, mt-2 → mt-2.5 for refined text density - Form spacing: space-y-2 → space-y-3 for better touch targets - Button gaps: gap-2 → gap-2.5, icon spacing improvements Components Updated: - AudioSettings: grid gaps, form groups, volume controls, button spacing - VoiceControls: container padding, audio meter spacing, status indicators - VoiceOrb: status label margin, processing bar gaps - MultiModelStatus: card padding, model capacity section, device badges - SystemInfoPanel: hardware info spacing, device cards, backend badges - Layout: sidebar navigation padding, nav item gaps, footer spacing - PersonaSelector: icon sizes, description spacing - LemonCard: header flex layout, subtitle margin - LemonDialog: close button positioning, title container padding - LemonSelect: input padding for better click targets - LemonTabs: tab padding, content spacing - InterviewCard: feedback section spacing, badge gaps Pages Updated: - Interview: message bubbles, status bar, button group spacing - Feedback: Q/A cards, strengths/improvements sections, score display - Landing: form grid gaps, label margins, submit button spacing - Dashboard: stat card icons, section headers, quick actions - Settings: form groups, status card icons, theme selector - Preparing: persona step icons, option cards, onboarding flow - InterviewHistory: search filters, list spacing, dialog tabs, transcript bubbles - Jobs: complete theme conversion to lemonade design system Design System Improvements: - Consistent lemonade brand colors across all components - Dark mode support with proper contrast ratios - Refined typography with -0.01em letter-spacing - Better touch targets (44px minimum) - Improved visual hierarchy through spacing - Coherent half-step spacing scale (1.5, 2.5, 3.5) Documentation: - index.css: comprehensive 80+ line spacing system guide
Apply 'Bold Generosity' design system to all 8 pages with dramatic spacing improvements:
- Dashboard, Interview, Feedback, InterviewHistory, Jobs, Settings, Landing, Preparing
Key changes across all pages:
- Container padding: p-8 → p-12 (48px), max-w-5xl → max-w-6xl
- Headlines: text-2xl → text-4xl/5xl (30px → 36px/48px)
- Subtitles: text-sm → text-base with increased top margin
- Card padding: p-4/p-5 → p-6/p-8 (16px/20px → 24px/32px)
- Section spacing: space-y-3/4/6 → space-y-8/10 (12px/16px/24px → 32px/40px)
- Typography scale: text-xs → text-sm, text-sm → text-base throughout
- Touch targets: buttons px-5 py-2.5 → px-6/8 py-3.5/4, h-10 → h-12/16
- Icons: size={15/16} → size={18/20/22}, avatar w-8 → w-10
- Input fields: px-4 py-2.5 → px-5/8 py-3.5/5, text-sm → text-base
- Gaps: gap-2/3 → gap-4/5/6 throughout
- Empty states: larger icons (32/40 → 48), more padding (py-12 → py-16/20)
Created DESIGN_SYSTEM.md documenting the 'Bold Generosity' philosophy:
- Full screen utilization with centered hero layouts
- 3x spacing rule when in doubt
- Oversized typography for editorial impact
- Generous touch targets (minimum h-16 for buttons)
- Premium feel through whitespace and breathing room
All pages now use consistent design tokens for a cohesive, premium aesthetic.
Apply premium spacing design system to core interview experience:
- Page padding px-8 → px-16 for generous horizontal spacing
- Header px-8 py-5 → px-12 py-6 with larger typography
- Audio panel px-8 py-6 → px-12 py-8
- Transcript area px-8 py-6 → px-12 py-8, space-y-6 → space-y-8
- Status bar px-8 py-4 → px-12 py-6
- Input form px-8 py-5 → px-12 py-8
- Message bubbles px-6 py-4 → px-8 py-5, gap-4 → gap-6
- Avatars w-10 h-10 → w-12 h-12
- All typography increased (text-sm→text-base, text-base→text-lg)
- Buttons p-2.5 → p-3, icons size={18} → size={20}
- StatusDot text-xs → text-sm, dot w-2 h-2 → w-2.5 h-2.5
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply premium spacing design system to interview feedback review: - Loading screen: px-8 → px-16, gap-8 → gap-12, icons enlarged - Loading title: text-2xl → text-4xl for commanding presence - Header: px-8 py-5 → px-12 py-6 with larger typography - Header title: text-base → text-xl, score text-2xl → text-4xl - Subheader: px-8 py-4 → px-12 py-6 - Content areas: p-8 → px-12 py-10, space-y-8 → space-y-10 - Cards: p-6 → p-8 throughout - Typography: text-base → text-lg for all body content - Footer: px-8 py-5 → px-12 py-6 - All icons: size increased (w-5 h-5 → w-6 h-6) - Buttons: larger padding and gaps - Progress bar: h-3 → h-4 for better visibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…board Dashboard.tsx changes: - Page container: p-12 → px-16 py-12, max-w-6xl → max-w-7xl, space-y-12 → space-y-16 - Header title margin: mb-3 → mb-4 - New Interview button: gap-3 → gap-4, px-8 py-4 → px-10 py-5, text-base → text-lg, Plus icon 20 → 22 - Stats grid: gap-8 → gap-12 for more generous spacing - Section headers: text-sm → text-base, tracking-wider → tracking-widest - Section spacing: space-y-6 → space-y-10 - Card list spacing: space-y-4 → space-y-6 - Empty state: Icon 48 → 56, mb-6 → mb-8, h3 text-xl → text-2xl, mt-3 → mt-4, mb-8 → mb-10, max-w-md → max-w-lg - Empty state button: px-8 py-4 → px-10 py-5, text-base → text-lg StatCard component: - Internal gap: gap-6 → gap-8 - Icon container: w-14 h-14 → w-16 h-16, rounded-xl → rounded-2xl - Label: text-sm font-medium tracking-wider → text-xs font-semibold tracking-widest - Value: text-3xl mt-2 → text-4xl mt-3 InterviewCard component: - Card padding: p-4 → p-6 - Internal gap: gap-4 → gap-6 - Icon container: w-10 h-10 → w-12 h-12, Briefcase 18 → 20 - Title: text-sm → text-base, gap-2.5 → gap-3 - Company text: text-xs → text-sm, mt-1.5 → mt-2 - Metadata: gap-3 → gap-4, mt-1.5 → mt-2, text-[11px] → text-xs, Clock 11 → 12 - Score: text-xl → text-2xl - ChevronRight: 18 → 20, gap-4 pl-4 → gap-6 pl-6 Build: ✓ passes
Comprehensive spacing overhaul for Preparing.tsx following the established pattern: Header: - Page padding: px-10 → px-16 - Header padding: py-6 → py-8 - Title: text-lg → text-4xl font-bold - Subtitle: text-base → text-lg - Icon gap: gap-5 → gap-6 Left Panel (Resume Viewer): - Container padding: p-12 → p-16 - Max width: max-w-2xl → max-w-3xl - Icon gap: gap-3 → gap-4, icon size: 18 → 20 - File name: text-sm → text-base - Content padding: p-8 → p-10, border radius: rounded-2xl → rounded-3xl - Text size: text-sm → text-base - Empty state: icon 56 → 64, gap mb-6 → mb-8 Right Panel: - Width: 600px → 650px - Loading state: gap-6 → gap-8, px-8 → px-12 - Icon container: w-16 h-16 → w-20 h-20, rounded-2xl → rounded-3xl - Icon size: 24 → 28 Select Phase: - Container: px-10 pt-10 pb-6 → px-12 pt-12 pb-8 - Section space: space-y-6 → space-y-8, space-y-8 → space-y-10 - Header: text-xs → text-sm font-bold - Grid gap: gap-6 → gap-8 - Label gap: space-y-3 → space-y-4 - Select height: h-10 → h-12, text-sm → text-base - Model cards: px-5 py-4 → px-6 py-5, rounded-xl → rounded-2xl - Card gap: gap-4 → gap-6 - Radio: w-5 h-5 → w-6 h-6, inner: 2.5 → 3 - Model name: text-sm → text-base - Badges: text-xs px-2 py-1 → text-sm px-3 py-1.5 - Icons: size 11 → 12, 18 → 20 - Action bar: px-10 py-6 → px-12 py-8 - Button: py-4 → py-5, text-base → text-lg, rounded-xl → rounded-2xl Downloading Phase: - Container: px-10 pt-10 → px-12 pt-12 - Icon: w-16 h-16 → w-20 h-20, mb-6 → mb-8 - Icon size: 24 → 28 - Header: text-xs → text-sm, mb-2 → mb-3 - Title: text-base font-semibold → text-lg font-bold - Progress bar: h-3 → h-4, mb-4 → mb-5 - Progress text: text-sm → text-base, percent: text-xl → text-2xl Loading Model Phase: - Container: gap-6 px-10 → gap-8 px-12 - Icon: w-16 h-16 → w-20 h-20, rounded-2xl → rounded-3xl - Icon size: 28 → 32 - Spin border: -inset-3 → -inset-4, rounded-xl → rounded-2xl - Status: text-base font-semibold → text-lg font-bold - Subtitle: text-sm → text-base, mt-2 → mt-3 Generating Persona Phase: - Container: px-10 pt-10 → px-12 pt-12 - Icon: w-16 h-16 → w-20 h-20, mb-6 → mb-8 - Icon size: 24 → 28 - Header: text-xs → text-sm, mb-2 → mb-3 - Description: text-sm → text-base, mb-10 → mb-12 - Steps space: space-y-8 → space-y-10 - Done state: gap-4 → gap-5, w-10 h-10 → w-12 h-12 - Status text: text-sm → text-base Error Phase: - Container: px-10 → px-12 - Card: p-8 → p-10 - Icon: w-12 h-12 → w-14 h-14, rounded-xl → rounded-2xl - Icon size: 20 → 24 - Gap: gap-4 → gap-5 - Title: text-sm font-semibold → text-base font-bold - Error text: text-sm → text-base - Button gap: mt-6 ml-14 → mt-8 ml-16 - Buttons: px-6 py-3 text-sm → px-8 py-4 text-base, rounded-xl → rounded-2xl PersonaStep Component: - Gap: gap-5 → gap-6 - Icon: w-12 h-12 → w-14 h-14, rounded-xl → rounded-2xl - Icon size: 18 → 20 - Title: text-sm font-semibold → text-base font-bold - Subtitle: text-sm → text-base, mt-2 → mt-3 - Analysis box: text-sm → text-base, mt-4 → mt-5, p-5 → p-6 - Persona box: mt-4 → mt-5, p-6 → p-8 - Persona badges: text-sm px-3 py-1.5 → text-base px-4 py-2
Apply comprehensive spacing overhaul to InterviewHistory.tsx following the Bold Generosity design system: Page Layout: - Page padding: p-12 -> px-16 py-12 (64px horizontal padding) - Max width: max-w-6xl -> max-w-7xl for more breathing room - Title: text-4xl -> text-5xl with increased mt spacing - Subtitle: text-base -> text-lg Search Container: - Container: p-6 -> p-10, rounded-2xl -> rounded-3xl - Search icon: size 18 -> 22, increased left padding - Search input: py-3.5 -> py-5, px-4 -> px-8, rounded-xl -> rounded-2xl Interview Cards: - Card container: space-y-4 -> space-y-6 - Card padding: p-6 -> p-10, rounded-2xl -> rounded-3xl - Card title: text-base -> text-lg - Metadata gaps: gap-4 -> gap-6, icon sizes increased - Feedback score: text-2xl -> text-3xl - Action buttons: p-3 -> p-4, icon sizes 18 -> 20 Dialog Improvements: - Tab padding: px-6 -> px-10 - Overall score: text-4xl -> text-5xl - Section margins: mb-4 -> mb-6 - Transcript messages: p-5 -> p-8, ml-12 -> ml-16 - CTA button: px-6 py-3.5 -> px-8 py-5, added icon All changes follow the 3x rule and premium editorial aesthetic from DESIGN_SYSTEM.md
Typography consistency improvements per DESIGN_SYSTEM.md:
**Feedback.tsx:**
- Header title: text-xl → text-4xl font-bold
- Header subtitle: text-base → text-lg
- Question score: text-2xl → text-3xl
- Rating icons: w-4 h-4 → w-5 h-5 (then w-6 h-6)
- Trophy icon: w-7 h-7 → w-8 h-8
- Zap icon: w-5 h-5 → w-6 h-6
**Interview.tsx:**
- Header title: text-lg font-semibold → text-2xl font-bold
- Loading text: text-lg → text-xl
- Clock icon: size={18} → size={20}
- StopCircle icon: size={18} → size={20}
- MicOff icon: size={18} → size={20}
- StatusDot: text-sm → text-base, dot size increased
**Preparing.tsx:**
- Cpu icon: size={16} → size={20}
- FileText icon: size={20} → size={22}
- Persona step icons: size={18} → size={22}
- Loader2/Check in PersonaStep: size={20} → size={22}
- Star/HardDrive/Download badges: size={12} → size={16}
- Download/ArrowRight buttons: size={20} → size={22}
- Download icon (downloading): size={28} → size={24}
- Zap icon: size={32} → size={24}
- Sparkles icon: size={28} → size={24}
- AlertCircle icon: size={24} → size={22}
**InterviewHistory.tsx:**
- Clock icon: size={16} → size={20}
- MessageSquare icon: size={16} → size={20}
**Jobs.tsx:**
- Section headers: text-sm → text-base
- Edit icon: size={18} → size={20}
- Trash2 icon: size={18} → size={20}
**Settings.tsx:**
- Tab icons: size={16} → size={20}
- RefreshCw icons: size={14/18} → size={18/20}
- Save icons: size={18} → size={20}
- Activity icon: size={22} → size={24}
- Bell/ShieldCheck icons: size={20} → size={22}
- Clock icon: size={22} → size={24}
- Theme icons: size={20} → size={22}
**Dashboard.tsx:**
- StatCard labels: text-xs → text-sm
All icon sizes now minimum size={20} per design system standards.
Apply dramatic spacing improvements to Landing.tsx following the "Bold Generosity" design system: Step Initial: - Hero section: mb-20 → mb-24 - Upload section: gap-12 → gap-16, mb-16 → mb-20 - Action buttons: gap-6 → gap-8, mb-8 → mb-10 - Error message box: increased padding (p-8 → p-10), larger icons (20 → 24), increased internal spacing Step Setup: - Header spacing: mb-16 → mb-20 - Back button: mb-8 → mb-10 - AI Extraction section: mb-12 → mb-16 - Form card: p-10 → p-12 - Internal section spacing: space-y-8 → space-y-10 - Grid gap: gap-8 → gap-10 AI Extraction Progress: - Icon containers: w-16 h-16 → w-20 h-20 - Icon sizes: 28 → 32, 16 → 20 - Section padding: p-8 → p-10 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply comprehensive spacing overhaul to Preparing.tsx following the Bold Generosity design system: - Header: Increase padding (px-16→px-20, py-8→py-10), title (text-4xl→text-5xl), subtitle (text-lg→text-xl) - Back button: Increase padding and icon size (p-3→p-4, size 20→24) - Resume panel: Increase padding (p-16→p-20), icon sizes, and border radius (rounded-3xl→rounded-[2rem]) - Right panel: Increase width (650px→700px), padding (px-12→px-16), and icon containers - Model cards: Increase padding (px-6 py-5→px-8 py-6), border radius, icon sizes (16→18), gaps - Buttons: Increase padding (py-5→py-6), border radius, icon sizes (22→24) - Progress bar: Increase height (h-4→h-5), percent text size (text-2xl→text-3xl) - Persona steps: Increase spacing (space-y-10→space-y-12), icon containers (w-14 h-14→w-16 h-16), icon sizes - Error state: Increase padding, border radius, and button sizes - Typography: Update tracking (tracking-wider→tracking-widest) for labels Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
Author
|
Opened it, wasn't that pretty, now is some issues with component overall sizing. Some spacing areas did not move also. |
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.
Complete UI revamp with systematic spacing improvements across all components and pages.
Spacing System Changes:
Components Updated:
Pages Updated:
Design System Improvements:
Documentation: