PLT-522 - Adding option for mentionHighlightLink for themes

5 files changed, 23 insertions, 25 deletions

diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index c4a137ed8..be6cf1f42 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/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>
         );
     }
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index aba63b91c..5c8443062 100644
--- a/web/react/utils/constants.jsx
+++ b/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'
         }
     ]
 };
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 3a04f3623..2fcac4900 100644
--- a/web/react/utils/utils.jsx
+++ b/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
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
index fb74eb4f5..f59cefbc6 100644
--- a/web/sass-files/sass/partials/_mentions.scss
+++ b/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;
-		}
-	}
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index a7b1ab190..2de1b5380 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/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;
-		}
-	}
 }