Chat Improvements

[kanishk6103]

• Default date/time for the session should be now instead of dd/mm/yyyy.
• Session requests should include whether it's a quiet mode session or not. Currently there is nothing that tells whether the session is quiet or not.
• Can't see chat in dark mode since the text turns white. The chat is not optimized for dark mode, the text box and name as well.
• When clicked on session, the UI appears cluttered, when session is clicked, the message box should disappear ideally.
• A request with overlapping times could be sent, which shouldn't happen, first the timings for each user should be checked whether a slot is available or not.

[Aaratrika-Shelly]

Hi @kanishk6103 and @PriyanshuShekhar10, this is a great list of improvements. I'm a frontend developer with experience in React and Tailwind CSS, and I would like to take ownership of the three frontend tasks listed in this issue.
To ensure high quality and a fast review process for each fix, I will be submitting three separate Pull Requests for them.
Here is my plan:
PR #1: Fix issue #3 (Chat visibility in dark mode).
PR #2: Fix issue #1 (Default session date/time to now).
PR #3: Fix issue #4 (De-clutter UI when a session is clicked).
I will start with the dark mode fix immediately. Would it be okay to assign the issue to me with this plan in mind?
Thank you!"

[kanishk6103]

@Aaratrika-Shelly Sure, go ahead! In case you face any issues feel free to reach out.

[Aaratrika-Shelly]

"Hi @kanishk6103 and @PriyanshuShekhar10,
I've been investigating issue #3 ("Can't see chat in dark mode...") and I'm having trouble reproducing the bug as described.
I have set up the project and tested the chat feature in both light and dark modes.
In Dark Mode: The chat appears to be fully functional and readable.
In Light Mode: The chat also seems to be styled correctly. The chat input area has a light background, and when active, it correctly adopts the green theme colors.
Here are screenshots of what I'm seeing on my end:
Light Mode:

Dark Mode:

It's possible the bug was fixed in a recent update, or perhaps I'm looking at the wrong part of the application.
Could you please provide some more specific steps to reproduce the issue, or point me to the exact page/component where the dark mode problem is occurring?
Thank you for your help!"

[PriyanshuShekhar10]

Hi, @Aaratrika-Shelly
Sorry for the oversight, since the issue is 3 weeks old, seems like most of the issues have been fixed in the consequent updates.
Atleast the frontend task seems to be completed,

One issue that isn't listed is this, the date in calendar isn't visible for the next 2 days

If that's something you're interested to work on, let me know

[Aaratrika-Shelly]

Hi @PriyanshuShekhar10
Thank you so much for the clarification and for providing the new issue! That makes perfect sense.
Yes, I would absolutely be interested in working on the calendar visibility bug. I can see the issue clearly in your screenshot.
I will get started on it right away. Thank you!

[Aaratrika-Shelly]

Hi @PriyanshuShekhar10
Thank you for assigning me this. I've set up the project and have been investigating the bug, but I've found a key difference between your screenshot and the current master branch.
In your screenshot, the calendar header displays multiple dates side-by-side
However, in the current version of the code on the master branch, the header only displays a single date.

It seems the logic to display multiple dates in the header isn't in the main branch yet. Because of this, I can't reproduce the bug where the next 2 days are invisible.
Could you please let me know how I should proceed? Should I work on implementing the multi-date header first, or is there a different branch I should be working from?
Thank you!

[PriyanshuShekhar10]

@Aaratrika-Shelly the base branch is set to test-dash, do check and lemme know

[Aaratrika-Shelly]

@PriyanshuShekhar10 Thank you for clarifying! That makes perfect sense. I will switch my base branch to test-dash and start the investigation there. I appreciate you pointing me in the right direction!

[Aaratrika-Shelly]

Hi @PriyanshuShekhar10
Thank you! I have switched to the test-dash branch as you suggested and have been investigating the code.
I've found a key difference between your screenshot and the code that is currently on the test-dash branch.
Your screenshot shows a calendar header with multiple dates visible side-by-side.
The code in app/(product)/components/Calendar.tsx on the test-dash branch only renders a single date label, not a list of dates.
Here is a screenshot of the code from the test-dash branch that renders the header:

Because the code to render the multiple dates is not on this branch, I am unable to reproduce the visibility bug you described.
It seems the latest version of the multi-date header code might not be pushed to the test-dash branch yet. How would you like me to proceed? Do you want me to try and implement the multi-date display logic myself, or could you please push the latest version of the Calendar.tsx file?
Thank you for your help in sorting this out!