refactor: update accent color hover effects to Footer

[YNazymko12]

• Update Footer links to use --accent-primary on hover
• Update ThemeToggle icons to use --accent-primary on hover
• Both components adapt colors to light/dark theme

Summary by CodeRabbit

• Style
  • Unified accent color usage across footer branding, links, and interactive elements
  • Links (privacy/terms) and social icons now use consistent hover color variables for smoother transitions
  • Improved hover/focus visuals for icons and buttons, including color and border emphasis
  • Theme toggle buttons receive enhanced visual feedback and color consistency
  • Minor layout polish for more consistent spacing and motion effects

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	2193852
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69726846df00600008da02f8
😎 Deploy Preview	https://deploy-preview-185--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Footer and ThemeToggle were updated to use CSS variables (--accent-primary, --accent-hover) for accent and hover colors; ThemeToggle also received minor formatting changes and a new theme-toggle-btn class. No exported APIs were changed.

Changes

Cohort / File(s)	Summary
Theming updates frontend/components/shared/Footer.tsx, frontend/components/theme/ThemeToggle.tsx	Replace color-specific classes with CSS variables (--accent-primary, --accent-hover) for brand text, links, and social icons; add hover selectors that apply these variables.
UI control & styling tweaks frontend/components/theme/ThemeToggle.tsx	Add theme-toggle-btn class to buttons; add transition-colors to icons and inline style to apply --accent-primary on hover/focus.
Formatting / minor refactor frontend/components/theme/ThemeToggle.tsx	Normalize quotes to single quotes, add semicolons, minor whitespace and JSX structure adjustments; no behavioral changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• (SP: 3) Refactor Tailwind theme: centralize tokens and remove duplication #141: Component updates to consume the new CSS tokens (--accent-primary, --accent-hover) and button classes introduced in the theme refactor.
• refactor: align leaderboard UI with brand style (fixed bg, css vars, … #182: Additional component styling changes adopting the same CSS theming variables and hover behaviors.

Suggested labels

UI, refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 A nibble of CSS, a hop of delight,
Accents and hovers now shining bright,
Buttons and icons prance in a row,
Theme tokens guide where the colors go.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title mentions 'Footer' but changes affect both Footer and ThemeToggle components, making it partially representative of the actual changeset.	Update the title to reflect both modified components, such as: 'refactor: update accent color hover effects in Footer and ThemeToggle'
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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: 2

Caution

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

⚠️ Outside diff range comments (1)

frontend/components/shared/Footer.tsx (1)

94-106: Mirror hover accent on keyboard focus for social icons.
Focus-visible should get the same accent color as hover for accessibility parity.

♿ Proposed tweak

                       [&:hover]:!text-[var(--accent-primary)]
                       [&:hover]:!border-[var(--accent-primary)]
+                      focus-visible:!text-[var(--accent-primary)]
+                      focus-visible:!border-[var(--accent-primary)]

🤖 Fix all issues with AI agents

In `@frontend/components/shared/Footer.tsx`:
- Around line 59-69: The legal links in Footer (the Link components rendering
privacyPolicy and termsOfService) only change color on hover, so add a matching
focus-visible state to improve keyboard accessibility; update the className on
those Link elements (and any sibling Link usages here) to include
focus-visible:[color:var(--accent-hover)] or an equivalent focus-visible style
(e.g., ring or outline with the same accent) so keyboard users see the same
visual feedback as hover.

In `@frontend/components/theme/ThemeToggle.tsx`:
- Around line 57-61: The hover rule only styles the SVG on mouse hover; add the
matching keyboard focus-visible rule so keyboard users see the same accent:
update the ThemeToggle component styles (the .theme-toggle-btn:hover
:global(svg) rule) to also include a .theme-toggle-btn:focus-visible
:global(svg) rule that sets color: var(--accent-primary) (and ensure the button
receives a visible focus ring if not already handled).