Improve UI of Chat Box - Githubissues

Lavcodes commented 3 years ago

Is your feature request related to a problem? Please describe.

On scrolling down, the close button also moves. Ideally only chat component should scroll and close should remain fixed.
Chat always opens from the first created message. It should start from last read or most recent message.
Input and emoji picker alignment could be better.
For a single message component, the name of the user should always be aligned with their profile icon. Currently it always aligns to the left.
Make chat user specific. Currently every user sees same alignment of chat. In my experience, it is defaulted as last added user's messages in blue colour and from right. Rest all in grey and from left. It would be more intuitive to have the user whose window is opened, from right and in blue rest in grey from left.

Screenshots. Chat always opens from top Chatopensfromtop

Close button scrolls along with chat component closebuttonscroll

Alignment of message header and lower input bar alignmentandinputstyling

How the chat defaults defaultforeach

when third user arrives

Screenshot (5)

Describe the solution you'd like Implement the suggestions

Motivation Please outline the motivation for the proposal.

Are you willing to contribute to this issue? Yes

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

kothariji commented 3 years ago

Hi @Lavcodes, First of all, thank you so much for taking out the time to work on this issue.

Regarding the Last Point ⭐

❎ How the chat defaults for all users

Actually, you are facing this issue because you are using the same browser for all users, but we are saving the user details in local storage. So local storage for all 3 users is the same. So every time a new user joins the room, the local storage gets override with new user details. Therefore you are facing such kind of abnormal behavior. To avoid this I would recommend you to use different browsers or incognito mode.

Rest All points are correct, and for sure you can work on the same.

But, currently, we are on implementing Redux for SyntaxMeets, so there are a lot of changes in the codebase. So I am keeping this issue on hold for now, and once the code refactoring is done, I'll definitely assign it to you.

And last but not least, Keep Contributing 🙏🔥

kothariji commented 3 years ago

Hi @Lavcodes, we are good to go with this issue now. So please confirm with us about the same, so that we can assign this issue to you.

Lavcodes commented 3 years ago

Yes, I would like to work on this issue. Please assign it to me

kothariji commented 3 years ago

Yes, I would like to work on this issue. Please assign it to me

Great @Lavcodes, we are assigning this issue to you. 🔥 Also, the 3rd issue - Input and emoji picker alignment could be better. - is already resolved. So you can work on other points.

kothariji commented 3 years ago

@Lavcodes any updates ?

Lavcodes commented 3 years ago

Hey sorry about the late response will just complete the pr ASAP

kothariji commented 3 years ago

Hey sorry about the late response will just complete the pr ASAP

Yupp No issues 🙌

srishtij2000 commented 3 years ago

Can I work on this issue?

kothariji / SyntaxMeets

Improve UI of Chat Box #98

❎ How the chat defaults for all users