Changed multimedia upload and send button icon colors on ChatInputBar on web to match the thread color, similar to how it looks
on native:
Related Linear issue with full context.
Details
Details
Tested on Chrome/Safari and works as expected:
Before:
After:
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Branch
- master
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
| web/chat/chat-input-bar.react.js | ||
|---|---|---|
| 232 | The reason this is an inline style instead of using the color prop in SWMansionIcon is because the color prop did not result in any changes -- so the style had to be overwritten using the style prop. Not sure why the color prop isn't working, but considering the color prop works fine on native for SWMansionIcon, this should be fixed on web. | |
| 255 | If this were a functional component, this inline style would be memoized using useMemo so it would only re-render if the thread color actually changed. However, this is a class component, so I'm not sure the best way forward. We could pass the thread color in ConnectedChatInputBar at the bottom of this file. This file also contains other non-memoized inline styles, so this should be worked out. | |
| web/chat/chat-input-bar.react.js | ||
|---|---|---|
| 232 | Styling SWMansionIcons on web is a known issue. I think this approach is fine for now as it matches what's being done elsewhere in this file. | |
| 255 |
Just a note, memoizing the thread color--which is of type string--and passing it down from ConnectedChatInputBar wouldn't help us here. What we'd want to memoize instead is the style object (eg { color: '#FFFFFF' } or whatever). The benefit of memoizing objects is to maintain referential equality. There's no benefit to memoizing strings | |
| web/chat/chat-input-bar.react.js | ||
|---|---|---|
| 255 | Ah, you're right. | |