[web] update the chat input bar ui
AcceptedPublic
Actions

Authored by ginsu on Jan 8 2024, 12:33 AM.

Details

Reviewers

atul
inka

Summary

PLEASE NOTE THAT THIS DIFF AND SUBSEQUENT DIFFS IN THIS STACK WILL NOT BE LANDED UNTIL MORE OF THE REDESIGN IS READY SINCE THIS WILL CAUSE REGRESSIONS IN PROD

This diff updates the chat input bar + any extra relevant elements as part of the chat input bar (join chat button, image previews, and explanations). In this diff I did the following:

I added a border top drop shadow inset to the join chat button and to the multimedia previews container, and explanation container
I added a border top drop shadow inset to the chat input bar and removed any top padding
I moved the multimedia button to be housed within the chat input bar

Here are some figma screenshots that show the different edge cases:

Screenshot 2024-01-08 at 3.51.12 AM.png (1×1 px, 272 KB)

Screenshot 2024-01-08 at 3.51.37 AM.png (1×1 px, 221 KB)

Linear task: https://linear.app/comm/issue/ENG-5971/update-the-chat-input-field-ui and https://linear.app/comm/issue/ENG-5972/update-the-join-chat-button-ui

Depends on D10565

Test Plan

Please see the demo video below

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Jan 8 2024, 12:33 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptJan 8 2024, 12:33 AM

ginsu edited the summary of this revision. (Show Details)Jan 8 2024, 12:51 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, inka.

ginsu added a parent revision: D10565: [web] update the chat message list ui.

ginsu attached a referenced file: F1043590: Screenshot 2024-01-08 at 3.51.37 AM.png. (Show Details)

ginsu attached a referenced file: F1043591: Screenshot 2024-01-08 at 3.51.12 AM.png. (Show Details)

ginsu added a child revision: D10567: [web] introduce chat message list panel item.Jan 8 2024, 1:00 AM

Harbormaster returned this revision to the author for changes because remote builds failed.Jan 8 2024, 1:05 AM

Harbormaster failed remote builds in B25575: Diff 35342!

will make sure ci passes before landing

Changes looks good

web/chat/chat-input-bar.react.js
322–323	I see they're not colored in the Figma designs... but did we intentionally choose to stop styling this icon with thread icon? I vaguely remember it being discussed, but I don't remember decision (CC @ashoat?)

This revision is now accepted and ready to land.Jan 8 2024, 1:01 PM

ginsu added inline comments.Jan 8 2024, 1:06 PM

web/chat/chat-input-bar.react.js
322–323	Sorry should have put this in the summary, but in this screenshot it shows that the image icon now no longer uses the thread color (the send button still does) Happy to bring this back tho, if we prefer using the thread color for the image icon