From 0df3c073a5e720ae30eeaa48505d63a00a05e8cd Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 2 Mar 2020 17:26:25 -0500
Subject: [PATCH] Progress

---
 .../api/v1/notifications_controller.rb        |   2 +-
 app/javascript/gabsocial/actions/favorites.js |  90 ++++----
 .../gabsocial/actions/interactions.js         |  24 +-
 app/javascript/gabsocial/assets/index.js      |   2 +
 .../gabsocial/assets/search_alt_icon.js       |  27 +++
 .../gabsocial/components/account.js           | 184 +++++++++++++++
 .../gabsocial/components/account/account.js   | 211 ------------------
 .../gabsocial/components/account/account.scss |  42 ----
 .../gabsocial/components/account/index.js     |   1 -
 .../gabsocial/components/column_header.js     |   4 +-
 .../gabsocial/components/hashtag_item.js      |   2 +-
 app/javascript/gabsocial/components/icon.js   |   2 +
 .../components/modal/focal_point_modal.js     | 121 ----------
 .../focal_point_modal/focal_point_modal.scss  |  36 ---
 .../gabsocial/components/modal/modal_root.js  |   2 -
 .../components/panel/profile_info_panel.js    |   2 +-
 .../components/panel/search_filter_panel.js   |  35 +++
 .../components/panel/who_to_follow_panel.js   |   5 +-
 .../gabsocial/components/sidebar.js           |  10 +-
 .../components/sidebar_section_item.js        |   2 +-
 .../gabsocial/components/status/status.js     |   2 +-
 .../components/status_action_bar_item.js      |   2 +-
 .../gabsocial/components/status_header.js     |   4 +-
 .../gabsocial/containers/account_container.js |  44 ++--
 .../account_gallery/account_gallery.js        |  21 --
 .../account_timeline/account_timeline.js      |  29 +--
 .../components/compose_extra_button.js        |   2 +-
 .../components/compose_form/compose_form.js   |  10 +-
 .../compose/components/upload/upload.js       |  83 ++++---
 .../compose/containers/upload_container.js    |   4 -
 .../favorited_statuses/favorited_statuses.js  |  54 ++---
 .../gabsocial/features/followers/followers.js |   8 +-
 .../gabsocial/features/following/following.js |  10 +-
 .../notification/notification-alt.js          |  50 +++++
 .../components/notification/notification.js   |  54 +++--
 .../features/notifications/notifications.js   |  82 ++++---
 .../features/status/components/card/card.js   |   4 +-
 app/javascript/gabsocial/features/ui/ui.js    |   4 -
 .../gabsocial/layouts/search_layout.js        |   5 +-
 app/javascript/gabsocial/pages/search_page.js |  13 +-
 .../gabsocial/reducers/status_lists.js        |  22 +-
 app/javascript/gabsocial/reducers/statuses.js |   8 +-
 app/javascript/styles/global.css              |   2 +-
 43 files changed, 602 insertions(+), 719 deletions(-)
 create mode 100644 app/javascript/gabsocial/assets/search_alt_icon.js
 create mode 100644 app/javascript/gabsocial/components/account.js
 delete mode 100644 app/javascript/gabsocial/components/account/account.js
 delete mode 100644 app/javascript/gabsocial/components/account/account.scss
 delete mode 100644 app/javascript/gabsocial/components/account/index.js
 delete mode 100644 app/javascript/gabsocial/components/modal/focal_point_modal.js
 delete mode 100644 app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss
 create mode 100644 app/javascript/gabsocial/components/panel/search_filter_panel.js
 create mode 100644 app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js

diff --git a/app/controllers/api/v1/notifications_controller.rb b/app/controllers/api/v1/notifications_controller.rb
index d97b39f2..8cc3455f 100644
--- a/app/controllers/api/v1/notifications_controller.rb
+++ b/app/controllers/api/v1/notifications_controller.rb
@@ -8,7 +8,7 @@ class Api::V1::NotificationsController < Api::BaseController
 
   respond_to :json
 
-  DEFAULT_NOTIFICATIONS_LIMIT = 15
+  DEFAULT_NOTIFICATIONS_LIMIT = 50
 
   def index
     @notifications = load_notifications
diff --git a/app/javascript/gabsocial/actions/favorites.js b/app/javascript/gabsocial/actions/favorites.js
index 2e60d271..f94830b7 100644
--- a/app/javascript/gabsocial/actions/favorites.js
+++ b/app/javascript/gabsocial/actions/favorites.js
@@ -1,41 +1,41 @@
-import api, { getLinks } from '../api';
-import { importFetchedStatuses } from './importer';
-import { me } from '../initial_state';
+import api, { getLinks } from '../api'
+import { importFetchedStatuses } from './importer'
+import { me } from '../initial_state'
 
-export const FAVORITED_STATUSES_FETCH_REQUEST = 'FAVORITED_STATUSES_FETCH_REQUEST';
-export const FAVORITED_STATUSES_FETCH_SUCCESS = 'FAVORITED_STATUSES_FETCH_SUCCESS';
-export const FAVORITED_STATUSES_FETCH_FAIL    = 'FAVORITED_STATUSES_FETCH_FAIL';
+export const FAVORITED_STATUSES_FETCH_REQUEST = 'FAVORITED_STATUSES_FETCH_REQUEST'
+export const FAVORITED_STATUSES_FETCH_SUCCESS = 'FAVORITED_STATUSES_FETCH_SUCCESS'
+export const FAVORITED_STATUSES_FETCH_FAIL = 'FAVORITED_STATUSES_FETCH_FAIL'
 
-export const FAVORITED_STATUSES_EXPAND_REQUEST = 'FAVORITED_STATUSES_EXPAND_REQUEST';
-export const FAVORITED_STATUSES_EXPAND_SUCCESS = 'FAVORITED_STATUSES_EXPAND_SUCCESS';
-export const FAVORITED_STATUSES_EXPAND_FAIL    = 'FAVORITED_STATUSES_EXPAND_FAIL';
+export const FAVORITED_STATUSES_EXPAND_REQUEST = 'FAVORITED_STATUSES_EXPAND_REQUEST'
+export const FAVORITED_STATUSES_EXPAND_SUCCESS = 'FAVORITED_STATUSES_EXPAND_SUCCESS'
+export const FAVORITED_STATUSES_EXPAND_FAIL = 'FAVORITED_STATUSES_EXPAND_FAIL'
 
 export function fetchFavoritedStatuses() {
   return (dispatch, getState) => {
-    if (!me) return;
+    if (!me) return
 
-    if (getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
-      return;
+    if (getState().getIn(['status_lists', 'favorites', 'isLoading'])) {
+      return
     }
 
-    dispatch(fetchFavoritedStatusesRequest());
+    dispatch(fetchFavoritedStatusesRequest())
 
     api(getState).get('/api/v1/favourites').then(response => {
-      const next = getLinks(response).refs.find(link => link.rel === 'next');
-      dispatch(importFetchedStatuses(response.data));
-      dispatch(fetchFavoritedStatusesSuccess(response.data, next ? next.uri : null));
+      const next = getLinks(response).refs.find(link => link.rel === 'next')
+      dispatch(importFetchedStatuses(response.data))
+      dispatch(fetchFavoritedStatusesSuccess(response.data, next ? next.uri : null))
     }).catch(error => {
-      dispatch(fetchFavoritedStatusesFail(error));
-    });
-  };
-};
+      dispatch(fetchFavoritedStatusesFail(error))
+    })
+  }
+}
 
 export function fetchFavoritedStatusesRequest() {
   return {
     type: FAVORITED_STATUSES_FETCH_REQUEST,
     skipLoading: true,
-  };
-};
+  }
+}
 
 export function fetchFavoritedStatusesSuccess(statuses, next) {
   return {
@@ -43,56 +43,56 @@ export function fetchFavoritedStatusesSuccess(statuses, next) {
     statuses,
     next,
     skipLoading: true,
-  };
-};
+  }
+}
 
 export function fetchFavoritedStatusesFail(error) {
   return {
     type: FAVORITED_STATUSES_FETCH_FAIL,
     error,
     skipLoading: true,
-  };
-};
+  }
+}
 
 export function expandFavoritedStatuses() {
   return (dispatch, getState) => {
-    if (!me) return;
-    
-    const url = getState().getIn(['status_lists', 'favourites', 'next'], null);
+    if (!me) return
 
-    if (url === null || getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
-      return;
+    const url = getState().getIn(['status_lists', 'favorites', 'next'], null)
+
+    if (url === null || getState().getIn(['status_lists', 'favorites', 'isLoading'])) {
+      return
     }
 
-    dispatch(expandFavoritedStatusesRequest());
+    dispatch(expandFavoritedStatusesRequest())
 
     api(getState).get(url).then(response => {
-      const next = getLinks(response).refs.find(link => link.rel === 'next');
-      dispatch(importFetchedStatuses(response.data));
-      dispatch(expandFavoritedStatusesSuccess(response.data, next ? next.uri : null));
+      const next = getLinks(response).refs.find(link => link.rel === 'next')
+      dispatch(importFetchedStatuses(response.data))
+      dispatch(expandFavoritedStatusesSuccess(response.data, next ? next.uri : null))
     }).catch(error => {
-      dispatch(expandFavoritedStatusesFail(error));
-    });
-  };
-};
+      dispatch(expandFavoritedStatusesFail(error))
+    })
+  }
+}
 
 export function expandFavoritedStatusesRequest() {
   return {
     type: FAVORITED_STATUSES_EXPAND_REQUEST,
-  };
-};
+  }
+}
 
 export function expandFavoritedStatusesSuccess(statuses, next) {
   return {
     type: FAVORITED_STATUSES_EXPAND_SUCCESS,
     statuses,
     next,
-  };
-};
+  }
+}
 
 export function expandFavoritedStatusesFail(error) {
   return {
     type: FAVORITED_STATUSES_EXPAND_FAIL,
     error,
-  };
-};
+  }
+}
diff --git a/app/javascript/gabsocial/actions/interactions.js b/app/javascript/gabsocial/actions/interactions.js
index 9cd06675..bfa79fcd 100644
--- a/app/javascript/gabsocial/actions/interactions.js
+++ b/app/javascript/gabsocial/actions/interactions.js
@@ -6,17 +6,17 @@ export const REBLOG_REQUEST = 'REBLOG_REQUEST';
 export const REBLOG_SUCCESS = 'REBLOG_SUCCESS';
 export const REBLOG_FAIL    = 'REBLOG_FAIL';
 
