Feat/UI polish p3 enterprise#3
Open
cryptocrystian wants to merge 10 commits into
Open
Conversation
cryptocrystian
commented
Aug 25, 2025
cryptocrystian
commented
Owner
- ✨ Glassmorphism cards with backdrop blur and subtle glass effects
- 🌈 AI teal/gold branding - KPI score with gradient text, strategic accent colors
- 🎛️ Enhanced sidebar with brand gradient rail and glass surface
- 🏝️ Proper content islands - each card creates its own light area
- ⚡ Micro-interactions - smooth hover states and glass blur effects
- 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>
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.