fix(MM-49742): broken user avatar

[rahimrahman]

Summary

Blank user avatar "hides" menu option.

Ticket Link

Fixes: https://mattermost.atlassian.net/browse/MM-49742

Checklist

• [ ] Added or updated unit tests (required for all new features)
• [X] Has UI changes
• [ ] Includes text changes and localization file updates
• [ ] Have tested against the 5 core themes to ensure consistency between them.
• [ ] Have run E2E tests by adding label E2E iOS tests for PR.

Device Information

This PR was tested on: iPhone 15 Simulator, iOS 17.4.1

Screenshots

The profile photo would also show background image with opacity of 12%.

I removed the status icon just to showcase what it would look like.

Release Note

[rahimrahman]

I will fix test as soon as I know that this is the right fix.

[matthewbirtch]

@rahimrahman are we able to conditionally change the background color? The reason I ask is that it doesn't show up well in all themes on the profile screen. See screenshot below for example.

If it appears on sidebarBg, then we should use 12% sidebarText. If it appears on the centerChannelBg, then it should be 12% centerChannelColor (as you have it).

Is this possible?

[rahimrahman]

@matthewbirtch the biggest challenge here is the backgroundcolor for the Image is buried 2-3 children deep.

(GrandParentComponent)
  |
  - ParentComponent
    |
    - ProfilePicture
      |
      - Image

And the Image component is where I'm setting the background. ParentComponent or GrandParentComponent is the one with the backgroundColor for the entire container, so in order for the Image component to distinguish what backgroundColor is being used from the ParentComponent or GrandParentComponent, we would have to pass the prop down a few levels (prop drilling).

I won't be able to use React context either since changing the backgroundColor based on the ParentComponent or GrandParentComponent will cause changes to all profile images.

What if we do what Elias suggested?

We can add a border to the avatar even if it has an image or a blank image, but I don’t know if that is what we want.

This would isolate the issue only on tab bar, but understandable, this might still be an issue in post, etc.

With Photo	Without Photo