redesign: rotate active / default button colors

[tamssokari]

Test Instructions

• Pull the branch locally, or use the dev preview link
  • If local, run the following commands
    • cd packages/embed
    • npm ci
    • npm run build && npm start
    • visit http://localhost:8000/biometric_kyc
  • if remote
    • visit any of the pages
• verify that buttons show blue as default color, and black on hover

[github-actions]

This branch has been deployed to s3 / cloudfront.

✅ Preview URL for Smart Camera Web:
https://cdn.smileidentity.com/js/preview-redesign/change-primary-button-colors/smart-camera-web.js
✅ Preview URL for Embed:
https://cdn.smileidentity.com/inline/preview-redesign/change-primary-button-colors/js/script.min.js

[ayinloya]

LGTM

[samuelakintunde]

Hello @tamssokari

it seems we have a mix up somewhere, our button states should be

Active state - Blue
Default state - Black
Inactive state - Grey

Please see example on Figma here

[tamssokari]

Hello @tamssokari

it seems we have a mix up somewhere, our button states should be

Active state - Blue Default state - Black Inactive state - Grey

Please see example on Figma here

this was the existing implementation called out to be changed. mobile does the inverse, and this PR was to make the web do same

[samuelakintunde]

Hello @tamssokari
it seems we have a mix up somewhere, our button states should be
Active state - Blue Default state - Black Inactive state - Grey
Please see example on Figma here

this was the existing implementation called out to be changed. mobile does the inverse, and this PR was to make the web do same

@Yeboahmedia..... please is this true? I think i am a bit confused here

[Yeboahmedia]

You

Hello @tamssokari
it seems we have a mix up somewhere, our button states should be
Active state - Blue Default state - Black Inactive state - Grey
Please see example on Figma here

this was the existing implementation called out to be changed. mobile does the inverse, and this PR was to make the web do same

@Yeboahmedia..... please is this true? I think I am a bit confused here

You are correct @samuelakintunde; this is how buttons should be represented on the web
@tamssokari let's keep this reverse implementation on the web.
The reason being it makes to develop mobile-first/responseive.
However, we need a story to target web screens seperately in the components so we can get the proper behaviours we intend for our design.

@tamssokari I thought the comment from the Show/tell was related to we having a disabled state (grey button) for the unticked state in the e-signature review-documents page