fix: Authn pages - fix background on medium resolutions [master]

[Lunyachek]

Description

At some resolutions, we can see this bug. It's related to the SVG image having a specific height, and at certain page sizes, this height isn't enough for the SVG to reach the bottom of the page. We suggest drawing a slanted background using CSS

How Has This Been Tested?

Locally, in different browsers and resolutions (Screenshots below)

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/2u-vanguards to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @Lunyachek! 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 ✅

Project coverage is 84.26%. Comparing base (90ae870) to head (2d96064).
Report is 7 commits behind head on master.

❗ Current head 2d96064 differs from pull request most recent head 5b1e63a. Consider uploading reports for the commit 5b1e63a to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1192      +/-   ##
==========================================
- Coverage   87.71%   84.26%   -3.46%     
==========================================
  Files         124      126       +2     
  Lines        2288     2390     +102     
  Branches      636      678      +42     
==========================================
+ Hits         2007     2014       +7     
- Misses        272      356      +84     
- Partials        9       20      +11     

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

[arbrandes]

I'm certainly in favor in principle, but is there any chance you could post screenshots of results on the major browsers (Chrome, Safari, Edge, Firefox)?

[zainab-amir]

@Lunyachek can you kindly rebase your branch.

[Lunyachek]

@Lunyachek can you kindly rebase your branch.

Rebased. But I want to take more time to investigate one more small bug. I started taking screenshots in different browsers at different resolutions and found a strange bug with a vertical line.