[IMPROVEMENT] Apply new mention colors (#2351)

* New mention colors

* Increase letterSpacing for mentions

* Refactor

* UnreadBadge

* Add migration

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -584,13 +584,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#1d74f5",
+                "backgroundColor": "transparent",
-                "color": "#ffffff",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
+              Object {
+                "backgroundColor": "#ffe9ec",
+                "color": "#f5455c",
+              },
             ]
           }
         >
@@ -627,13 +631,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#1d74f5",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
+              Object {
+                "backgroundColor": "#fff6d6",
+                "color": "#b68d00",
+              },
             ]
           }
         >
@@ -669,15 +677,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#ffffff",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
               Object {
-                "backgroundColor": "#FF5B5A",
+                "backgroundColor": "#fde8d7",
+                "color": "#f38c39",
               },
             ]
           }
@@ -714,15 +723,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#ffffff",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
               Object {
-                "backgroundColor": "#FF5B5A",
+                "backgroundColor": "#fde8d7",
+                "color": "#f38c39",
               },
             ]
           }
@@ -818,13 +828,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#1d74f5",
+                "backgroundColor": "transparent",
-                "color": "#ffffff",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
+              Object {
+                "backgroundColor": "#ffe9ec",
+                "color": "#f5455c",
+              },
             ]
           }
         >
@@ -861,13 +875,17 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#1d74f5",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
+              Object {
+                "backgroundColor": "#fff6d6",
+                "color": "#b68d00",
+              },
             ]
           }
         >
@@ -903,15 +921,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#ffffff",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
               Object {
-                "backgroundColor": "#FF5B5A",
+                "backgroundColor": "#fde8d7",
+                "color": "#f38c39",
               },
             ]
           }
@@ -948,15 +967,16 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#ffffff",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
               Object {
-                "backgroundColor": "#FF5B5A",
+                "backgroundColor": "#fde8d7",
+                "color": "#f38c39",
               },
             ]
           }
@@ -1052,17 +1072,21 @@ exports[`Storyshots Markdown list Markdown 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#E8F2FF",
+                "backgroundColor": "transparent",
-                "color": "#0072FE",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "500",
+                "letterSpacing": 0.5,
                 "padding": 5,
               },
+              Object {
+                "backgroundColor": "#fff6d6",
+                "color": "#b68d00",
+              },
             ]
           }
         >
-          test-channel
+          #test-channel
         </Text>
         <Text
           accessibilityLabel=" "

app/constants/colors.js

@@ -10,6 +10,16 @@ export const SWITCH_TRACK_COLOR = {
 	true: '#2de0a5'
 };
 
+const mentions = {
+	unreadBackground: '#414852',
+	mentionMeColor: '#f5455c',
+	mentionMeBackground: '#ffe9ec',
+	mentionGroupColor: '#f38c39',
+	mentionGroupBackground: '#fde8d7',
+	mentionOtherColor: '#b68d00',
+	mentionOtherBackground: '#fff6d6'
+};
+
 export const themes = {
 	light: {
 		backgroundColor: '#ffffff',
@@ -53,7 +63,8 @@ export const themes = {
 		passcodeDotEmpty: '#CBCED1',
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#1F2329',
-		previewTintColor: '#ffffff'
+		previewTintColor: '#ffffff',
+		...mentions
 	},
 	dark: {
 		backgroundColor: '#030b1b',
@@ -97,7 +108,8 @@ export const themes = {
 		passcodeDotEmpty: '#CBCED1',
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#030b1b',
-		previewTintColor: '#ffffff'
+		previewTintColor: '#ffffff',
+		...mentions
 	},
 	black: {
 		backgroundColor: '#000000',
@@ -141,6 +153,7 @@ export const themes = {
 		passcodeDotEmpty: '#CBCED1',
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#000000',
-		previewTintColor: '#ffffff'
+		previewTintColor: '#ffffff',
+		...mentions
 	}
 };

app/containers/markdown/AtMention.js

@@ -9,20 +9,32 @@ import styles from './styles';
 const AtMention = React.memo(({
 	mention, mentions, username, navToRoomInfo, style = [], useRealName, theme
 }) => {
-	let mentionStyle = { ...styles.mention, color: themes[theme].buttonText };
 	if (mention === 'all' || mention === 'here') {
-		return <Text style={[mentionStyle, styles.mentionAll, ...style]}>{mention}</Text>;
+		return (
+			<Text
+				style={[
+					styles.mention,
+					{
+						color: themes[theme].mentionGroupColor,
+						backgroundColor: themes[theme].mentionGroupBackground
+					},
+					...style
+				]}
+			>{mention}
+			</Text>
+		);
 	}
 
+	let mentionStyle = {};
 	if (mention === username) {
 		mentionStyle = {
-			...mentionStyle,
+			color: themes[theme].mentionMeColor,
-			backgroundColor: themes[theme].actionTintColor
+			backgroundColor: themes[theme].mentionMeBackground
 		};
 	} else {
 		mentionStyle = {
-			...mentionStyle,
+			color: themes[theme].mentionOtherColor,
-			color: themes[theme].actionTintColor
+			backgroundColor: themes[theme].mentionOtherBackground
 		};
 	}
 
@@ -39,7 +51,7 @@ const AtMention = React.memo(({
 	if (user) {
 		return (
 			<Text
-				style={[mentionStyle, ...style]}
+				style={[styles.mention, mentionStyle, ...style]}
 				onPress={handlePress}
 			>
 				{useRealName && user.name ? user.name : user.username}

app/containers/markdown/Hashtag.js

@@ -21,10 +21,16 @@ const Hashtag = React.memo(({
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
 			<Text
-				style={[styles.mention, ...style]}
+				style={[
+					styles.mention,
+					{
+						color: themes[theme].mentionOtherColor,
+						backgroundColor: themes[theme].mentionOtherBackground
+					},
+					...style]}
 				onPress={handlePress}
 			>
-				{hashtag}
+				{`#${ hashtag }`}
 			</Text>
 		);
 	}

