Skip to content

Update header to white background with black text #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update header to white background with black text #68

wants to merge 1 commit into from

Conversation

@devin-ai-integration
Copy link

@devin-ai-integration devin-ai-integration bot commented Oct 9, 2025 •
edited
Loading

Update header to white background with black text

Summary

Converted the Angular2-HN header from red background with white text to white background with black text to match Figma design specifications. This affects only the day theme, leaving night and amoled themes unchanged.

Key Changes:

  • Header background: #b92b27 (red) → #fff (white)
  • All header text: #fff (white) → #000 (black)
  • Navigation links: hsla(0,0%,100%,.9) → rgba(0, 0, 0, 0.7) (70% opacity black)
  • Logo inner circle: #fff (white) → #000 (black)
  • Border: 2px solid #b92b27 → 1px solid #e0e0e0 (subtle gray)

Review & Testing Checklist for Human

  • Visual verification: Test header appearance across all pages (news, newest, ask, etc.) to ensure consistent styling
  • Accessibility check: Verify color contrast ratios meet WCAG AA standards, especially for navigation links with 70% opacity
  • Logo appearance: Confirm the black logo inner circle looks good against the white header background
  • Mobile responsiveness: Test header on mobile/tablet screen sizes to ensure text remains readable
  • Comprehensive color audit: Scan for any missed hardcoded white text colors elsewhere in the header component

Test Plan

  1. Load the app locally and navigate through different sections
  2. Test on mobile viewport (DevTools or actual device)
  3. Use browser accessibility tools to check contrast ratios
  4. Verify hover states work correctly for navigation links

Notes

Before
After
Figma Design

@devin-ai-integration @lukeepage2
Update header to white background with black text to match Figma design
6a3f071 
- Changed header background from red (#b92b27) to white (#fff)
- Updated header text color from white to black (#000)
- Updated navigation link colors to black with 70% opacity
- Changed logo inner circle from white to black for contrast
- Updated border from prominent red to subtle light gray (#e0e0e0)
- Maintains existing responsive behavior and layout

Figma design reference: https://www.figma.com/design/N0W53SOGTs2AG2fACWguaZ/Website?node-id=1-3258

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

devin-ai-integration bot commented Oct 9, 2025

🤖 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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant