Implement the desired figma design with a few notable changes.
Proposed Changes:
maintains the existing fields on the profile card (Name, Nickname, Webite, edit, invite link) and profile image
uses the figma design
should be one card (rather than parent component having the box-shadow/border around it instead of its children components)
should be responsive
vertical stack the image smaller screens
horizontal for large screens
For example, for desktop its orientation would be horizontal:
Vertial for mobile:
Further enhancement that would make UI cleaner would be to make the profile image/avatar the edit button as suggested by @andycwilliams instead of the standalone button below the image. (See example below)
Imagine "Edit Profile Image"/"Edit Avatar" instead of "View Profile".
The fields found in the Figma design, while valid, are not meant to be for the Profile page which act more like a public profile in social media (see images below).
Instead, those found in the Figma design should be personal fields used for the Civic Profile, which is on a separate page/route. For that, we could have a separate issue opened for it using the Figma design for the card as is or with other potential fields.
Describe the Current Behavior/Feature:
Update the profile card
Rationale:
Implement the desired figma design with a few notable changes.
Proposed Changes:
For example, for desktop its orientation would be horizontal:
Vertial for mobile:
Further enhancement that would make UI cleaner would be to make the profile image/avatar the edit button as suggested by @andycwilliams instead of the standalone button below the image. (See example below)
Imagine "Edit Profile Image"/"Edit Avatar" instead of "View Profile".
The fields found in the Figma design, while valid, are not meant to be for the Profile page which act more like a public profile in social media (see images below).
Instead, those found in the Figma design should be personal fields used for the Civic Profile, which is on a separate page/route. For that, we could have a separate issue opened for it using the Figma design for the card as is or with other potential fields.