search

kothariji / SyntaxMeets

Syntaxmeets. Create rooms 🏠 Call your friends 👬🏼 Sip Chai, ☕ Chat, Create, and Code👨‍💻. A coding platform to code simultaneously 🚀 with your friends and design your algorithms on SyntaxPad.💫✨
https://syntaxmeets.vercel.app
MIT License
167 stars 58 forks source link

Making chatbox messages more readable (UI - enhancement) #80

Closed amaan-ahmad closed 3 years ago

amaan-ahmad commented 3 years ago

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

Problem: In the chatbox, it's challenging sometimes to differentiate between my message and the other person's message as both have the same message box color - rgb(0, 180, 216). (cyan-blue kinda color) We see most of the chat applications having a contrast of message box color so that it is easier to differentiate between my message and other participant's message.

Describe the solution you'd like Solution: Let's have a different color of message box of my message in the chat section, so that it get's easier for the user to differentiate between my messages and other participant's messages.

Motivation Many chat applications like Whatsapp, telegram, messenger, etc. follow this UX principle.

Are you willing to contribute to this issue? [Yes/No] Yes, I am willing to contribute to this issue.

Describe alternatives you've considered Open to suggestions ✌

Additional context See this screenshot:

Better readability:

image

lakshita15 commented 3 years ago

I'am gssoc participant I would like to work on this issue. I will submit before due date with fantastic work.

Nishant127 commented 3 years ago

Hi @amaan-ahmad, Thank you so much for taking out time to create this issue 🚀

Yes, Please go forward to work on this issue, I am assigning this issue to you 🔥.

(Might be a little challenging) Only for the user who is sending the message, we want to interchange the positions of Avatar and the message box when he will post his message. eg: 👇 image

Keep Contributing 🙌

Nishant127 commented 3 years ago

Hey, @lakshita15 thank you for showing interest 🚀

We appreciate🙏 your dedication and efforts towards our project, but according to our contributing guidelines, Issues are assigned on the First Come First Serve basis.

Thank you😊, and Sorry for the inconvenience caused 🙌

amaan-ahmad commented 3 years ago

Hey @Nishant127 , I'll try this one changing the position. Hopefully will succeed in this✌ Kindly assign this issue to me.

Thanks.

amaan-ahmad commented 3 years ago

@Nishant127 Have a look, I did it!

Actually, I stored the name of user in local storage whenever they create/join the room. and then compare it with data.name in ChatMessage.js as needed to do CSS-in-JS styling. Pretty easy. ✌

image

amaan-ahmad commented 3 years ago

@Nishant127

As discussed, I have created PR #82 for this issue. Kindly add the GSSOC21 label to this issue and assign it to me.

Thanks 😊

Nishant127 commented 3 years ago

@amaan-ahmad Well done bro 🚀🔥. I have assigned you the issue. You can go ahead now.

kothariji commented 3 years ago

Great Work 🚀

image

Thank you for Contributing 🙌 Keep Contributing 🔥