reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

feat: improve message display

Browse Source
This commit is contained in:
Jeremy Kahn 2022-08-28 11:45:26 -05:00
parent 707e090f8b
commit a6a5c90a73
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Message/Message.tsx
View File

@ -50,24 +50,26 @@ export const Message = ({ message, userId }: MessageProps) => {
return ( return (
<Box className="Message"> <Box className="Message">
<Typography <Typography
variant="overline" variant="caption"
display="block" display="block"
color="grey.400"
sx={{ sx={{
textAlign: message.authorId === userId ? 'right' : 'left', textAlign: message.authorId === userId ? 'right' : 'left',
}} }}
> >
{userId} {message.authorId}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
backgroundColor, backgroundColor,
margin: 0.5, margin: 0.5,
padding: 1, padding: '0.5em 0.75em',
borderRadius: 6, borderRadius: 6,
float: message.authorId === userId ? 'right' : 'left', float: message.authorId === userId ? 'right' : 'left',
transition: 'background-color 1s', transition: 'background-color 1s',
wordBreak: 'break-all', wordBreak: 'break-word',
}} }}
maxWidth="85%"
> >
<Markdown components={componentMap} linkTarget="_blank"> <Markdown components={componentMap} linkTarget="_blank">
{message.text} {message.text}