User profile UI should match designs

[EmiM]

My propositions for small changes that will improve user profile UX:

1. Long username should be truncated on the sidebar
   

2. We could display confirmation that profile image has been uploaded succesfully. This is in case user uploaded e.g image similar to the previous one. It's a good practice to give some clear feedback anyway

3. (similar to 2.) Info about "Image dimensions must be less than or equal to(...)" should have either a different color of be marked somehow when it appears. I didn't notice it at first when I uploaded an image that is too big.

4. Clicking on button that opens user profile when user profile is opened should probably hide user profile.

5. We should unify "closing behavior" for user profile and channel settings menu (the one opened via kebab menu). They look the same but user profile is being closed when user clicks outside it and channel settings are not being closed.

[holmesworcester]

Thanks! I'll break these up into individual tasks and ask Jason about the design bits.

[kingalg]

I would also add:

1. Possibility of going back to the default picture (the way Slack has it).
2. There is no information about formats we accept - I only managed to upload PNG. At least jpg should be accepted as it's a fairly popular format.
3. As soon as the user chooses the picture, it's instantly changed everywhere. So if they change their mind after uploading a photo too bad, it's already on everyone's apps. We should add a step when the user approves changes.

[holmesworcester]

Removing the "needs design" label because this issue mostly needs to be discussed and broken up.

[holmesworcester]

As soon as the user chooses the picture, it's instantly changed everywhere. So if they change their mind after uploading a photo too bad, it's already on everyone's apps. We should add a step when the user approves changes.
Possibility of going back to the default picture (the way Slack has it).

Yes, since it's kind of immutable I think you're right. I think we should have a confirmation. I'll create an issue for these.

There is no information about formats we accept - I only managed to upload PNG. At least jpg should be accepted as it's a fairly popular format.

This should be merged to develop now.

[holmesworcester]

https://www.figma.com/design/BnANosC1KGMUvm8oU2Dr0i/Profiles?node-id=805-21759&t=ZZNbvKxDy3vkavDh-1

[holmesworcester]

@jgaylor we should discuss what the actual instructions in this issue are for devs. The issue started as a laundry list of small things, so it's a bit of a mess.

[jgaylor]

@holmesworcester I suggest Figma is the source of truth for design of the profile, and anything in this ticket be added to the design and annotated with a green dev note. If you agree, this should be moved to "design in progress" and prioritized accordingly.

[holmesworcester]

This issue covers a few things that will either:

a) get resolved the next time we add something to the profile screen, provided we decide to match the latest designs.
b) be covered in other issues.