fix: Improve footer legal links with lighter blue styling and subtle hover effect#8145
fix: Improve footer legal links with lighter blue styling and subtle hover effect#8145Deven14125 wants to merge 2 commits intowebpack:mainfrom
Conversation
Adjust footer anchor styling in src/components/Footer/Footer.jsx: change base link color to #63a7de, add transition on links, and set hover color to #89c2eb with underline to improve visual feedback.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR updates the styling of footer legal links to improve readability by adjusting default/hover link colors and adding a subtle hover treatment.
Changes:
- Updated footer link color to a lighter blue.
- Added color transition and hover styles (lighter color + underline) for links in the top footer container.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/components/Footer/Footer.jsx
Outdated
| const Footer = () => ( | ||
| <footer className="w-full flex-[0_0_auto] print:hidden"> | ||
| <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]"> | ||
| <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#63a7de] [&_a]:transition-colors [&_a:hover]:text-[#89c2eb] [&_a:hover]:underline"> |
There was a problem hiding this comment.
The new default link color (#63a7de) (and the hover color #89c2eb) on the footer’s white background appears to fall below WCAG AA contrast for normal-sized text (Site uses bg-white). This is an accessibility regression for the legal/copyright links. Consider using a darker blue (or a theme token) that meets contrast requirements, and avoid making the hover state even lower-contrast than the default.
| <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#63a7de] [&_a]:transition-colors [&_a:hover]:text-[#89c2eb] [&_a:hover]:underline"> | |
| <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#2563eb] [&_a]:transition-colors [&_a:hover]:text-[#1d4ed8] [&_a:hover]:underline"> |
src/components/Footer/Footer.jsx
Outdated
| <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#63a7de] [&_a]:transition-colors [&_a:hover]:text-[#89c2eb] [&_a:hover]:underline"> | ||
| <div className="mb-[24px] flex justify-center"> | ||
| <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer"> |
There was a problem hiding this comment.
[&_a:hover]:underline applies to all anchors in this container, including the OpenJS logo link (the <a> wrapping the image). That will likely add an underline on hover under the logo image as well. If the intent is to underline only text links, scope the selector to the legal-links section (e.g., a wrapper around the paragraphs) or explicitly opt the logo link out of underlining.
|
@alexander-akait this PR is Approved but not merged yet! |
|
Please read copilot answers |
Change footer anchor color classes to use deeper blue shades for base and hover states (from #63a7de/#89c2eb to #2563eb/#1d4ed8). This updates the inline Tailwind-style classes in the Footer Container to improve contrast and match the current brand palette.
|
Thanks for the feedback! I've addressed the Copilot suggestions:
Please let me know if anything else needs adjustment. |
Summary
Improves the footer legal links by using a lighter blue default color and adding a subtle hover effect for better readability and visual polish.
What kind of change does this PR introduce?
style
Did you add tests for your changes?
No (UI/styling change only)
Screenshots
Before
After
Does this PR introduce a breaking change?
No
Use of AI
No