-export const FAVOURITE_REQUEST = 'FAVOURITE_REQUEST';
-export const FAVOURITE_SUCCESS = 'FAVOURITE_SUCCESS';
-export const FAVOURITE_FAIL    = 'FAVOURITE_FAIL';
+export const FAVORITE_REQUEST = 'FAVORITE_REQUEST';
+export const FAVORITE_SUCCESS = 'FAVORITE_SUCCESS';
+export const FAVORITE_FAIL    = 'FAVORITE_FAIL';
 
 export const UNREBLOG_REQUEST = 'UNREBLOG_REQUEST';
 export const UNREBLOG_SUCCESS = 'UNREBLOG_SUCCESS';
 export const UNREBLOG_FAIL    = 'UNREBLOG_FAIL';
 
-export const UNFAVOURITE_REQUEST = 'UNFAVOURITE_REQUEST';
-export const UNFAVOURITE_SUCCESS = 'UNFAVOURITE_SUCCESS';
-export const UNFAVOURITE_FAIL    = 'UNFAVOURITE_FAIL';
+export const UNFAVORITE_REQUEST = 'UNFAVORITE_REQUEST';
+export const UNFAVORITE_SUCCESS = 'UNFAVORITE_SUCCESS';
+export const UNFAVORITE_FAIL    = 'UNFAVORITE_FAIL';
 
 export const REBLOGS_FETCH_REQUEST = 'REBLOGS_FETCH_REQUEST';
 export const REBLOGS_FETCH_SUCCESS = 'REBLOGS_FETCH_SUCCESS';
