PLT-522 - Adding option for mentionHighlightLink for themes

web/react/components/user_settings/user_settings_appearance.jsx

@@ -214,14 +214,14 @@ export default class UserSettingsAppearance extends React.Component {
                     <div className='divider-dark first'/>
                     {themeUI}
                     <div className='divider-dark'/>
+                    <br/>
+                    <a
+                        className='theme'
+                        onClick={this.handleImportModal}
+                    >
+                        {'Import theme colors from Slack'}
+                    </a>
                 </div>
-                <br/>
-                <a
-                    className='theme'
-                    onClick={this.handleImportModal}
-                >
-                    {'Import theme colors from Slack'}
-                </a>
             </div>
         );
     }

web/react/utils/constants.jsx

@@ -139,7 +139,8 @@ module.exports = {
             linkColor: '#2389d7',
             buttonBg: '#2389d7',
             buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#fff2bb'
+            mentionHighlightBg: '#fff2bb',
+            mentionHighlightLink: '#2f81b7'
         },
         organization: {
             type: 'Organization',
@@ -161,7 +162,8 @@ module.exports = {
             linkColor: '#2f81b7',
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#fff2bb'
+            mentionHighlightBg: '#fff2bb',
+            mentionHighlightLink: '#2f81b7'
         },
         mattermostDark: {
             type: 'Mattermost Dark',
@@ -183,7 +185,8 @@ module.exports = {
             linkColor: '#A4FFEB',
             buttonBg: '#4CBBA4',
             buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#338886'
+            mentionHighlightBg: '#984063',
+            mentionHighlightLink: '#A4FFEB'
         },
         windows10: {
             type: 'Windows Dark',
@@ -205,7 +208,8 @@ module.exports = {
             linkColor: '#0177e7',
             buttonBg: '#0177e7',
             buttonColor: '#FFFFFF',
-            mentionHighlightBg: '#276198'
+            mentionHighlightBg: '#784098',
+            mentionHighlightLink: '#A4FFEB'
         }
     },
     THEME_ELEMENTS: [
@@ -284,6 +288,10 @@ module.exports = {
         {
             id: 'mentionHighlightBg',
             uiName: 'Mention Highlight BG'
+        },
+        {
+            id: 'mentionHighlightLink',
+            uiName: 'Mention Highlight Link'
         }
     ]
 };

web/react/utils/utils.jsx

@@ -536,6 +536,10 @@ export function applyTheme(theme) {
     if (theme.mentionHighlightBg) {
         changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
     }
+
+    if (theme.mentionHighlightLink) {
+        changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
+    }
 }
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions

web/sass-files/sass/partials/_mentions.scss

@@ -57,11 +57,4 @@
 
 .mention-highlight {
 	background-color:#fff2bb;
-	a {
-		color: inherit;
-		text-decoration: underline;
-		&:hover, &:active {
-			color: inherit;
-		}
-	}
 }

web/sass-files/sass/partials/_search.scss

@@ -106,11 +106,4 @@
 
 .search-highlight {
 	background-color: #FFF2BB;
-	a {
-		color: inherit;
-		text-decoration: underline;
-		&:hover, &:active {
-			color: inherit;
-		}
-	}
 }