style: enhance hover effect for 'Previous' and 'Next' buttons (#708)

[SanketBhandarii]

Title:
UI Enhancement: Improve Hover Visibility for ‘Previous’ and ‘Next’ Buttons (#708)

Fixes #708

Changes done:

✔️Added improved hover effect for Previous and Next navigation buttons.

✔️Enhanced background color visibility for better UI clarity.

✔️Added custom styling in /assets/css/custom.css.

2. Screenshots

Before:

After:

By submitting this PR, I have verified the following:

✔️ Checked to see if a similar PR has already been opened 🤔️

✔️Reviewed the contributing guidelines 🔍️

Summary by CodeRabbit

• Style
  • Updated button hover state styling to enhance visual feedback with a refined background appearance.

[coderabbitai]

Walkthrough

Added a custom CSS stylesheet link to the HTML head configuration and introduced hover styling for .btn-info buttons with a background-color change to #dedede.

Changes

Cohort / File(s)	Summary
HTML Header Configuration _includes/head_custom.html	Added link tag for /assets/css/custom.css stylesheet; no net change to global_scripts.js reference
Button Hover Styling assets/css/custom.css	Added CSS rule for .btn-info:hover with background-color property set to #dedede

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Verify that .btn-info class is correctly applied to the Previous/Next buttons
• Confirm the hover color #dedede aligns with the site's design system and visual hierarchy
• Ensure the stylesheet inclusion does not conflict with existing CSS or cause cascading issues

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "style: enhance hover effect for 'Previous' and 'Next' buttons (#708)" accurately and clearly describes the main change in the pull request. The changes include adding a custom CSS file link in the head and implementing a hover effect for the .btn-info button class with a background-color change to #dedede. The title is concise, specific, and directly maps to the primary objective of enhancing hover effects for the Previous and Next navigation buttons as outlined in the PR objectives.
Linked Issues Check	✅ Passed	The code changes directly address the core requirements from linked issue #708, which requests adding hover effects to the Previous and Next buttons to provide visual feedback indicating they are interactive. The PR implements this by adding a custom CSS file (assets/css/custom.css) with a hover state rule for the .btn-info button class that sets the background-color to #dedede, creating the immediately visible visual feedback specified in the issue. The implementation provides the consistent UI behavior enhancement that was the primary objective of the issue.
Out of Scope Changes Check	✅ Passed	All changes in this PR are directly scoped to implementing the hover effect feature for the Previous and Next buttons as specified in issue #708. The modifications include adding the custom CSS file reference in _includes/head_custom.html and creating the CSS hover styling rule in assets/css/custom.css. There are no unrelated bug fixes, refactoring, dependency updates, or changes to other UI components outside the stated objectives.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

assets/css/custom.css (1)

1-3: Add a CSS transition for smoother hover feedback.

While the color change provides visual feedback, adding a transition effect would create a more polished user experience that feels responsive.

Consider applying this diff to add a smooth transition:

 .btn-info:hover {
+  transition: background-color 0.2s ease-in-out;
   background-color: #dedede;
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0537824 and b8801e9.

📒 Files selected for processing (2)

• _includes/head_custom.html (1 hunks)
• assets/css/custom.css (1 hunks)

🔇 Additional comments (2)

assets/css/custom.css (1)

1-3: Verify that #dedede provides sufficient visual contrast from the default button state.

The color choice should create a noticeably distinct hover effect. Since the PR includes before/after screenshots, please confirm that the visual feedback is sufficiently clear for users to recognize the button is interactive. If the contrast feels insufficient, consider a darker or more saturated color (e.g., #bfbfbf or a tinted variant that complements the default .btn-info color).

_includes/head_custom.html (1)

6-7: Custom stylesheet properly integrated.

The link to the custom CSS is correctly positioned and formatted. The stylesheet will load without blocking page rendering, and the path is consistent with the project's asset organization.

[tachyons]

This seems an overkill