[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.
This commit is contained in:
Kacper Kula
2017-05-09 14:53:47 +02:00
committed by Joram Wilander
parent 7a618b8973
commit 2b18e782d6
2 changed files with 15 additions and 1 deletions

View File

@@ -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'

View File

@@ -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;
}
}
}
}