@@ -144,7 +144,7 @@ export function unfavourite(status) {
 
 export function favouriteRequest(status) {
   return {
-    type: FAVOURITE_REQUEST,
+    type: FAVORITE_REQUEST,
     status: status,
     skipLoading: true,
   };
@@ -152,7 +152,7 @@ export function favouriteRequest(status) {
 
 export function favouriteSuccess(status) {
   return {
-    type: FAVOURITE_SUCCESS,
+    type: FAVORITE_SUCCESS,
     status: status,
     skipLoading: true,
   };
@@ -160,7 +160,7 @@ export function favouriteSuccess(status) {
 
 export function favouriteFail(status, error) {
   return {
-    type: FAVOURITE_FAIL,
+    type: FAVORITE_FAIL,
     status: status,
     error: error,
     skipLoading: true,
@@ -169,7 +169,7 @@ export function favouriteFail(status, error) {
 
 export function unfavouriteRequest(status) {
   return {
-    type: UNFAVOURITE_REQUEST,
+    type: UNFAVORITE_REQUEST,
     status: status,
     skipLoading: true,
   };
@@ -177,7 +177,7 @@ export function unfavouriteRequest(status) {
 
 export function unfavouriteSuccess(status) {
   return {
-    type: UNFAVOURITE_SUCCESS,
+    type: UNFAVORITE_SUCCESS,
     status: status,
     skipLoading: true,
   };
@@ -185,7 +185,7 @@ export function unfavouriteSuccess(status) {
 
 export function unfavouriteFail(status, error) {
   return {
-    type: UNFAVOURITE_FAIL,
+    type: UNFAVORITE_FAIL,
     status: status,
     error: error,
     skipLoading: true,
diff --git a/app/javascript/gabsocial/assets/index.js b/app/javascript/gabsocial/assets/index.js
index 2d86010b..b978a377 100644
--- a/app/javascript/gabsocial/assets/index.js
+++ b/app/javascript/gabsocial/assets/index.js
@@ -26,6 +26,7 @@ import PlayIcon from './play_icon'
 import PollIcon from './poll_icon'
 import RepostIcon from './repost_icon'
 import SearchIcon from './search_icon'
+import SearchAltIcon from './search_alt_icon'
 import ShareIcon from './share_icon'
 import ShopIcon from './shop_icon'
 import SubtractIcon from './subtract_icon'
@@ -62,6 +63,7 @@ export {
   PollIcon,
   RepostIcon,
   SearchIcon,
+  SearchAltIcon,
   ShareIcon,
   ShopIcon,
   SubtractIcon,
diff --git a/app/javascript/gabsocial/assets/search_alt_icon.js b/app/javascript/gabsocial/assets/search_alt_icon.js
new file mode 100644
index 00000000..c6486960
--- /dev/null
+++ b/app/javascript/gabsocial/assets/search_alt_icon.js
@@ -0,0 +1,27 @@
+const SearchAltIcon = ({
+  className = '',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 64 64',
+  title = 'Search',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+  <g>
+    <path d="M 61.726562 50.433594 L 51.191406 39.898438 C 53.105469 36.070312 54.382812 31.601562 54.382812 27.132812 C 54.382812 12.128906 42.253906 0 27.25 0 C 12.25 0 0.121094 12.128906 0.121094 27.132812 C 0.121094 42.132812 12.25 54.265625 27.25 54.265625 C 31.71875 54.265625 36.191406 52.988281 40.019531 51.074219 L 50.554688 61.605469 C 53.746094 64.796875 58.535156 64.796875 61.726562 61.605469 C 64.597656 58.414062 64.597656 53.625 61.726562 50.433594 Z M 27.25 47.878906 C 15.761719 47.878906 6.503906 38.625 6.503906 27.132812 C 6.503906 15.640625 15.761719 6.382812 27.25 6.382812 C 38.742188 6.382812 48 15.640625 48 27.132812 C 48 38.625 38.742188 47.878906 27.25 47.878906 Z M 27.25 47.878906" />
+  </g>
+</svg>
+
+)
+
+export default SearchAltIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js
new file mode 100644
index 00000000..ad6a622f
--- /dev/null
+++ b/app/javascript/gabsocial/components/account.js
@@ -0,0 +1,184 @@
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { me } from '../initial_state'
+import Avatar from './avatar'
+import DisplayName from './display_name'
+import Button from './button'
+import Text from './text'
+
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
+  requested: { id: 'requested', defaultMessage: 'Requested' },
+  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
+  unmute: { id: 'unmute', defaultMessage: 'Unmute' },
+  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
+  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
+})
+
+export default
+@injectIntl
+class Account extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    onFollow: PropTypes.func.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    onMute: PropTypes.func.isRequired,
+    onMuteNotifications: PropTypes.func,
+    intl: PropTypes.object.isRequired,
+    hidden: PropTypes.bool,
+    actionIcon: PropTypes.string,
+    actionTitle: PropTypes.string,
+    onActionClick: PropTypes.func,
+    compact: PropTypes.bool,
+    showDismiss: PropTypes.bool,
+    dismissAction: PropTypes.func,
+  }
+
+  handleFollow = () => {
+    this.props.onFollow(this.props.account)
+  }
+
+  handleBlock = () => {
+    this.props.onBlock(this.props.account)
+  }
+
+  handleMute = () => {
+    this.props.onMute(this.props.account)
+  }
+
+  handleMuteNotifications = () => {
+    this.props.onMuteNotifications(this.props.account, true)
+  }
+
+  handleUnmuteNotifications = () => {
+    this.props.onMuteNotifications(this.props.account, false)
+  }
+
+  handleAction = () => {
+    this.props.onActionClick(this.props.account)
+  }
+
+  handleUnrequest = () => {
+    //
+  }
+
+  render() {
+    const {
+      account,
+      intl,
+      hidden,
+      onActionClick,
+      actionIcon,
+      actionTitle,
+      compact,
+      dismissAction,
+      showDismiss,
+    } = this.props
+
+    if (!account) return null
+
+    if (hidden) {
+      return (
+        <Fragment>
+          {account.get('display_name')}
+          {account.get('username')}
+        </Fragment>
+      )
+    }
+
+    let buttonOptions
+    let buttonText
+
+    if (onActionClick && actionIcon) {
+      buttonText = actionTitle
+      buttonOptions = {
+        onClick: this.handleAction,
+        outline: true,
+        color: 'brand',
+        backgroundColor: 'none',
+      }
+    } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
+      const following = account.getIn(['relationship', 'following'])
+      const requested = account.getIn(['relationship', 'requested'])
+      const blocking = account.getIn(['relationship', 'blocking'])
+
+      if (requested || blocking) {
+        buttonText = intl.formatMessage(requested ? messages.requested : messages.blocking)
+        buttonOptions = {
+          narrow: true,
+          onClick: requested ? this.handleUnrequest : this.handleBlock,
+          color: 'primary',
+          backgroundColor: 'tertiary',
+          className: _s.marginTop5PX,
+        }
+      } else if (!account.get('moved') || following) {
+        buttonOptions = {
+          narrow: true,
+          outline: !following,
+          color: !following ? 'brand' : 'white',
+          backgroundColor: !following ? 'none' : 'brand',
+          className: _s.marginTop5PX,
+          onClick: this.handleFollow,
+        }
+        buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
+      }
+    }
+
+    const button = !buttonOptions ? null : (
+      <Button {...buttonOptions}>
+        <Text color='inherit'>{buttonText}</Text>
+      </Button>
+    )
+
+    const avatarSize = compact ? 42 : 52
+    const dismissBtn = (
+      <Button
+        narrow
+        circle
+        backgroundColor='none'
+        className={_s.paddingHorizontal5PX}
+        onClick={dismissAction}
+        icon='close'
+        iconWidth='8px'
+        iconHeight='8px'
+        iconClassName={_s.fillColorSecondary}
+      />
+    )
+
+    return (
+      <div className={[_s.default, _s.marginTop5PX, _s.marginBottom15PX].join(' ')}>
+        <div className={[_s.default, _s.flexRow].join(' ')}>
+
+          <NavLink
+            className={[_s.default, _s.noUnderline].join(' ')}
+            title={account.get('acct')}
+            to={`/${account.get('acct')}`}
+          >
+            <Avatar account={account} size={avatarSize} />
+          </NavLink>
+
+          <NavLink
+            title={account.get('acct')}
+            to={`/${account.get('acct')}`}
+            className={[_s.default, _s.alignItemsStart, _s.paddingHorizontal10PX, _s.flexGrow1].join(' ')}
+          >
+            <DisplayName account={account} multiline={compact} />
+            {!compact && button}
+          </NavLink>
+
+          <div className={[_s.default].join(' ')}>
+            {showDismiss && dismissBtn}
+            {compact && button}
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}
diff --git a/app/javascript/gabsocial/components/account/account.js b/app/javascript/gabsocial/components/account/account.js
deleted file mode 100644
index f98bfae0..00000000
--- a/app/javascript/gabsocial/components/account/account.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import { Fragment } from 'react'
-import { NavLink } from 'react-router-dom'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import { me } from '../../initial_state'
-import Avatar from '../avatar'
-import DisplayName from '../display_name'
-import IconButton from '../icon_button'
-import Icon from '../icon'
-import Button from '../button'
-import Text from '../text'
-
-const messages = defineMessages({
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
-  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
-})
-
-export default
-@injectIntl
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onMute: PropTypes.func.isRequired,
-    onMuteNotifications: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-    hidden: PropTypes.bool,
-    actionIcon: PropTypes.string,
-    actionTitle: PropTypes.string,
-    onActionClick: PropTypes.func,
-    compact: PropTypes.bool,
-  }
-
-  handleFollow = () => {
-    this.props.onFollow(this.props.account)
-  }
-
-  handleBlock = () => {
-    this.props.onBlock(this.props.account)
-  }
-
-  handleMute = () => {
-    this.props.onMute(this.props.account)
-  }
-
-  handleMuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, true)
-  }
-
-  handleUnmuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, false)
-  }
-
-  handleAction = () => {
-    this.props.onActionClick(this.props.account)
-  }
-
-  render() {
-    const {
-      account,
-      intl,
-      hidden,
-      onActionClick,
-      actionIcon,
-      actionTitle,
-      compact
-    } = this.props
-
-    if (!account) return null
-
-    if (hidden) {
-      return (
-        <Fragment>
-          {account.get('display_name')}
-          {account.get('username')}
-        </Fragment>
-      )
-    }
-
-    const avatarSize = compact ? 42 : 52
-    let buttons
-
-    if (onActionClick && actionIcon) {
-      buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />
-    } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
-      const following = account.getIn(['relationship', 'following'])
-      const requested = account.getIn(['relationship', 'requested'])
-      const blocking = account.getIn(['relationship', 'blocking'])
-      const muting = account.getIn(['relationship', 'muting'])
-
-      if (requested) {
-        buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />
-      } else if (blocking) {
-        buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />
-      } else if (muting) {
-        let hidingNotificationsButton
-        if (account.getIn(['relationship', 'muting_notifications'])) {
-          hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />
-        } else {
-          hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />
-        }
-
-        buttons = (
-          <Fragment>
-            <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
-            {hidingNotificationsButton}
-          </Fragment>
-        )
-      } else if (!account.get('moved') || following) {
-        buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />
-      }
-    }
-
-    // : todo : clean up
-
-    if (compact) {
-      return (
-        <div className={[_s.default, _s.marginTop5PX, _s.marginBottom15PX].join(' ')}>
-        <div className={[_s.default, _s.flexRow].join(' ')}>
-
-          <NavLink
-            className={[_s.default, _s.noUnderline].join(' ')}
-            title={account.get('acct')}
-            to={`/${account.get('acct')}`}
-          >
-            <Avatar account={account} size={avatarSize} />
-          </NavLink>
-
-          <div className={[_s.default, _s.alignItemsStart, _s.paddingHorizontal10PX].join(' ')}>
-            <NavLink
-              className={[_s.default, _s.noUnderline].join(' ')}
-              title={account.get('acct')}
-              to={`/${account.get('acct')}`}
-            >
-              <DisplayName account={account} multiline />
-            </NavLink>
-          </div>
-
-          <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
-            <Button
-              outline
-              narrow
-              color='brand'
-              backgroundColor='none'
-              className={_s.marginTop5PX}
-            >
-              <Text color='inherit'>
-                {intl.formatMessage(messages.follow)}
-              </Text>
-            </Button>
-          </div>
-
-        </div>
-      </div>
-      )
-    }
-
-    return (
-      <div className={[_s.default, _s.marginTop5PX, _s.marginBottom15PX].join(' ')}>
-        <div className={[_s.default, _s.flexRow].join(' ')}>
-
-          <NavLink
-            className={[_s.default, _s.noUnderline].join(' ')}
-            title={account.get('acct')}
-            to={`/${account.get('acct')}`}
-          >
-            <Avatar account={account} size={avatarSize} />
-          </NavLink>
-
-          <div className={[_s.default, _s.alignItemsStart, _s.paddingHorizontal10PX].join(' ')}>
-            <NavLink
-              className={[_s.default, _s.noUnderline].join(' ')}
-              title={account.get('acct')}
-              to={`/${account.get('acct')}`}
-            >
-              <DisplayName account={account} />
-            </NavLink>
-          
-            <Button
-              outline
-              narrow
-              color='brand'
-              backgroundColor='none'
-              className={_s.marginTop5PX}
-            >
-              <Text color='inherit'>
-                {intl.formatMessage(messages.follow)}
-              </Text>
-            </Button>
-          </div>
-
-          <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
-            <button className={[_s.default, _s.circle, _s.backgroundTransparent, _s.paddingVertical5PX, _s.paddingHorizontal5PX, _s.cursorPointer].join(' ')}>
-              <Icon className={_s.fillcolorSecondary} id='close' width='8px' height='8px' />
-            </button>
-          </div>
-
-        </div>
-      </div>
-    )
-  }
-
-}
diff --git a/app/javascript/gabsocial/components/account/account.scss b/app/javascript/gabsocial/components/account/account.scss
deleted file mode 100644
index a888801d..00000000
--- a/app/javascript/gabsocial/components/account/account.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.account {
-  padding: 10px;
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
-  }
-
-  &__display-name {
-    display: block;
-    flex: 1 1 auto;
-    color: $darker-text-color;
-    overflow: hidden;
-    text-decoration: none;
-    font-size: 14px;
-
-    strong {
-      display: block;
-      color: $primary-text-color;
-
-      @include text-overflow(nowrap);
-    }
-  }
-
-  &__wrapper {
-    display: flex;
-  }
-
-  &__relationship {
-    height: auto;
-    position: relative;
-    padding: 0 0 0 5px;
-  }
-
-  &__avatar-wrapper {
-    float: left;
-    margin-right: 12px;
-  }
-
-  &__avatar {
-    display: block;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/account/index.js b/app/javascript/gabsocial/components/account/index.js
deleted file mode 100644
index b573a430..00000000
--- a/app/javascript/gabsocial/components/account/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './account'
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/column_header.js b/app/javascript/gabsocial/components/column_header.js
index a6cc9178..6555714f 100644
--- a/app/javascript/gabsocial/components/column_header.js
+++ b/app/javascript/gabsocial/components/column_header.js
@@ -60,7 +60,7 @@ class ColumnHeader extends PureComponent {
         {
           showBackBtn &&
           <button className={[_s.default, _s.cursorPointer, _s.backgroundTransparent, _s.alignItemsCenter, _s.marginRight10PX, _s.justifyContentCenter].join(' ')}>
-            <Icon className={[_s.marginRight5PX, _s.fillColorBrand].join(' ')} id='back' width='20px' height='20px' />
+            <Icon className={[_s.marginRight5PX, _s.fillColorPrimary].join(' ')} id='back' width='20px' height='20px' />
           </button>
         }
 
@@ -85,7 +85,7 @@ class ColumnHeader extends PureComponent {
                   key={`column-header-action-btn-${i}`}
                   className={[_s.default, _s.marginLeft5PX, _s.cursorPointer, _s.backgroundSubtle2, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.radiusSmall].join(' ')}
                 >
-                  <Icon className={_s.fillcolorSecondary} id={action.icon} width='20px' height='20px' />
+                  <Icon className={_s.fillColorSecondary} id={action.icon} width='20px' height='20px' />
                 </button>
               ))
             }
diff --git a/app/javascript/gabsocial/components/hashtag_item.js b/app/javascript/gabsocial/components/hashtag_item.js
index 467d92af..51d630b0 100644
--- a/app/javascript/gabsocial/components/hashtag_item.js
+++ b/app/javascript/gabsocial/components/hashtag_item.js
@@ -48,7 +48,7 @@ export default class HashtagItem extends ImmutablePureComponent {
             icon='caret-down'
             iconWidth='8px'
             iconHeight='8px'
-            iconClassName={_s.fillcolorSecondary}
+            iconClassName={_s.fillColorSecondary}
             className={_s.marginLeftAuto}
           />
         </div>
diff --git a/app/javascript/gabsocial/components/icon.js b/app/javascript/gabsocial/components/icon.js
index cca347b9..662f4c65 100644
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -67,6 +67,8 @@ export default class Icon extends PureComponent {
         return <I.RepostIcon {...options} />
       case 'search':
         return <I.SearchIcon {...options} />
+      case 'search-alt':
+        return <I.SearchAltIcon {...options} />
       case 'share':
         return <I.ShareIcon {...options} />
       case 'shop':
diff --git a/app/javascript/gabsocial/components/modal/focal_point_modal.js b/app/javascript/gabsocial/components/modal/focal_point_modal.js
deleted file mode 100644
index 01ffd454..00000000
--- a/app/javascript/gabsocial/components/modal/focal_point_modal.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import classNames from 'classnames';
-import { changeUploadCompose } from '../../actions/compose';
-import { getPointerPosition } from '../../utils/element_position';
-import ImageLoader from '../image_loader';
-
-const mapStateToProps = (state, { id }) => ({
-  media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
-});
-
-const mapDispatchToProps = (dispatch, { id }) => ({
-
-  onSave: (x, y) => {
-    dispatch(changeUploadCompose(id, { focus: `${x.toFixed(2)},${y.toFixed(2)}` }));
-  },
-
-});
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-class FocalPointModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-  };
-
-  state = {
-    x: 0,
-    y: 0,
-    focusX: 0,
-    focusY: 0,
-    dragging: false,
-  };
-
-  componentWillMount () {
-    this.updatePositionFromMedia(this.props.media);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (this.props.media.get('id') !== nextProps.media.get('id')) {
-      this.updatePositionFromMedia(nextProps.media);
-    }
-  }
-
-  componentWillUnmount () {
-    document.removeEventListener('mousemove', this.handleMouseMove);
-    document.removeEventListener('mouseup', this.handleMouseUp);
-  }
-
-  handleMouseDown = e => {
-    document.addEventListener('mousemove', this.handleMouseMove);
-    document.addEventListener('mouseup', this.handleMouseUp);
-
-    this.updatePosition(e);
-    this.setState({ dragging: true });
-  }
-
-  handleMouseMove = e => {
-    this.updatePosition(e);
-  }
-
-  handleMouseUp = () => {
-    document.removeEventListener('mousemove', this.handleMouseMove);
-    document.removeEventListener('mouseup', this.handleMouseUp);
-
-    this.setState({ dragging: false });
-    this.props.onSave(this.state.focusX, this.state.focusY);
-  }
-
-  updatePosition = e => {
-    const { x, y } = getPointerPosition(this.node, e);
-    const focusX   = (x - .5) *  2;
-    const focusY   = (y - .5) * -2;
-
-    this.setState({ x, y, focusX, focusY });
-  }
-
-  updatePositionFromMedia = media => {
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-
-    if (focusX && focusY) {
-      const x = (focusX /  2) + .5;
-      const y = (focusY / -2) + .5;
-
-      this.setState({ x, y, focusX, focusY });
-    } else {
-      this.setState({ x: 0.5, y: 0.5, focusX: 0, focusY: 0 });
-    }
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  render () {
-    const { media } = this.props;
-    const { x, y, dragging } = this.state;
-
-    const width  = media.getIn(['meta', 'original', 'width']) || null;
-    const height = media.getIn(['meta', 'original', 'height']) || null;
-
-    return (
-      <div className='modal-root__modal focal-point-modal'>
-        <div className={classNames('focal-point', { dragging })} ref={this.setRef}>
-          <ImageLoader
-            previewSrc={media.get('preview_url')}
-            src={media.get('url')}
-            width={width}
-            height={height}
-          />
-
-          <div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} />
-          <div className='focal-point__overlay' onMouseDown={this.handleMouseDown} />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss b/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss
deleted file mode 100644
index 7b778311..00000000
--- a/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.focal-point-modal {
-  position: relative;
-
-  @include max-size(80vw, 80vh);
-}
-
-.focal-point {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-
-  &.dragging {
-    cursor: move;
-  }
-
-  img {
-    margin: auto;
-
-    @include max-size(80vw, 80vh);
-    @include size(auto);
-  }
-
-  &__reticle {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    background: url('/assets/images/reticle.png') no-repeat 0 0;
-    box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
-
-    @include circle(100px);
-  }
-
-  &__overlay {
-    @include size(100%);
-    @include abs-position(0, auto, auto, 0);
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/modal/modal_root.js b/app/javascript/gabsocial/components/modal/modal_root.js
index 57b13452..80ba2dd0 100644
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -16,7 +16,6 @@ import MediaModal from './media_modal'
 import VideoModal from './video_modal'
 import BoostModal from './boost_modal'
 import ConfirmationModal from './confirmation_modal'
-import FocalPointModal from './focal_point_modal'
 import HotkeysModal from './hotkeys_modal'
 import ComposeModal from './compose_modal'
 import UnauthorizedModal from './unauthorized_modal'
@@ -29,7 +28,6 @@ const MODAL_COMPONENTS = {
   'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'EMBED': EmbedModal,
-  'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }),
   'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
   'MUTE': MuteModal,
diff --git a/app/javascript/gabsocial/components/panel/profile_info_panel.js b/app/javascript/gabsocial/components/panel/profile_info_panel.js
index d1eb167c..9b2e4fdd 100644
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -70,7 +70,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             }
 
             <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='calendar' width='12px' height='12px' className={_s.fillcolorSecondary} />
+              <Icon id='calendar' width='12px' height='12px' className={_s.fillColorSecondary} />
               <Text
                 size='small'
                 color='secondary'
diff --git a/app/javascript/gabsocial/components/panel/search_filter_panel.js b/app/javascript/gabsocial/components/panel/search_filter_panel.js
new file mode 100644
index 00000000..538c5e1c
--- /dev/null
+++ b/app/javascript/gabsocial/components/panel/search_filter_panel.js
@@ -0,0 +1,35 @@
+import { Fragment } from 'react'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { shortNumberFormat } from '../../utils/numbers'
+import PanelLayout from './panel_layout'
+import Button from '../button'
+import Divider from '../divider'
+import Heading from '../heading'
+import Icon from '../icon'
+import Text from '../text'
+
+const messages = defineMessages({
+  title: { id: 'search_filters', defaultMessage: 'Search Filters' },
+})
+
+export default
+@injectIntl
+class SearchFilterPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    group: ImmutablePropTypes.list.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl, group } = this.props
+
+    return (
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+      
+      </PanelLayout>
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
index 8e425111..d5440062 100644
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@@ -57,11 +57,10 @@ class WhoToFollowPanel extends ImmutablePureComponent {
         <div className={_s.default}>
           {suggestions && suggestions.map(accountId => (
             <AccountContainer
+              showDismiss
               key={accountId}
               id={accountId}
-              actionIcon='times'
-              actionTitle={intl.formatMessage(messages.dismissSuggestion)}
-              onActionClick={dismissSuggestion}
+              dismissAction={dismissSuggestion}
             />
           ))}
         </div>
diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js
index ae230973..6e10e077 100644
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -114,17 +114,17 @@ class Sidebar extends ImmutablePureComponent {
         to: '/',
         count: 124,
       },
-      {
-        title: 'Search',
-        icon: 'search-sidebar',
-        to: '/search',
-      },
       {
         title: 'Notifications',
         icon: 'notifications',
         to: '/notifications',
         count: 40,
       },
+      {
+        title: 'Search',
+        icon: 'search-alt',
+        to: '/search',
+      },
       {
         title: 'Groups',
         icon: 'group',
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js
index 22f11ba6..ebdee42d 100644
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -63,7 +63,7 @@ export default class SidebarSectionItem extends PureComponent {
 
     const iconClasses = cx({
       fillColorBlack: shouldShowActive,
-      fillcolorSecondary: !hovering && !active,
+      fillColorSecondary: !hovering && !active,
     })
 
     const countClasses = cx({
diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js
index c5cf3087..373e8d79 100644
--- a/app/javascript/gabsocial/components/status/status.js
+++ b/app/javascript/gabsocial/components/status/status.js
@@ -324,7 +324,7 @@ class Status extends ImmutablePureComponent {
             id='pin'
             width='10px'
             height='10px'
-            className={_s.fillcolorSecondary}
+            className={_s.fillColorSecondary}
           />
           <Text size='small' color='secondary' className={_s.marginLeft5PX}>
             {intl.formatMessage(messages.pinned)}
diff --git a/app/javascript/gabsocial/components/status_action_bar_item.js b/app/javascript/gabsocial/components/status_action_bar_item.js
index 42940593..0d623a53 100644
--- a/app/javascript/gabsocial/components/status_action_bar_item.js
+++ b/app/javascript/gabsocial/components/status_action_bar_item.js
@@ -43,7 +43,7 @@ export default class StatusActionBarItem extends PureComponent {
           active={active}
           disabled={disabled}
         >
-          <Icon width='16px' height='16px' id={icon} className={[_s.default, _s.marginRight10PX, _s.fillcolorSecondary].join(' ')} />
+          <Icon width='16px' height='16px' id={icon} className={[_s.default, _s.marginRight10PX, _s.fillColorSecondary].join(' ')} />
           {title}
         </button>
       </div>
diff --git a/app/javascript/gabsocial/components/status_header.js b/app/javascript/gabsocial/components/status_header.js
index ba338cfe..56ed74f8 100644
--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -197,7 +197,7 @@ export default class StatusHeader extends ImmutablePureComponent {
                 icon='ellipsis'
                 iconWidth='20px'
                 iconHeight='20px'
-                iconClassName={_s.fillcolorSecondary}
+                iconClassName={_s.fillColorSecondary}
                 className={_s.marginLeftAuto}
                 onClick={this.handleStatusOptionsClick}
               />
@@ -218,7 +218,7 @@ export default class StatusHeader extends ImmutablePureComponent {
 
               <DotTextSeperator />
 
-              <Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.marginLeft5PX, _s.fillcolorSecondary].join(' ')} />
+              <Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.marginLeft5PX, _s.fillColorSecondary].join(' ')} />
 
               {
                 !!status.get('group') &&
diff --git a/app/javascript/gabsocial/containers/account_container.js b/app/javascript/gabsocial/containers/account_container.js
index c0e0287d..268ff488 100644
--- a/app/javascript/gabsocial/containers/account_container.js
+++ b/app/javascript/gabsocial/containers/account_container.js
@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import {
   followAccount,
   unfollowAccount,
@@ -6,26 +6,26 @@ import {
   unblockAccount,
   muteAccount,
   unmuteAccount,
-} from '../actions/accounts';
-import { openModal } from '../actions/modal';
-import { initMuteModal } from '../actions/mutes';
-import { unfollowModal } from '../initial_state';
-import { makeGetAccount } from '../selectors';
-import Account from '../components/account';
+} from '../actions/accounts'
+import { openModal } from '../actions/modal'
+import { initMuteModal } from '../actions/mutes'
+import { unfollowModal } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import Account from '../components/account'
 
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-});
+})
 
 const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
+  const getAccount = makeGetAccount()
 
   const mapStateToProps = (state, props) => ({
     account: getAccount(state, props.id),
-  });
+  })
 
-  return mapStateToProps;
-};
+  return mapStateToProps
+}
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
@@ -36,35 +36,35 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
           message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
           confirm: intl.formatMessage(messages.unfollowConfirm),
           onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        }));
+        }))
       } else {
-        dispatch(unfollowAccount(account.get('id')));
+        dispatch(unfollowAccount(account.get('id')))
       }
     } else {
-      dispatch(followAccount(account.get('id')));
+      dispatch(followAccount(account.get('id')))
     }
   },
 
   onBlock (account) {
     if (account.getIn(['relationship', 'blocking'])) {
-      dispatch(unblockAccount(account.get('id')));
+      dispatch(unblockAccount(account.get('id')))
     } else {
-      dispatch(blockAccount(account.get('id')));
+      dispatch(blockAccount(account.get('id')))
     }
   },
 
   onMute (account) {
     if (account.getIn(['relationship', 'muting'])) {
-      dispatch(unmuteAccount(account.get('id')));
+      dispatch(unmuteAccount(account.get('id')))
     } else {
-      dispatch(initMuteModal(account));
+      dispatch(initMuteModal(account))
     }
   },
 
 
   onMuteNotifications (account, notifications) {
-    dispatch(muteAccount(account.get('id'), notifications));
+    dispatch(muteAccount(account.get('id'), notifications))
   },
