Skip to content

Conversation

@devin-ai-integration
Copy link

@devin-ai-integration devin-ai-integration bot commented Oct 13, 2025

Update header to white background with black text to match Figma design

Summary

Updated the Angular2-HN header styling from a red background with white text to a white background with black text, matching the Figma design specification at node 1-3258.

Color changes:

  • Header background: #b92b27 (red) → #fff (white)
  • Header text: #fff (white) → #000 (black)
  • Navigation links: hsla(0,0%,100%,.9) (white) → #000 (black)
  • Navigation hover: #fff#333 (dark gray)
  • Active nav link: #fff#000 (black)

Files changed:

  • src/app/shared/scss/_theme_variables.scss - Updated day theme header background color
  • src/app/core/header/header.component.scss - Updated all header text colors

Scope: Only the default (day) theme is affected. Night and black themes remain unchanged.

Review & Testing Checklist for Human

  • Critical: Logo visibility - Verify the logo is visible on the white background. The logo inner color variable ($theme-day-logo-inner: #fff) wasn't changed, so the logo might appear white-on-white.
  • Figma design match - Compare the result with the Figma design to ensure colors match exactly (pure white #FFFFFF vs off-white, pure black #000000 vs dark gray)
  • Mobile responsiveness - Test on mobile/smaller viewports to ensure the white header works well across all screen sizes
  • Navigation states - Test all navigation link states: default, hover, and active (when on that page)
  • Visual consistency - Check for any other header elements (borders, icons, etc.) that might need color adjustments for the new color scheme

Test Plan

  1. Run npm start and navigate to localhost:4200
  2. Verify header has clean white background with black text
  3. Hover over navigation links (new, show, ask, jobs) - should change to #333
  4. Click on a navigation item - active state should show in black
  5. Resize browser to mobile width or use device emulation
  6. Check logo visibility and overall appearance

Screenshots

Figma Design:
Figma Design

Before (Red header with white text):
Before

After (White header with black text):
After

Notes

- Changed header background from red (#b92b27) to white (#fff)
- Updated all header text colors from white to black (#000)
- Modified navigation link colors and hover states for better contrast
- Matches Figma design node 1-3258

Co-Authored-By: Luke Page <[email protected]>
@devin-ai-integration
Copy link
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant