Increase the Distinguishability of the Default and Hover States of Secondary Buttons

[andyvanavery]

Change Request Description

Request to change the color of the hover state of the buttons on Guide Cards for improved visibility. The differences between default and hover are difficult to distinguish. The colors currently used are:

• Default: #298085 (success-dark or teal-50)
• Hover: #226467 (secondary-dark or teal-60)
• Active: #1E4C4F (success-darker or teal-70)

What's the expected change?

• Improve the distinguishability between the Default and Hover states of secondary buttons; please use the below updated Figma file for color values:

https://www.figma.com/proto/PglDgHtAXt59f52jVOseIu/GitHub-Ticket-%231086---Buttons?page-id=0%3A1&type=design&node-id=1-2&viewport=269%2C76%2C1&t=fGp9hQZS4BvFX1Qe-1&scaling=min-zoom

What's the current functionality?

• Default: #298085 (success-dark or teal-50)
• Hover: #226467 (secondary-dark or teal-60)

What's the updated acceptance criteria?

Scenario: A user is viewing a Guide Card on an example site
Given a Guide Card has been created on an example site
  And the user is viewing the example site
Then the user will be able to clearly distinguish between Default and Hover states of the secondary buttons on the Guide Cards

Additional details / screenshot

Related Tickets

• Original Guide Card with Image and Description: Build: Guide Card - A. Guide Card with Image & Description #614
• Original Default Guide Card: Build: Guide Card - C. Default Guide Card #648

[monika-jaeger]

Adding link for Figma example with buttons for what we discussed during Weekly Requirements Discussions 7/6/23

[alinai]

This looks good to me. cc: @KateMashkinaNIH