[Consumer UI Refresh] Refactor Avatar component and relocate it from Sidebar bottom

If you haven’t already, check out our contributing guidelines for onboarding!

---

This is refactoring / feature improvement task and not a bug fix. All directions should be followed as written.

• The avatar + indicator here should be refactored into a component called AvatarWithIndicator.

• It should take a prop of isActive and the styles should be moved from here into the new component.

• Only pass the network && network.isOffline value via the isActive prop

• Once we have done this the AvatarWithIndicator should be moved out of the SidebarBottom and relocated to the area here:

• We must create a new View (flex-direction row, justify-content space-between) with the word Chats to the left and the AvatarWithIndicator to the right

• Here is a mockup of what it should look like:

[marcaaron]

@parasharrajat feel free to create any issues for bugs you may find or suggestions you have for us. Testing cross-browser is a great idea as we’ve seen some unexpected styling in Firefox and Safari before.

[marcaaron]

What will happen to the old Search bar and Icon?

Awesome! Thanks for the question. The Search bar and icon will remain for now, but will be relocated in another issue to be posted soon. So the header and avatar will just sit below the search bar for now.