Refactor: Replace hardcoded colors with CSS variables across all project pages by norberia · Pull Request #44 · FullAgent/fulling

norberia · 2025-11-06T13:21:30Z

Summary

This PR standardizes color usage throughout the project pages by replacing hardcoded hex colors with semantic CSS variables. This ensures consistent theming across the
entire application and improves maintainability by centralizing color definitions.

Changes Made

🎯 Color System Standardization:

Replace VS Code theme colors (#1e1e1e, #2d2d30, #252526) with bg-background
Update card backgrounds to use bg-card for consistency
Replace text colors (white, gray-*) with text-foreground/text-muted-foreground
Update border colors (#3e3e42) to use border-border
Standardize button colors to use bg-primary hover:bg-primary/90
Replace hover states with hover:bg-accent for consistent interactions

🌙 Enhanced Theme Support:

Enhance status indicators with dark: variants for theme support
Improve input field styling with bg-background border-input
Ensure full compatibility with light/dark theme switching

📁 Files Updated:

All project pages under app/projects/
Project sidebar components (project-sidebar.tsx, project-secondary-sidebar.tsx)
Updated globals.css for better variable definitions

Test Plan

Verify all project pages display correctly in both light and dark themes
Test theme switching functionality
Check status indicators maintain proper colors in both themes
Validate button hover states and interactions
Ensure sidebar components render consistently
Test responsive design across different screen sizes

Before/After

Before: Hardcoded hex colors scattered throughout components
// Old approach

Content

After: Semantic CSS variables for consistent theming
// New approach

Content

Additional Notes

This change:

✅ Improves maintainability by centralizing color definitions
✅ Ensures consistent visual appearance across the application
✅ Provides better accessibility through semantic color naming
✅ Enables easier theme customization and future color scheme updates
✅ Follows Tailwind CSS best practices for design tokens

🤖 Generated with https://claude.com/claude-code

Co-Authored-By: Claude noreply@anthropic.com

…ect pages - Replace VS Code theme colors (#1e1e1e, #2d2d30, #252526) with bg-background - Update card backgrounds to use bg-card for consistency - Replace text colors (white, gray-*) with text-foreground/text-muted-foreground - Update border colors (#3e3e42) to use border-border - Standardize button colors to use bg-primary hover:bg-primary/90 - Replace hover states with hover:bg-accent for consistent interactions - Enhance status indicators with dark: variants for theme support - Improve input field styling with bg-background border-input - Update both primary and secondary sidebars - Ensure full compatibility with light/dark theme switching Affected files: - All project pages under app/projects/ - Project sidebar components - Updated globals.css for better variable definitions This change ensures consistent theming across the entire application and improves maintainability by centralizing color definitions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2025-11-06T13:22:10Z

❌ PR Check Results: Failed

Build Checks

Check	Status
Lint & Build	❌ Failed
Docker Build	❌ Failed

⚠️ Action Required

Some checks failed. Please review the errors and update your PR.

Lint/Build Issues:

Check the "Lint and Build Check" job for details
Fix linting errors with pnpm run lint:fix
Ensure the project builds locally with pnpm run build

Docker Build Issues:

Check the "Docker Build Test" job for details
Verify Dockerfile changes
Test Docker build locally

Commit: 2e42f563b36f40aee0db2fb8c4656476534f6792
Branch: style/vscode-alignment

🔗 View Details:

Copilot

Pull Request Overview

This PR refactors the application to use a semantic design token system, replacing hardcoded color values with CSS variables defined in the theme. The changes introduce a comprehensive dark mode setup with proper fallback to light mode styling.

Replaces hardcoded hex color values and Tailwind color classes with semantic design tokens (e.g., text-foreground, bg-card, border-border)
Adds comprehensive CSS variable definitions for light and dark themes in globals.css using oklch color space
Extracts the "no projects" empty state into a reusable NoProject component

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
app/globals.css	Defines comprehensive light and dark theme CSS variables using oklch color space and sets up base styles
components/project-sidebar.tsx	Replaces hardcoded colors with semantic tokens and adds dark mode variants for status colors
components/project-secondary-sidebar.tsx	Updates to use semantic design tokens throughout
components/features/projectList/NoProject.jsx	New reusable component for empty project state (but still uses hardcoded colors)
app/projects/page.tsx	Refactors to use semantic tokens and extracts empty state to NoProject component
app/projects/new/page.tsx	Updates form styling to use semantic design tokens
app/projects/[id]/terminal/page.tsx	Updates terminal page styling with semantic tokens
app/projects/[id]/secrets/page.tsx	Updates secrets page with semantic design tokens
app/projects/[id]/payment/page.tsx	Updates payment configuration with semantic design tokens
app/projects/[id]/layout.tsx	Updates layout background and text colors
app/projects/[id]/github/page.tsx	Updates GitHub page styling with semantic design tokens
app/projects/[id]/environment/page.tsx	Updates environment variables page with semantic design tokens

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-06T13:28:49Z

  }
  body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground/90;


The body text uses text-foreground/90 (90% opacity) but throughout the component files, text is being changed to text-foreground at 100% opacity. This inconsistency could lead to unexpected text rendering. Consider whether body text should be at full opacity or if component text should inherit this 90% opacity.

Suggested change

@apply bg-background text-foreground/90;

@apply bg-background text-foreground;

Copilot · 2025-11-06T13:28:49Z

+    @apply scroll-m-20 text-3xl tracking-tight first:mt-0;
+  }
+  p {
+    @apply leading-7 [&:not(:first-child)]:mt-6 text-muted-foreground;


The global p tag style applies text-muted-foreground to all paragraphs, but many component changes explicitly set paragraph text to text-muted-foreground (e.g., line 56 in app/projects/page.tsx). This creates redundancy and could cause confusion about the actual text color source. Consider whether the global style is needed or if explicit component styling should be removed.

Suggested change

@apply leading-7 [&:not(:first-child)]:mt-6 text-muted-foreground;

@apply leading-7 [&:not(:first-child)]:mt-6;

Copilot · 2025-11-06T13:28:50Z

-                project.status === 'ERROR' && 'bg-red-500',
-                project.status === 'PARTIAL' && 'bg-orange-500'
+                project.status === 'RUNNING' && 'bg-green-600 dark:bg-green-500',
+                project.status === 'STOPPED' && 'bg-muted',


The 'STOPPED' status uses bg-muted while other status indicators use color-specific classes with dark mode variants. For consistency and better visual clarity, this should be bg-gray-600 dark:bg-gray-500 or bg-muted-foreground to match the pattern on line 102 in app/projects/page.tsx.

Suggested change

project.status === 'STOPPED' && 'bg-muted',

project.status === 'STOPPED' && 'bg-gray-600 dark:bg-gray-500',

Moved the NoProject import above local imports for improved readability and consistency with import grouping conventions.

norberia and others added 2 commits November 6, 2025 17:00

feat: refactor NoProject component and improve VS Code-style alignment

282bd00

norberia requested a review from HUAHUAI23 November 6, 2025 13:21

HUAHUAI23 requested a review from Copilot November 6, 2025 13:26

Copilot AI reviewed Nov 6, 2025

View reviewed changes

Reorder import statements in projects page

2e42f56

Moved the NoProject import above local imports for improved readability and consistency with import grouping conventions.

HUAHUAI23 approved these changes Nov 6, 2025

View reviewed changes

HUAHUAI23 merged commit 714f16b into FullAgent:main Nov 6, 2025
6 checks passed

Navigation Menu

Uh oh!

Refactor: Replace hardcoded colors with CSS variables across all project pages - #44

Refactor: Replace hardcoded colors with CSS variables across all project pages#44
HUAHUAI23 merged 3 commits into
FullAgent:mainfrom
norberia:style/vscode-alignment

norberia commented Nov 6, 2025

Uh oh!

github-actions Bot commented Nov 6, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 6, 2025

Uh oh!

Copilot AI Nov 6, 2025

Uh oh!

Uh oh!

Copilot AI Nov 6, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	@apply bg-background text-foreground/90;
	@apply bg-background text-foreground;

	@apply leading-7 [&:not(:first-child)]:mt-6 text-muted-foreground;
	@apply leading-7 [&:not(:first-child)]:mt-6;

	project.status === 'STOPPED' && 'bg-muted',
	project.status === 'STOPPED' && 'bg-gray-600 dark:bg-gray-500',

Uh oh!

Conversation

norberia commented Nov 6, 2025

Uh oh!

github-actions Bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ PR Check Results: Failed

Build Checks

⚠️ Action Required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Nov 6, 2025 •

edited

Loading