style(PageLinks): improve dark-mode link contrast and tighten top spacing#8108
Conversation
Refine styling in PageLinks: update Separator to use gray color tokens and semibold font, adjust link class string for improved default/hover colors and transition effects, and reduce the container top margin from mt-20 to mt-8 for tighter vertical spacing.
Adjust PageLinks UI: update Separator span to use gray tones, semibold weight and dark-mode color; enhance link classes with improved dark:text, hover colors and transition for better contrast and feedback; reduce container top margin from mt-20 to mt-8 to tighten spacing. Minor formatting cleanup.
Update PageLinks component styling: change base text color from text-gray-500 to text-gray-400 and adjust hover from hover:text-gray-600 to hover:text-gray-500 for a slightly lighter link and hover state. No functional changes.
…/webpack.js.org into fix-pagelinks-section
|
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 PageLinks component’s Tailwind styling to improve dark-mode readability and reduce the vertical spacing above the link group.
Changes:
- Updated separator styling (color/weight) for better visual balance across themes.
- Updated link/button Tailwind classes to improve dark-mode contrast and add hover color transitions.
- Reduced top margin above the PageLinks block.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const classes = | ||
| "text-gray-500 dark:text-gray-500 text-sm cursor-pointer font-sans hover:underline"; | ||
| "text-gray-400 dark:text-gray-200 text-sm cursor-pointer font-sans hover:underline hover:text-gray-500 dark:hover:text-white transition-colors"; |
There was a problem hiding this comment.
text-gray-400 isn’t defined in this repo’s Tailwind theme (see tailwind.config.js colors: only gray 100/200/300/500/600/700/800/900). This class will not be generated, so the links may end up inheriting an unintended color in light mode. Use one of the configured grays (e.g., keep text-gray-500 or switch to text-gray-300/600) instead.
| "text-gray-400 dark:text-gray-200 text-sm cursor-pointer font-sans hover:underline hover:text-gray-500 dark:hover:text-white transition-colors"; | |
| "text-gray-500 dark:text-gray-200 text-sm cursor-pointer font-sans hover:underline hover:text-gray-500 dark:hover:text-white transition-colors"; |
There was a problem hiding this comment.
Let's keep 500, it is better
|
|
||
| return ( | ||
| <div className="print:hidden mt-20"> | ||
| <div className="print:hidden mt-8"> |
There was a problem hiding this comment.
mt-8 isn’t part of the configured Tailwind spacing scale in this repo (spacing is overridden to 0/5/10/20 in tailwind.config.js), so this margin class won’t be generated and the top spacing change won’t take effect. Use an existing spacing value (e.g., mt-10 or mt-5) to achieve the tightened layout.
| <div className="print:hidden mt-8"> | |
| <div className="print:hidden mt-5"> |
Update PageLinks component styling: change the separator text color from text-gray-400 to text-gray-500 to increase contrast and visibility. Dark-mode color and hover styles remain unchanged; no behavioral code modified.
|
Thanks for the review! Updated the link color to use |
Description
This PR improves the PageLinks component styling with the following updates:
Changes Made
Screenshots
Before
After
Checklist