Skip to content

Commit 2b224b0

Browse files
gabriellshgabriellsh
authored
feat(fuselage): MessageEmoji and ThreadMessageEmoji components (#709)
feat(fuselage): MessageEmoji and ThreadMessageEmoji components
2 parents ee8819b + 1e6b743 commit 2b224b0

10 files changed

+201
-116
lines changed

‎packages/fuselage/src/components/Message/MessageEmoji.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
import { MessageEmojiBase } from './MessageEmojiBase';
5+
6+
type MessageEmojiProps = {
7+
name: string;
8+
className?: string;
9+
image?: string;
10+
big?: boolean;
11+
children?: ReactNode;
12+
};
13+
14+
export const MessageEmoji = ({
15+
name,
16+
className,
17+
image,
18+
big,
19+
children,
20+
}: MessageEmojiProps) => (
21+
<MessageEmojiBase
22+
className={[
23+
'rcx-message__emoji',
24+
className,
25+
big && 'rcx-message__emoji--big',
26+
]
27+
.filter(Boolean)
28+
.join(' ')}
29+
name={name}
30+
image={image}
31+
children={children}
32+
/>
33+
);

‎packages/fuselage/src/components/Message/MessageEmojiBase.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
type MessageEmojiBaseProps = {
5+
name: string;
6+
className?: string;
7+
children?: ReactNode;
8+
image?: string;
9+
};
10+
11+
export const MessageEmojiBase = ({
12+
name,
13+
className,
14+
image,
15+
children,
16+
}: MessageEmojiBaseProps) => (
17+
<span
18+
className={`${className || ''} ${name}`}
19+
style={image && image.length ? { backgroundImage: image } : undefined}
20+
children={children}
21+
/>
22+
);

‎packages/fuselage/src/components/Message/MessageReactions/MessageReactionEmoji.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1+
import type { ReactNode } from 'react';
12
import React from 'react';
23

4+
import { MessageEmojiBase } from '../MessageEmojiBase';
5+
36
type MessageReactionEmojiProps = {
47
name: string;
58
className?: string;
9+
children?: ReactNode;
610
image?: string;
711
};
812

913
export const MessageReactionEmoji = ({
1014
name,
1115
className,
1216
image,
17+
children,
1318
}: MessageReactionEmojiProps) => (
14-
<div
15-
className={`rcx-message-reactions__emoji ${name} ${className}`}
16-
style={image && image.length ? { backgroundImage: image } : undefined}
19+
<MessageEmojiBase
20+
className={`rcx-message-reactions__emoji ${className || ''}`}
21+
name={name}
22+
image={image}
23+
children={children}
1724
/>
1825
);

‎packages/fuselage/src/components/Message/Messages.stories.tsx

+44-99
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import React, { useState } from 'react';
33
import Message from '.';
44
import { Box, Avatar } from '..';
55
import { MessageDivider } from './MessageDivider';
6+
import { MessageEmoji } from './MessageEmoji';
67
import MessageReactions from './MessageReactions';
78
import MessageToolbox from './MessageToolbox';
8-
import ThreadMessage from './ThreadMessage';
9+
import ThreadMessage, { ThreadMessageEmoji } from './ThreadMessage';
910

1011
export default {
1112
title: 'Message/Message',
@@ -15,25 +16,15 @@ export default {
1516
},
1617
};
1718

19+
const avatarUrl =
20+
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
21+
1822
export const Default = () => (
1923
<Box>
2024
<MessageDivider>May, 24, 2020</MessageDivider>
2125
<Message className='customclass' clickable>
2226
<Message.LeftContainer>
23-
<Avatar
24-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
25-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
26-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
27-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
28-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
29-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
30-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
31-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
32-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
33-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
34-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
35-
size={'x36'}
36-
/>
27+
<Avatar url={avatarUrl} size={'x36'} />
3728
</Message.LeftContainer>
3829
<Message.Container>
3930
<Message.Header>
@@ -75,20 +66,7 @@ export const WithSequential = () => (
7566
<MessageDivider>May, 24, 2020</MessageDivider>
7667
<Message className='customclass' clickable>
7768
<Message.LeftContainer>
78-
<Avatar
79-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
80-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
81-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
82-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
83-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
84-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
85-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
86-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
87-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
88-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
89-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
90-
size={'x36'}
91-
/>
69+
<Avatar url={avatarUrl} size={'x36'} />
9270
</Message.LeftContainer>
9371
<Message.Container>
9472
<Message.Header>
@@ -160,6 +138,37 @@ export const WithSequential = () => (
160138
</MessageToolbox>
161139
</MessageToolbox.Wrapper>
162140
</Message>
141+
<Message className='customclass' clickable sequential>
142+
<Message.LeftContainer />
143+
<Message.Container>
144+
<Message.Body>
145+
{'Test Message Emoji ->'}{' '}
146+
<MessageEmoji name='test' image={`url(${avatarUrl})`} />
147+
</Message.Body>
148+
</Message.Container>
149+
<MessageToolbox.Wrapper>
150+
<MessageToolbox>
151+
<MessageToolbox.Item icon='quote' />
152+
<MessageToolbox.Item icon='clock' />
153+
<MessageToolbox.Item icon='thread' />
154+
</MessageToolbox>
155+
</MessageToolbox.Wrapper>
156+
</Message>
157+
<Message className='customclass' clickable sequential>
158+
<Message.LeftContainer />
159+
<Message.Container>
160+
<Message.Body>
161+
<MessageEmoji big name='test' image={`url(${avatarUrl})`} />
162+
</Message.Body>
163+
</Message.Container>
164+
<MessageToolbox.Wrapper>
165+
<MessageToolbox>
166+
<MessageToolbox.Item icon='quote' />
167+
<MessageToolbox.Item icon='clock' />
168+
<MessageToolbox.Item icon='thread' />
169+
</MessageToolbox>
170+
</MessageToolbox.Wrapper>
171+
</Message>
163172
</Box>
164173
);
165174

@@ -168,20 +177,7 @@ export const MessageWithThread = () => (
168177
<MessageDivider unreadLabel='Unread'>May, 24, 2020</MessageDivider>
169178
<Message className='customclass' clickable>
170179
<Message.LeftContainer>
171-
<Avatar
172-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
173-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
174-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
175-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
176-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
177-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
178-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
179-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
180-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
181-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
182-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
183-
size={'x36'}
184-
/>
180+
<Avatar url={avatarUrl} size={'x36'} />
185181
</Message.LeftContainer>
186182
<Message.Container>
187183
<Message.Header>
@@ -272,23 +268,11 @@ export const MessageWithThread = () => (
272268
</ThreadMessage.Row>
273269
<ThreadMessage.Row>
274270
<ThreadMessage.LeftContainer>
275-
<Avatar
276-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
277-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
278-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
279-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
280-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
281-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
282-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
283-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
284-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
285-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
286-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
287-
size='x16'
288-
/>
271+
<Avatar url={avatarUrl} size='x16' />
289272
</ThreadMessage.LeftContainer>
290273
<ThreadMessage.Container>
291274
<ThreadMessage.Message>
275+
<ThreadMessageEmoji image={`url(${avatarUrl})`} name='test' />
292276
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
293277
nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
294278
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
@@ -362,20 +346,7 @@ export const MessageEditing = () => (
362346
<MessageDivider>May, 24, 2020</MessageDivider>
363347
<Message className='customclass' clickable>
364348
<Message.LeftContainer>
365-
<Avatar
366-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
367-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
368-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
369-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
370-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
371-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
372-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
373-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
374-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
375-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
376-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
377-
size={'x36'}
378-
/>
349+
<Avatar url={avatarUrl} size={'x36'} />
379350
</Message.LeftContainer>
380351
<Message.Container>
381352
<Message.Header>
@@ -455,20 +426,7 @@ export const MessageHighlighted = () => (
455426
<MessageDivider>May, 24, 2020</MessageDivider>
456427
<Message className='customclass' highlight>
457428
<Message.LeftContainer>
458-
<Avatar
459-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
460-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
461-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
462-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
463-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
464-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
465-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
466-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
467-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
468-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
469-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
470-
size={'x36'}
471-
/>
429+
<Avatar url={avatarUrl} size={'x36'} />
472430
</Message.LeftContainer>
473431
<Message.Container>
474432
<Message.Header>
@@ -548,20 +506,7 @@ export const MessagePending = () => (
548506
<MessageDivider>May, 24, 2020</MessageDivider>
549507
<Message className='customclass' isPending>
550508
<Message.LeftContainer>
551-
<Avatar
552-
url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
553-
4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
554-
IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
555-
AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
556-
MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
557-
xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
558-
jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
559-
eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
560-
6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
561-
SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
562-
UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
563-
size={'x36'}
564-
/>
509+
<Avatar url={avatarUrl} size={'x36'} />
565510
</Message.LeftContainer>
566511
<Message.Container>
567512
<Message.Header>

‎packages/fuselage/src/components/Message/Messages.styles.scss

+14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '../../styles/lengths.scss';
22
@use '../../styles/functions.scss';
33
@use '../../styles/colors.scss';
4+
@use '../../styles/mixins/size.scss';
45
@use '../../styles/typography.scss';
56
@use './mixins.scss';
67

@@ -194,4 +195,17 @@ $message-background-color-highlight: functions.theme(
194195
display: flex;
195196
flex-direction: column;
196197
}
198+
199+
&__emoji {
200+
display: inline-block;
201+
202+
margin-inline: lengths.margin(2);
203+
204+
background-size: contain;
205+
@include size.square(lengths.size(24));
206+
207+
&--big {
208+
@include size.square(lengths.size(44));
209+
}
210+
}
197211
}

0 commit comments

Comments
 (0)