Feat/UI finalize p4#4
Open
cryptocrystian wants to merge 12 commits into
Open
Conversation
- Create React + Vite app with TypeScript in apps/web - Implement PRAVADO design system with beige-first palette - Configure Tailwind CSS with CSS variables for theming - Build app shell with collapsible sidebar and responsive topbar - Add React Router with all core routes (dashboard, campaigns, content, etc.) - Create Dashboard with Visibility Score KPI and AI recommendations - Build Content Studio with forced light mode and split-panel layout - Implement PR Credits wallet widget and basic page structures - Add dark/light theme toggle with localStorage persistence - Full TypeScript compliance with zero errors - Production build tested and working (apps/web/dist) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added HSL-based CSS variables for theme system - Implemented dark app shell with light content islands pattern - Updated all components to use new theme tokens - Enabled dark mode by default - Added data-surface='content' wrappers for content areas - Updated buttons, cards, and UI elements with new styling - Ensured WCAG AA contrast compliance 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
- Add GitHub Actions workflow with Node 20.19.4 - Add .nvmrc and .node-version files for version management - Update package.json engines to require Node 20+ - Fix Cloudflare Pages and GitHub Actions build issues
- Update GitHub Actions to use Node.js setup v4 - Change from npm ci to npm install for initial setup - Add test script to prevent workflow failures
- Remove duplicate/conflicting workflows (deploy-pages.yml, nodejs.yml) - Simplify to single CI workflow with Node 20.19.4 - Add clean Cloudflare Pages deployment workflow - Remove cache dependency issues by using npm install - Fix Node version conflicts between workflows
- Set Vite base to './' for relative asset paths - This fixes assets loading on Cloudflare Pages subdirectory URLs - Resolves 404 errors on preview deployments
✨ Features: - Enterprise KPI hero with structured layout, sparkline, and CTA buttons - 12-column CSS grid dashboard layout with responsive sections - Brand token application across buttons, links, chips, and navigation - Enterprise data tables with sticky headers, zebra rows, and density toggle - SectionCard component for consistent dashboard sections - Chart.js theme integration utilities for brand consistency 🎨 Brand Application: - Standardized button variants (primary, secondary, ghost) with brand colors - Interactive links with brand color and hover states - Status chips with semantic colors and subtle backgrounds - Navigation active states with brand indicators 📊 Tables & Data: - Sticky table headers for long scrolling - Right-aligned numeric columns with monospace fonts - Difficulty chip colors: <=40 success, 41-70 warning, >70 danger - Density toggle (Comfortable/Compact) for different use cases - Pagination with clear prev/next and item counts ♿ Accessibility: - Standardized focus rings with 2px outline and brand color - WCAG AA contrast compliance across all components - Proper ARIA labels and screen reader support - Keyboard navigation for all interactive elements 🏗️ Architecture: - Content island pattern with data-surface='content' wrapper - Dark app shell with light surfaces for data components - HSL-based color system with CSS variables - Responsive typography scaling and spacing tiers 🧪 Testing: - Playwright visual snapshots for KPI hero and tables - Test data masking for stable visual regression testing - Focus state testing for accessibility compliance 📚 Documentation: - Comprehensive UI-Patterns.md with implementation guide - Component anatomy and usage examples - Brand application standards and guidelines 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
GLASS & DEPTH: • Add glass-card utility with backdrop blur + noise texture • Apply glassmorphism to all dashboard components • Enhanced table hover states with glass effects AI BRAND ACCENTS: • Implement AI teal/gold color system • KPI Hero score with teal-to-gold gradient text • Strategic accent usage across components • Enhanced focus rings and interactive states ENHANCED SIDEBAR: • Create AppSidebar with brand gradient rail • Glass morphism surface with icon navigation • Active pill states using AI teal • Mini org card with progress visualization CONTENT ISLANDS: • Fix content islands to wrap individual cards only • Remove page-level content surface wrapper • Dark shell with subtle brand gradient vignettes MICRO-INTERACTIONS: • Smooth transitions and hover effects • Glass blur on interactive elements • Enhanced density toggle styling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
✨ Brand System Implementation - Added P4 semantic color scales (ai-teal/gold 300/500/600) - Updated CSS tokens with glass-fill/stroke variables - Enhanced Tailwind config with full brand palette - Implemented gradient micro-strokes on glass cards 🎨 Sidebar V2 (Glass Navigation) - 4px gradient rail (teal-600 to gold-600) - Compact glass list with no white pills - Active states with gradient inset outline + ai-teal-300 text - Count badges using ai-gold accent system 📊 Composed KPI Hero (12-Column Layout) - Span 7: Big score (text-7xl ai-teal-300) + delta chips + canvas sparkline - Span 5: Four mini-stats with progress bars and click-to-detail links - Gradient action buttons (teal-600 to gold-600) - Enhanced accessibility and semantic structure ⚡ Quick Actions Row - Four 1-click shortcuts: New Content, Press Release, Analyze URL, Export - PostHog tracking for flow_path_len metrics - Teal/gold accent styling with hover animations 🎛️ Enterprise Tables & Chips - P4 difficulty chips: teal (≤40), gold (41-70), danger (>70) - Enhanced hover with ai-teal ring and backdrop - Sticky headers with glass backdrop blur - Monospace numerics with proper font stack 🏝️ Content Page Islands (Anti-Glare) - Single light island (210 20% 99% off-white) - Dark shell preserved, wraps editor + panels only - Right rail: Versions & Copilot tips as glass cards - Teal accent underlines for active editor tabs 📈 Charts Theme (Brand Integration) - Brand palette: ai-teal-300, ai-gold-500, neutrals - Glass tooltips with proper backdrop and borders - Enhanced legend styling and grid colors ⌨️ Command Palette (⌘K) - Top bar integration with search/command entry - Glass modal with brand accent highlights - Keyboard navigation (↑↓ + Enter) - Quick actions for shortest paths workflow 📚 Updated Documentation - Complete UI-Patterns.md refresh for P4 system - Sidebar anatomy, glass cards, KPI hero structure - Brand usage guidelines and accessibility standards 🚀 Flow Optimization - Dashboard → Submit PR ≤3 actions - Dashboard → Publish content ≤3 actions - Dashboard → Export analytics ≤2 actions - All flows tracked in PostHog for optimization 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove unused imports: - CommandPalette: Remove unused 'X' import - KPIHero: Remove unused 'MoreHorizontal' and 'Zap' imports - AppLayout: Remove unused 'Command' import Build now passes successfully ✅ 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Deploying pravado-app-connect-to-github with
|
| Latest commit: |
97cecb3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://32a8fe00.pravado-app-connect-to-github.pages.dev |
| Branch Preview URL: | https://feat-ui-finalize-p4.pravado-app-connect-to-github.pages.dev |
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.
Summary
Implements P4 — Brand System + Dashboard V2.1 & Content Page Polish, achieving Pravado's enterprise
look & flow with brand-forward shell, deep glass cards, AI teal/gold accents, and optimized user
journeys.
✨ Brand System Implementation
--ai-teal-500/600/300,--ai-gold-500/600/300)--glass-fill,--glass-stroke,--glass-stroke-strong)🎨 Sidebar V2 (Glass Navigation)
📊 Composed KPI Hero (12-Column Layout)
text-7xl ai-teal-300) + delta chips + canvas sparkline + gradient buttonsTime-to-Citation, Cadence)
⚡ Quick Actions Row
flow_path_lenmetrics for workflow optimization🎛️ Enterprise Tables & Chips
bg-ai-teal-500/02with ring for professional feel🏝️ Content Page Islands (Anti-Glare)
210 20% 99%) to reduce eye strain📈 Charts Theme (Brand Integration)
⌨️ Command Palette (⌘K)
🚀 Flow Optimization
📚 Documentation Updates
Test Plan
Technical Notes
🤖 Generated with Claude Code
📊 Branch Summary
The feat/ui-finalize-p4 branch includes: