From d5ded638b9ec6fbd9e2a0f8036d8174ca1a00773 Mon Sep 17 00:00:00 2001
From: alxd <github@alxd.org>
Date: Fri, 30 Nov 2018 11:42:56 +0100
Subject: [PATCH] allow FilterBar to display active CSS with js

---
 .../features/notifications/components/filter_bar.js  | 12 +++++++++---
 app/javascript/styles/mastodon/components.scss       |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.js b/app/javascript/mastodon/features/notifications/components/filter_bar.js
index f03fcf2d7a689..210dcc6ad49d7 100644
--- a/app/javascript/mastodon/features/notifications/components/filter_bar.js
+++ b/app/javascript/mastodon/features/notifications/components/filter_bar.js
@@ -6,13 +6,15 @@ export default class FilterBar extends React.PureComponent {
 
   // static propTypes = {
   //   onClick: PropTypes.func.isRequired,
-  //   isSelected: PropTypes.bool.isRequired
+  //   selectedFilter: PropTypes.string.isRequired
   // };
 
   render () {
+    const { selectedFilter } = this.props
     return (
       <div className='notification__filter-bar'>
         <button
+          className={selectedFilter === 'all' ? 'active' : ''}
           onClick={() => console.log('all')}
         >
           <FormattedMessage
@@ -21,6 +23,7 @@ export default class FilterBar extends React.PureComponent {
           />
         </button>
         <button
+          className={selectedFilter === 'mentions' ? 'active' : ''}
           onClick={() => console.log('mentions')}
         >
           <FormattedMessage
@@ -29,6 +32,7 @@ export default class FilterBar extends React.PureComponent {
           />
         </button>
         <button
+          className={selectedFilter === 'favourites' ? 'active' : ''}
           onClick={() => console.log('favourites')}
         >
           <FormattedMessage
@@ -37,14 +41,16 @@ export default class FilterBar extends React.PureComponent {
           />
         </button>
         <button
-          onClick={() => console.log('Boosts')}
+          className={selectedFilter === 'boosts' ? 'active' : ''}
+          onClick={() => console.log('boosts')}
         >
           <FormattedMessage
-            id='notifications.filter.Boosts'
+            id='notifications.filter.boosts'
             defaultMessage='Boosts'
           />
         </button>
         <button
+          className={selectedFilter === 'follows' ? 'active' : ''}
           onClick={() => console.log('follows')}
         >
           <FormattedMessage
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 55b563db08fd2..bbb4213a484cf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1513,7 +1513,7 @@ a.account__display-name {
       background: lighten($ui-base-color, 4%);
     }
 
-    &:active {
+    &.active {
       border-bottom-color: $highlight-text-color;
     }
   }