-});
+})
 
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account));
+export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account))
diff --git a/app/javascript/gabsocial/features/account_gallery/account_gallery.js b/app/javascript/gabsocial/features/account_gallery/account_gallery.js
index a60a5d82..df39efde 100644
--- a/app/javascript/gabsocial/features/account_gallery/account_gallery.js
+++ b/app/javascript/gabsocial/features/account_gallery/account_gallery.js
@@ -173,27 +173,6 @@ class AccountGallery extends ImmutablePureComponent {
 
     return (
       <div className='scrollable-list scrollable-list--flex' onScroll={this.handleScroll}>
-        { /* <SectionHeadlineBar
-            className='account-section-headline'
-            items={[
-              {
-                exact: true,
-                to: `/${accountUsername}`,
-                title: intl.formatMessage(messages.posts),
-              },
-              {
-                exact: true,
-                to: `/${accountUsername}/with_replies`,
-                title: intl.formatMessage(messages.postsWithReplies),
-              },
-              {
-                exact: true,
-                to: `/${accountUsername}/media`,
-                title: intl.formatMessage(messages.media),
-              },
-            ]}
-          /> */ }
-
         <div role='feed' className='account-gallery__container' ref={this.handleRef}>
           {attachments.map((attachment, index) => attachment === null ? (
             <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
diff --git a/app/javascript/gabsocial/features/account_timeline/account_timeline.js b/app/javascript/gabsocial/features/account_timeline/account_timeline.js
index f61359dc..b4a07fb0 100644
--- a/app/javascript/gabsocial/features/account_timeline/account_timeline.js
+++ b/app/javascript/gabsocial/features/account_timeline/account_timeline.js
@@ -109,35 +109,12 @@ class AccountTimeline extends ImmutablePureComponent {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername, intl } = this.props;
 
     if (!isAccount && accountId !== -1) {
-      return (<ColumnIndicator type='missing' />);
+      return <ColumnIndicator type='missing' />
     } else if (accountId === -1 || (!statusIds && isLoading)) {
-      return (<ColumnIndicator type='loading' />);
+      return <ColumnIndicator type='loading' />
     } else if (unavailable) {
-      return (<ColumnIndicator type='error' message={intl.formatMessage(messages.error)} />);
+      return <ColumnIndicator type='error' message={intl.formatMessage(messages.error)} />
     }
-
-    /* <SectionHeadlineBar
-        className='account-section-headline'
-        items={[
-          {
-            exact: true,
-            to: `/${accountUsername}`,
-            title: intl.formatMessage(messages.posts),
-          },
-          {
-            exact: true,
-            to: `/${accountUsername}/with_replies`,
-            title: intl.formatMessage(messages.postsWithReplies),
-          },
-          {
-            exact: true,
-            to: `/${accountUsername}/media`,
-            title: intl.formatMessage(messages.media),
-          },
-        ]}
-      />
-      */
-
     return (
       <StatusList
         scrollKey='account_timeline'
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
index fd001fbc..c5ca6848 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -70,7 +70,7 @@ export default class ComposeExtraButton extends PureComponent {
           onMouseEnter={() => this.handleOnMouseEnter()}
           onMouseLeave={() => this.handleOnMouseLeave()}
         >
-          <Icon id={icon} width={iconSize} height={iconSize} className={_s.fillcolorSecondary} />
+          <Icon id={icon} width={iconSize} height={iconSize} className={_s.fillColorSecondary} />
           {
             !small &&
             <span className={titleClasses}>
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
index f9258741..646c84dd 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -316,13 +316,15 @@ class ComposeForm extends ImmutablePureComponent {
             small={shouldCondense}
             textarea
           >
-            { /*
-            !condensed &&
+
             <div className='compose-form__modifiers'>
               <UploadForm />
-              {!edit && <PollFormContainer />}
+              {
+                !edit &&
+                <PollFormContainer />
+              }
             </div>
-          */ }
+
           </AutosuggestTextbox>
 
           { /* quoteOfId && <QuotedStatusPreviewContainer id={quoteOfId} /> */}
diff --git a/app/javascript/gabsocial/features/compose/components/upload/upload.js b/app/javascript/gabsocial/features/compose/components/upload/upload.js
index fd262e5f..1ff818d3 100644
--- a/app/javascript/gabsocial/features/compose/components/upload/upload.js
+++ b/app/javascript/gabsocial/features/compose/components/upload/upload.js
@@ -1,15 +1,15 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import classNames from 'classnames';
-import spring from 'react-motion/lib/spring';
-import Motion from '../../../ui/util/optional_motion';
-import IconButton from '../../../../components/icon_button';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames'
+import spring from 'react-motion/lib/spring'
+import Motion from '../../../ui/util/optional_motion'
+import Button from '../../../../components/button'
 
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
   delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
-});
+})
 
 export default
 @injectIntl
@@ -17,82 +17,76 @@ class Upload extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
-  };
+  }
 
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
     onUndo: PropTypes.func.isRequired,
     onDescriptionChange: PropTypes.func.isRequired,
-    onOpenFocalPoint: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
-  };
+  }
 
   state = {
     hovered: false,
     focused: false,
     dirtyDescription: null,
-  };
+  }
 
   handleKeyDown = (e) => {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      this.handleSubmit();
+      this.handleSubmit()
     }
   }
 
   handleSubmit = () => {
-    this.handleInputBlur();
-    this.props.onSubmit(this.context.router.history);
+    this.handleInputBlur()
+    this.props.onSubmit(this.context.router.history)
   }
 
   handleUndoClick = e => {
-    e.stopPropagation();
-    this.props.onUndo(this.props.media.get('id'));
-  }
-
-  handleFocalPointClick = e => {
-    e.stopPropagation();
-    this.props.onOpenFocalPoint(this.props.media.get('id'));
+    e.stopPropagation()
+    this.props.onUndo(this.props.media.get('id'))
   }
 
   handleInputChange = e => {
-    this.setState({ dirtyDescription: e.target.value });
+    this.setState({ dirtyDescription: e.target.value })
   }
 
   handleMouseEnter = () => {
-    this.setState({ hovered: true });
+    this.setState({ hovered: true })
   }
 
   handleMouseLeave = () => {
-    this.setState({ hovered: false });
+    this.setState({ hovered: false })
   }
 
   handleInputFocus = () => {
-    this.setState({ focused: true });
+    this.setState({ focused: true })
   }
 
   handleClick = () => {
-    this.setState({ focused: true });
+    this.setState({ focused: true })
   }
 
   handleInputBlur = () => {
-    const { dirtyDescription } = this.state;
+    const { dirtyDescription } = this.state
 
-    this.setState({ focused: false, dirtyDescription: null });
+    this.setState({ focused: false, dirtyDescription: null })
 
     if (dirtyDescription !== null) {
-      this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription);
+      this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription)
     }
   }
 
