fix: button hover bg color improvement

[Klakurka]

Description

Upgraded simpledotcss and adjusted some button styles so that the on-hover background colors for buttons on the site is blue instead of light yellow

Test plan

Hover + click on all of the various different kinds of buttons to make sure they're all styled as expected.

Summary by CodeRabbit

• Chores

  • Updated dependency version for improved compatibility and features.

• Style

  • Enhanced button and form control hover states with improved text contrast and consistent accent coloring across interactive elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Updates simpledotcss dependency from ^2.1.0 to ^2.3.7 and refines CSS styling for button and interactive element hover/active states to ensure proper color contrast and consistency across components.

Changes

Cohort / File(s)	Summary
Dependency Update package.json	Bumps simpledotcss from ^2.1.0 to ^2.3.7
Button and Interactive Element Styling pages/dashboard/dashboard.module.css	Adds color: #fff !important to .active_btn:active and .active_btn:hover; changes .toggle_btn:hover text color from var(--accent-color) to white
Global Button Hover Styling styles/global.css	Expands hover styling for enabled/non-disabled button variants (button:enabled:hover, button:not([aria-disabled='true']):hover, input[type='submit']:enabled:hover, input[type='reset']:enabled:hover, input[type='button']:enabled:hover) to apply background-color and border-color with var(--hover-accent-color) and !important, removing existing filter

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Straightforward dependency version bump with no breaking changes indicated
• CSS changes are isolated color and styling adjustments with no complex logic
• All changes follow existing patterns and conventions in the codebase

Poem

🐰 A hop through colors, fresh and bright,
Simpledotcss glows with new delight,
Buttons dressed in white upon a hover,
Consistency blooms—our CSS makeover! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main focus of the pull request: improving button hover background colors. It is concise, specific, and directly related to the primary changes in the changeset.
Description check	✅ Passed	The description covers the key sections from the template: a description of changes made and a test plan. However, it lacks the 'Related to #' issue reference field which is part of the template structure.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/button-hover-colors

---

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

styles/global.css (1)

81-93: Remove duplicate selector and verify CSS variable.

The button:enabled:hover selector appears twice (line 81 and line 85), making the first rule redundant. The second rule (lines 85-93) will override it due to CSS cascade. Additionally, ensure that var(--hover-accent-color) is defined either in the upgraded simpledotcss library or elsewhere in your stylesheets.

🔎 Proposed fix

-button:enabled:hover {
-  filter: none;
-}
-
 button:enabled:hover,
 button:not([aria-disabled='true']):hover,
 input[type='submit']:enabled:hover,
 input[type='reset']:enabled:hover,
 input[type='button']:enabled:hover {
   background-color: var(--hover-accent-color) !important;
   border-color: var(--hover-accent-color) !important;
   filter: none;
 }

Run the following script to verify the CSS variable is defined:

#!/bin/bash
# Description: Search for --hover-accent-color CSS variable definition

# Search for the CSS variable definition in the codebase
echo "Searching for --hover-accent-color definition..."
rg -n --type=css -C2 "--hover-accent-color\s*:"

# Also check in node_modules/simpledotcss if it's defined there
echo -e "\nChecking simpledotcss package..."
fd -e css . node_modules/simpledotcss --exec rg -l "--hover-accent-color"

🧹 Nitpick comments (3)

pages/dashboard/dashboard.module.css (2)

107-111: Consider using a CSS variable instead of hardcoded color.

The hardcoded #fff color reduces theme flexibility and maintainability. Consider using a CSS variable like var(--button-hover-text-color) or similar to maintain consistency with the theming system.

🔎 Proposed refactor

 .active_btn:active,
 .active_btn:hover {
   filter: none !important;
-  color: #fff !important;
+  color: var(--button-hover-text-color, #fff) !important;
 }

---

113-116: Consider using a CSS variable instead of hardcoded color.

Same as the previous comment - the hardcoded #fff reduces theme flexibility. Consider using a CSS variable for consistency.

🔎 Proposed refactor

 .toggle_btn:hover {
-  color: #fff !important;
+  color: var(--button-hover-text-color, #fff) !important;
   filter: none !important;
 }

styles/global.css (1)

85-93: Consider reducing !important usage for better maintainability.

Multiple !important declarations can lead to specificity wars and make future styling changes difficult. While they may be necessary to override simpledotcss defaults, consider whether a more specific selector could achieve the same result without !important.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a1a64e6 and 87ce03d.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (3)

• package.json (1 hunks)
• pages/dashboard/dashboard.module.css (1 hunks)
• styles/global.css (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Tests

🔇 Additional comments (1)

package.json (1)

68-68: Remove the CSS variable verification requirement—--hover-accent-color is not part of simpledotcss.

The upgrade from ^2.1.0 to ^2.3.7 is safe. Version 2.3.7 is stable and is the latest version. There are no known security vulnerabilities. However, the CSS variable concern is unfounded: --hover-accent-color is not defined by simpledotcss (which uses --accent-hover instead), but rather is a custom project variable already properly defined in the codebase's own styles/variables.css file. No action is needed.

Likely an incorrect or invalid review comment.