[DO NOT MERGE UNTIL KDS v5.0.0-rc3 INSTALLED] Remove hard-coded vuetify color on hover using $darken_ utitlity

[shivam-daksh]

Summary

This PR addresses the issue of replacing the Vuetify color with the Kolibri Design System's (KDS) darken utility. Specifically, it updates the background color for the button that uses the Vuetify --v-error-darken1 color variable.

Changes Made

• Replaced the usage of var(--v-error-darken1) with the corresponding $darken_ utility from the Kolibri Design System once it is provided.
• Updated the button's background color to maintain the appropriate shade when not in the hovered state, ensuring consistency with the KDS design standards.

Testing

• Verified that the button's color remains consistent with the Kolibri Design System's color palette.
• Ensured that the color updates do not affect other components.

Additional Context

This change improves the alignment with the Kolibri Design System and helps maintain design consistency across the application.

Screenshots (if applicable)

Does this introduce any tech-debt items?

---

Reviewer guidance

How can a reviewer test these changes?

Are there any risky areas that deserve extra testing?

References

#4634

Comments

---

Contributor's Checklist

PR process:

• [ ] If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• [ ] If this includes an internal dependency change, a link to the diff is provided
• [ ] The docs label has been added if this introduces a change that needs to be updated in the user docs?
• [ ] If any Python requirements have changed, the updated requirements.txt files also included in this PR
• [ ] Opportunities for using Google Analytics here are noted
• [ ] Migrations are safe for a large db

Studio-specifc:

• [ ] All user-facing strings are translated properly
• [ ] The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• [ ] All UI components are LTR and RTL compliant
• [ ] Views are organized into pages, components, and layouts directories as described in the docs
• [ ] Users' storage used is recalculated properly on any changes to main tree files
• [ ] If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• [ ] Code is clean and well-commented
• [ ] 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
• [ ] Any new interactions have been added to the QA Sheet
• [ ] Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• [ ] Automated test coverage is satisfactory
• [ ] 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

[MisRob]

Thanks @shivam-daksh! I will invite my colleague @ozer550 to review.

Even though we can complete the review, just leaving a note here that we will merge it after the newest KDS release containing $darken utility is installed into Studio.

[MisRob]

Studio already has the KDS version with $darken and I've confirmed now that the button looks as expected.

[shivam-daksh]

@MisRob Thank you for merging! It took some time, but the effort was worth it 😊. I’ve been exploring the codebase and have successfully resolved a few beginner-friendly issues. I’m keen to dive deeper into the development side of Learning Equality and would love to contribute more. Could you please guide me on how to align my efforts with GSoC and point me toward any relevant projects or features that need attention?

[MisRob]

Hi @shivam-daksh. If we decide to participate, we usually submit a GSoC application in January, and then it takes some time for GSoC organizers to decide. Last time, accepted organizations were announced later in February if I recall. Best to keep an eye on https://summerofcode.withgoogle.com/.

If we end up participating, some of the most important factors are:

• (1) Quality of a proposal
• (2) Previous engagement - length of collaboration, knowledge of the codebase, communication, ...

So I think you already do what you can at this point.