From 2b18e782d63792d48b199982522d3f674921b056 Mon Sep 17 00:00:00 2001
From: Kacper Kula <kulak@kulak.at>
Date: Tue, 9 May 2017 14:53:47 +0200
Subject: [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 |  6 ++++++
 webapp/sass/layout/_headers.scss | 10 +++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'webapp')

diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index 23f7d1762..1ed8445f8 100644
--- a/webapp/components/search_bar.jsx
+++ b/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'
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 000a7819e..5e4abcb0e 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/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;
+                }
+            }
         }
     }
 
-- 
cgit v1.2.3-1-g7c22