Channel refinement iteration 3

[lorux0]

• [ ] Mouse hover state of all the buttons (like Create, Join, Leave, etc) are imperceptible. We know this affect the whole system, but we need to reinforce it. Now we can keep the color change but ideally we would like to make something cooler playing with scales.
• [ ] We are not limiting the amount of channels that a player can join and create. We have to display the corresponding message for each case or B
• [ ] Animations: for now, use straight cuts throughout between views avoiding fades that are not working properly.

Design

Conversations list View

• [ ] The separators channels and private conversation background container must be white instead of grey.
• [ ] The No Results message is not properly centered. The title No results must be bigger Figma Link for reference.
• [ ] The context menu gets chopped when I open the context menu of a contact at the end of the scroll.
• [ ] Make more room between the spinner and both separators. Now they make me feel claustrophobic.
• [ ] I would like to update the empty state for PM. We need to replace the image (attached), and the texts. Check the design here
• [ ] I just realised that we don't have clear feedback about private messages for Guest players. I created a design, check it here. Connect wallet should open the wallets modal. What is a wallet should bring people here.
• [ ] Let's rename the Direct messages separator by Private messages instead, same way we are coling them in the notifications panel.

Direct Messages View

• [ ] [ask @JuanSalice] When forcing the scroll to the top the spinner appear over the nav bar.
• [ ] The avatar snapshot background is missing. The background looks dark grey when it should be white.
• [ ] Special characters in the chat history are not working.

Browse channels Use this Figma link for reference

• [ ] Increase the gap between the buttons create and close button. Center in Y the icon and the text.
• [ ] While the channels are loading the message Use the search bar (...) shouldn't be shown.
• [ ] The search is not working as expected. There are 2 different instances that can not co-exist at the same time: the Did you mean? and No results.
• [ ] Increase the size of no results title and the text box of the description. Add the line If the channel doesn't exist make it happen!
• [ ] Fix the create channel container size. The color must be #FF2D55.
• [ ] In the Did you mean instance replace the use the search bar (...) message for If the channel doesn't exist make it happen! and add the Create channel button.
• [ ] In the channel row the text joined the color must be #34CE76 and the font semi bold.

Create channel modal

• [ ] The color of the modal container must be #ECEBED instead of white.
• [ ] I had to make some adjustments in the title of the input. Put the asterisk ahead name. Remove the brackets from required and set the font regular.
• [ ] The input container must be #FFFFFF instead of white grey. Its grey outline #CFCDD4 is missing.
• [ ] The X button to clean the input is missing.
• [ ] Feedback when a channel can't be created because the name has spaces is missing. Let's put Spaces not allowed
• [ ] The feedback Name already taken is exclusive when a user wants to name her channel nearby. For the rest we must show this. If the user clicks here she is taken & joined directly to the channel.

Modals

• [ ] The modal implementation to join a channel doesn't correspond with the original design. Use as reference the modal to leave a channel that is right.