Redesign profile page

[Splines]

We completely redesign the profile page as follow up for #670 and #671.

• We make the new voucher redemption more popular by placing it at the top in a new card.

• The previous Account & Settings are aggregated together under Account to avoid having to clutter the view by yet another card.
• We introduce a Request data modal and make the button less prominent. This is to avoid confusion since in the past many users mistook it for the Save changes button (it was previously placed at the bottom of the page with primary color). If the user really requests the data, we now show a toast and stay on the page.
• The Unsaved changes warning is now shown immediately when typing (not just when clicking away from an input field). We also style it such that the warning itself is a button along its full width (makes it easier clickable and reduces mouse motion).
• To some extent, we also optimize for mobile view by stacking the columns on top of each other on small displays. Please use the browser dev tools to test this feature. Note that very small widths under around 570px are not supported. For this to work, we'd have to also change the code in other places like the navbar.

Further changes:

• Contrast is increased, e.g. by using better contrast ratios for colors and borders.
• Reduce checkbox item margin.
• I decaffeinated a small CoffeeScript file as I had to add another JS functionality there.
• Many other small UI improvements that hopefully contribute to a cleaner look.

Known limitations

• The Change login data button continues to redirect to the MaMpf landing page, which should only be shown when the user is not logged in. This could be tackled in a future PR, e.g. by introducing another modal on the profile edit page.

Redesign preview

Expand

Before

After

[CLAassistant]

All committers have signed the CLA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (dev@79cb0b3). Learn more about missing BASE report.

Additional details and impacted files

@@          Coverage Diff           @@
##             dev     #706   +/-   ##
======================================
  Coverage       ?   54.27%           
======================================
  Files          ?      170           
  Lines          ?     7348           
  Branches       ?        0           
======================================
  Hits           ?     3988           
  Misses         ?     3360           
  Partials       ?        0           

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

[fosterfarrell9]

LGTM!