Apply VSCode-style design language across all configuration pages#69
Merged
Apply VSCode-style design language across all configuration pages#69
Conversation
- Add VSCode-style header panel with border separator - Implement content-background CSS variable (#1E1E1E) for VSCode dark theme - Fix card height consistency issues with min-height constraints - Optimize empty state spacing and layout - Improve responsive design for mobile and desktop - Enhanced form styling with focus states and transitions - Add loading state with spinner component - Remove header icon for cleaner design - Update footer layout with variable count display 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove redundant auth() check, rely on layout-level protection - Replace hardcoded colors with CSS variables for better theme support - Implement VSCode-style header panel and card layouts - Use Button components for consistent interactions - Add responsive design for mobile devices - Fix SystemSecretsList component color hardcoding - Ensure full-width sections to match environment page - Align header structure with other pages for consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove redundant auth() check, rely on layout-level protection - Replace hardcoded colors with CSS variables for better theme support - Implement VSCode-style header panel and full-width layout - Use Card, Button, Input components for consistent interactions - Add proper spacing for form descriptions (tight to input fields) - Improve visual hierarchy and responsive design foundation - Ensure complete alignment with environment and secrets pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove redundant auth() check, rely on layout-level protection - Replace ALL hardcoded colors with CSS variables for theme support - Implement VSCode-style header panel and full-width layout - Fix all card styling with proper shadow and border classes - Update input fields with focus states and transitions - Standardize button hover effects and color usage - Maintain full functionality while improving visual consistency All hardcoded colors replaced: bg-[#252526] → bg-card, border-[#3e3e42] → border-border text-white/gray-300 → text-foreground, text-blue-400 → text-primary bg-[#0e639c] → bg-primary, hover:bg-[#1177bb] → hover:bg-primary/90 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace all VSCode hardcoded colors with semantic CSS variables - Dialog container: bg-[#252526] → bg-card, border-[#3e3e42] → border-border - Text colors: text-white → text-foreground, text-gray-400/500 → text-muted-foreground - Form inputs: bg-[#1e1e1e] → bg-input with proper focus states - Tabs system: bg-[#1e1e1e] → bg-secondary, active: data-[state=active]:bg-primary - Buttons: border-[#3e3e42] → border-border, hover:bg-[#3e3e42] → hover:bg-accent - Success states: text-green-500 → text-green-600 dark:text-green-500 - Add focus rings and improved accessibility for all form elements Zero functional changes - only visual styling improvements for theme support. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Fix import order in payment page (ESLint simple-import-sort) - Clean up unused imports and improve code organization - Minor auth configuration component cleanup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
✅ PR Check Results: PassedBuild Checks
✨ Great work!All checks passed successfully. Your PR is ready for review. Details:
🔗 View Details: |
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
Comprehensive VSCode design language alignment for all configuration pages and settings dialog.
Changes Made
🎨 Environment Variables Page (
app/projects/[id]/environment/page.tsx)🔐 Secrets Configuration Page (
app/projects/[id]/secrets/page.tsx)bg-[#252526]→bg-card, etc.)💳 Payment Configuration Page (
app/projects/[id]/payment/page.tsx)🔑 Authentication Configuration Page (
app/projects/[id]/auth/page.tsx&components/auth-configuration.tsx)auth()checks, rely on layout-level protection⚙️ Settings Dialog (
components/dialog/settings-dialog.tsx)bg-[#252526]→bg-cardbg-[#1e1e1e]→bg-inputwith proper focus statesdata-[state=active]:bg-[#0e639c]→data-[state=active]:bg-primaryDesign System Improvements
Color System Migration
bg-[#252526]→bg-cardborder-[#3e3e42]→border-bordertext-white/gray-300→text-foregroundtext-gray-400/500→text-muted-foregroundbg-[#0e639c]→bg-primaryhover:bg-[#1177bb]→hover:bg-primary/90Layout Consistency
max-w-4xl→mx-auto)Component Standardization
Card,CardHeader,CardContentcomponentsButtoncomponent variantsInputandTextareastylingfocus:ring-2 focus:ring-ring focus:border-ringBenefits
✅ Complete Visual Consistency - All configuration pages now share the same VSCode design language
✅ Theme Compatibility - Full support for light/dark theme switching with CSS variables
✅ Improved Maintainability - No more hardcoded colors, easy theme updates
✅ Enhanced Accessibility - Proper focus indicators and semantic color usage
✅ Better UX - Consistent interactions, spacing, and visual hierarchy
✅ Mobile Responsive - Proper responsive design across all pages
Test Plan
🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com