feat: put account settings into cards

[brian-smith-tcril]

Description

Using Paragon components to replicate some of the style overrides done by the Indigo theme (see https://openedx.atlassian.net/wiki/spaces/OEPM/pages/5278400519/Account+Page)

Sandbox:

🎓 LMS
📝 Studio

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

[open-craft-grove]

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Configuration information unavailable

[codecov]

Codecov Report

❌ Patch coverage is 70.27027% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 68.28%. Comparing base (cab1a24) to head (9fe5338).

Files with missing lines	Patch %	Lines
.../account-settings/reset-password/ResetPassword.jsx	12.50%	7 Missing ⚠️
src/account-settings/EditableField.jsx	80.00%	2 Missing ⚠️
src/account-settings/EmailField.jsx	75.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1368      +/-   ##
==========================================
+ Coverage   68.25%   68.28%   +0.02%     
==========================================
  Files         120      120              
  Lines        2372     2371       -1     
  Branches      655      655              
==========================================
  Hits         1619     1619              
- Misses        707      708       +1     
+ Partials       46       44       -2     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[open-craft-grove]

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Configuration information unavailable

[sdaitzman]

@brian-smith-tcril this looks great! Is it supported for these components to reduce/adjust the vertical padding within each card? The vertical spacing seems a bit high, especially the gap before the help text at the bottom. For reference, here's the Indigo theme style for this view, which I think has a more balanced padding:

Indigo theme design for this view (Confluence link)

[brian-smith-tcril]

@sdaitzman I updated it to this in a50e72a

I'm not sure why the screenshot is missing the right edge, I usually just use my desktop environment's screenshot tool but decided to try using chrome's dev tools screenshot to get the whole page this time.

[brian-smith-tcril]

Re:

Is it supported for these components to reduce/adjust the vertical padding within each card?

In a50e72a I only changed the margins on the content within the cards, so the actual card components still have their default padding.

[open-craft-grove]

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Configuration information unavailable

[brian-smith-tcril]

One thing I'm not a huge fan of (and likely need some historical context on) is the difference in margin between Paragon's Card.Header title and actions.

https://paragon-openedx.netlify.app/components/card/#actions

I assume the goal was to have them aligned at the bottom, but it's always felt like the title was "low" to me.

Made an issue on the Paragon repo to look into it openedx/paragon#3963

[open-craft-grove]

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[PKulkoRaccoonGang]

This looks great! Both from a code and visual perspective! It’s really nice to see that we’re moving away from custom markup in favor of Paragon components.