Update header to white background with black text matching Figma design

[devin-ai-integration]

Update header to white background with black text matching Figma design

Summary

Updated the day/default theme header styling to use a white background with black text instead of the previous red background with white text, based on Figma design specifications from this design node.

Color changes:

• Header background: #b92b27 (red) → #ffffff (white)
• Header text: #fff (white) → #000 (black)
• Navigation links: hsla(0,0%,100%,.9) (white) → #444 (gray), with #000 (black) on hover/active
• Border color: #b92b27 (red) → #e0e0e0 (light gray)

Files modified:

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

Screenshots:

Figma Design:

Before:

After:

Review & Testing Checklist for Human

• Verify logo visibility - The logo-inner element has white background which may not be visible on white header. Check if the logo needs color adjustment.
• Check settings icon visibility - Verify the cog icon (assets/images/cog.svg) is visible on the white background. It may need to be replaced with a dark version.
• Test mobile view - Header has different styling on mobile (fixed positioning, different dimensions). Verify the white header works well on mobile devices.
• Verify all themes work - Test switching between default, night, and amoledblack themes to ensure only the day theme was affected.
• Check border color impact - The border variable affects footer, item-header, and job-header elements. Verify the light gray border looks good across all pages.

Recommended Test Plan

1. Load the app in browser at localhost:4200
2. Check logo and settings icon visibility in the header
3. Test navigation link hover and active states for readability
4. Switch between all three themes (default/night/amoledblack) in settings
5. Test on mobile viewport or actual mobile device
6. Navigate through different pages (news, newest, show, ask, jobs) to verify borders

Notes

• Only the day/default theme is affected by these changes. Night and amoledblack themes retain their dark headers.
• Changes were tested locally on desktop view and match the Figma design specifications.
• The border color change affects multiple UI elements beyond just the header (footer, item borders, etc.)

---

Link to Devin run: https://app.devin.ai/sessions/2daa2cf54aef483090de263fe7ebefa3
Requested by: @lukeepage2

[devin-ai-integration]

🤖 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