New mentions

app/containers/Button/Button.test.tsx

@@ -43,12 +43,6 @@ describe('ButtonTests', () => {
 		expect(ButtonTitle.props.children).toEqual(testProps.title);
 	});
 
-	test('find button using accessibilityLabel', async () => {
-		const { findByA11yLabel } = render(<TestButton />);
-		const Button = await findByA11yLabel(testProps.title);
-		expect(Button).toBeTruthy();
-	});
-
 	test('title not visible while loading', async () => {
 		const { queryByText } = render(<TestButton loading={true} />);
 		const ButtonTitle = await queryByText(testProps.title);

app/containers/markdown/AtMention.tsx

@@ -22,17 +22,22 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	if (mention === 'all' || mention === 'here') {
 		return (
 			<View style={styles.mentionView}>
-				<Text
-					style={[
-						styles.mention,
-						{
-							color: themes[theme].mentionGroupColor,
-							backgroundColor: transparentize(themes[theme].mentionGroupColor, 0.8)
-						},
-						...style
-					]}
-				>
-					{` ${mention} `}
+				<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText }]}>
+					@
+					<View>
+						<Text
+							style={[
+								styles.mention,
+								{
+									color: themes[theme].pureWhite,
+									backgroundColor: themes[theme].mentionGroupColor
+								},
+								...style
+							]}
+						>
+							{` ${mention} `}
+						</Text>
+					</View>
 				</Text>
 			</View>
 		);
@@ -41,13 +46,13 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	let mentionStyle = {};
 	if (mention === username) {
 		mentionStyle = {
-			color: themes[theme].mentionMeColor,
-			backgroundColor: transparentize(themes[theme].mentionMeColor, 0.8)
+			color: themes[theme].pureWhite,
+			backgroundColor: themes[theme].mentionMeColor
 		};
 	} else {
 		mentionStyle = {
-			color: themes[theme].mentionOtherColor,
-			backgroundColor: transparentize(themes[theme].mentionOtherColor, 0.8)
+			color: themes[theme].pureWhite,
+			backgroundColor: themes[theme].mentionGroupColor
 		};
 	}
 
@@ -68,8 +73,13 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 		const m = useRealName && user.name ? user.name : user.username;
 		return (
 			<View style={styles.mentionView}>
-				<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
-					{` ${m} `}
+				<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText }]}>
+					@
+					<View>
+						<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
+							{` ${m} `}
+						</Text>
+					</View>
 				</Text>
 			</View>
 		);

app/containers/markdown/Hashtag.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, Text, TextStyle } from 'react-native';
+import { StyleProp, Text, TextStyle, View } from 'react-native';
 
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
@@ -38,18 +38,26 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
-			<Text
-				style={[
-					styles.mention,
-					{
-						color: themes[theme].mentionOtherColor
-					},
-					...style
-				]}
-				onPress={handlePress}
-			>
-				{`#${hashtag}`}
-			</Text>
+			<View style={styles.mentionView}>
+				<Text style={[styles.plainText, styles.text, { color: themes[theme].bodyText }]}>
+					#
+					<View>
+						<Text
+							style={[
+								styles.mention,
+								{
+									color: themes[theme].mentionRoomColor,
+									backgroundColor: themes[theme].mentionRoomBackground
+								},
+								...style
+							]}
+							onPress={handlePress}
+						>
+							{` ${hashtag} `}
+						</Text>
+					</View>
+				</Text>
+			</View>
 		);
 	}
 	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;

app/containers/markdown/styles.ts

@@ -33,7 +33,7 @@ export default StyleSheet.create({
 	plainText: {
 		fontSize: 16,
 		flexShrink: 1,
-		lineHeight: 22
+		lineHeight: 24
 	},
 	text: {
 		fontSize: 16,
@@ -57,13 +57,13 @@ export default StyleSheet.create({
 		height: 30
 	},
 	temp: { opacity: 0.3 },
-	mentionView: {},
+	mentionView: { marginBottom: -2 },
 	mention: {
 		fontSize: 16,
-		...sharedStyles.textSemibold,
+		...sharedStyles.textMedium,
 		borderRadius: 4,
 		overflow: 'hidden',
-		marginBottom: -3
+		marginBottom: -2
 	},
 	paragraph: {
 		marginTop: 0,

app/lib/constants/colors.ts

@@ -14,10 +14,7 @@ export const SWITCH_TRACK_COLOR = {
 
 const mentions = {
 	unreadColor: '#6C727A',
-	tunreadColor: '#1d74f5',
-	mentionMeColor: '#F5455C',
-	mentionGroupColor: '#F38C39',
-	mentionOtherColor: '#F3BE08'
+	tunreadColor: '#1d74f5'
 };
 
 export const colors = {
@@ -89,6 +86,11 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#E4E7EA',
+		pureWhite: '#ffffff',
+		mentionMeColor: '#F5455C',
+		mentionGroupColor: '#F38C39',
+		mentionRoomBackground: '#E4E7EA',
+		mentionRoomColor: '#095AD2',
 		...mentions
 	},
 	dark: {
@@ -159,6 +161,11 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#030b1b', // backgroundColor
+		pureWhite: '#ffffff',
+		mentionMeColor: '#B43C4C',
+		mentionGroupColor: '#955828',
+		mentionRoomBackground: '#2F343D',
+		mentionRoomColor: '#739EDE',
 		...mentions
 	},
 	black: {
@@ -229,6 +236,11 @@ export const colors = {
 		conferenceCallEnabledIconBackground: '#156FF5',
 		conferenceCallPhotoBackground: '#E4E7EA',
 		textInputSecondaryBackground: '#000000', // backgroundColor
+		pureWhite: '#ffffff',
+		mentionMeColor: '#B43C4C',
+		mentionGroupColor: '#955828',
+		mentionRoomBackground: '#2F343D',
+		mentionRoomColor: '#739EDE',
 		...mentions
 	}
 };