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

[f-buerckel]

Also I just noticed that the blue color of the top navigational bar does not match with the blue of the panels. The difference is subtle, therefore I am unsure if its intentional or not. Not a huge deal, but now that I have seen it, I will never unsee it :D

[Splines]

Before seeing your second version, I was thinking of maybe using a voronoi diagram as a pattern and made a quick mockup.

Yeah, thank you, that looks quite nice. Could you maybe share the code or just directly apply a commit to this branch to change the pattern?

Also I just noticed that the blue color of the top navigational bar does not match with the blue of the panels. The difference is subtle, therefore I am unsure if its intentional or not. Not a huge deal, but now that I have seen it, I will never unsee it :D

It does match, but only with the left side ;) It's a gradient from the darker to a lighter blue to the right. We could maybe change the left point to be a bit more to the right.

[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.