ucsb-cs156-f23 / proj-happycows-f23-5pm-1

https://ucsb-cs156-f23.github.io/proj-happycows-f23-5pm-1/

0 stars 0 forks source link

FEATURE: More intuitive toggle button UI for opening and closing chatroom feature #13

Closed github-actions[bot] closed 10 months ago

github-actions[bot] commented 11 months ago

User Story

As a user
I can easily spot where chatroom toggle button is located
So that I can open and close common chatroom easily

Discussion

At the moment, chatroom toggle button is located at the bottom of the page and it is not easily recognizable for the users.
We need to add some sort of indication or change the position of the button to make the button stand out more. Maybe more vibrant color or intuitive button icon would be helpful in this case?
Like the UI mockup above, a chat icon in case will be a great option.

Acceptance Criteria

[ ] A toggle button with fixed position can be easily spotted on the common room play page with group chat icon.
[ ] The toggle button should have two states(show different icons maybe?) to indicated whether chatroom is open when toggled.
[ ] All existing chatroom feature is still fully functional.

Implementation Todos

Frontend:

[ ] Refactor ChatPanel and ChatToggle to its own React component from PlayPage.js.
[ ] Redesign chat toggle button UI/UX. There is no design restrictions on this part, and student can be as creative as possible.

Testing:

[ ] Students should pass all unit tests for the following criteria: 1. button is visible in common play page 2. When chatroom is closed, clicking the toggle button should make the chatroom visible. 3. When chatroom is oprn, clicking the toggle button should hide the chatroom.