From a7965d43580ef879a5b1a8e81d14cade41a207ca Mon Sep 17 00:00:00 2001
From: alxd <github@alxd.org>
Date: Fri, 30 Nov 2018 11:23:34 +0100
Subject: [PATCH] introduce basic styling for FilterBar

---
 .../notifications/components/filter_bar.js    |  3 ++-
 .../mastodon/features/notifications/index.js  |  1 +
 .../styles/mastodon/components.scss           | 24 +++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.js b/app/javascript/mastodon/features/notifications/components/filter_bar.js
index cb9a955d4d..f03fcf2d7a 100644
--- a/app/javascript/mastodon/features/notifications/components/filter_bar.js
+++ b/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')}
         >
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index e1eb283a97..1b55cdabc8 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/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']),
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 5765829a4f..9b205e75c8 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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;