app/containers/markdown/styles.js

@@ -54,13 +54,9 @@ export default StyleSheet.create({
 	temp: { opacity: 0.3 },
 	mention: {
 		fontSize: 16,
-		color: '#0072FE',
 		padding: 5,
 		...sharedStyles.textMedium,
-		backgroundColor: '#E8F2FF'
+		letterSpacing: 0.5
-	},
-	mentionAll: {
-		backgroundColor: '#FF5B5A'
 	},
 	paragraph: {
 		marginTop: 0,

app/lib/database/model/Subscription.js

@@ -40,6 +40,8 @@ export default class Subscription extends Model {
 
 	@field('user_mentions') userMentions;
 
+	@field('group_mentions') groupMentions;
+
 	@date('room_updated_at') roomUpdatedAt;
 
 	@field('ro') ro;

app/lib/database/model/migrations.js

@@ -118,6 +118,17 @@ export default schemaMigrations({
 					]
 				})
 			]
+		},
+		{
+			toVersion: 9,
+			steps: [
+				addColumns({
+					table: 'subscriptions',
+					columns: [
+						{ name: 'group_mentions', type: 'number', isOptional: true }
+					]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 8,
+	version: 9,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -19,6 +19,7 @@ export default appSchema({
 				{ name: 'roles', type: 'string', isOptional: true },
 				{ name: 'unread', type: 'number' },
 				{ name: 'user_mentions', type: 'number' },
+				{ name: 'group_mentions', type: 'number' },
 				{ name: 'room_updated_at', type: 'number' },
 				{ name: 'ro', type: 'boolean' },
 				{ name: 'last_open', type: 'number', isOptional: true },

app/presentation/RoomItem/UnreadBadge.js

@@ -6,7 +6,7 @@ import styles from './styles';
 import { themes } from '../../constants/colors';
 
 const UnreadBadge = React.memo(({
-	theme, unread, userMentions, type
+	theme, unread, userMentions, groupMentions
 }) => {
 	if (!unread || unread <= 0) {
 		return;
@@ -14,19 +14,26 @@ const UnreadBadge = React.memo(({
 	if (unread >= 1000) {
 		unread = '999+';
 	}
-	const mentioned = userMentions > 0 && type !== 'd';
+
+	let backgroundColor = themes[theme].unreadBackground;
+	const color = themes[theme].buttonText;
+	if (userMentions > 0) {
+		backgroundColor = themes[theme].mentionMeColor;
+	} else if (groupMentions > 0) {
+		backgroundColor = themes[theme].mentionGroupColor;
+	}
 
 	return (
 		<View
 			style={[
 				styles.unreadNumberContainer,
-				{ backgroundColor: mentioned ? themes[theme].tintColor : themes[theme].borderColor }
+				{ backgroundColor }
 			]}
 		>
 			<Text
 				style={[
 					styles.unreadText,
-					{ color: mentioned ? themes[theme].buttonText : themes[theme].bodyText }
+					{ color }
 				]}
 			>{ unread }
 			</Text>
@@ -38,7 +45,7 @@ UnreadBadge.propTypes = {
 	theme: PropTypes.string,
 	unread: PropTypes.number,
 	userMentions: PropTypes.number,
-	type: PropTypes.string
+	groupMentions: PropTypes.number
 };
 
 export default UnreadBadge;

app/presentation/RoomItem/index.js

@@ -189,7 +189,7 @@ const RoomItem = React.memo(({
 						<UnreadBadge
 							unread={item.unread}
 							userMentions={item.userMentions}
-							type={item.t}
+							groupMentions={item.groupMentions}
 							theme={theme}
 						/>
 					</View>