Feat/UI polish p2 enterprise#2
Open
cryptocrystian wants to merge 9 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>
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.
Brand Application
(hover:bg-panel-elevated/60)
KPI Hero Component
actions
secondary breakdown
12-Column Grid Layout
Enterprise Tables
Chart Integration
Focus & Accessibility
Content Islands