Add CSS on mouse interaction with card

[ahuang11]

Better notify the user that it's clickable and makes it feel nicer.

• Update pointer on hover
• Lower contrast upon hover

Screen.Recording.2024-04-01.at.2.24.50.PM.mov

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.89%. Comparing base (e9cc695) to head (96b1d8a).
Report is 41 commits behind head on main.

❗ Current head 96b1d8a differs from pull request most recent head 8d61d14. Consider uploading reports for the commit 8d61d14 to get more accurate results

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #6636       +/-   ##
===========================================
+ Coverage   39.99%   82.89%   +42.89%     
===========================================
  Files         313      313               
  Lines       46103    46119       +16     
===========================================
+ Hits        18438    38229    +19791     
+ Misses      27665     7890    -19775     

Flag	Coverage Δ
ui-tests	39.99% <ø> (+<0.01%)	⬆️
unitexamples-tests	71.18% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hoxbro]

Can't this be done with CSS?

[philippjfr]

Yeah, this should definitely be done with CSS.

[ahuang11]

Templates + original with these changes

[philippjfr]

Reducing contrast on hover seems a little counter-intuitive, I'll try to come up with a different visual change but am open to your suggestions.

[ahuang11]

Brightness didn't seem to work for me. Opacity is worse than contrast. Transform is a little strange so I stuck with contrast. Color maybe could change to theme accent

1. Opacity: Adjusting the opacity of an element can create a subtle hover effect.

   .card-button:hover {
     opacity: 0.8;
   }

2. Brightness: The brightness() filter can be used to control the brightness of an element.

   .card-button:hover {
     filter: brightness(0.8);
   }

3. Box Shadow: Adding a box shadow can create a sense of depth and highlight on hover.

   .card-button:hover {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   }

4. Transform Scale: Scaling the element slightly on hover can provide a nice visual effect.

   .card-button:hover {
     transform: scale(1.1);
   }

5. Color: Changing the color of the element on hover can draw attention.

   .card-button:hover {
     color: #ff0000; /* Change to the desired color */
   }

[philippjfr]

I'd be okay with a box-shadow of some sort.

[ahuang11]

Here's box shadow.

Screen.Recording.2024-04-17.at.11.17.31.AM.mov