Updated ui for join/create room page

[0xMishra]

Updated ui for join/create room page: #8

Title : Updated ui for join/create room page

Issue No. : 8

Code Stack : .jsx

Close #8

Video/Screenshots (mandatory)

Ui screenshots after the update

1. Mobile View

2. Tablet View

3. Desktop View

Checklist:

• [X] I have mentioned the issue number in my Pull Request.
• [X] I have commented my code, particularly in hard-to-understand areas
• [x] I have gone through the contributing.md file before contributing

  Additional context (Mandatory ) I have updated the UI for join/create room page using tailwind css for styling. Now the forms render dynamically instead of appearing alongside as it was before.

Are you contributing under any Open-source programme? Contributing under JWOC 2024

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
slate-ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 18, 2024 5:49pm

[sd012gfhkhhvh]

@mishra811 great job . But there are some issues in the landing page and in the room page. Landing page: The start whiteboarding button and the github button in the top right is deformed.

Room page : The canvas outline was not visible.

I think it is due to any kind of conflict regarding classes in bootstrap and tailwind css. I saw u are using postcss which is great but do figure out the reason of the issues pointed out and let me know.

You can refer to the doc to avoid conflicts between classes - https://stackoverflow.com/questions/62688037/can-use-both-tailwind-css-and-bootstrap-4-at-the-same-time

[sd012gfhkhhvh]

It will be great if the Color scheme of the Join room page matches with the Slateai logo. (red and blue)

[sd012gfhkhhvh]

Let me know if you are interested in issue#1 as the previous contributor on that issue has left it. As you are working with UI stuff it will be good if you can migrate the entire UI from bootstrap to tailwind. It was under hard category so you will get more point for that issue.

[0xMishra]

Ok I will update the colors to match the logo and fix the other UI issues that you mentioned. I think migrating the whole UI to Tailwind css at once would be better rather than one page at a time. Sure you can assign me issue#1. But It will take some time as building UI is often time-consuming.

[sd012gfhkhhvh]

Ok I will update the colors to match the logo and fix the other UI issues that you mentioned. I think migrating the whole UI to Tailwind css at once would be better rather than one page at a time. Sure you can assign me issue#1. But It will take some time as building UI is often time-consuming.

Not an issue take your time. you just comment on the issue#1 I will assign you.

[0xMishra]

I have updated the UI for the create/join form page and fixed some UI issues that you mentioned above. Using tailwind has caused some new UI breakdowns throughout the app. I am thinking let's merge this issue for the join/create page if you like the new join/create page UI and I will fix the rest of the UI breakdowns under issue#1. Let me know what you think. Here are some of the screenshots of the new UI

[sd012gfhkhhvh]

@mishra811 the current current color changes looks good. I am assigning you issue #1. Lets finish issue #1 first then i merge both of them together. For now there are too many conflicts in the files.

[0xMishra]

HI, finally I have made all the changes in UI required and have migrated the client app from Bootstrap to Tailwind CSS. Please verify it and let me know if there's an issue.

[sd012gfhkhhvh]

HI, finally I have made all the changes in UI required and have migrated the client app from Bootstrap to Tailwind CSS. Please verify it and let me know if there's an issue.

hey @mishra811 you did a great job so far. The join room page which you have made earlyer was perfect No changes required in that page. But in the landing page and in the main roompage you made some big changes regarding the layout which should be reverted as the original page has.

1. The landing page - You did change the entire theme and look of the page which looks great, no need to change the design just do the following changes - a) make a footer and put all the details as the original site. refer to the original site b) make the scrollbar thinner , not only in this page but in all the pages where there is a scrollbar. c) keep the "start whiteboarding" button as it was before". you did change the entire thing even the text in it which is not preferred. You should have discuss with me if you are changeing something else other the task assigned. This is a general piece of advice for any open source repo you are working. Otherwise the file changes are become so enormous to keep track. Discuss first, raise an issue that it could be better this way and then made a pr.

2. The main room page - The page was responsive but the layouts has completely changed. All the button spacing, the canvas area and specially the chantbox layout is not at all looking great. Refer to the original layout and keep the spaces and design as same as the original.

Your changes -

Original layout -

Let me know if you have some doubt.

[sd012gfhkhhvh]

@mishra811 you have done the issue #7 wich is assigned to other person. As the person is inactive for a while you just put a comment there I will assigned it to you.

and the importent thing is after all of the adjustments you just make a pr to the issue#1 with the actual changes, and after it got approved made 2 different fresh pr wich a one liner change (e.g - put a comment) to the respective issues.

[0xMishra]

Apologies for the inconveniences caused.I was actually trying some UI changes for the landing page in my local repo but I accidentally committed it and pushed it as well alongside other changes. That was my bad.

I will revert back the changes and fix everything but I was thinking should I raise an issue to enhance the UI for the landing page ? Since I have already made changes to landing page UI I can raise an instant PR for that as well.Let me know I don't have a problem in reverting the UI either. I am fine with both

[sd012gfhkhhvh]

Apologies for the inconveniences caused.I was actually trying some UI changes in my local repo but I accidentally committed it and pushed it as well. I will revert back the changes and fix everything but I was thinking should I raise an issue to enhance the UI for the landing page ? Since I have already made changes to landing page UI I can raise an instant PR for that as well.Let me know I don't have a problem in reverting the UI either. I am fine with both.

sure you can create an issue. but first try to resolve the issue#1 and then made one small changes to rest of the issues and make a fresh pr to rest of the issues.

[sd012gfhkhhvh]

In the mobile view keep the leave room button at the top of its parent div and make it aquire the entire div-width space. and place the undo and redo buttons just after the color where the leave button was previously @mishra811

[0xMishra]

hello, I have reverted all the UI changes in the landing page and fixed the layout on the room page. Everything should be fixed now. Please verify it and let me know if there's something to change.

[sd012gfhkhhvh]

hello, I have reverted all the UI changes in the landing page and fixed the layout on the room page. Everything should be fixed now. Please verify it and let me know if there's something to change.

hey are you available for a google meet? I need to discuss something before merging.

[0xMishra]

sure let me know when you are available

[sd012gfhkhhvh]

sure let me know when you are available

we can do now. Let me know i will send you meet link

[0xMishra]

Sure let's do it

[sd012gfhkhhvh]

Sure let's do it

https://meet.google.com/raz-osvs-qfa

[sd012gfhkhhvh]

@mishra811 bro this pr has too much conflicts. It can't be merged.

I have merged issue#1 on dev branch you pull the dev branch("git pull origin dev") and merge with your existing changes of join/create room page and make a fresh pr after resolving conflicts.

[0xMishra]

Sure I will do that

[0xMishra]

Should fix merge conflicts now

[sd012gfhkhhvh]

issue#8 has been sucessfully merged into dev.