[web] Move `MessageActionButtons`-related styles inside component
ClosedPublic
Actions

Authored by atul on Mar 23 2022, 2:02 PM.

Details

Reviewers

• jacek
tomek
varun
• benschac
ashoat

Commits

rCOMM802a7c72838a: [web] Move `MessageActionButtons`-related styles inside component

Summary

I mistakenly put some of the styles for the MessageActionButtons (reply, create sidebar, etc) in the ComposedMessage stylesheet instead of in the MessageActionButtons stylesheet. This meant that the MessageActionButtons component was appearing incorrectly for RobotextMessages.

This diff puts the MessageActionButtons-related styling at the right layer of abstraction and fixes how things look for robotext messages.

Before:

After:

Test Plan

Hover over a ComposedMessage and ensure that the MessageActionButtons component tooltip appears as it did before/as it does in Figma.
Hover over a RobotextMessage and ensure that the MessageActionButtons component appears as it does for ComposedMessages

Diff Detail

Repository

rCOMM Comm

Branch

landmarch25

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

atul created this revision.Mar 23 2022, 2:02 PM

Herald added subscribers: • karol, • adrian, ashoat. · View Herald TranscriptMar 23 2022, 2:02 PM

include all changes

atul edited the summary of this revision. (Show Details)Mar 23 2022, 2:07 PM

Harbormaster completed remote builds in B7565: Diff 10636.Mar 23 2022, 2:07 PM

atul added inline comments.Mar 23 2022, 2:09 PM

web/chat/chat-message-list.css
114–117 ↗	(On Diff #10637)	We don't need this anymore. Can just include `padding: 10px 6px 6px` in the existing `div.messageActionButtons svg` selector in `message-action-buttons.css`. (The `color` property here is actually wrong. It should be `color: var(--color-disabled)` for the non-hover state.)
118–120 ↗	(On Diff #10637)	We don't need this anymore. Can just include `cursor: pointer` in the existing `div.messageActionButtons svg:hover` selector in `message-action-buttons.css`.
web/chat/composed-message.react.js
154 ↗	(On Diff #10637)	We push this styling "down" to the actual `MessageActionButtons` component.