User Profile - 1 - UX Enhancement

[Pytal]

• Refine profile related user experience #30183
• Make user status same size and position as "Edit profile", and make it tabbable
• Update mobile layout order: Avatar, Full name, status, "Edit profile" (optional), rest
• Make settings page with min width 320px
• Emptycontent doesn’t need to show if person filled out some details (except headline and description), looks a bit off that it still says "hasn't added any info yet" if you added Twitter, Website etc. More explicit empty profile message #29892

[kra-mo]

Here are mockups detailing most of the changes:

Important things to note:

• The profile picture becomes smaller on mobile.
• The big primary button for the first action (Open Talk) is removed on mobile if it's your own profile and instead is only shown as an icon button like the others. It is still shown as primary on others' profiles (in the same way as "Edit profile" is for your own).
• A pencil icon is used to indicate that the status is editable.
• There should be no empty content page for others' profile, even if they didn't add any info.

[kra-mo]

cc @kristian-zendato