Reader User Profile: Refactor CSS

[artemiomorales]

Related to #99286

Proposed Changes

This refactors the user profile page's CSS to make better use of SASS syntax.

Why are these changes being made?

The stylesheet for the profile page is disorganized.
Naming and SASS syntax is inconsistent, and it’s hard to add styles to it cleanly; this PR makes the styles more consistent so they're easier to maintain and understand.

Testing Instructions

On the profile page...

• Make sure the padding is still being applied to user-profile__wrapper and user-profile__wrapper-content at desktop and mobile widths, and that the back button looks correct.
• Visit a nonexistent profile like /reader/users/artemiosansafd and make sure the styles still render properly for empty content.
• Visit the lists page and make sure those styles are still being applied.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-133281

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-133281&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-133281&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/reader-user-profile-styles on your sandbox.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[DustyReagan]

LGTM!