Messaging View Overhaul

This is the biggest push to date in terms of changes.
The PR addresses 7 issues in the workflow panel:

1. It fixes the conversation height issue, scrolling stops working bug on load
2. Conversation area height is also enlarged
3. It dynamically displays user initials in the conversation area
4. The options panel are hidden on mobile (mobile is conversation only)
5. Back home button has a slightly better styling
6. The conversation shapes are dynamically generated based on the number of participants and their colors

Check them out guys @psybuzz @nikilselvam !
@psybuzz Normally yes! The ```!important``` tag should be avoided at all times. However, at this instance, the style is inject in-line using JS, because participants are added dynamically. The CSS we need to for this needs to override the default JS styles at certain sizes. In this case, it leaves us no option but to pull out the ```important``` tag. 
As long as we know why we're using the ```important``` tag, use it sparingly, it can speed up development by quite a bit with no side-effects.

_TLDR:_  Trust me. :wink: