Improve UI of navbar #101
Improve UI of navbar #101
Conversation
|
@yjrathod is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughCSS styling updates to the navbar, DocSearch component, and footer. Introduces custom properties for navbar height and link hover color, adjusts navbar item container alignment, updates DocSearch button styling, refines navbar link colors and hover states across light/dark themes, and adds responsive layout adjustments for footer and supporting elements. Changes
Possibly related PRs
Suggested labels
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@opsimate-docs/src/css/custom.css`:
- Around line 117-122: The hover rule for .navbar-icon-link:hover,
.footer-community-icon-link:hover, and .navbar__items button.clean-btn:hover
sets background-color to rgb(0,0,0) which blends with the dark navbar; change
the hover background to a slightly lighter translucent color (for example
rgba(255,255,255,0.08)–rgba(255,255,255,0.12) or similar) so the background
contrast is visible in dark mode while keeping the translateY(-1px) transform;
update only the background-color value in that selector to the chosen rgba value
to provide clear hover feedback.
- Around line 823-826: The CSS selector for the dark-theme navbar icon is
invalid due to a stray colon after .navbar-icon-link; locate the rule targeting
html[data-theme="dark"] .navbar-icon-link: and remove the trailing colon (or
replace it with the intended pseudo-class, e.g., :hover or :active) so the block
becomes a valid selector and the background-color/color declarations apply to
.navbar-icon-link in dark mode.
🧹 Nitpick comments (2)
opsimate-docs/src/css/custom.css (2)
18-19: Unused CSS custom property.
--ifm-navbar-link-hover-coloris defined but never referenced anywhere in this file. Consider removing it or using it in the hover styles (e.g., lines 782, 794) to keep the theme consistent and maintainable.
81-87: Hardcoded margin may break on narrow viewports.The fixed
margin-right: 100pxcould cause layout issues on smaller screens. Since the PR acknowledges incomplete responsiveness, consider wrapping this in a media query or using relative units when addressing the responsive layout.
| .navbar-icon-link:hover, | ||
| .footer-community-icon-link:hover, | ||
| .navbar__items button.clean-btn:hover { | ||
| background-color: rgba(57, 73, 171, 0.3); | ||
| background-color: rgb(0, 0, 0); | ||
| transform: translateY(-1px); | ||
| } |
There was a problem hiding this comment.
Hover background invisible on dark navbar.
background-color: rgb(0, 0, 0) on hover provides no visual feedback since the navbar is also black (#000000). Only the subtle translateY(-1px) transform will be visible. Consider using a slightly lighter shade (e.g., rgba(255, 255, 255, 0.1)) for better hover feedback in dark mode.
Suggested fix
.navbar-icon-link:hover,
.footer-community-icon-link:hover,
.navbar__items button.clean-btn:hover {
- background-color: rgb(0, 0, 0);
+ background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .navbar-icon-link:hover, | |
| .footer-community-icon-link:hover, | |
| .navbar__items button.clean-btn:hover { | |
| background-color: rgba(57, 73, 171, 0.3); | |
| background-color: rgb(0, 0, 0); | |
| transform: translateY(-1px); | |
| } | |
| .navbar-icon-link:hover, | |
| .footer-community-icon-link:hover, | |
| .navbar__items button.clean-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transform: translateY(-1px); | |
| } |
🤖 Prompt for AI Agents
In `@opsimate-docs/src/css/custom.css` around lines 117 - 122, The hover rule for
.navbar-icon-link:hover, .footer-community-icon-link:hover, and .navbar__items
button.clean-btn:hover sets background-color to rgb(0,0,0) which blends with the
dark navbar; change the hover background to a slightly lighter translucent color
(for example rgba(255,255,255,0.08)–rgba(255,255,255,0.12) or similar) so the
background contrast is visible in dark mode while keeping the translateY(-1px)
transform; update only the background-color value in that selector to the chosen
rgba value to provide clear hover feedback.
| html[data-theme="dark"] .navbar-icon-link: { | ||
| background-color: rgb(0, 0, 0); | ||
| color: #bbdefb !important; | ||
| } |
There was a problem hiding this comment.
CSS syntax error: invalid selector.
There's a stray colon after .navbar-icon-link which makes this an invalid selector. The entire rule block will be ignored by browsers, breaking the dark mode icon link styling.
Proposed fix
-html[data-theme="dark"] .navbar-icon-link: {
- background-color: rgb(0, 0, 0);
+html[data-theme="dark"] .navbar-icon-link:hover {
+ background-color: rgba(255, 255, 255, 0.1);
color: `#bbdefb` !important;
}If the intent was to style the default (non-hover) state, remove the colon entirely:
-html[data-theme="dark"] .navbar-icon-link: {
+html[data-theme="dark"] .navbar-icon-link {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| html[data-theme="dark"] .navbar-icon-link: { | |
| background-color: rgb(0, 0, 0); | |
| color: #bbdefb !important; | |
| } | |
| html[data-theme="dark"] .navbar-icon-link:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: `#bbdefb` !important; | |
| } |
🧰 Tools
🪛 Biome (2.1.2)
[error] 823-824: Unexpected value or character.
Expected one of:
(parse)
🤖 Prompt for AI Agents
In `@opsimate-docs/src/css/custom.css` around lines 823 - 826, The CSS selector
for the dark-theme navbar icon is invalid due to a stray colon after
.navbar-icon-link; locate the rule targeting html[data-theme="dark"]
.navbar-icon-link: and remove the trailing colon (or replace it with the
intended pseudo-class, e.g., :hover or :active) so the block becomes a valid
selector and the background-color/color declarations apply to .navbar-icon-link
in dark mode.
1 participant
What Was Changed
Updated UI of navbar as per the reference design and improve overall visual clarity.
Why Was It Changed
To enhance the documentation UI.
Screenshots
Additional Context
This PR is currently just a draft because:
I’ll continue improving the other parts of UI also eventually as per the reference.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.