Remove Hardcoded Color for Button Hover State in QuizStatus.vue

[shivam-daksh]

Summary

This PR removes the hardcoded hover background color in the QuizStatus.vue component and replaces it with a dynamic color using the new $darken utility functions provided by the Kolibri Design System.

...

Context:

The hover background color for buttons in the QuizStatus.vue component was previously hardcoded (#A81700). This approach reduces flexibility and maintainability, especially when applying theme variations. To address this, the newly implemented $darken utilities ($darken1, $darken2, $darken3) will be used to generate a darker shade of the base red color, ensuring consistent theming throughout the UI.

Code Changes:

1. Removed the hardcoded hover color #A81700.
2. Applied the $darken1 utility to derive the hover color dynamically based on the existing red color ($themePalette.red.v_1100).

Example of the changes made:

// Before: Hardcoded color
':hover': { 'background-color': '#A81700' },

// After: Using the $darken utility
':hover': { 'background-color': $darken1($themePalette.red.v_1100) },

…

References

#12553

…

Reviewer guidance

…

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[shivam-daksh]

Hi @MisRob, please review this PR referenced to #12553 .

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.17.0a0.dev0_git.247.ge79c27c2.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.247.ge79c27c2-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.247.ge79c27c2-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.247.ge79c27c2.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.247.ge79c27c2-0.1.4-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.247.ge79c27c2.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.247.ge79c27c2-py2.py3-none-any.whl

[nucleogenesis]

Tested it locally and the hover color works & looks great! Thanks for this!

[MisRob]

Would you remove this whole comment before we merge? It's not needed anymore, as $darken is now supported and documented technique.

[shivam-daksh]

@MisRob , please check it.

[MisRob]

Thanks, all good :)!

[MisRob]

Thanks @shivam-daksh and @nucleogenesis!