Feature Request related to improving User Profile Page UI

[tejasbirsingh]

Use case

• Currently, the User Profile page does't look that much good due to the UI. The text/fields should be shown on the top instead of bottom to make it look a bit better.
• We can also make the List Tile view widgets more attractive by simply adding some icons in the front and few more things.

Proposal

• Top align the fields in User Profile Page.
• Improve the UI by adding leading icons. Will try to add screenshots in the comments.
• Maybe we can add border if it looks good.
• Any other idea or suggestions are welcome and would be appreciated.

Below if the screenshot after simply moving it to the top -

I would like to work on this if possible please assign this request to me.
Thanks

[tejasbirsingh]

Did some very basic change that will match the look of the apps theme. Didn't change too many things as it will not blend with the overall app.
How I aligned the form fields on the top ?

• Currently, we use FormScreen which is used by multiple pages so changing the alignment on it will result in changes for all pages using this.
• I added a new argument for the class - isTopAligned which is not a required value as its default value is false.
• I passed it from the forms class under User as true to make the fields top aligned.

Any suggestion on what more should be done ?

[rolandgeider]

Hi! I would leave everything at the bottom, then it's easier to access everything with the thumb

But you are right that the icons are an improvement and I would accept a PR if you want to send one. I'm also now thinking that since both the email address and whether its verified or not are related, they could be grouped somehow

[tejasbirsingh]

Hey,

Sure, we can keep it at bottom if its intentional to make it accessible.
I was also thinking that those 2 fields are for kind of for the same thing.

So, I have made some changes to merge them into one field along with adding icons and keeping the fields at bottom.
Now our text field has a icon button at the end which will send the verification email in case not verified. Screenshots attached below.

Case when email is not verified -

Case when email is verified -

Do you have any suggestion on icons or color of icons ?

Thanks !

[rolandgeider]

yeah, those two fields can definitely be combined. The question is how to make it clear that the icon on the right can be clicked to send the confirmation email? Perhaps we could add some kind of button below the field for unverified users and once the account was verified we hide it and show the green check mark like in the screenshot?

[tejasbirsingh]

Yea, it makes sense that the user won't be able to easily guess that the icon is to be pressed to verify the email.

Here are some of the screenshots if we use button -

Before verification of email (UI Mock 1) -

Before verification of email (UI Mock 2) -

After the email is verified -

Out of Mock 1 and Mock 2 which seems better for before email verification state ?
And does the after verification state look fine ?

[rolandgeider]

I'd like the centered button more, but perhaps we could use an outlined one, then it doesn't seem like that one and "save" are equally important

[tejasbirsingh]

Agreed ! How does this look then -

[rolandgeider]

yes, much better!