Progress

2020-03-02 17:26:25 -05:00 · 2020-03-02 17:26:25 -05:00 · 0df3c073a5
parent c6aa4e08a1
commit 0df3c073a5
43 changed files with 602 additions and 719 deletions
--- 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
--- 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,
-  };
-};
+  }
+}
--- 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,
--- 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,
--- a/app/javascript/gabsocial/assets/search_alt_icon.js
+++ 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
--- a/app/javascript/gabsocial/components/account.js
+++ 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>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/account/account.js
+++ b/app/javascript/gabsocial/components/account/account.js
@ -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>
-    )
-  }
-
-}
--- a/app/javascript/gabsocial/components/account/account.scss
+++ b/app/javascript/gabsocial/components/account/account.scss
@ -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;
-  }
-}
--- a/app/javascript/gabsocial/components/account/index.js
+++ b/app/javascript/gabsocial/components/account/index.js
@ -1 +0,0 @@
-export { default } from './account'
--- 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>
              ))
            }
--- 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>
--- 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':
--- a/app/javascript/gabsocial/components/modal/focal_point_modal.js
+++ b/app/javascript/gabsocial/components/modal/focal_point_modal.js
@ -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>
-    );
-  }
-
-}
--- 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
@ -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);
-  }
-}
--- 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,
--- 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'
--- a/app/javascript/gabsocial/components/panel/search_filter_panel.js
+++ 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>
+    )
+  }
+}
--- 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>
--- 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',
--- 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({
--- 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)}
--- 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>
--- 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') &&
--- 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))
--- 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} />
--- 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'
--- 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}>
--- 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} /> */}
--- 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>
-    );
+    )
  }

 }
--- 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));
  },
--- 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." />}
+      />
+    )
  }

 }
--- 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>
--- 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>
--- a/app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js
+++ 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
+  }
+
+}
--- 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;
--- 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>
-    );
+    )
  }

 }
--- 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>
      )
    }
--- 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} />
--- 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}
--- 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>
    )
--- 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:
--- 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);
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@ -345,7 +345,7 @@ body {
  fill: #21cf7a;
 }

-.fillcolorSecondary {
+.fillColorSecondary {
  fill: #666;
 }