diff options
| -rw-r--r-- | webapp/components/search_bar.jsx | 6 | ||||
| -rw-r--r-- | webapp/sass/layout/_headers.scss | 10 |
2 files changed, 15 insertions, 1 deletions
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; + } + } } } |