fix!: update messageCanvas styling #163
Conversation
kaseyvee
requested review from
Shiti,
florenceloi and
milliondreams
as code owners
BREAKING CHANGE: Changes in classnames.
| ref={ref} | ||
| > | ||
| <Box className="rustic-sender-info"> | ||
| <Stack className="rustic-sender-info"> |
There was a problem hiding this comment.
You could remove the classname if you use Stack
| <Stack className="rustic-sender-info"> | |
| <Stack direction="row" alignItems="center" spacing={1}> |
| <Typography variant="caption" color="textSecondary"> | ||
| <Typography | ||
| variant="caption" | ||
| color="textSecondary" |
There was a problem hiding this comment.
| color="textSecondary" | |
| color="text.secondary" |
| margin-left: 16px; | ||
| align-self: flex-end; |
There was a problem hiding this comment.
If its aligned to flex-end, what does adding margin-left help with? should we be setting margin-right instead?
There was a problem hiding this comment.
It had to do with vertical alignment as it's not completely centred in the design but I'm thinking now it might be too low with flex-end. What do you think?
with align-self: flex-end;
without align-self: flex-end;
There was a problem hiding this comment.
I think we could do without the align-self styling.
|
Design has a border around the profile icon. Do we want to add it in MessageCanvas? LGTM otherwise. |
shouldnt that be handled through the styling for the profile component ? |
This is what I was thinking. We could update the stories in a follow up |
yes, please update agent profile icon in storybook in a follow-up |
3 participants
BREAKING CHANGE: Changes in classnames.
Changes
rustic-message-actions-containeris nowrustic-message-containerrustic-message-actions-containeris now applied to the message actions, as before it was added to the message contentThe message actions on mobile in the design are accessed by clicking/holding the message and having a drawer menu appear. We don't have logic implemented for this yet, so I've moved the message actions to the bottom on mobile.
Screenshots
Design
Desktop
Mobile
Before
No hover
On hover
Message space no hover
Message space on hover
After
No hover
On hover
On hover mobile
Message space no hover
Message space on hover