From 7cccd02cb30453378fecfb6d51f225791ab6b918 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 30 Oct 2020 12:58:48 -0300
Subject: [PATCH] [IMPROVEMENT] Mentions layout without background (#2559)

* [IMPROVEMENT] Mentions layout without background

* Fix RoomItem

* Fix tests
---
 .../__snapshots__/Storyshots.test.js.snap     | 524 +++++++++++++++---
 app/constants/colors.js                       |  13 +-
 app/containers/markdown/AtMention.js          |   9 +-
 app/containers/markdown/Hashtag.js            |   3 +-
 app/containers/markdown/styles.js             |   4 +-
 app/presentation/UnreadBadge.js               |   4 +-
 storybook/stories/Message.js                  |  15 +
 7 files changed, 482 insertions(+), 90 deletions(-)

diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index c27e4dce..d5231909 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -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 [
diff --git a/app/constants/colors.js b/app/constants/colors.js
index f3ad72dc..a6b3314f 100644
--- a/app/constants/colors.js
+++ b/app/constants/colors.js
@@ -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 = {
diff --git a/app/containers/markdown/AtMention.js b/app/containers/markdown/AtMention.js
index 56b2a0a9..06be5680 100644
--- a/app/containers/markdown/AtMention.js
+++ b/app/containers/markdown/AtMention.js
@@ -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
 		};
 	}
 
diff --git a/app/containers/markdown/Hashtag.js b/app/containers/markdown/Hashtag.js
index cccb1fb2..8d9672e4 100644
--- a/app/containers/markdown/Hashtag.js
+++ b/app/containers/markdown/Hashtag.js
@@ -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}
diff --git a/app/containers/markdown/styles.js b/app/containers/markdown/styles.js
index d005f90f..f78ad3c3 100644
--- a/app/containers/markdown/styles.js
+++ b/app/containers/markdown/styles.js
@@ -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,
diff --git a/app/presentation/UnreadBadge.js b/app/presentation/UnreadBadge.js
index 88f7db41..02a90bdd 100644
--- a/app/presentation/UnreadBadge.js
+++ b/app/presentation/UnreadBadge.js
@@ -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 (
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index dc7340b9..1da166ff 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -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='👊🤙👏' />