-  render () {
-    const { intl, media } = this.props;
-    const active          = this.state.hovered || this.state.focused;
-    const description     = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || '';
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-    const x = ((focusX /  2) + .5) * 100;
-    const y = ((focusY / -2) + .5) * 100;
+  render() {
+    const { intl, media } = this.props
+    const active = this.state.hovered || this.state.focused
+    const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || ''
+    const focusX = media.getIn(['meta', 'focus', 'x'])
+    const focusY = media.getIn(['meta', 'focus', 'y'])
+    const x = ((focusX / 2) + .5) * 100
+    const y = ((focusY / -2) + .5) * 100
 
     return (
       <div className='compose-form-upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
@@ -100,13 +94,18 @@ class Upload extends ImmutablePureComponent {
           {({ scale }) => (
             <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
               <div className={classNames('compose-form__upload__actions', { active })}>
-                <button className='icon-button' title={intl.formatMessage(messages.delete)} onClick={this.handleUndoClick}><Icon id='times'/></button>
-                {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
+                <Button
+                  title={intl.formatMessage(messages.delete)}
+                  onClick={this.handleUndoClick}
+                  icon='cancel'
+                />
               </div>
 
               <div className={classNames('compose-form-upload__description', { active })}>
                 <label>
-                  <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
+                  <span style={{ display: 'none' }}>
+                    {intl.formatMessage(messages.description)}
+                  </span>
 
                   <textarea
                     placeholder={intl.formatMessage(messages.description)}
@@ -123,7 +122,7 @@ class Upload extends ImmutablePureComponent {
           )}
         </Motion>
       </div>
-    );
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/features/compose/containers/upload_container.js b/app/javascript/gabsocial/features/compose/containers/upload_container.js
index 476328c4..bd6b9742 100644
--- a/app/javascript/gabsocial/features/compose/containers/upload_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/upload_container.js
@@ -17,10 +17,6 @@ const mapDispatchToProps = dispatch => ({
     dispatch(changeUploadCompose(id, { description }));
   },
 
-  onOpenFocalPoint: id => {
-    dispatch(openModal('FOCAL_POINT', { id }));
-  },
-
   onSubmit (router) {
     dispatch(submitCompose(router));
   },
diff --git a/app/javascript/gabsocial/features/favorited_statuses/favorited_statuses.js b/app/javascript/gabsocial/features/favorited_statuses/favorited_statuses.js
index 09ab9370..67acf41c 100644
--- a/app/javascript/gabsocial/features/favorited_statuses/favorited_statuses.js
+++ b/app/javascript/gabsocial/features/favorited_statuses/favorited_statuses.js
@@ -1,11 +1,11 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { debounce } from 'lodash';
-import { fetchFavoritedStatuses, expandFavoritedStatuses } from '../../actions/favorites';
-import { meUsername } from '../../initial_state';
-import StatusList from '../../components/status_list';
-import ColumnIndicator from '../../components/column_indicator';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { FormattedMessage } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { debounce } from 'lodash'
+import { fetchFavoritedStatuses, expandFavoritedStatuses } from '../../actions/favorites'
+import { meUsername } from '../../initial_state'
+import StatusList from '../../components/status_list'
+import ColumnIndicator from '../../components/column_indicator'
 
 const mapStateToProps = (state, { params: { username } }) => {
   return {
@@ -13,8 +13,8 @@ const mapStateToProps = (state, { params: { username } }) => {
     statusIds: state.getIn(['status_lists', 'favorites', 'items']),
     isLoading: state.getIn(['status_lists', 'favorites', 'isLoading'], true),
     hasMore: !!state.getIn(['status_lists', 'favorites', 'next']),
-  };
-};
+  }
+}
 
 export default
 @connect(mapStateToProps)
@@ -26,33 +26,35 @@ class Favorites extends ImmutablePureComponent {
     hasMore: PropTypes.bool,
     isLoading: PropTypes.bool,
     isMyAccount: PropTypes.bool.isRequired,
-  };
+  }
 
-  componentWillMount () {
-    this.props.dispatch(fetchFavoritedStatuses());
+  componentWillMount() {
+    this.props.dispatch(fetchFavoritedStatuses())
   }
 
   handleLoadMore = debounce(() => {
-    this.props.dispatch(expandFavoritedStatuses());
+    this.props.dispatch(expandFavoritedStatuses())
   }, 300, { leading: true })
 
-  render () {
-    const { statusIds, hasMore, isLoading, isMyAccount } = this.props;
+  render() {
+    const { statusIds, hasMore, isLoading, isMyAccount } = this.props
 
     if (!isMyAccount) {
-      return ( <ColumnIndicator type='missing' /> );
+      return <ColumnIndicator type='missing' />
     }
 
+    console.log("statusIds:", statusIds)
+
     return (
-        <StatusList
-          statusIds={statusIds}
-          scrollKey='favorited_statuses'
-          hasMore={hasMore}
-          isLoading={isLoading}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='empty_column.favorited_statuses' defaultMessage="You don't have any favorite gabs yet. When you favorite one, it will show up here." />}
-        />
-    );
+      <StatusList
+        statusIds={statusIds}
+        scrollKey='favorited_statuses'
+        hasMore={hasMore}
+        isLoading={isLoading}
+        onLoadMore={this.handleLoadMore}
+        emptyMessage={<FormattedMessage id='empty_column.favorited_statuses' defaultMessage="You don't have any favorite gabs yet. When you favorite one, it will show up here." />}
+      />
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/features/followers/followers.js b/app/javascript/gabsocial/features/followers/followers.js
index 898bb0e2..c4e2d93f 100644
--- a/app/javascript/gabsocial/features/followers/followers.js
+++ b/app/javascript/gabsocial/features/followers/followers.js
@@ -118,9 +118,11 @@ class Followers extends ImmutablePureComponent {
             onLoadMore={this.handleLoadMore}
             emptyMessage={intl.formatMessage(messages.empty)}
           >
-            {accountIds.map((id, i) => (
-              <AccountContainer key={id} id={id} withNote={false} compact />
-            ))}
+            {
+              accountIds.map((id, i) => (
+                <AccountContainer key={id} id={id} withNote={false} compact />
+              ))
+            }
           </ScrollableList>
         </div>
       </Block>
diff --git a/app/javascript/gabsocial/features/following/following.js b/app/javascript/gabsocial/features/following/following.js
index de2ebe72..e69407e6 100644
--- a/app/javascript/gabsocial/features/following/following.js
+++ b/app/javascript/gabsocial/features/following/following.js
@@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { debounce } from 'lodash'
@@ -13,6 +14,7 @@ import AccountContainer from '../../containers/account_container'
 import ColumnIndicator from '../../components/column_indicator'
 import ScrollableList from '../../components/scrollable_list'
 import Block from '../../components/block'
+import Divider from '../../components/divider'
 import Heading from '../../components/heading'
 
 const mapStateToProps = (state, { params: { username } }) => {
@@ -118,9 +120,11 @@ class Following extends ImmutablePureComponent {
             onLoadMore={this.handleLoadMore}
             emptyMessage={intl.formatMessage(messages.empty)}
           >
-            {accountIds.map((id, i) => (
-              <AccountContainer key={id} id={id} withNote={false} compact />
-            ))}
+            {
+              accountIds.map((id) => (
+                <AccountContainer key={id} id={id} withNote={false} compact />
+              ))
+            }
           </ScrollableList>
         </div>
       </Block>
diff --git a/app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js b/app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js
new file mode 100644
index 00000000..96fc3438
--- /dev/null
+++ b/app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js
@@ -0,0 +1,50 @@
+import { injectIntl, FormattedMessage } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { HotKeys } from 'react-hotkeys'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import StatusContainer from '../../../../containers/status_container'
+import AccountContainer from '../../../../containers/account_container'
+import Button from '../../../../components/button'
+import Icon from '../../../../components/icon'
+
+const notificationForScreenReader = (intl, message, timestamp) => {
+  const output = [message]
+
+  output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }))
+
+  return output.join(', ')
+}
+
+export default
+@injectIntl
+class Notification extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  static propTypes = {
+    status: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+    notificationType: PropTypes.string.isRequired,
+    accounts: ImmutablePropTypes.list,
+  }
+
+  renderFavorite = () => {
+    const { status, notificationType, accounts } = this.props
+
+  }
+
+  render() {
+    const { notification } = this.props
+    const account = notification.get('account')
+
+    switch (notification.get('type')) {
+      case 'favourite':
+        return this.renderFavorite()
+    }
+
+    return null
+  }
+
+}
diff --git a/app/javascript/gabsocial/features/notifications/components/notification/notification.js b/app/javascript/gabsocial/features/notifications/components/notification/notification.js
index fd78a678..cb7afd2a 100644
--- a/app/javascript/gabsocial/features/notifications/components/notification/notification.js
+++ b/app/javascript/gabsocial/features/notifications/components/notification/notification.js
@@ -87,7 +87,7 @@ class Notification extends ImmutablePureComponent {
     if (status) this.props.onToggleHidden(status);
   }
 
-  getHandlers () {
+  getHandlers() {
     return {
       reply: this.handleMention,
       favourite: this.handleHotkeyFavourite,
@@ -101,7 +101,7 @@ class Notification extends ImmutablePureComponent {
     };
   }
 
-  renderFollow (notification, account, link) {
+  renderFollow(notification, account, link) {
     const { intl } = this.props;
 
     return (
@@ -123,7 +123,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderMention (notification) {
+  renderMention(notification) {
     return (
       <StatusContainer
         id={notification.get('status')}
@@ -140,7 +140,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderFavourite (notification, link) {
+  renderFavourite(notification, link) {
     const { intl } = this.props;
 
     return (
@@ -173,7 +173,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderReblog (notification, link) {
+  renderReblog(notification, link) {
     const { intl } = this.props;
 
     return (
@@ -205,7 +205,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderPoll (notification) {
+  renderPoll(notification) {
     const { intl } = this.props;
 
     return (
@@ -237,23 +237,35 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  render () {
+  render() {
     const { notification } = this.props;
-    const account          = notification.get('account');
-    const displayNameHtml  = { __html: account.get('display_name_html') };
-    const link             = <bdi><Button className='notification__display-name' href={`/${account.get('acct')}`} title={account.get('acct')} to={`/${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
+    const account = notification.get('account');
+    const displayNameHtml = { __html: account.get('display_name_html') };
+    const link = (
+      <bdi>
+        <Button
+          className='notification__display-name'
+          href={`/${account.get('acct')}`}
+          title={account.get('acct')}
+          to={`/${account.get('acct')}`}
+          dangerouslySetInnerHTML={displayNameHtml}
+        />
+      </bdi>
+    );
 
-    switch(notification.get('type')) {
-    // case 'follow':
-    //   return this.renderFollow(notification, account, link);
-    // case 'mention':
-    //   return this.renderMention(notification);
-    case 'favourite':
-      return this.renderFavourite(notification, link);
-    // case 'reblog':
-    //   return this.renderReblog(notification, link);
-    // case 'poll':
-    //   return this.renderPoll(notification);
+    // console.log("notification:", notification)
+
+    switch (notification.get('type')) {
+      // case 'follow':
+      //   return this.renderFollow(notification, account, link);
+      // case 'mention':
+      //   return this.renderMention(notification);
+      case 'favourite':
+        return this.renderFavourite(notification, link);
+      // case 'reblog':
+      //   return this.renderReblog(notification, link);
+      // case 'poll':
+      //   return this.renderPoll(notification);
     }
 
     return null;
diff --git a/app/javascript/gabsocial/features/notifications/notifications.js b/app/javascript/gabsocial/features/notifications/notifications.js
index 353fec35..f23cab36 100644
--- a/app/javascript/gabsocial/features/notifications/notifications.js
+++ b/app/javascript/gabsocial/features/notifications/notifications.js
@@ -11,14 +11,9 @@ import {
 } from '../../actions/notifications';
 import NotificationContainer from './containers/notification_container';
 // import ColumnSettingsContainer from './containers/column_settings_container';
-// import FilterBarContainer from './containers/filter_bar_container';
 import ScrollableList from '../../components/scrollable_list';
 import LoadMore from '../../components/load_more';
-// import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
-
-const messages = defineMessages({
-  title: { id: 'column.notifications', defaultMessage: 'Notifications' },
-});
+import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
 
 const getNotifications = createSelector([
   state => state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
@@ -127,13 +122,39 @@ class Notifications extends ImmutablePureComponent {
 
     let scrollableContent = null;
 
-    // const filterBarContainer = showFilterBar
-    //   ? (<FilterBarContainer />)
-    //   : null;
-
     // : todo : include follow requests
 
-    console.log("notifications:", notifications)
+    console.log('notifications:', notifications)
+
+    let filteredNotifications = {follows:[]}
+
+    notifications.forEach((notification) => {
+      // const createdAt = notification.get('createdAt')
+      // const account = notification.get('account')
+      const type = notification.get('type')
+      const status = notification.get('status')
+      if (type === 'follow') {
+        filteredNotifications.follows.push(notification)
+      } else if (type === 'favourite') {
+        if (filteredNotifications[status] === undefined) {
+          filteredNotifications[status] = {}
+        }
+        if (filteredNotifications[status]['favorite'] === undefined) {
+          filteredNotifications[status].favorite = []
+        }
+        filteredNotifications[status].favorite.push(notification)
+      } else if (type === 'poll') {
+        if (filteredNotifications[status] === undefined) {
+          filteredNotifications[status] = {}
+        }
+        if (filteredNotifications[status]['poll'] === undefined) {
+          filteredNotifications[status].poll = []
+        }
+        filteredNotifications[status].poll.push(notification)
+      }
+    })
+
+    console.log('filteredNotifications:', filteredNotifications)
 
     if (isLoading && this.scrollableContent) {
       scrollableContent = this.scrollableContent;
@@ -161,28 +182,29 @@ class Notifications extends ImmutablePureComponent {
 
     this.scrollableContent = scrollableContent;
 
-    const scrollContainer = (
-      <ScrollableList
-        scrollKey='notifications'
-        isLoading={isLoading}
-        showLoading={isLoading && notifications.size === 0}
-        hasMore={hasMore}
-        emptyMessage={<FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />}
-        onLoadMore={this.handleLoadOlder}
-        onScrollToTop={this.handleScrollToTop}
-        onScroll={this.handleScroll}
-      >
-        { scrollableContent }
-      </ScrollableList>
-    );
-
     return (
       <div ref={this.setColumnRef}>
-        { /* filterBarContainer */ }
-        { /* <TimelineQueueButtonHeader onClick={this.handleDequeueNotifications} count={totalQueuedNotificationsCount} itemType='notification' /> */ }
-        { scrollContainer }
+
+        <TimelineQueueButtonHeader
+          onClick={this.handleDequeueNotifications}
+          count={totalQueuedNotificationsCount}
+          itemType='notification'
+        />
+
+        <ScrollableList
+          scrollKey='notifications'
+          isLoading={isLoading}
+          showLoading={isLoading && notifications.size === 0}
+          hasMore={hasMore}
+          emptyMessage={<FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />}
+          onLoadMore={this.handleLoadOlder}
+          onScrollToTop={this.handleScrollToTop}
+          onScroll={this.handleScroll}
+        >
+          { scrollableContent }
+        </ScrollableList>
       </div>
-    );
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/features/status/components/card/card.js b/app/javascript/gabsocial/features/status/components/card/card.js
index e830b5f1..bb32db2d 100644
--- a/app/javascript/gabsocial/features/status/components/card/card.js
+++ b/app/javascript/gabsocial/features/status/components/card/card.js
@@ -167,7 +167,7 @@ export default class Card extends ImmutablePureComponent {
           {trim(card.get('description') || '', maxDescription)}
         </p>
         <span className={[_s.default, _s.marginTopAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
-          <Icon id='link' width='10px' height='10px' className={[_s.fillcolorSecondary, _s.marginRight5PX].join(' ')} fixedWidth />
+          <Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.marginRight5PX].join(' ')} fixedWidth />
           {provider}
         </span>
       </div>
@@ -222,7 +222,7 @@ export default class Card extends ImmutablePureComponent {
     } else {
       embed = (
         <div className={[_s.default, _s.paddingVertical15PX, _s.paddingHorizontal15PX, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-          <Icon id='file-text' width='22px' height='22px' className={_s.fillcolorSecondary} />
+          <Icon id='file-text' width='22px' height='22px' className={_s.fillColorSecondary} />
         </div>
       )
     }
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index 9743a3d4..a9aea889 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -43,7 +43,6 @@ import {
   Followers,
   Following,
   // Reblogs,
-  // Favorites,
   // DirectTimeline,
   // HashtagTimeline,
   Notifications,
@@ -197,9 +196,6 @@ class SwitchingArea extends PureComponent {
         { /*
         <Redirect from='/@:username/media' to='/:username/media' />
         <WrappedRoute path='/:username/media' component={AccountGallery} page={ProfilePage} content={children} />
-
-        <Redirect from='/@:username/tagged/:tag' to='/:username/tagged/:tag' exact />
-        <WrappedRoute path='/:username/tagged/:tag' exact component={AccountTimeline} page={ProfilePage} content={children} />
         */ }
         <Redirect from='/@:username/favorites' to='/:username/favorites' />
         <WrappedRoute path='/:username/favorites' page={ProfilePage} component={FavoritedStatuses} content={children} />
diff --git a/app/javascript/gabsocial/layouts/search_layout.js b/app/javascript/gabsocial/layouts/search_layout.js
index d142cf86..b95ce48c 100644
--- a/app/javascript/gabsocial/layouts/search_layout.js
+++ b/app/javascript/gabsocial/layouts/search_layout.js
@@ -8,12 +8,11 @@ export default class SearchLayout extends PureComponent {
     actions: PropTypes.array,
     tabs: PropTypes.array,
     layout: PropTypes.object,
-    title: PropTypes.string,
     showBackBtn: PropTypes.bool,
   }
 
   render() {
-    const { children, title, showBackBtn, layout, actions, tabs } = this.props
+    const { children, showBackBtn, layout, actions, tabs } = this.props
 
     // const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
     // const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
@@ -29,7 +28,7 @@ export default class SearchLayout extends PureComponent {
             <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
                 <ColumnHeader
-                  title={title}
+                  title={'Search'}
                   showBackBtn={showBackBtn}
                   actions={actions}
                   tabs={tabs}
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index 104c0100..3427d0dc 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -1,7 +1,6 @@
 import { Fragment } from 'react'
 import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
+import SearchFilterPanel from '../components/panel/search_filter_panel'
 import SearchLayout from '../layouts/search_layout'
 
 export default class SearchPage extends PureComponent {
@@ -9,7 +8,15 @@ export default class SearchPage extends PureComponent {
     const { children } = this.props
 
     return (
-      <SearchLayout>
+      <SearchLayout
+        layout={(
+          <Fragment>
+            <SearchFilterPanel />
+            <LinkFooter />
+          </Fragment>
+        )}
+        showBackBtn
+        >
         {children}
       </SearchLayout>
     )
diff --git a/app/javascript/gabsocial/reducers/status_lists.js b/app/javascript/gabsocial/reducers/status_lists.js
index b2063de2..d71e3615 100644
--- a/app/javascript/gabsocial/reducers/status_lists.js
+++ b/app/javascript/gabsocial/reducers/status_lists.js
@@ -8,14 +8,14 @@ import {
 } from '../actions/favorites';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import {
-  FAVOURITE_SUCCESS,
-  UNFAVOURITE_SUCCESS,
+  FAVORITE_SUCCESS,
+  UNFAVORITE_SUCCESS,
   PIN_SUCCESS,
   UNPIN_SUCCESS,
 } from '../actions/interactions';
 
 const initialState = ImmutableMap({
-  favourites: ImmutableMap({
+  favorites: ImmutableMap({
     next: null,
     loaded: false,
     items: ImmutableList(),
@@ -60,18 +60,18 @@ export default function statusLists(state = initialState, action) {
   switch(action.type) {
   case FAVORITED_STATUSES_FETCH_REQUEST:
   case FAVORITED_STATUSES_EXPAND_REQUEST:
-    return state.setIn(['favourites', 'isLoading'], true);
+    return state.setIn(['favorites', 'isLoading'], true);
   case FAVORITED_STATUSES_FETCH_FAIL:
   case FAVORITED_STATUSES_EXPAND_FAIL:
-    return state.setIn(['favourites', 'isLoading'], false);
+    return state.setIn(['favorites', 'isLoading'], false);
   case FAVORITED_STATUSES_FETCH_SUCCESS:
-    return normalizeList(state, 'favourites', action.statuses, action.next);
+    return normalizeList(state, 'favorites', action.statuses, action.next);
   case FAVORITED_STATUSES_EXPAND_SUCCESS:
-    return appendToList(state, 'favourites', action.statuses, action.next);
-  case FAVOURITE_SUCCESS:
-    return prependOneToList(state, 'favourites', action.status);
-  case UNFAVOURITE_SUCCESS:
-    return removeOneFromList(state, 'favourites', action.status);
+    return appendToList(state, 'favorites', action.statuses, action.next);
+  case FAVORITE_SUCCESS:
+    return prependOneToList(state, 'favorites', action.status);
+  case UNFAVORITE_SUCCESS:
+    return removeOneFromList(state, 'favorites', action.status);
   case PIN_SUCCESS:
     return prependOneToList(state, 'pins', action.status);
   case UNPIN_SUCCESS:
diff --git a/app/javascript/gabsocial/reducers/statuses.js b/app/javascript/gabsocial/reducers/statuses.js
index 885cc221..af1faf24 100644
--- a/app/javascript/gabsocial/reducers/statuses.js
+++ b/app/javascript/gabsocial/reducers/statuses.js
@@ -1,8 +1,8 @@
 import {
   REBLOG_REQUEST,
   REBLOG_FAIL,
-  FAVOURITE_REQUEST,
-  FAVOURITE_FAIL,
+  FAVORITE_REQUEST,
+  FAVORITE_FAIL,
 } from '../actions/interactions';
 import {
   STATUS_MUTE_SUCCESS,
@@ -35,9 +35,9 @@ export default function statuses(state = initialState, action) {
     return importStatus(state, action.status);
   case STATUSES_IMPORT:
     return importStatuses(state, action.statuses);
-  case FAVOURITE_REQUEST:
+  case FAVORITE_REQUEST:
     return state.setIn([action.status.get('id'), 'favourited'], true);
-  case FAVOURITE_FAIL:
+  case FAVORITE_FAIL:
     return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);
   case REBLOG_REQUEST:
     return state.setIn([action.status.get('id'), 'reblogged'], true);
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index d39de041..b7c26634 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -345,7 +345,7 @@ body {
   fill: #21cf7a;
 }
 
-.fillcolorSecondary {
+.fillColorSecondary {
   fill: #666;
 }