feat: unification of the appearance of buttons

[ihor-romaniuk]

Description

This pull request contains recommendations to improve the display of button blocks for oauth2 providers.
The main goal is to make the buttons appear uniform so that it looks more aesthetically pleasing and consistent.
Also, removing SCSS-specific variables and using the variables provided by the Paragon library.

Related Pull Requests

PR to the open-release/palm.master branch: #1090
PR to the open-release/quince.master branch: #1091

Screenshots

Before	After

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
• Is there adequate test coverage for your changes?

Post-merge Checklist

• Deploy the changes to prod after verifying on stage or ask @openedx/vanguards to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @ihor-romaniuk! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (c097b5b) 87.08% compared to head (f214c33) 87.08%.
Report is 34 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1092   +/-   ##
=======================================
  Coverage   87.08%   87.08%           
=======================================
  Files         124      124           
  Lines        2276     2276           
  Branches      634      634           
=======================================
  Hits         1982     1982           
  Misses        285      285           
  Partials        9        9           

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

[mphilbrick211]

Hi @openedx/vanguards! This is ready for review / merge. Thanks!

[zainab-amir]

@ihor-romaniuk I will have to check the documentation for the SSO providers like Apple, Google, Microsoft. As far I know, we cannot change the background color. (We have had issues in the past when we changed branding for these buttons)

[ihor-romaniuk]

@zainab-amir Hello.
Do we have any updates about possibilities to change SSO provider button colors? Or will we close this pull request due to inability to apply it?

[zainab-amir]

@ihor-romaniuk we have created a ticket to investigate. We will update you within 2 weeks (current sprint).

[zainab-amir]

@ihor-romaniuk Modifications to the single sign-on buttons of companies such as Facebook and Google are not possible due to their strict brand guidelines. See these for reference:

• Facebook Guidelines
• Google Guidelines

However, I recognize the value in adapting custom SSO buttons to match the website's overall theme. So I propose you change your code to apply the changes to only custom SSO buttons and not the ones that have icon class coming from the backend.

Before	After

[zainab-amir]

@ihor-romaniuk will you be making the changes?

[mphilbrick211]

@ihor-romaniuk will you be making the changed?

Hi @ihor-romaniuk - just following up on this.

[mphilbrick211]

Closing this for now. Can reopen if the future if needed. Thanks!

[openedx-webhooks]

@ihor-romaniuk Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.