[PLT-4374] Added active state for recent mentions and flagged posts. (#6253)

* [PLT-4374] Added active state for recent mentions and flagged posts.

* Increased hover opacity to 0.7 on mention and flag icon.

webapp/components/search_bar.jsx

@@ -248,6 +248,8 @@ export default class SearchBar extends React.Component {
         let mentionBtn;
         let flagBtn;
         if (this.props.showMentionFlagBtns) {
+            var mentionBtnClass = SearchStore.isMentionSearch ? 'active' : '';
+
             mentionBtn = (
                 <div
                     className='dropdown channel-header__links'
@@ -262,6 +264,7 @@ export default class SearchBar extends React.Component {
                             href='#'
                             type='button'
                             onClick={this.searchMentions}
+                            className={mentionBtnClass}
                         >
                             {'@'}
                         </a>
@@ -269,6 +272,8 @@ export default class SearchBar extends React.Component {
                 </div>
             );
 
+            var flagBtnClass = SearchStore.isFlaggedPosts ? 'active' : '';
+
             flagBtn = (
                 <div
                     className='dropdown channel-header__links'
@@ -283,6 +288,7 @@ export default class SearchBar extends React.Component {
                             href='#'
                             type='button'
                             onClick={this.getFlagged}
+                            className={flagBtnClass}
                         >
                             <span
                                 className='icon icon__flag'

webapp/sass/layout/_headers.scss

@@ -462,12 +462,20 @@
             text-decoration: none;
 
             &:hover {
-                @include opacity(1);
+                @include opacity(0.7);
             }
 
             &:focus {
                 color: inherit;
             }
+
+            &.active {
+                color: $primary-color;
+                @include opacity(1);
+                .icon {
+                    fill: $primary-color;
+                }
+            }
         }
     }