[IMPROVEMENT] Mentions layout without background (#2559)
* [IMPROVEMENT] Mentions layout without background * Fix RoomItem * Fix tests
This commit is contained in:
Diego Mello
GitHub
parent
f7e2388017
commit
7cccd02cb3
|
|
@ -5291,13 +5291,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#ffe9ec",
|
||||
"color": "#f5455c",
|
||||
"color": "#DB0C27",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5338,13 +5335,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fff6d6",
|
||||
"color": "#b68d00",
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5384,13 +5378,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fde8d7",
|
||||
"color": "#f38c39",
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5430,13 +5421,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fde8d7",
|
||||
"color": "#f38c39",
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5534,13 +5522,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#ffe9ec",
|
||||
"color": "#f5455c",
|
||||
"color": "#DB0C27",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5581,13 +5566,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fff6d6",
|
||||
"color": "#b68d00",
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5627,13 +5609,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fde8d7",
|
||||
"color": "#f38c39",
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5673,13 +5652,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fde8d7",
|
||||
"color": "#f38c39",
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -5777,13 +5753,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fff6d6",
|
||||
"color": "#b68d00",
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -15971,13 +15944,10 @@ exports[`Storyshots Message list message 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fff6d6",
|
||||
"color": "#b68d00",
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -16019,13 +15989,10 @@ exports[`Storyshots Message list message 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#ffe9ec",
|
||||
"color": "#f5455c",
|
||||
"color": "#DB0C27",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -16066,13 +16033,10 @@ exports[`Storyshots Message list message 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fde8d7",
|
||||
"color": "#f38c39",
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -16113,13 +16077,10 @@ exports[`Storyshots Message list message 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fde8d7",
|
||||
"color": "#f38c39",
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -16161,13 +16122,10 @@ exports[`Storyshots Message list message 1`] = `
|
|||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5,
|
||||
"padding": 5,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#fff6d6",
|
||||
"color": "#b68d00",
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -16181,6 +16139,432 @@ exports[`Storyshots Message list message 1`] = `
|
|||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flexDirection": "column",
|
||||
"paddingHorizontal": 14,
|
||||
"paddingVertical": 4,
|
||||
"width": "100%",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 4,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"overflow": "hidden",
|
||||
},
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FastImageView
|
||||
resizeMode="cover"
|
||||
source={
|
||||
Object {
|
||||
"headers": undefined,
|
||||
"priority": "high",
|
||||
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=100",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"marginLeft": 46,
|
||||
},
|
||||
Object {
|
||||
"marginLeft": 10,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessible={true}
|
||||
focusable={true}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"lineHeight": 22,
|
||||
},
|
||||
Object {
|
||||
"color": "#0d0e12",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
diego.mello
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "300",
|
||||
"lineHeight": 22,
|
||||
"paddingLeft": 10,
|
||||
},
|
||||
Object {
|
||||
"color": "#9ca2a8",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
10:00 AM
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text
|
||||
numberOfLines={0}
|
||||
style={
|
||||
Array [
|
||||
undefined,
|
||||
Object {
|
||||
"color": "#2f343d",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
onPress={[Function]}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
rocket.cat
|
||||
</Text>
|
||||
<Text
|
||||
accessibilityLabel=" Lorem ipsum dolor "
|
||||
numberOfLines={0}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
Lorem ipsum dolor
|
||||
</Text>
|
||||
<Text
|
||||
onPress={[Function]}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"color": "#DB0C27",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
diego.mello
|
||||
</Text>
|
||||
<Text
|
||||
accessibilityLabel=" sit amet, "
|
||||
numberOfLines={0}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
sit amet,
|
||||
</Text>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
all
|
||||
</Text>
|
||||
<Text
|
||||
accessibilityLabel=" consectetur adipiscing "
|
||||
numberOfLines={0}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
consectetur adipiscing
|
||||
</Text>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"color": "#E26D0E",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
here
|
||||
</Text>
|
||||
<Text
|
||||
accessibilityLabel=" elit, sed do eiusmod tempor "
|
||||
numberOfLines={0}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
elit, sed do eiusmod tempor
|
||||
</Text>
|
||||
<Text
|
||||
onPress={[Function]}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
Object {
|
||||
"color": "#DFAC00",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
#general
|
||||
</Text>
|
||||
<Text
|
||||
accessibilityLabel=" incididunt ut labore et dolore magna aliqua."
|
||||
numberOfLines={0}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
},
|
||||
Array [
|
||||
Object {},
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
}
|
||||
>
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
|
|
|
|||
|
|
@ -11,13 +11,12 @@ export const SWITCH_TRACK_COLOR = {
|
|||
};
|
||||
|
||||
const mentions = {
|
||||
unreadBackground: '#414852',
|
||||
mentionMeColor: '#f5455c',
|
||||
mentionMeBackground: '#ffe9ec',
|
||||
mentionGroupColor: '#f38c39',
|
||||
mentionGroupBackground: '#fde8d7',
|
||||
mentionOtherColor: '#b68d00',
|
||||
mentionOtherBackground: '#fff6d6'
|
||||
unreadBackground: '#6C727A',
|
||||
mentionMeColor: '#DB0C27',
|
||||
mentionMeBackground: '#F5455C',
|
||||
mentionGroupColor: '#E26D0E',
|
||||
mentionGroupBackground: '#F38C39',
|
||||
mentionOtherColor: '#DFAC00'
|
||||
};
|
||||
|
||||
export const themes = {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@ const AtMention = React.memo(({
|
|||
style={[
|
||||
styles.mention,
|
||||
{
|
||||
color: themes[theme].mentionGroupColor,
|
||||
backgroundColor: themes[theme].mentionGroupBackground
|
||||
color: themes[theme].mentionGroupColor
|
||||
},
|
||||
...style
|
||||
]}
|
||||
|
|
@ -29,13 +28,11 @@ const AtMention = React.memo(({
|
|||
let mentionStyle = {};
|
||||
if (mention === username) {
|
||||
mentionStyle = {
|
||||
color: themes[theme].mentionMeColor,
|
||||
backgroundColor: themes[theme].mentionMeBackground
|
||||
color: themes[theme].mentionMeColor
|
||||
};
|
||||
} else {
|
||||
mentionStyle = {
|
||||
color: themes[theme].mentionOtherColor,
|
||||
backgroundColor: themes[theme].mentionOtherBackground
|
||||
color: themes[theme].mentionOtherColor
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@ const Hashtag = React.memo(({
|
|||
style={[
|
||||
styles.mention,
|
||||
{
|
||||
color: themes[theme].mentionOtherColor,
|
||||
backgroundColor: themes[theme].mentionOtherBackground
|
||||
color: themes[theme].mentionOtherColor
|
||||
},
|
||||
...style]}
|
||||
onPress={handlePress}
|
||||
|
|
|
|||
|
|
@ -54,9 +54,7 @@ export default StyleSheet.create({
|
|||
temp: { opacity: 0.3 },
|
||||
mention: {
|
||||
fontSize: 16,
|
||||
padding: 5,
|
||||
...sharedStyles.textMedium,
|
||||
letterSpacing: 0.5
|
||||
...sharedStyles.textSemibold
|
||||
},
|
||||
paragraph: {
|
||||
marginTop: 0,
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@ const UnreadBadge = React.memo(({
|
|||
let backgroundColor = themes[theme].unreadBackground;
|
||||
const color = themes[theme].buttonText;
|
||||
if (userMentions > 0) {
|
||||
backgroundColor = themes[theme].mentionMeColor;
|
||||
backgroundColor = themes[theme].mentionMeBackground;
|
||||
} else if (groupMentions > 0) {
|
||||
backgroundColor = themes[theme].mentionGroupColor;
|
||||
backgroundColor = themes[theme].mentionGroupBackground;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -210,6 +210,21 @@ export default ({ theme }) => {
|
|||
name: 'general'
|
||||
}]}
|
||||
/>
|
||||
<Message
|
||||
msg='@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua.'
|
||||
mentions={[{
|
||||
username: 'rocket.cat'
|
||||
}, {
|
||||
username: 'diego.mello'
|
||||
}, {
|
||||
username: 'all'
|
||||
}, {
|
||||
username: 'here'
|
||||
}]}
|
||||
channels={[{
|
||||
name: 'general'
|
||||
}]}
|
||||
/>
|
||||
|
||||
<Separator title='Emojis' theme={theme} />
|
||||
<Message msg='👊🤙👏' />
|
||||
|
|
|
|||
Loading…
Reference in New Issue