Post-rebranding update to Card hover styling

[bjester]

Summary

Description of the change(s) you made

• Aligns VCard hover styling with how KCard hover styling will be implemented
• Removes previous logic related to handling hover background with VCards containing buttons
• Updates admin to reduce row hover darkness
• Adds .scss file handling alongside existing less and styl handling for Jest

Manual verification steps performed

1. Created a new channel
2. Uploaded content to the channel
3. Marked the channel as public in the admin
4. Published the channel
5. Browsed the channel through 'Import from channels' modal
6. Browsed the channel through 'Content Library'

Screenshots (if applicable)

Previous

Updated

Default	Hovered

Does this introduce any tech-debt items?

Not necessarily. When we replace VCard with KCard, hopefully there will be little to no visual differences

---

Reviewer guidance

How can a reviewer test these changes?

See my testing steps

Are there any risky areas that deserve extra testing?

Clicking buttons on cards, ensuring that the default card action does not get triggered and the button's specific action is triggered instead.

References

Fixes #4547

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

[akolson]

Changes and tests checkout. Thanks @bjester!

[AllanOXDi]

LGTM! Thanks @bjester

[pcenov]

Looks great @bjester! Just a couple of questions about whether this change should also be applied to the 'Helpful Resources for Covid-19' card at the top of the Content Library and also whether the hover effect is not good enough when selecting channels for a collection. See the following video:

2024-05-14_16-47-09.mp4

[bjester]

Looks great @bjester! Just a couple of questions about whether this change should also be applied to the 'Helpful Resources for Covid-19' card at the top of the Content Library and also whether the hover effect is not good enough when selecting channels for a collection. See the following video:

Yeah the global updates I made somehow missed the COVID card at the top of search. We should make it consistent. As for the collection cards, they were initially flat which posed a problem considering we don't really have flat-hovered card style. At the very least, the cards' bottom shouldn't be clipped by the card below. That said, we should probably switch to a regular card, but as it's coded right now, the checkbox needs to be removed from the card itself, which is a bit out of scope of the rebranding changes.

So I lean towards fixing the current cosmetic issues and followup later with proper update for the collection UI. We can probably accomplish revamping the collection cards when we integrate KCard, to avoid unnecessary dev.