introduce basic styling for FilterBar

app/javascript/mastodon/features/notifications/components/filter_bar.js

@@ -6,11 +6,12 @@ export default class FilterBar extends React.PureComponent {
 
   // static propTypes = {
   //   onClick: PropTypes.func.isRequired,
+  //   isSelected: PropTypes.bool.isRequired
   // };
 
   render () {
     return (
-      <div>
+      <div className='notification__filter-bar'>
         <button
           onClick={() => console.log('all')}
         >

app/javascript/mastodon/features/notifications/index.js

@@ -20,6 +20,7 @@ const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
 });
 
+// TODO: Modify this to filter notifications
 const getNotifications = createSelector([
   state => ImmutableList(state.getIn(['settings', 'notifications', 'shows']).filter(item => !item).keys()),
   state => state.getIn(['notifications', 'items']),

app/javascript/styles/mastodon/components.scss

@@ -1483,6 +1483,30 @@ a.account__display-name {
   }
 }
 
+.notification__filter-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  background: $ui-base-color;
+  padding: 0 5px;
+
+  & > button {
+    display: inline;
+    color: $primary-text-color;
+    background: transparent;
+    border: 0;
+    padding: 5px 5px 10px;
+    text-decoration: none;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 18px;
+
+    &:hover {
+      background: lighten($ui-base-color, 4%);
+    }
+  }
+}
+
 .notification__message {
   margin: 0 10px 0 68px;
   padding: 8px 0 0;