From 1c98dd283ea0eaed6c0a1822541c5c48b67d483b Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Sat, 8 Feb 2020 01:12:01 -0500
Subject: [PATCH] Progress

---
 app/javascript/gabsocial/common.js            |   1 -
 .../gabsocial/components/account/account.js   | 121 +++----
 .../assets/{gab_logo => }/gab_logo.js         |   2 -
 .../components/assets/gab_logo/gab_logo.scss  |   9 -
 .../components/assets/gab_logo/index.js       |   1 -
 .../autosuggest_account.js                    |   2 -
 .../autosuggest_emoji/autosuggest_emoji.js    |   2 -
 .../autosuggest_textbox.js                    |  31 +-
 .../gabsocial/components/avatar/avatar.js     |  42 +--
 .../avatar_overlay/avatar_overlay.js          |   2 -
 .../gabsocial/components/badge/badge.js       |  25 --
 .../gabsocial/components/badge/badge.scss     |  23 --
 .../gabsocial/components/badge/index.js       |   1 -
 .../bundle_column_error.js                    |   2 -
 .../bundle_modal_error/bundle_modal_error.js  |   2 -
 .../gabsocial/components/button/button.js     |   2 +-
 .../gabsocial/components/column/column.js     |   2 -
 .../column_back_button/column_back_button.js  |   2 -
 .../components/column_header/column_header.js |   2 -
 .../column_header/home_column_header.js       |   2 -
 .../column_header_setting_button.js           |   2 -
 .../column_indicator/column_indicator.js      |   2 -
 .../column_inline_form/column_inline_form.js  |   2 -
 .../components/column_link/column_link.js     |   2 -
 .../column_settings_heading.js                |   2 -
 .../column_subheading/column_subheading.js    |   2 -
 .../gabsocial/components/display_name.js      |  36 ++
 .../components/display_name/display_name.js   |  27 --
 .../components/display_name/display_name.scss |  16 -
 .../components/display_name/index.js          |   1 -
 .../gabsocial/components/domain/domain.js     |   2 -
 .../components/dropdown_menu/dropdown_menu.js |   2 -
 .../error_boundary/error_boundary.js          |   2 -
 .../extended_video_player.js                  |   2 -
 .../floating_action_button.js                 |   2 -
 .../components/footer_bar/footer_bar.js       |   2 -
 app/javascript/gabsocial/components/header.js | 332 ++++++++----------
 .../gabsocial/components/icon/icon.js         |   1 -
 .../components/icon_button/icon_button.js     |  58 +--
 .../components/image_loader/image_loader.js   |   2 -
 .../intersection_observer_article.js          |   2 -
 .../intersection_observer_article.scss        |   2 +-
 .../gabsocial/components/link_footer.js       |   3 +-
 .../components/load_more/load_more.js         |   2 -
 .../components/media_gallery/media_gallery.js |   2 -
 .../focal_point_modal/focal_point_modal.js    |   2 -
 .../modal/hotkeys_modal/hotkeys_modal.js      |   2 -
 .../modal/media_modal/media_modal.js          |   2 -
 .../unauthorized_modal/unauthorized_modal.js  |   2 -
 .../modal/video_modal/video_modal.js          |   2 -
 .../components/modal_base/modal_base.js       |   2 -
 .../components/modal_loading/modal_loading.js |   2 -
 .../notification_counter.js                   |   2 -
 .../gabsocial/components/page_layout.js       |   4 +-
 .../components/panel/groups_panel.js          | 154 ++++++++
 .../components/panel/panel_layout.js          |  18 +-
 .../components/panel/progress_panel.js        |   1 -
 .../gabsocial/components/panel/promo_panel.js |  85 -----
 .../components/panel/trends_panel.js          |  22 +-
 .../components/panel/who_to_follow_panel.js   |  21 +-
 .../gabsocial/components/poll/poll.js         |   2 -
 .../{progress_bar => }/progress_bar.js        |   0
 .../components/progress_bar/index.js          |   1 -
 .../scrollable_list/scrollable_list.js        |   2 -
 .../gabsocial/components/search/search.js     |  26 +-
 .../components/search_popout/search_popout.js |   2 -
 .../setting_toggle/setting_toggle.js          |   1 -
 .../gabsocial/components/status/status.js     | 115 +++---
 .../status_action_bar/status_action_bar.js    | 155 +++++---
 .../status_check_box/status_check_box.js      |   2 -
 .../status_content/status_content.js          |  68 ++--
 .../components/status_quote/status_quote.js   |   2 -
 .../timeline_compose_block.js                 |   8 +-
 .../timeline_queue_button_header.js           |   2 -
 .../components/toggle_switch/toggle_switch.js |   2 -
 .../gabsocial/components/trending_item.js     |  54 +++
 .../components/trending_item/index.js         |   1 -
 .../components/trending_item/trending_item.js |  49 ---
 .../trending_item/trending_item.scss          |  55 ---
 .../components/upload_area/upload_area.js     |   2 -
 .../gabsocial/components/user_panel.js        | 154 ++++++++
 .../gabsocial/components/user_panel/index.js  |   1 -
 .../components/user_panel/user_panel.js       |  95 -----
 .../components/user_panel/user_panel.scss     | 125 -------
 .../components/verified_icon/index.js         |   1 -
 .../components/verified_icon/verified_icon.js |  13 -
 .../verified_icon/verified_icon.scss          |  28 --
 .../zoomable_image/zoomable_image.js          |   2 -
 .../account_gallery/account_gallery.js        |   2 -
 .../components/media_item/media_item.js       |   2 -
 .../components/header/header.js               |   2 -
 .../components/inner_header/index.js          |   2 +-
 .../components/inner_header/inner_header.js   |   2 -
 .../components/moved_note/moved_note.js       |   2 -
 .../profile_info_panel/profile_info_panel.js  |   2 -
 .../character_counter/character_counter.js    |   2 -
 .../components/compose_extra_button.js        |  71 ++++
 .../components/compose_form/compose_form.js   |  81 ++---
 .../emoji_picker_dropdown.js                  |   2 -
 .../navigation_bar/navigation_bar.js          |   2 -
 .../compose/components/poll_button.js         |  62 ++++
 .../compose/components/poll_button/index.js   |   1 -
 .../components/poll_button/poll_button.js     |  53 ---
 .../compose/components/poll_form/poll_form.js |   2 -
 .../privacy_dropdown.js                       | 186 +++++-----
 .../components/privacy_dropdown/index.js      |   1 -
 .../privacy_dropdown/privacy_dropdown.scss    | 101 ------
 .../reply_indicator/reply_indicator.js        |   2 -
 .../components/schedule_post_dropdown.js      |  89 +++--
 .../compose/components/spoiler_button.js      |  50 +++
 .../components/text_icon_button/index.js      |   1 -
 .../text_icon_button/text_icon_button.js      |  33 --
 .../text_icon_button/text_icon_button.scss    |  32 --
 .../compose/components/upload/upload.js       |   2 -
 .../compose/components/upload_button.js       |  87 +++++
 .../compose/components/upload_button/index.js |   1 -
 .../components/upload_button/upload_button.js |  89 -----
 .../upload_button/upload_button.scss          |   5 -
 .../components/upload_form/upload_form.js     |   2 -
 .../upload_progress/upload_progress.js        |   2 -
 .../compose/components/warning/warning.js     |   2 -
 .../gabsocial/features/compose/compose.js     |   2 -
 .../containers/poll_button_container.js       |  23 --
 .../containers/privacy_dropdown_container.js  |  23 --
 .../schedule_post_dropdown_container.js       |  21 --
 .../containers/spoiler_button_container.js    |  25 --
 .../containers/upload_button_container.js     |  18 -
 .../account_authorize/account_authorize.js    |   2 -
 .../features/groups/sidebar_panel/index.js    |  47 ---
 .../features/groups/sidebar_panel/item.js     |  43 ---
 .../gabsocial/features/home_timeline/index.js |   3 -
 .../features/introduction/introduction.js     |   2 -
 .../list_adder/components/list/list.js        |   2 -
 .../features/list_adder/list_adder.js         |   2 -
 .../features/list_editor/list_editor.js       |   2 -
 .../components/notification/notification.js   |   2 -
 .../features/status/components/card/card.js   |   2 -
 .../detailed_status/detailed_status.js        |   2 -
 .../detailed_status_action_bar.js             |   2 -
 app/javascript/gabsocial/features/ui/ui.js    |   3 -
 app/javascript/gabsocial/pages/group_page.js  |   2 -
 app/javascript/gabsocial/pages/home_page.js   |  40 +--
 app/javascript/gabsocial/utils/numbers.js     |  13 +-
 app/javascript/styles/global.css              |  66 +++-
 package.json                                  |   6 +-
 yarn.lock                                     |  12 -
 146 files changed, 1462 insertions(+), 1951 deletions(-)
 rename app/javascript/gabsocial/components/assets/{gab_logo => }/gab_logo.js (97%)
 delete mode 100644 app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss
 delete mode 100644 app/javascript/gabsocial/components/assets/gab_logo/index.js
 delete mode 100644 app/javascript/gabsocial/components/badge/badge.js
 delete mode 100644 app/javascript/gabsocial/components/badge/badge.scss
 delete mode 100644 app/javascript/gabsocial/components/badge/index.js
 create mode 100644 app/javascript/gabsocial/components/display_name.js
 delete mode 100644 app/javascript/gabsocial/components/display_name/display_name.js
 delete mode 100644 app/javascript/gabsocial/components/display_name/display_name.scss
 delete mode 100644 app/javascript/gabsocial/components/display_name/index.js
 create mode 100644 app/javascript/gabsocial/components/panel/groups_panel.js
 delete mode 100644 app/javascript/gabsocial/components/panel/promo_panel.js
 rename app/javascript/gabsocial/components/{progress_bar => }/progress_bar.js (100%)
 delete mode 100644 app/javascript/gabsocial/components/progress_bar/index.js
 create mode 100644 app/javascript/gabsocial/components/trending_item.js
 delete mode 100644 app/javascript/gabsocial/components/trending_item/index.js
 delete mode 100644 app/javascript/gabsocial/components/trending_item/trending_item.js
 delete mode 100644 app/javascript/gabsocial/components/trending_item/trending_item.scss
 create mode 100644 app/javascript/gabsocial/components/user_panel.js
 delete mode 100644 app/javascript/gabsocial/components/user_panel/index.js
 delete mode 100644 app/javascript/gabsocial/components/user_panel/user_panel.js
 delete mode 100644 app/javascript/gabsocial/components/user_panel/user_panel.scss
 delete mode 100644 app/javascript/gabsocial/components/verified_icon/index.js
 delete mode 100644 app/javascript/gabsocial/components/verified_icon/verified_icon.js
 delete mode 100644 app/javascript/gabsocial/components/verified_icon/verified_icon.scss
 create mode 100644 app/javascript/gabsocial/features/compose/components/compose_extra_button.js
 create mode 100644 app/javascript/gabsocial/features/compose/components/poll_button.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/poll_button/index.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/poll_button/poll_button.js
 rename app/javascript/gabsocial/features/compose/components/{privacy_dropdown => }/privacy_dropdown.js (64%)
 delete mode 100644 app/javascript/gabsocial/features/compose/components/privacy_dropdown/index.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.scss
 create mode 100644 app/javascript/gabsocial/features/compose/components/spoiler_button.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/text_icon_button/index.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.scss
 create mode 100644 app/javascript/gabsocial/features/compose/components/upload_button.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/upload_button/index.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/upload_button/upload_button.js
 delete mode 100644 app/javascript/gabsocial/features/compose/components/upload_button/upload_button.scss
 delete mode 100644 app/javascript/gabsocial/features/compose/containers/poll_button_container.js
 delete mode 100644 app/javascript/gabsocial/features/compose/containers/privacy_dropdown_container.js
 delete mode 100644 app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js
 delete mode 100644 app/javascript/gabsocial/features/compose/containers/spoiler_button_container.js
 delete mode 100644 app/javascript/gabsocial/features/compose/containers/upload_button_container.js
 delete mode 100644 app/javascript/gabsocial/features/groups/sidebar_panel/index.js
 delete mode 100644 app/javascript/gabsocial/features/groups/sidebar_panel/item.js

diff --git a/app/javascript/gabsocial/common.js b/app/javascript/gabsocial/common.js
index 22146c0e..6397c4ae 100644
--- a/app/javascript/gabsocial/common.js
+++ b/app/javascript/gabsocial/common.js
@@ -3,7 +3,6 @@
 import Rails from 'rails-ujs';
 
 export function start() {
-  require('font-awesome/css/font-awesome.css');
   require.context('../images/', true);
 
   try {
diff --git a/app/javascript/gabsocial/components/account/account.js b/app/javascript/gabsocial/components/account/account.js
index d1b92551..a326fecb 100644
--- a/app/javascript/gabsocial/components/account/account.js
+++ b/app/javascript/gabsocial/components/account/account.js
@@ -1,14 +1,13 @@
-import { Fragment } from 'react';
-import { Link } 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/avatar';
-import DisplayName from '../display_name';
-import IconButton from '../icon_button';
-
-import './account.scss';
+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/avatar'
+import DisplayName from '../display_name'
+import IconButton from '../icon_button'
+import Icon from '../icon'
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -18,7 +17,7 @@ const messages = defineMessages({
   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 {
@@ -34,37 +33,36 @@ class Account extends ImmutablePureComponent {
     actionIcon: PropTypes.string,
     actionTitle: PropTypes.string,
     onActionClick: PropTypes.func,
-    displayOnly: PropTypes.bool,
-  };
+  }
 
   handleFollow = () => {
-    this.props.onFollow(this.props.account);
+    this.props.onFollow(this.props.account)
   }
 
   handleBlock = () => {
-    this.props.onBlock(this.props.account);
+    this.props.onBlock(this.props.account)
   }
 
   handleMute = () => {
-    this.props.onMute(this.props.account);
+    this.props.onMute(this.props.account)
   }
 
   handleMuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, true);
+    this.props.onMuteNotifications(this.props.account, true)
   }
 
   handleUnmuteNotifications = () => {
-    this.props.onMuteNotifications(this.props.account, false);
+    this.props.onMuteNotifications(this.props.account, false)
   }
 
   handleAction = () => {
-    this.props.onActionClick(this.props.account);
+    this.props.onActionClick(this.props.account)
   }
 
   render() {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, displayOnly } = this.props;
+    const { account, intl, hidden, onActionClick, actionIcon, actionTitle } = this.props
 
-    if (!account) return null;
+    if (!account) return null
 
     if (hidden) {
       return (
@@ -72,29 +70,29 @@ class Account extends ImmutablePureComponent {
           {account.get('display_name')}
           {account.get('username')}
         </Fragment>
-      );
+      )
     }
 
-    let buttons;
+    let buttons
 
     if (onActionClick && actionIcon) {
-      buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
+      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']);
+      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)} />;
+        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} />;
+        buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />
       } else if (muting) {
-        let hidingNotificationsButton;
+        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} />;
+          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} />;
+          hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />
         }
 
         buttons = (
@@ -102,41 +100,44 @@ class Account extends ImmutablePureComponent {
             <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} />;
+        buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />
       }
     }
 
-    if (displayOnly) {
-      return (
-        <div className='account'>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'>
-                <Avatar account={account} size={36} />
-              </div>
-              <DisplayName account={account} />
-            </div>
-          </div>
-        </div>
-      );
-    }
-
     return (
-      <div className='account'>
-        <div className='account__wrapper'>
-          <Link key={account.get('id')} className='account__display-name' title={account.get('acct')} to={`/${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-            <DisplayName account={account} />
-          </Link>
+      <div className={[styles.default, styles.marginTop5PX, styles.marginBottom15PX].join(' ')}>
+        <div className={[styles.default, styles.flexRow].join(' ')}>
 
-          <div className='account__relationship'>
-            {buttons}
+          <NavLink
+            className={[styles.default, styles.noUnderline].join(' ')}
+            title={account.get('acct')}
+            to={`/${account.get('acct')}`}
+          >
+            <Avatar account={account} size={52} />
+          </NavLink>
+
+          <div className={[styles.default, styles.alignItemsStart, styles.paddingHorizontal10PX].join(' ')}>
+            <NavLink
+              className={[styles.default, styles.noUnderline].join(' ')}
+              title={account.get('acct')}
+              to={`/${account.get('acct')}`}
+            >
+              <DisplayName account={account} />
+            </NavLink>
+            <button className={[styles.default, styles.marginTop5PX, styles.colorBrand, styles.text, styles.cursorPointer, styles.fontSize14PX, styles.circle, styles.border1PX, styles.borderColorBrand, styles.paddingHorizontal20PX, styles.paddingVertical5PX].join(' ')}>
+              {intl.formatMessage(messages.follow)}
+            </button>
           </div>
+
+          <button className={[styles.default, styles.marginLeftAuto, styles.paddingVertical2PX, styles.cursorPointer].join(' ')}>
+            <Icon width='14px' height='14px' />
+          </button>
+
         </div>
       </div>
-    );
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js b/app/javascript/gabsocial/components/assets/gab_logo.js
similarity index 97%
rename from app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js
rename to app/javascript/gabsocial/components/assets/gab_logo.js
index 49274119..f80ab805 100644
--- a/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js
+++ b/app/javascript/gabsocial/components/assets/gab_logo.js
@@ -1,5 +1,3 @@
-import './gab_logo.scss'
-
 const GabLogo = ({
   width = '50px',
   height = '30px',
diff --git a/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss b/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss
deleted file mode 100644
index 0874d5f1..00000000
--- a/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.gab-logo {
-  enable-background: new 0 0 50 30;
-
-  &__path {
-    fill-rule: evenodd;
-    clip-rule: evenodd;
-    fill: $gab-brand-default;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/assets/gab_logo/index.js b/app/javascript/gabsocial/components/assets/gab_logo/index.js
deleted file mode 100644
index e68f094a..00000000
--- a/app/javascript/gabsocial/components/assets/gab_logo/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './gab_logo';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js b/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js
index 441e02b2..6ff06fcb 100644
--- a/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js
+++ b/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js
@@ -4,8 +4,6 @@ import { makeGetAccount } from '../../selectors';
 import Avatar from '../avatar';
 import DisplayName from '../display_name';
 
-import './autosuggest_account.scss';
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
diff --git a/app/javascript/gabsocial/components/autosuggest_emoji/autosuggest_emoji.js b/app/javascript/gabsocial/components/autosuggest_emoji/autosuggest_emoji.js
index 57629f4e..6d08233c 100644
--- a/app/javascript/gabsocial/components/autosuggest_emoji/autosuggest_emoji.js
+++ b/app/javascript/gabsocial/components/autosuggest_emoji/autosuggest_emoji.js
@@ -1,7 +1,5 @@
 import unicodeMapping from '../emoji/emoji_unicode_mapping_light';
 
-import './autosuggest_emoji.scss';
-
 const assetHost = process.env.CDN_HOST || '';
 
 export default class AutosuggestEmoji extends PureComponent {
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
index fd8ebcac..c26d57e9 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
@@ -1,3 +1,4 @@
+import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import classNames from 'classnames';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -7,8 +8,6 @@ import { textAtCursorMatchesToken } from '../../utils/cursor_token_match';
 import AutosuggestAccount from '../autosuggest_account';
 import AutosuggestEmoji from '../autosuggest_emoji';
 
-import './autosuggest_textbox.scss';
-
 export default class AutosuggestTextbox extends ImmutablePureComponent {
 
   static propTypes = {
@@ -198,15 +197,13 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     }
 
     if (textarea) {
-      return [
-        <div className='autosuggest-textarea__wrapper' key='autosuggest-textarea__wrapper'>
-          <div className='autosuggest-textarea'>
-            <label>
-              <span style={{ display: 'none' }}>{placeholder}</span>
-
+      return (
+        <Fragment>
+          <div className={[styles.default].join(' ')}>
+            <div className={[styles.default, styles.marginLeft5PX].join(' ')}>
               <Textarea
                 inputRef={this.setTextbox}
-                className='autosuggest-textarea__textarea'
+                className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineNone, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
                 disabled={disabled}
                 placeholder={placeholder}
                 autoFocus={autoFocus}
@@ -220,16 +217,16 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
                 style={style}
                 aria-autocomplete='list'
               />
-            </label>
+            </div>
+            {children}
           </div>
-          {children}
-        </div>,
-        <div className='autosuggest-textarea__suggestions-wrapper' key='autosuggest-textarea__suggestions-wrapper'>
-          <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
-            {suggestions.map(this.renderSuggestion)}
+          <div className='autosuggest-textarea__suggestions-wrapper'>
+            <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
+              {suggestions.map(this.renderSuggestion)}
+            </div>
           </div>
-        </div>,
-      ];
+        </Fragment>
+      )
     }
 
     return (
diff --git a/app/javascript/gabsocial/components/avatar/avatar.js b/app/javascript/gabsocial/components/avatar/avatar.js
index f18f8ae0..c69496f3 100644
--- a/app/javascript/gabsocial/components/avatar/avatar.js
+++ b/app/javascript/gabsocial/components/avatar/avatar.js
@@ -1,10 +1,8 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { Map as ImmutableMap } from 'immutable';
-import classNames from 'classnames';
-import { autoPlayGif } from '../../initial_state';
-
-import './avatar.scss';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { Map as ImmutableMap } from 'immutable'
+import classNames from 'classnames'
+import { autoPlayGif } from '../../initial_state'
 
 export default class Avatar extends ImmutablePureComponent {
 
@@ -13,57 +11,53 @@ export default class Avatar extends ImmutablePureComponent {
     size: PropTypes.number,
     inline: PropTypes.bool,
     animate: PropTypes.bool,
-  };
+  }
 
   static defaultProps = {
     account: ImmutableMap(),
     animate: autoPlayGif,
     inline: false,
-  };
+  }
 
   state = {
     hovering: false,
     sameImg: this.props.account.get('avatar') === this.props.account.get('avatar_static'),
-  };
+  }
 
   handleMouseEnter = () => {
-    if (this.props.animate || this.state.sameImg) return;
+    if (this.props.animate || this.state.sameImg) return
 
-    this.setState({ hovering: true });
+    this.setState({ hovering: true })
   }
 
   handleMouseLeave = () => {
-    if (this.props.animate || this.state.sameImg) return;
+    if (this.props.animate || this.state.sameImg) return
 
-    this.setState({ hovering: false });
+    this.setState({ hovering: false })
   }
 
   render () {
-    const { account, size, animate, inline } = this.props;
-    const { hovering } = this.state;
+    const { account, size, animate, inline } = this.props
+    const { hovering } = this.state
 
     // : TODO : remove inline and change all avatars to be sized using css
     const style = !size ? {} : {
       width: `${size}px`,
       height: `${size}px`,
-    };
+    }
 
-    const theSrc = account.get((hovering || animate) ? 'avatar' : 'avatar_static');
-
-    const className = classNames('account__avatar', {
-      'account__avatar--inline': inline,
-    });
+    const theSrc = account.get((hovering || animate) ? 'avatar' : 'avatar_static')
 
     return (
       <img
-        className={className}
+        className={[styles.default, styles.circle].join(' ')}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
         src={theSrc}
         alt={account.get('display_name')}
       />
-    );
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/components/avatar_overlay/avatar_overlay.js b/app/javascript/gabsocial/components/avatar_overlay/avatar_overlay.js
index 2aa1b043..203caa8d 100644
--- a/app/javascript/gabsocial/components/avatar_overlay/avatar_overlay.js
+++ b/app/javascript/gabsocial/components/avatar_overlay/avatar_overlay.js
@@ -2,8 +2,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { autoPlayGif } from '../../initial_state';
 
-import './avatar_overlay.scss';
-
 export default class AvatarOverlay extends ImmutablePureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/badge/badge.js b/app/javascript/gabsocial/components/badge/badge.js
deleted file mode 100644
index e499a4b7..00000000
--- a/app/javascript/gabsocial/components/badge/badge.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import './badge.scss';
-
-export default class Badge extends PureComponent {
-
-  static propTypes = {
-    type: PropTypes.oneOf([
-      'pro',
-      'donor',
-      'investor',
-    ]).isRequired,
-  };
-
-  render() {
-    const { type } = this.props;
-
-    if (!type) return null;
-
-    return (
-      <span className={`badge badge--${type}`}>
-        {type.toUpperCase()}
-      </span>
-    );
-  }
-
-};
diff --git a/app/javascript/gabsocial/components/badge/badge.scss b/app/javascript/gabsocial/components/badge/badge.scss
deleted file mode 100644
index 53989ada..00000000
--- a/app/javascript/gabsocial/components/badge/badge.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.badge {
-  text-transform: uppercase;
-  padding: 2px 6px;
-  border-radius: 2px;
-  margin: 0 5px 5px 0;
-
-  @include text-sizing(12px, 600, 1, center);
-
-  &--pro {
-    background-color: blueviolet;
-    color: #fff;
-  }
-
-  &--investor {
-    background-color: gold;
-    color: #000;
-  }
-
-  &--donor {
-    background-color: lightgreen;
-    color: #000;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/badge/index.js b/app/javascript/gabsocial/components/badge/index.js
deleted file mode 100644
index 039cec48..00000000
--- a/app/javascript/gabsocial/components/badge/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './badge';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js b/app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
index 4f79fd4f..fa3c0270 100644
--- a/app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
+++ b/app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
@@ -3,8 +3,6 @@ import Column from '../column';
 import { ColumnHeader } from '../column_header';
 import IconButton from '../icon_button';
 
-import './bundle_column_error.scss';
-
 const messages = defineMessages({
   title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
   body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' },
diff --git a/app/javascript/gabsocial/components/bundle_modal_error/bundle_modal_error.js b/app/javascript/gabsocial/components/bundle_modal_error/bundle_modal_error.js
index 0fb3a841..799b62b5 100644
--- a/app/javascript/gabsocial/components/bundle_modal_error/bundle_modal_error.js
+++ b/app/javascript/gabsocial/components/bundle_modal_error/bundle_modal_error.js
@@ -1,8 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import IconButton from '../icon_button';
 
-import './bundle_modal_error.scss';
-
 const messages = defineMessages({
   error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
   retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
diff --git a/app/javascript/gabsocial/components/button/button.js b/app/javascript/gabsocial/components/button/button.js
index 1a84732e..7dc13c9a 100644
--- a/app/javascript/gabsocial/components/button/button.js
+++ b/app/javascript/gabsocial/components/button/button.js
@@ -56,10 +56,10 @@ export default class Button extends PureComponent {
       colorWhite: 1,
       circle: 1,
       cursorPointer: 1,
-      width100PC: 1,
       textAlignCenter: 1,
       paddingVertical10PX: 1,
       paddingHorizontal15PX: 1,
+      width100PC: block,
       backgroundColorBrand: !hovering,
       backgroundColorBrandDark: hovering,
     })
diff --git a/app/javascript/gabsocial/components/column/column.js b/app/javascript/gabsocial/components/column/column.js
index be2133e7..83be09cc 100644
--- a/app/javascript/gabsocial/components/column/column.js
+++ b/app/javascript/gabsocial/components/column/column.js
@@ -2,8 +2,6 @@ import { isMobile } from '../../utils/is_mobile';
 import { ColumnHeader } from '../column_header';
 import ColumnBackButton from '../column_back_button';
 
-import './column.scss';
-
 export default class Column extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/column_back_button/column_back_button.js b/app/javascript/gabsocial/components/column_back_button/column_back_button.js
index 698b8844..d1438cb2 100644
--- a/app/javascript/gabsocial/components/column_back_button/column_back_button.js
+++ b/app/javascript/gabsocial/components/column_back_button/column_back_button.js
@@ -2,8 +2,6 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Icon from '../icon';
 
-import './column_back_button.scss';
-
 export default class ColumnBackButton extends PureComponent {
 
   static contextTypes = {
diff --git a/app/javascript/gabsocial/components/column_header/column_header.js b/app/javascript/gabsocial/components/column_header/column_header.js
index 437aca48..2286eeda 100644
--- a/app/javascript/gabsocial/components/column_header/column_header.js
+++ b/app/javascript/gabsocial/components/column_header/column_header.js
@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import { injectIntl, defineMessages } from 'react-intl';
 import Icon from '../icon';
 
-import './column_header.scss';
-
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
   hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
diff --git a/app/javascript/gabsocial/components/column_header/home_column_header.js b/app/javascript/gabsocial/components/column_header/home_column_header.js
index 6e6032c5..6a1c0a84 100644
--- a/app/javascript/gabsocial/components/column_header/home_column_header.js
+++ b/app/javascript/gabsocial/components/column_header/home_column_header.js
@@ -7,8 +7,6 @@ import { createSelector } from 'reselect';
 import { fetchLists } from '../../actions/lists';
 import Icon from '../icon';
 
-import './column_header.scss';
-
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
   hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
diff --git a/app/javascript/gabsocial/components/column_header_setting_button/column_header_setting_button.js b/app/javascript/gabsocial/components/column_header_setting_button/column_header_setting_button.js
index 953828aa..68a40416 100644
--- a/app/javascript/gabsocial/components/column_header_setting_button/column_header_setting_button.js
+++ b/app/javascript/gabsocial/components/column_header_setting_button/column_header_setting_button.js
@@ -2,8 +2,6 @@ import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import Icon from '../icon';
 
-import './column_header_setting_button.scss';
-
 export default class ColumnHeaderSettingButton extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/column_indicator/column_indicator.js b/app/javascript/gabsocial/components/column_indicator/column_indicator.js
index 1e8e7eeb..a6222298 100644
--- a/app/javascript/gabsocial/components/column_indicator/column_indicator.js
+++ b/app/javascript/gabsocial/components/column_indicator/column_indicator.js
@@ -1,8 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import Column from '../column';
 
-import './column_indicator.scss';
-
 const messages = defineMessages({
   loading: { id: 'loading_indicator.label', defaultMessage: 'Loading...' },
   missing: { id: 'missing_indicator.sublabel', defaultMessage: 'This resource could not be found.' },
diff --git a/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js b/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js
index d84313d5..8fabb6fd 100644
--- a/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js
+++ b/app/javascript/gabsocial/components/column_inline_form/column_inline_form.js
@@ -1,7 +1,5 @@
 import Button from '../button';
 
-import './column_inline_form.scss';
-
 export default class ColumnInlineForm extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/column_link/column_link.js b/app/javascript/gabsocial/components/column_link/column_link.js
index 2c50b022..a2b8e546 100644
--- a/app/javascript/gabsocial/components/column_link/column_link.js
+++ b/app/javascript/gabsocial/components/column_link/column_link.js
@@ -1,8 +1,6 @@
 import { Link } from 'react-router-dom';
 import Icon from '../../components/icon';
 
-import './column_link.scss';
-
 export default class ColumnLink extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.js b/app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.js
index da124b76..057b97a2 100644
--- a/app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.js
+++ b/app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.js
@@ -1,5 +1,3 @@
-import './column_settings_heading.scss';
-
 export default class ColumnSettingsHeading extends PureComponent {
   static propTypes = {
     heading: PropTypes.object.isRequired,
diff --git a/app/javascript/gabsocial/components/column_subheading/column_subheading.js b/app/javascript/gabsocial/components/column_subheading/column_subheading.js
index 5e892e32..d996d995 100644
--- a/app/javascript/gabsocial/components/column_subheading/column_subheading.js
+++ b/app/javascript/gabsocial/components/column_subheading/column_subheading.js
@@ -1,5 +1,3 @@
-import './column_subheading.scss';
-
 export default class ColumnSubheading extends PureComponent {
   static propTypes = {
     text: PropTypes.string.isRequired,
diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
new file mode 100644
index 00000000..be28471d
--- /dev/null
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -0,0 +1,36 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from './icon';
+
+export default class DisplayName extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+  };
+
+  render () {
+    const { account } = this.props;
+
+    return (
+      <span className={[styles.default, styles.flexRow, styles.maxWidth100PC, styles.alignItemsCenter].join(' ')}>
+        <bdi className={[styles.text, styles.whiteSpaceNoWrap, styles.textOverflowEllipsis].join(' ')}>
+          <strong
+            className={[styles.text, styles.overflowWrapBreakWord, styles.whiteSpaceNoWrap, styles.fontSize15PX, styles.fontWeightBold, styles.colorBlack, styles.lineHeight125, styles.marginRight2PX].join(' ')}
+            dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
+          />
+        </bdi>
+        {
+          account.get('is_verified') &&
+          <Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Verified Account' />
+          /*<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='PRO' />
+          <Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Donor' />
+          <Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Investor' />*/
+        }
+        <span className={[styles.text, styles.displayFlex, styles.flexNormal, styles.flexShrink1, styles.fontSize15PX, styles.overflowWrapBreakWord, styles.textOverflowEllipsis, styles.marginLeft5PX, styles.colorSubtle, styles.fontWeightNormal, styles.lineHeight125].join(' ')}>
+          @{account.get('acct')}
+        </span>
+      </span>
+    );
+  }
+
+}
diff --git a/app/javascript/gabsocial/components/display_name/display_name.js b/app/javascript/gabsocial/components/display_name/display_name.js
deleted file mode 100644
index fe7bc18b..00000000
--- a/app/javascript/gabsocial/components/display_name/display_name.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import VerifiedIcon from '../verified_icon';
-
-import './display_name.scss';
-
-export default class DisplayName extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-  };
-
-  render () {
-    const { account } = this.props;
-
-    return (
-      <span className='display-name'>
-        <bdi>
-          <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
-        </bdi>
-        {account.get('is_verified') && <VerifiedIcon />}
-        <span className='display-name__account'>@{account.get('acct')}</span>
-      </span>
-    );
-  }
-
-}
diff --git a/app/javascript/gabsocial/components/display_name/display_name.scss b/app/javascript/gabsocial/components/display_name/display_name.scss
deleted file mode 100644
index cf9c25fb..00000000
--- a/app/javascript/gabsocial/components/display_name/display_name.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.display-name {
-  display: block;
-  max-width: 100%;
-
-  @include text-overflow(break-word);
-
-  &__html {
-    font-weight: 600;
-    font-size: 15px;
-  }
-
-  &__account {
-    margin-left: 5px;
-    font-size: 15px;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/display_name/index.js b/app/javascript/gabsocial/components/display_name/index.js
deleted file mode 100644
index cfe17326..00000000
--- a/app/javascript/gabsocial/components/display_name/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './display_name';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/domain/domain.js b/app/javascript/gabsocial/components/domain/domain.js
index bd8563bf..425075ae 100644
--- a/app/javascript/gabsocial/components/domain/domain.js
+++ b/app/javascript/gabsocial/components/domain/domain.js
@@ -1,8 +1,6 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import IconButton from '../icon_button';
 
-import './domain.scss';
-
 const messages = defineMessages({
   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
 });
diff --git a/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js b/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js
index 913fca5d..1aee3168 100644
--- a/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js
+++ b/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js
@@ -6,8 +6,6 @@ import spring from 'react-motion/lib/spring';
 import Motion from '../../features/ui/util/optional_motion';
 import IconButton from '../icon_button';
 
-import './dropdown_menu.scss';
-
 const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
 let id = 0;
 
diff --git a/app/javascript/gabsocial/components/error_boundary/error_boundary.js b/app/javascript/gabsocial/components/error_boundary/error_boundary.js
index d615c97b..ca3be1ed 100644
--- a/app/javascript/gabsocial/components/error_boundary/error_boundary.js
+++ b/app/javascript/gabsocial/components/error_boundary/error_boundary.js
@@ -1,7 +1,5 @@
 import { FormattedMessage } from 'react-intl';
 
-import './error_boundary.scss';
-
 export default class ErrorBoundary extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/extended_video_player/extended_video_player.js b/app/javascript/gabsocial/components/extended_video_player/extended_video_player.js
index ecb104fb..ed22c44b 100644
--- a/app/javascript/gabsocial/components/extended_video_player/extended_video_player.js
+++ b/app/javascript/gabsocial/components/extended_video_player/extended_video_player.js
@@ -1,5 +1,3 @@
-import './extended_video_player.scss';
-
 export default class ExtendedVideoPlayer extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js
index b634748c..ce84b6f8 100644
--- a/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js
@@ -1,7 +1,5 @@
 import ComposeIcon from './assets/compose_icon';
 
-import './floating_action_button.scss';
-
 export default class FloatingActionButton extends Component {
   static propTypes = {
     onClick: PropTypes.func.isRequired,
diff --git a/app/javascript/gabsocial/components/footer_bar/footer_bar.js b/app/javascript/gabsocial/components/footer_bar/footer_bar.js
index 201bbce2..f1efde9e 100644
--- a/app/javascript/gabsocial/components/footer_bar/footer_bar.js
+++ b/app/javascript/gabsocial/components/footer_bar/footer_bar.js
@@ -3,8 +3,6 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import NotificationCounter from '../notification_counter';
 import { me } from '../../initial_state';
 
-import './footer_bar.scss';
-
 const links = [
   <NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
     <i className='tabs-bar__link__icon home'/>
diff --git a/app/javascript/gabsocial/components/header.js b/app/javascript/gabsocial/components/header.js
index 21813030..7e49ffae 100644
--- a/app/javascript/gabsocial/components/header.js
+++ b/app/javascript/gabsocial/components/header.js
@@ -1,14 +1,11 @@
-import { Link, NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
 import classNames from 'classnames/bind'
-import Avatar from './avatar'
 import Button from './button'
 import Icon from './icon'
-import DisplayName from './display_name'
 import { closeSidebar } from '../actions/sidebar'
-import { shortNumberFormat } from '../utils/numbers'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 // import ProgressPanel from './progress_panel'
@@ -87,18 +84,6 @@ class Header extends ImmutablePureComponent {
     })
   }
 
-  onMouseEnterLinkFooterItem = (i) => {
-    this.setState({
-      hoveringItemIndex: i,
-    })
-  }
-
-  onMouseLeaveLinkFooterItem = () => {
-    this.setState({
-      hoveringItemIndex: null,
-    })
-  }
-
   handleSidebarClose = () => {
     this.props.onClose()
     this.setState({
@@ -119,44 +104,73 @@ class Header extends ImmutablePureComponent {
     //   'sidebar-menu__root--visible': sidebarOpen,
     // })
 
-    const cx = classNames.bind(styles)
-
     const moreIcon = moreOpen ? 'minus' : 'plus'
     const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
 
-    const sidebarItems = [
+    const menuItems = [
       {
-        name: 'Home',
+        title: 'Home',
         icon: <NotificationsIcon />,
         to: '/',
       },
       {
-        name: 'Notifications',
+        title: 'Notifications',
         icon: <NotificationsIcon />,
         to: '/notifications',
       },
       {
-        name: 'Groups',
+        title: 'Groups',
         icon: <NotificationsIcon />,
         to: '/groups',
       },
       {
-        name: 'Lists',
+        title: 'Lists',
         icon: <NotificationsIcon />,
         to: '/lists',
       },
       {
-        name: 'Chat',
+        title: 'Chat',
         icon: <NotificationsIcon />,
         to: '/',
       },
       {
-        name: 'Trends',
+        title: 'Profile',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+    ]
+
+    const shortcutItems = [
+      {
+        title: 'Meme Group',
         icon: <NotificationsIcon />,
         to: '/',
       },
       {
-        name: 'Profile',
+        title: 'Andrew',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+    ]
+
+    const exploreItems = [
+      {
+        title: 'Trends',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        title: 'Dissenter',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        title: 'Apps',
+        icon: <NotificationsIcon />,
+        to: '/',
+      },
+      {
+        title: 'Shop',
         icon: <NotificationsIcon />,
         to: '/',
       },
@@ -166,186 +180,116 @@ class Header extends ImmutablePureComponent {
       <header role='banner' className={[styles.default, styles.flexGrow1, styles.z3, styles.alignItemsEnd].join(' ')}>
         <div className={[styles.default, styles.width250PX].join(' ')}>
           <div className={[styles.default, styles.positionFixed, styles.top0, styles.height100PC].join(' ')}>
-            <div className={[styles.default, styles.height100PC, styles.width250PX, styles.paddingHorizontal20PX].join(' ')}>
+            <div className={[styles.default, styles.height100PC, styles.width250PX, styles.paddingHorizontal20PX, styles.marginVertical10PX].join(' ')}>
               <h1 className={[styles.default].join(' ')}>
-                <NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHoizontal10PX].join(' ')}>
+                <NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHorizontal10PX].join(' ')}>
                   <GabLogo />
                 </NavLink>
               </h1>
-              <nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC].join(' ')}>
+              <div>
+                { /* profile card */}
+              </div>
+              <nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC, styles.marginBottom15PX].join(' ')}>
+                <span className={[styles.default, styles.text, styles.colorSubtle, styles.displayBlock, styles.fontSize13PX, styles.paddingVertical5PX, styles.marginTop10PX, styles.paddingHorizontal10PX, styles.fontWeight500].join(' ')}>Menu</span>
                 {
-                  sidebarItems.map((sidebarItem, i) => {
-                    const containerClasses = cx({
-                      default: 1,
-                      maxWidth100PC: 1,
-                      flexRow: 1,
-                      paddingVertical10PX: 1,
-                      paddingHoizontal10PX: 1,
-                      circle: 1,
-                      alignItemsCenter: 1,
-                      backgroundColorBrandLightOpaque: hoveringItemIndex === i,
-                    })
-
-                    const textClasses = cx({
-                      default: 1,
-                      fontWeightBold: 1,
-                      fontSize19PX: 1,
-                      text: 1,
-                      colorBrand: hoveringItemIndex === i,
-                      colorBlack: hoveringItemIndex !== i,
-                    })
-
-                    const iconClasses = cx({
-                      fillColorBrand: hoveringItemIndex === i,
-                      fillColorBlack: hoveringItemIndex !== i,
-                    })
-
-                    return (
-                      <NavLink
-                        to={sidebarItem.to}
-                        key={`header-nav-item-${i}`}
-                        onMouseEnter={() => this.onMouseEnterLinkFooterItem(i)}
-                        onMouseLeave={() => this.onMouseLeaveLinkFooterItem(i)}
-                        className={[styles.default, styles.noUnderline, styles.cursorPointer, styles.width100PC, styles.alignItemsStart, styles.flexGrow1].join(' ')}
-                      >
-                        <div className={containerClasses}>
-                          <div className={[styles.default]}>
-                            <NotificationsIcon className={iconClasses}/>
-                          </div>
-                          <div className={[styles.default, styles.paddingHorizontal20PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}>
-                            <span className={textClasses}>
-                              {sidebarItem.name}
-                            </span>
-                          </div>
-                        </div>
-                      </NavLink>
-                    )
-                  })
+                  menuItems.map((menuItem, i) => (
+                    <HeaderMenuItem {...menuItem} key={`header-item-menu-${i}`} />
+                  ))
+                }
+                <span className={[styles.default, styles.text, styles.colorSubtle, styles.displayBlock, styles.fontSize13PX, styles.paddingVertical5PX, styles.marginTop10PX, styles.paddingHorizontal10PX, styles.fontWeight500].join(' ')}>Shortcuts</span>
+                {
+                  shortcutItems.map((shortcutItem, i) => (
+                    <HeaderMenuItem {...shortcutItem} key={`header-item-shortcut-${i}`} />
+                  ))
+                }
+                <span className={[styles.default, styles.text, styles.colorSubtle, styles.displayBlock, styles.fontSize13PX, styles.paddingVertical5PX, styles.marginTop10PX, styles.paddingHorizontal10PX, styles.fontWeight500].join(' ')}>Explore</span>
+                {
+                  exploreItems.map((exploreItem, i) => (
+                    <HeaderMenuItem {...exploreItem} key={`header-item-explore-${i}`} />
+                  ))
                 }
               </nav>
-              <Button className={[styles.paddingVertical15PX, styles.marginVertical5PX, styles.fontSize15PX, styles.fontWeightBold].join(' ')}>Gab</Button>
+              <Button className={[styles.paddingVertical15PX, styles.fontSize15PX, styles.fontWeightBold].join(' ')}>Gab</Button>
             </div>
           </div>
         </div>
       </header>
     )
-
-    // return (
-    //   <div className={classes}>
-    //     <div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} />
-    //     <div className='sidebar-menu'>
-
-    //       <div className='sidebar-menu-header'>
-    //         <span className='sidebar-menu-header__title'>Account Info</span>
-    //         <IconButton title='close' onClick={this.handleSidebarClose} icon='close' className='sidebar-menu-header__btn' />
-    //       </div>
-
-    //       <div className='sidebar-menu__content'>
-
-    //         <div className='sidebar-menu-profile'>
-    //           <div className='sidebar-menu-profile__avatar'>
-    //             <Link to={`/${acct}`} title={acct} onClick={this.handleSidebarClose}>
-    //               <Avatar account={account} />
-    //             </Link>
-    //           </div>
-    //           <div className='sidebar-menu-profile__name'>
-    //             <DisplayName account={account} />
-    //           </div>
-
-    //           <div className='sidebar-menu-profile__stats'>
-    //             <NavLink className='sidebar-menu-profile-stat' to={`/${acct}/followers`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('followers_count'))}>
-    //               <strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
-    //               <span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.followers)}</span>
-    //             </NavLink>
-    //             <NavLink className='sidebar-menu-profile-stat' to={`/${acct}/following`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('following_count'))}>
-    //               <strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('following_count'))}</strong>
-    //               <span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.follows)}</span>
-    //             </NavLink>
-    //           </div>
-
-    //         </div>
-
-    //         <div className='sidebar-menu__section'>
-    //           { /* <ProgressPanel /> */ }
-    //         </div>
-
-    //         <div className='sidebar-menu__section sidebar-menu__section--borderless'>
-    //           <NavLink className='sidebar-menu-item' to={`/${acct}`} onClick={this.handleSidebarClose}>
-    //             <Icon id='user' fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>
-    //           </NavLink>
-    //           {
-    //             !isPro &&
-    //             <a className='sidebar-menu-item' href='https://pro.gab.com'>
-    //               <Icon id='arrow-up' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.pro)}</span>
-    //             </a>
-    //           }
-    //           <a className='sidebar-menu-item' href='https://shop.dissenter.com/category/donations'>
-    //             <Icon id='heart' fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span>
-    //           </a>
-    //           <a className='sidebar-menu-item' href='https://shop.dissenter.com'>
-    //             <Icon id='shopping-cart' fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span>
-    //           </a>
-    //           <a className='sidebar-menu-item' href='https://trends.gab.com'>
-    //             <Icon id='signal' fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.trends)}</span>
-    //           </a>
-    //           <NavLink className='sidebar-menu-item' to='/search' onClick={this.handleSidebarClose}>
-    //             <Icon id='search' fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.search)}</span>
-    //           </NavLink>
-    //           <a className='sidebar-menu-item' href='/settings/preferences'>
-    //             <Icon id='cog' fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span>
-    //           </a>
-    //         </div>
-
-    //         <div className='sidebar-menu__section'>
-    //           <div className='sidebar-menu-item' onClick={this.toggleMore} role='button'>
-    //             <Icon id={moreIcon} fixedWidth />
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.more)}</span>
-    //           </div>
-    //           <div style={moreContainerStyle}>
-    //             <NavLink className='sidebar-menu-item' to='/lists' onClick={this.handleSidebarClose}>
-    //               <Icon id='list' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.lists)}</span>
-    //             </NavLink>
-    //             <NavLink className='sidebar-menu-item' to='/follow_requests' onClick={this.handleSidebarClose}>
-    //               <Icon id='user-plus' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.follow_requests)}</span>
-    //             </NavLink>
-    //             <NavLink className='sidebar-menu-item' to='/blocks' onClick={this.handleSidebarClose}>
-    //               <Icon id='ban' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.blocks)}</span>
-    //             </NavLink>
-    //             <NavLink className='sidebar-menu-item' to='/domain_blocks' onClick={this.handleSidebarClose}>
-    //               <Icon id='sitemap' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.domain_blocks)}</span>
-    //             </NavLink>
-    //             <NavLink className='sidebar-menu-item' to='/mutes' onClick={this.handleSidebarClose}>
-    //               <Icon id='times-circle' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.mutes)}</span>
-    //             </NavLink>
-    //             <a className='sidebar-menu-item' href='/filters'>
-    //               <Icon id='filter' fixedWidth />
-    //               <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span>
-    //             </a>
-    //           </div>
-    //         </div>
-
-    //         <div className='sidebar-menu__section'>
-    //           <a  className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
-    //             <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
-    //           </a>
-    //         </div>
-
-    //       </div>
-    //     </div>
-    //   </div>
-    // )
   }
 
 }
+
+class HeaderMenuItem extends PureComponent {
+  static propTypes = {
+    to: PropTypes.string,
+    active: PropTypes.bool,
+    icon: PropTypes.node,
+    title: PropTypes.string,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { to, active, icon, title } = this.props
+    const { hovering } = this.state
+
+    const cx = classNames.bind(styles)
+
+    const shouldShowActive = hovering || active
+
+    const containerClasses = cx({
+      default: 1,
+      maxWidth100PC: 1,
+      width100PC: 1,
+      flexRow: 1,
+      paddingVertical5PX: 1,
+      paddingHorizontal10PX: 1,
+      alignItemsCenter: 1,
+      // border1PX: shouldShowActive,
+      // borderColorSubtle: shouldShowActive,
+      backgroundWhite: shouldShowActive,
+    })
+
+    const textClasses = cx({
+      default: 1,
+      fontWeightNormal: 1,
+      fontSize15PX: 1,
+      text: 1,
+      colorBrand: shouldShowActive,
+      colorBlack: !hovering && !active,
+    })
+
+    const iconClasses = cx({
+      fillColorBrand: shouldShowActive,
+      fillColorBlack: !hovering && !active,
+    })
+
+    return (
+      <NavLink
+        to={to}
+        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseLeave={() => this.handleOnMouseLeave()}
+        className={[styles.default, styles.noUnderline, styles.cursorPointer, styles.width100PC, styles.alignItemsStart, styles.flexGrow1].join(' ')}
+      >
+        <div className={containerClasses}>
+          <div className={[styles.default]}>
+            <NotificationsIcon className={iconClasses} width='16px' height='16px' />
+          </div>
+          <div className={[styles.default, styles.paddingHorizontal10PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.displayInline].join(' ')}>
+            <span className={textClasses}>{title}</span>
+          </div>
+        </div>
+      </NavLink>
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/icon.js b/app/javascript/gabsocial/components/icon/icon.js
index 445f1e82..e0977920 100644
--- a/app/javascript/gabsocial/components/icon/icon.js
+++ b/app/javascript/gabsocial/components/icon/icon.js
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 
-import './icon.scss';
 export default class Icon extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/icon_button/icon_button.js b/app/javascript/gabsocial/components/icon_button/icon_button.js
index 88e35f3d..50e83481 100644
--- a/app/javascript/gabsocial/components/icon_button/icon_button.js
+++ b/app/javascript/gabsocial/components/icon_button/icon_button.js
@@ -3,8 +3,6 @@ import spring from 'react-motion/lib/spring';
 import Motion from '../../features/ui/util/optional_motion';
 import Icon from '../icon';
 
-import './icon_button.scss';
-
 export default class IconButton extends PureComponent {
 
   static propTypes = {
@@ -23,6 +21,8 @@ export default class IconButton extends PureComponent {
     overlay: PropTypes.bool,
     tabIndex: PropTypes.string,
     text: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
   };
 
   static defaultProps = {
@@ -64,6 +64,8 @@ export default class IconButton extends PureComponent {
       tabIndex,
       title,
       text,
+      width,
+      height,
     } = this.props;
 
     const classes = classNames(className, 'icon-button', {
@@ -73,45 +75,21 @@ export default class IconButton extends PureComponent {
       overlayed: overlay,
     });
 
-    // Perf optimization: avoid unnecessary <Motion> components unless we actually need to animate.
-    if (!animate) {
-      return (
-        <button
-          aria-label={title}
-          aria-pressed={pressed}
-          aria-expanded={expanded}
-          title={title}
-          className={classes}
-          onClick={this.handleClick}
-          style={style}
-          tabIndex={tabIndex}
-          disabled={disabled}
-        >
-          <Icon id={icon} fixedWidth aria-hidden='true' />
-          {!!text && text}
-        </button>
-      );
-    }
-
     return (
-      <Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
-        {({ rotate }) => (
-          <button
-            aria-label={title}
-            aria-pressed={pressed}
-            aria-expanded={expanded}
-            title={title}
-            className={classes}
-            onClick={this.handleClick}
-            style={style}
-            tabIndex={tabIndex}
-            disabled={disabled}
-          >
-            <Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />
-            {!!text && text}
-          </button>
-        )}
-      </Motion>
+      <button
+        aria-label={title}
+        aria-pressed={pressed}
+        aria-expanded={expanded}
+        title={title}
+        className={classes}
+        onClick={this.handleClick}
+        style={style}
+        tabIndex={tabIndex}
+        disabled={disabled}
+      >
+        <Icon id={icon} fixedWidth aria-hidden='true' width={width} height={height} />
+        {!!text && text}
+      </button>
     );
   }
 
diff --git a/app/javascript/gabsocial/components/image_loader/image_loader.js b/app/javascript/gabsocial/components/image_loader/image_loader.js
index 0442f174..be67c793 100644
--- a/app/javascript/gabsocial/components/image_loader/image_loader.js
+++ b/app/javascript/gabsocial/components/image_loader/image_loader.js
@@ -2,8 +2,6 @@ import classNames from 'classnames';
 import { LoadingBar } from 'react-redux-loading-bar';
 import ZoomableImage from '../zoomable_image';
 
-import './image_loader.scss';
-
 export default class ImageLoader extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.js b/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.js
index 48fb6657..d66028ab 100644
--- a/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.js
+++ b/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.js
@@ -2,8 +2,6 @@ import { is } from 'immutable';
 import scheduleIdleTask from '../../utils/schedule_idle_task';
 import getRectFromEntry from '../../utils/get_rect_from_entry';
 
-import './intersection_observer_article.scss';
-
 // Diff these props in the "rendered" state
 const updateOnPropsForRendered = ['id', 'index', 'listLength'];
 // Diff these props in the "unrendered" state
diff --git a/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.scss b/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.scss
index 766b9bbf..71162dc9 100644
--- a/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.scss
+++ b/app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.scss
@@ -1,4 +1,4 @@
 article {
   // TEMPORARY - content of columns may be significantly altered
-  background: $gab-background-container;
+  // background: $gab-background-container;
 }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/link_footer.js b/app/javascript/gabsocial/components/link_footer.js
index 65f75f7f..d524f0db 100644
--- a/app/javascript/gabsocial/components/link_footer.js
+++ b/app/javascript/gabsocial/components/link_footer.js
@@ -109,7 +109,7 @@ class LinkFooter extends PureComponent {
     ]
 
     return (
-      <div className={styles.default}>
+      <div className={[styles.default, styles.paddingHorizontal10PX].join(' ')}>
         <nav aria-label='Footer' role='navigation' className={[styles.default, styles.flexWrap, styles.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
@@ -121,6 +121,7 @@ class LinkFooter extends PureComponent {
                 marginVertical5PX: 1,
                 paddingRight15PX: 1,
                 cursorPointer: 1,
+                backgroundTransparent: 1,
                 colorSubtle: i !== hoveringItemIndex,
                 noUnderline: i !== hoveringItemIndex,
                 colorBlack: i === hoveringItemIndex,
diff --git a/app/javascript/gabsocial/components/load_more/load_more.js b/app/javascript/gabsocial/components/load_more/load_more.js
index 70633591..86aca8cb 100644
--- a/app/javascript/gabsocial/components/load_more/load_more.js
+++ b/app/javascript/gabsocial/components/load_more/load_more.js
@@ -2,8 +2,6 @@ import { injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 import Icon from '../icon';
 
-import './load_more.scss';
-
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
 });
diff --git a/app/javascript/gabsocial/components/media_gallery/media_gallery.js b/app/javascript/gabsocial/components/media_gallery/media_gallery.js
index a1505480..b4504b03 100644
--- a/app/javascript/gabsocial/components/media_gallery/media_gallery.js
+++ b/app/javascript/gabsocial/components/media_gallery/media_gallery.js
@@ -9,8 +9,6 @@ import { isIOS } from '../../utils/is_mobile';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
 import IconButton from '../icon_button';
 
-import './media_gallery.scss';
-
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
   warning: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
diff --git a/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js b/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js
index 4ba389cc..49e3fd62 100644
--- a/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js
+++ b/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js
@@ -5,8 +5,6 @@ import { changeUploadCompose } from '../../../actions/compose';
 import { getPointerPosition } from '../../../utils/element_position';
 import ImageLoader from '../../image_loader';
 
-import './focal_point_modal.scss';
-
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
 });
diff --git a/app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.js b/app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.js
index 2ad6ae3c..8fd17864 100644
--- a/app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.js
+++ b/app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.js
@@ -2,8 +2,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import IconButton from '../../icon_button';
 
-import './hotkeys_modal.scss';
-
 const messages = defineMessages({
   heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
diff --git a/app/javascript/gabsocial/components/modal/media_modal/media_modal.js b/app/javascript/gabsocial/components/modal/media_modal/media_modal.js
index 48776369..38ab998f 100644
--- a/app/javascript/gabsocial/components/modal/media_modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal/media_modal.js
@@ -9,8 +9,6 @@ import IconButton from '../../icon_button';
 import ImageLoader from '../../image_loader';
 import Icon from '../../icon';
 
-import './media_modal.scss';
-
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
diff --git a/app/javascript/gabsocial/components/modal/unauthorized_modal/unauthorized_modal.js b/app/javascript/gabsocial/components/modal/unauthorized_modal/unauthorized_modal.js
index f40450b1..a67e4fd0 100644
--- a/app/javascript/gabsocial/components/modal/unauthorized_modal/unauthorized_modal.js
+++ b/app/javascript/gabsocial/components/modal/unauthorized_modal/unauthorized_modal.js
@@ -2,8 +2,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import IconButton from '../../icon_button';
 
-import './unauthorized_modal.scss';
-
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   signup: {id: 'unauthorized_modal.title', defaultMessage: 'Sign up for Gab' },
diff --git a/app/javascript/gabsocial/components/modal/video_modal/video_modal.js b/app/javascript/gabsocial/components/modal/video_modal/video_modal.js
index c76ced8b..ece8b038 100644
--- a/app/javascript/gabsocial/components/modal/video_modal/video_modal.js
+++ b/app/javascript/gabsocial/components/modal/video_modal/video_modal.js
@@ -3,8 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import Video from '../../../features/video';
 
-import './video_modal.scss';
-
 export const previewState = 'previewVideoModal';
 
 export default class VideoModal extends ImmutablePureComponent {
diff --git a/app/javascript/gabsocial/components/modal_base/modal_base.js b/app/javascript/gabsocial/components/modal_base/modal_base.js
index 06deff72..b056b513 100644
--- a/app/javascript/gabsocial/components/modal_base/modal_base.js
+++ b/app/javascript/gabsocial/components/modal_base/modal_base.js
@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import { openModal } from '../../actions/modal';
 import { cancelReplyCompose } from '../../actions/compose';
 
-import './modal_base.scss';
-
 const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
 });
diff --git a/app/javascript/gabsocial/components/modal_loading/modal_loading.js b/app/javascript/gabsocial/components/modal_loading/modal_loading.js
index bb8a1932..78d75a2f 100644
--- a/app/javascript/gabsocial/components/modal_loading/modal_loading.js
+++ b/app/javascript/gabsocial/components/modal_loading/modal_loading.js
@@ -1,7 +1,5 @@
 import ColumnIndicator from '../column_indicator';
 
-import './modal_loading.scss';
-
 // Keep the markup in sync with <BundleModalError />
 // (make sure they have the same dimensions)
 export default class ModalLoading extends PureComponent {
diff --git a/app/javascript/gabsocial/components/notification_counter/notification_counter.js b/app/javascript/gabsocial/components/notification_counter/notification_counter.js
index 66cde8f0..6519e8fc 100644
--- a/app/javascript/gabsocial/components/notification_counter/notification_counter.js
+++ b/app/javascript/gabsocial/components/notification_counter/notification_counter.js
@@ -1,7 +1,5 @@
 import { shortNumberFormat } from '../../utils/numbers';
 
-import './notification_counter.scss';
-
 const mapStateToProps = state => ({
   count: state.getIn(['notifications', 'unread']),
 });
diff --git a/app/javascript/gabsocial/components/page_layout.js b/app/javascript/gabsocial/components/page_layout.js
index 297f1475..a7538b60 100644
--- a/app/javascript/gabsocial/components/page_layout.js
+++ b/app/javascript/gabsocial/components/page_layout.js
@@ -11,11 +11,11 @@ export default class PageLayout extends PureComponent {
     const right = layout.RIGHT || null
 
     return (
-      <div className={[styles.default, styles.flexRow, styles.width100PC].join(' ')}>
+      <div className={[styles.default, styles.flexRow, styles.width100PC, styles.backgroundColorSubtle3].join(' ')}>
         <Header />
         <main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.flexRow].join(' ')}>
           <div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
-            <div className={[styles.default, styles.width660PX, styles.z1, styles.borderColorSubtle, styles.borderLeft1PX, styles.borderRight1PX].join(' ')}>
+            <div className={[styles.default, styles.width670PX, styles.z1].join(' ')}>
               <div className={styles.default}>
                 {children}
               </div>
diff --git a/app/javascript/gabsocial/components/panel/groups_panel.js b/app/javascript/gabsocial/components/panel/groups_panel.js
new file mode 100644
index 00000000..12de6bda
--- /dev/null
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -0,0 +1,154 @@
+import { Fragment } from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl } from 'react-intl'
+import { NavLink } from 'react-router-dom'
+import classNames from 'classnames/bind'
+import { shortNumberFormat } from '../../utils/numbers'
+import PanelLayout from './panel_layout'
+import Icon from '../icon'
+
+const messages = defineMessages({
+  title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' },
+  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
+  all: { id: 'groups.sidebar-panel.all', defaultMessage: 'All' },
+  new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
+  no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
+})
+
+const mapStateToProps = (state) => ({
+  groupIds: state.getIn(['group_lists', 'member']),
+})
+
+export default @connect(mapStateToProps)
+@injectIntl
+class GroupSidebarPanel extends ImmutablePureComponent {
+  static propTypes = {
+    groupIds: ImmutablePropTypes.list,
+  }
+
+  render() {
+    const { intl, groupIds } = this.props
+    const count = groupIds.count()
+
+    if (count === 0) return null
+
+    return (
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        button={(
+          <NavLink
+            to='/groups/browse/member'
+            className={[styles.default, styles.fontWeightBold, styles.text, styles.colorBrand, styles.fontSize13PX, styles.noUnderline].join(' ')}
+          >
+            {intl.formatMessage(messages.all)}
+          </NavLink>
+        )}
+      >
+        <div className={styles.default}>
+          {
+            groupIds.slice(0, 6).map(groupId => (
+              <GroupPanelItem key={`group-panel-item-${groupId}`} id={groupId} />
+            ))
+          }
+          {
+            count > 6 &&
+            <NavLink
+              to='/groups/browse/member'
+              className={[styles.default, styles.noUnderline, styles.paddingVertical5PX, styles.marginRightAuto, styles.marginTop5PX, styles.marginLeftAuto, styles.cursorPointer, styles.circle, styles.text, styles.displayFlex, styles.colorBrand].join(' ')}
+            >
+              {intl.formatMessage(messages.show_all)}
+            </NavLink>
+          }
+        </div>
+      </PanelLayout>
+    )
+  }
+}
+
+const mapStateToProps2 = (state, { id }) => ({
+  group: state.getIn(['groups', id]),
+  relationships: state.getIn(['group_relationships', id]),
+})
+
+@connect(mapStateToProps2)
+@injectIntl
+class GroupPanelItem extends ImmutablePureComponent {
+  static propTypes = {
+    group: ImmutablePropTypes.map,
+    relationships: ImmutablePropTypes.map,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { intl, group, relationships } = this.props
+    const { hovering } = this.state
+
+    if (!relationships) return null
+
+    const unreadCount = relationships.get('unread_count')
+
+    const cx = classNames.bind(styles)
+
+    const titleClasses = cx({
+      default: 1,
+      text: 1,
+      displayFlex: 1,
+      colorBrand: 1,
+      fontSize14PX: 1,
+      fontWeightBold: 1,
+      lineHeight15: 1,
+      underline: hovering,
+    })
+
+    return (
+      <NavLink
+        to={`/groups/${group.get('id')}`}
+        className={[styles.default, styles.noUnderline, styles.marginTop5PX, styles.overflowHidden, styles.radiusSmall, styles.marginBottom10PX, styles.border1PX, styles.borderColorSubtle].join(' ')}
+        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseLeave={() => this.handleOnMouseLeave()}
+      >
+        <div className={[styles.default, styles.height122PX].join(' ')}>
+          <img
+            src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg'
+            alt={group.get('title')}
+            className={[styles.default, styles.objectFitCover, styles.height122PX, styles.width100PC].join(' ')}
+          />
+        </div>
+        <div className={[styles.default, styles.paddingHorizontal10PX, styles.marginVertical5PX].join(' ')}>
+          <span className={titleClasses}>
+            {group.get('title')}
+          </span>
+          <span className={[styles.default, styles.text, styles.alignItemsCenter, styles.displayFlex, styles.flexRow, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightNormal, styles.lineHeight15].join(' ')}>
+            {
+              unreadCount > 0 &&
+              <Fragment>
+                {shortNumberFormat(unreadCount)}
+                &nbsp;
+                {intl.formatMessage(messages.new_statuses)}
+              </Fragment>
+            }
+            {
+              unreadCount === 0 &&
+              <Fragment>
+                {intl.formatMessage(messages.no_recent_activity)}
+              </Fragment>
+            }
+            <Icon className={styles.marginLeftAuto} width='10px' height='10px' />
+          </span>
+        </div>
+      </NavLink>
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/panel/panel_layout.js b/app/javascript/gabsocial/components/panel/panel_layout.js
index c59808a8..6b5dcb33 100644
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -1,28 +1,32 @@
 import classNames from 'classnames/bind'
-import Icon from '../icon'
 
 export default class PanelLayout extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
-    icon: PropTypes.string,
     children: PropTypes.node,
     hasBackground: PropTypes.boolean,
+    button: PropTypes.node,
   }
 
   render() {
-    const { title, subtitle, icon, hasBackground, children } = this.props
+    const { title, subtitle, button, hasBackground, children } = this.props
 
     return (
-      <aside className={[styles.default, styles.backgroundSubtle, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX].join(' ')}>
+      <aside className={[styles.default, styles.backgroundWhite, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX, styles.borderColorSubtle, styles.border1PX].join(' ')}>
         {
           (title || subtitle) &&
           <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderBottom1PX].join(' ')}>
             <div className={[styles.default, styles.flexRow, styles.alignItemsCenter].join(' ')}>
-              {icon && <Icon id={icon} height='16px' width='16px' className={[styles.default, styles.marginRight10PX].join(' ')} />}
-              <span className={[styles.default, styles.text, styles.fontWeightExtraBold, styles.colorBlack, styles.fontSize19PX].join(' ')}>{title}</span>
+              <h1 className={[styles.default, styles.text, styles.fontWeightBold, styles.colorBlack, styles.fontSize16PX].join(' ')}>{title}</h1>
+              {
+                !!button &&
+                <div className={[styles.default, styles.marginLeftAuto].join(' ')}>
+                  {button}
+                </div>
+              }
             </div>
-            {subtitle && <span className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.marginTop5PX].join(' ')}>{subtitle}</span>}
+            {subtitle && <h2 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightBold, styles.marginTop5PX].join(' ')}>{subtitle}</h2>}
           </div>
         }
         <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
diff --git a/app/javascript/gabsocial/components/panel/progress_panel.js b/app/javascript/gabsocial/components/panel/progress_panel.js
index 8fb26c2f..b41d48ed 100644
--- a/app/javascript/gabsocial/components/panel/progress_panel.js
+++ b/app/javascript/gabsocial/components/panel/progress_panel.js
@@ -10,7 +10,6 @@ export default class ProgressPanel extends PureComponent {
       <PanelLayout
         title="Gab's Operational Expenses"
         subtitle="We are 100% funded by you"
-        icon="comments"
         hasBackground
       >
         <ProgressBar progress={monthlyExpensesComplete}/>
diff --git a/app/javascript/gabsocial/components/panel/promo_panel.js b/app/javascript/gabsocial/components/panel/promo_panel.js
deleted file mode 100644
index 06176791..00000000
--- a/app/javascript/gabsocial/components/panel/promo_panel.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
-import { me } from '../../initial_state';
-import Icon from '../icon'
-import PanelLayout from './panel_layout'
-
-const messages = defineMessages({
-  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-  donation: { id: 'promo.donation', defaultMessage: 'Make a Donation' },
-  store: { id: 'promo.store', defaultMessage: 'Store - Buy Merch' },
-  apps: { id: 'promo.gab_apps', defaultMessage: 'Gab Apps' },
-})
-
-const mapStateToProps = state => {
-  return {
-    isPro: state.getIn(['accounts', me, 'is_pro']),
-  };
-};
-
-export default
-@injectIntl
-@connect(mapStateToProps)
-class PromoPanel extends PureComponent {
-
-  static propTypes = {
-    isPro: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-  }
-
-  render() {
-    const { isPro, intl } = this.props
-
-    const cx = classNames.bind(styles)
-
-    const items = [
-      {
-        text: intl.formatMessage(messages.pro),
-        href: 'https://pro.gab.com',
-        icon: 'arrow-up',
-        conditions: isPro,
-        highlighted: true,
-      },
-      {
-        text: intl.formatMessage(messages.donation),
-        href: 'https://shop.dissenter.com/category/donations',
-        icon: 'heart',
-      },
-      {
-        text: intl.formatMessage(messages.store),
-        href: 'https://shop.dissenter.com',
-        icon: 'shopping-cart',
-      },
-      {
-        text: intl.formatMessage(messages.apps),
-        href: 'https://apps.gab.com',
-        icon: 'th',
-      }
-    ]
-
-    return (
-      <PanelLayout>
-        {
-          items.map((item, i) => {
-            if (item.conditions === false) return null
-
-            const classes = cx({
-              default: true,
-              borderColorSubtle: i !== items.length - 1,
-              borderBottom1PX: i !== items.length - 1,
-            })
-
-            return (
-              <div key={`promo-panel-item-${i}`} className={classes}>
-                <a className={[styles.default, styles.text, styles.colorBlack, styles.noUnderline, styles.paddingVertical10PX, styles.alignItemsCenter].join(' ')} href={item.href}>
-                  <Icon id={item.icon} height='13px' width='13px' className={[styles.flex, styles.marginRight10PX].join(' ')} />
-                  {item.text}
-                </a>
-              </div>
-            )
-          })
-        }
-      </PanelLayout>
-    )
-  }
-}
diff --git a/app/javascript/gabsocial/components/panel/trends_panel.js b/app/javascript/gabsocial/components/panel/trends_panel.js
index 4d35ebf2..8cdf9dd5 100644
--- a/app/javascript/gabsocial/components/panel/trends_panel.js
+++ b/app/javascript/gabsocial/components/panel/trends_panel.js
@@ -6,7 +6,7 @@ import TrendingItem from '../../components/trending_item';
 import PanelLayout from './panel_layout';
 
 const messages = defineMessages({
-  title: { id:'trends.title', defaultMessage: 'Trends' },
+  title: { id:'trends.title', defaultMessage: 'Trends for you' },
 });
 
 const mapStateToProps = state => ({
@@ -36,16 +36,22 @@ class TrendsPanel extends ImmutablePureComponent {
   render() {
     const { intl, trends } = this.props;
 
-    if (trends.isEmpty()) {
-      return null;
-    }
+    // !!! TESTING !!!
+    // if (trends.isEmpty()) {
+    //   return null;
+    // }
 
     return (
-      <PanelLayout id='hashtag' title={intl.formatMessage(messages.title)}>
-        <div className='panel__list'>
-          {trends && trends.map(hashtag => (
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        <div className={styles.default}>
+          { /* trends && trends.map(hashtag => (
             <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
-          ))}
+          )) */ }
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
         </div>
       </PanelLayout>
     );
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 7ec26a00..ce010f15 100644
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@@ -7,7 +7,7 @@ import PanelLayout from './panel_layout';
 
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
-  title: { id: 'who_to_follow.title', defaultMessage: 'Who To Follow' },
+  title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
 });
 
 const mapStateToProps = state => ({
@@ -37,15 +37,20 @@ class WhoToFollowPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, suggestions, dismissSuggestion } = this.props;
-
-    if (suggestions.isEmpty()) {
-      return null;
-    }
+    const { intl, /* suggestions, */ dismissSuggestion } = this.props;
+    // : testing!!! :
+    const suggestions = [
+      "1",
+      "1",
+      "1",
+    ]
+    // if (suggestions.isEmpty()) {
+    //   return null;
+    // }
 
     return (
-      <PanelLayout icon='users' title={intl.formatMessage(messages.title)}>
-        <div className='panel__list'>
+      <PanelLayout title={intl.formatMessage(messages.title)}>
+        <div className={styles.default}>
           {suggestions && suggestions.map(accountId => (
             <AccountContainer
               key={accountId}
diff --git a/app/javascript/gabsocial/components/poll/poll.js b/app/javascript/gabsocial/components/poll/poll.js
index a635112e..6decdf6a 100644
--- a/app/javascript/gabsocial/components/poll/poll.js
+++ b/app/javascript/gabsocial/components/poll/poll.js
@@ -10,8 +10,6 @@ import emojify from '../emoji/emoji';
 import RelativeTimestamp from '../relative_timestamp';
 import Button from '../button';
 
-import './poll.scss';
-
 const mapStateToProps = (state, { pollId }) => ({
   poll: state.getIn(['polls', pollId]),
 });
diff --git a/app/javascript/gabsocial/components/progress_bar/progress_bar.js b/app/javascript/gabsocial/components/progress_bar.js
similarity index 100%
rename from app/javascript/gabsocial/components/progress_bar/progress_bar.js
rename to app/javascript/gabsocial/components/progress_bar.js
diff --git a/app/javascript/gabsocial/components/progress_bar/index.js b/app/javascript/gabsocial/components/progress_bar/index.js
deleted file mode 100644
index 4ebb9782..00000000
--- a/app/javascript/gabsocial/components/progress_bar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './progress_bar';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js b/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js
index bd39f7b6..57de3e55 100644
--- a/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js
+++ b/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js
@@ -5,8 +5,6 @@ import IntersectionObserverWrapper from '../../features/ui/util/intersection_obs
 import ColumnIndicator from '../column_indicator';
 import LoadMore from '../load_more';
 
-import './scrollable_list.scss';
-
 const MOUSE_IDLE_DELAY = 300;
 
 export default class ScrollableList extends PureComponent {
diff --git a/app/javascript/gabsocial/components/search/search.js b/app/javascript/gabsocial/components/search/search.js
index 2f944216..bbf2d47d 100644
--- a/app/javascript/gabsocial/components/search/search.js
+++ b/app/javascript/gabsocial/components/search/search.js
@@ -3,8 +3,6 @@ import Overlay from 'react-overlays/lib/Overlay';
 import Icon from '../icon';
 import SearchPopout from '../search_popout';
 
-import './search.scss';
-
 export default class Search extends PureComponent {
 
   static contextTypes = {
@@ -17,7 +15,6 @@ export default class Search extends PureComponent {
     onShow: PropTypes.func.isRequired,
     openInRoute: PropTypes.bool,
     placeholder: PropTypes.string.isRequired,
-    className: PropTypes.string,
     searchTitle: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     onKeyUp: PropTypes.func.isRequired,
@@ -40,32 +37,29 @@ export default class Search extends PureComponent {
   }
 
   render() {
-    const { value, submitted, placeholder, className, searchTitle, onKeyUp, handleClear, handleSubmit, withOverlay, onChange } = this.props;
+    const { value, submitted, placeholder, searchTitle, onKeyUp, handleClear, handleSubmit, withOverlay, onChange } = this.props;
     const { expanded } = this.state;
 
-    const hasValue = value.length > 0 || submitted;
-    const classes = classNames('search', className);
+    const hasValue = value ? value.length > 0 || submitted : 0;
     const iconClass = hasValue ? 'active' : '';
 
     return (
-      <div className={classes}>
-        <label>
-          <span className='invisible'>{placeholder}</span>
+      <div className={[styles.default, styles.backgroundColorSubtle3, styles.positionSticky, styles.justifyContentCenter, styles.top0, styles.z2, styles.height53PX, styles.marginBottom10PX].join(' ')}>
+        <div className={[styles.default, styles.backgroundSubtle2, styles.flexRow, styles.circle, styles.alignItemsCenter].join(' ')}>
+          <Icon id='search' width='18px' height='18px' className={[styles.default, styles.marginLeft15PX, styles.marginRight10PX].join(' ')} />
           <input
-            className='search__input'
+            className={[styles.default, styles.text, styles.lineHeight125, styles.displayBlock, styles.paddingVertical10PX, styles.paddingHorizontal10PX, styles.backgroundTransparent, styles.fontSize15PX, styles.flexGrow1].join(' ')}
             type='text'
-            placeholder={placeholder}
+            placeholder='Search on Gab...'
             value={value}
             onChange={onChange}
             onKeyUp={onKeyUp}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
           />
-        </label>
-
-        <div role='button' tabIndex='0' className='search__icon' onClick={handleClear}>
-          <Icon id='search' className={iconClass} />
-          <Icon id='times-circle' className={iconClass} aria-label={placeholder} />
+          <div role='button' tabIndex='0' className={[styles.default, styles.paddingHorizontal10PX].join(' ')} onClick={handleClear}>
+            <Icon id='times-circle' width='18px' height='18px' className={iconClass} aria-label={placeholder} />
+          </div>
         </div>
 
         {
diff --git a/app/javascript/gabsocial/components/search_popout/search_popout.js b/app/javascript/gabsocial/components/search_popout/search_popout.js
index 67eca3ac..c26a9afb 100644
--- a/app/javascript/gabsocial/components/search_popout/search_popout.js
+++ b/app/javascript/gabsocial/components/search_popout/search_popout.js
@@ -3,8 +3,6 @@ import spring from 'react-motion/lib/spring';
 import Motion from '../../features/ui/util/optional_motion';
 import { searchEnabled } from '../../initial_state';
 
-import './search_popout.scss';
-
 export default class SearchPopout extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/setting_toggle/setting_toggle.js b/app/javascript/gabsocial/components/setting_toggle/setting_toggle.js
index 844802a3..75c9ec77 100644
--- a/app/javascript/gabsocial/components/setting_toggle/setting_toggle.js
+++ b/app/javascript/gabsocial/components/setting_toggle/setting_toggle.js
@@ -2,7 +2,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ToggleSwitch from '../toggle_switch';
 
-import './setting_toggle.scss';
 
 export default class SettingToggle extends ImmutablePureComponent {
 
diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js
index b077261f..220b856b 100644
--- a/app/javascript/gabsocial/components/status/status.js
+++ b/app/javascript/gabsocial/components/status/status.js
@@ -1,4 +1,4 @@
-
+import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -18,8 +18,6 @@ import StatusActionBar from '../status_action_bar';
 import Icon from '../icon';
 import Poll from '../poll';
 
-import './status.scss';
-
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
 import Bundle from '../../features/ui/util/bundle';
@@ -93,6 +91,7 @@ class Status extends ImmutablePureComponent {
     group: ImmutablePropTypes.map,
     promoted: PropTypes.bool,
     onOpenProUpgradeModal: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
   // Avoid checking props that are functions (and whose equality will always
@@ -403,7 +402,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={42} />;
+      statusAvatar = <Avatar account={status.get('account')} size={50} />;
     } else {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
@@ -428,16 +427,13 @@ class Status extends ImmutablePureComponent {
     return (
       <HotKeys handlers={handlers}>
         <div
-          className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, {
-            'status__wrapper-reply': !!status.get('in_reply_to_id'),
-            read: unread === false,
-            focusable: !this.props.muted,
-          })}
+          className={[styles.default, styles.backgroundWhite, styles.radiusSmall, styles.marginBottom15PX, styles.border1PX, styles.borderColorSubtle].join(' ')}
           tabIndex={this.props.muted ? null : 0}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText)}
           ref={this.handleRef}
         >
+
           {prepend}
 
           <div
@@ -448,53 +444,84 @@ class Status extends ImmutablePureComponent {
             })}
             data-id={status.get('id')}
           >
-            <div className='status__info'>
-              <div className='status__info__actions'>
-                <NavLink className='status__display-name' to={`/${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
-                  <div className='status__avatar'>{statusAvatar}</div>
-                  <DisplayName account={status.get('account')} />
-                </NavLink>
-                <Icon id='ellipsis-h' className='status__info__actions__icon'/>
-              </div>
-              <div className='status__info__attributes'>
-                <NavLink to={statusUrl} className='status__relative-time'>
-                  <RelativeTimestamp timestamp={status.get('created_at')} />
-                </NavLink>
-                <span className='status__info__dot-seperator'>•</span>
-                { /* <Icon id='globe' className='status__info__attributes__item'/> */ }
-                <span className='status__info__attributes__item status__info__attributes__item--link'>Memes Group</span>
-                <span className='status__info__dot-seperator'>•</span>
-                <span className='status__info__attributes__item'>Edited</span>
+
+            <div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
+              <div className={[styles.default, styles.flexRow, styles.marginTop5PX].join(' ')}>
+                <div className={[styles.default, styles.marginRight10PX].join(' ')}>{statusAvatar}</div>
+                <div className={[styles.default, styles.alignItemsStart, styles.flexGrow1, styles.marginTop5PX].join(' ')}>
+                  <div className={[styles.default, styles.flexRow, styles.width100PC, styles.alignItemsStart].join(' ')}>
+                    <NavLink
+                      className={[styles.default, styles.flexRow, styles.alignItemsStart, styles.noUnderline].join(' ')}
+                      to={`/${status.getIn(['account', 'acct'])}`}
+                      title={status.getIn(['account', 'acct'])}
+                    >
+                      <DisplayName account={status.get('account')} />
+                    </NavLink>
+                    <Icon id='ellipsis-h' width='14px' height='15px' className={[styles.default, styles.marginLeftAuto].join(' ')} />
+                  </div>
+                  <div className={[styles.default, styles.flexRow, styles.alignItemsCenter, styles.lineHeight15].join(' ')}>
+                    <NavLink
+                      to={statusUrl}
+                      className={[styles.default, styles.text, styles.fontSize13PX, styles.noUnderline, styles.colorSubtle].join(' ')}
+                    >
+                      <RelativeTimestamp timestamp={status.get('created_at')} />
+                    </NavLink>
+                    <span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
+                    <Icon id='globe' width='12px' height='12px' className={[styles.default, styles.displayInline, styles.marginLeft5PX, styles.fillColorSubtle].join(' ')}/>
+
+                    {
+                      status.get('group') &&
+                      <Fragment>
+                        <span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
+                        <NavLink
+                          to={`/groups/${status.getIn(['group', 'id'])}`}
+                          className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorBlack].join(' ')}
+                        >
+                        {status.getIn(['group', 'title'])}
+                        </NavLink>
+                      </Fragment>
+                    }
+
+                    {
+                      status.get('revised_at') !== null &&
+                      <Fragment>
+                        <span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
+                        <button
+                          onClick={() => other.onShowRevisions(status)}
+                          className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}
+                        >
+                          Edited
+                        </button>
+                      </Fragment>
+                    }
+
+                  </div>
+                </div>
               </div>
             </div>
 
-            {((!group && status.get('group')) || status.get('revised_at') !== null) && (
-              <div className='status__meta'>
-                {!group && status.get('group') && <React.Fragment>Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink></React.Fragment>}
-                {status.get('revised_at') !== null && <a onClick={() => other.onShowRevisions(status)}> Edited</a>}
-              </div>
-            )}
+            <div className={[styles.default, styles.paddingHorizontal15PX].join(' ')}>
+              <StatusContent
+                status={status}
+                reblogContent={reblogContent}
+                onClick={this.handleClick}
+                expanded={!status.get('hidden')}
+                onExpandedToggle={this.handleExpandedToggle}
+                collapsable
+              />
+            </div>
 
-            <StatusContent
-              status={status}
-              reblogContent={reblogContent}
-              onClick={this.handleClick}
-              expanded={!status.get('hidden')}
-              onExpandedToggle={this.handleExpandedToggle}
-              collapsable
-            />
-
-            {media}
+            { /* media */ }
 
             { /* status.get('quote') && <StatusQuote
               id={status.get('quote')}
             /> */ }
 
-            {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
+            { /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
               <button className='status__content__read-more-button' onClick={this.handleClick}>
                 <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
               </button>
-            )}
+            ) */ }
 
             <StatusActionBar status={status} account={account} {...other} />
           </div>
diff --git a/app/javascript/gabsocial/components/status_action_bar/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar/status_action_bar.js
index bb684acf..6917d753 100644
--- a/app/javascript/gabsocial/components/status_action_bar/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar/status_action_bar.js
@@ -1,15 +1,13 @@
-
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
+import classNames from 'classnames/bind'
 import { Link } from 'react-router-dom';
 import { openModal } from '../../actions/modal';
 import { me, isStaff } from '../../initial_state';
 import DropdownMenuContainer from '../../containers/dropdown_menu_container';
 import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
-import IconButton from '../icon_button';
-
-import './status_action_bar.scss';
+import Icon from '../icon';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -48,6 +46,77 @@ const mapDispatchToProps = (dispatch) => ({
   },
 });
 
+class StatusActionBarItem extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    icon: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    disabled: PropTypes.bool,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { title, onClick, icon, active, disabled } = this.props
+    const { hovering } = this.state
+
+    const cx = classNames.bind(styles)
+
+    const btnClasses = cx({
+      default: 1,
+      text: 1,
+      fontSize15PX: 1,
+      cursorPointer: 1,
+      displayFlex: 1,
+      justifyContentCenter: 1,
+      flexRow: 1,
+      alignItemsCenter: 1,
+      paddingVertical10PX: 1,
+      paddingHorizontal10PX: 1,
+      width100PC: 1,
+      radiusSmall: 1,
+      backgroundTransparent: !hovering,
+      backgroundSubtle2: hovering,
+      colorBlack: !hovering,
+      colorBrand: hovering,
+    })
+
+    const iconClasses = cx({
+      default: 1,
+      marginRight10PX: 1,
+      fillColorSubtle: !hovering,
+      fillColorBrand: hovering,
+    })
+
+    return (
+      <div className={[styles.default, styles.flexGrow1, styles.paddingHorizontal10PX].join(' ')}>
+        <button
+          className={btnClasses}
+          onClick={onClick}
+          active={active}
+          disabled={disabled}
+          onMouseEnter={() => this.handleOnMouseEnter()}
+          onMouseLeave={() => this.handleOnMouseLeave()}
+          >
+          <Icon width='16px' height='16px' icon={icon} className={iconClasses} />
+          {title}
+        </button>
+      </div>
+    )
+  }
+}
+
 export default @connect(null, mapDispatchToProps)
 @injectIntl
 class StatusActionBar extends ImmutablePureComponent {
@@ -254,7 +323,6 @@ class StatusActionBar extends ImmutablePureComponent {
 
     const reblogCount = status.get('reblogs_count');
     const reblogTitle = !publicStatus ? formatMessage(messages.cannot_reblog) : formatMessage(messages.reblog);
-    const reblogIcon = (status.get('visibility') === 'private') ? 'lock' : 'retweet';
 
     const favoriteCount = status.get('favourites_count');
 
@@ -264,55 +332,36 @@ class StatusActionBar extends ImmutablePureComponent {
 
     const menu = this._makeMenu(publicStatus);
 
+    const items = [
+      {
+        title: formatMessage(messages.favourite),
+        icon: 'star',
+        active: status.get('favourited'),
+        onClick: this.handleFavouriteClick,
+      },
+      {
+        title: replyTitle,
+        icon: 'reply',
+        active: 0,
+        onClick: this.handleReplyClick,
+      },
+      {
+        title: reblogTitle,
+        icon: (status.get('visibility') === 'private') ? 'lock' : 'retweet',
+        disabled: !publicStatus,
+        active: status.get('reblogged'),
+        onClick: this.handleReblogClick,
+      }
+    ]
+
     return (
-      <div className='status-action-bar'>
-        <div className='status-action-bar__items'>
-          <div className='status-action-bar-item'>
-            <IconButton
-              className='status-action-bar-item__btn star-icon'
-              animate
-              active={status.get('favourited')}
-              pressed={status.get('favourited')}
-              title={formatMessage(messages.favourite)}
-              icon='star'
-              onClick={this.handleFavouriteClick}
-              text='Like'
-            />
-            { /* favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span> */ }
-          </div>
-
-          <div className='status-action-bar-item'>
-            <IconButton
-              className='status-action-bar-item__btn'
-              title={replyTitle}
-              icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
-              onClick={this.handleReplyClick}
-              text='Comment'
-            />
-            { /*
-              replyCount !== 0 &&
-              <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='status-action-bar-item__link'>{replyCount}</Link>
-              */
-            }
-          </div>
-
-          <div className='status-action-bar-item'>
-            <IconButton
-              className='status-action-bar-item__btn'
-              disabled={!publicStatus}
-              active={status.get('reblogged')}
-              pressed={status.get('reblogged')}
-              title={reblogTitle}
-              icon={reblogIcon}
-              onClick={this.handleReblogClick}
-              text='Share'
-            />
-            { /* reblogCount !== 0 && <Link to={`/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='status-action-bar-item__link'>{reblogCount}</Link> */ }
-          </div>
-
-          {/*<div className='status__action-bar__counter'>
-            <IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? formatMessage(messages.cannot_quote) : formatMessage(messages.quote)} icon='quote-left' onClick={this.handleQuoteClick} />
-          </div>*/}
+      <div className={[styles.default, styles.marginTop10PX, styles.paddingHorizontal10PX].join(' ')}>
+        <div className={[styles.default, styles.paddingVertical2PX, styles.flexRow, styles.borderTop1PX, styles.borderColorSubtle].join(' ')}>
+          {
+            items.map((item, i) => (
+              <StatusActionBarItem {...item} />
+            ))
+          }
 
           {/*<div className='status-action-bar__dropdown'>
             <DropdownMenuContainer
diff --git a/app/javascript/gabsocial/components/status_check_box/status_check_box.js b/app/javascript/gabsocial/components/status_check_box/status_check_box.js
index 777847c8..5819e904 100644
--- a/app/javascript/gabsocial/components/status_check_box/status_check_box.js
+++ b/app/javascript/gabsocial/components/status_check_box/status_check_box.js
@@ -8,8 +8,6 @@ import Bundle from '../../features/ui/util/bundle';
 import StatusContent from '../status_content';
 import ToggleSwitch from '../toggle_switch';
 
-import './status_check_box.scss';
-
 const mapStateToProps = (state, { id }) => ({
   status: state.getIn(['statuses', id]),
   checked: state.getIn(['reports', 'new', 'status_ids'], ImmutableSet()).includes(id),
diff --git a/app/javascript/gabsocial/components/status_content/status_content.js b/app/javascript/gabsocial/components/status_content/status_content.js
index 7e980647..ca37a9c9 100644
--- a/app/javascript/gabsocial/components/status_content/status_content.js
+++ b/app/javascript/gabsocial/components/status_content/status_content.js
@@ -1,16 +1,22 @@
+import { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import classnames from 'classnames';
 import { isRtl } from '../../utils/rtl';
 import Permalink from '../permalink/permalink';
 import Icon from '../icon';
 
-import './status_content.scss';
-
 const MAX_HEIGHT = 200;
 
-export default class StatusContent extends ImmutablePureComponent {
+const messages = defineMessages({
+  showMore: { id: 'status.show_more', defaultMessage: 'Show more' },
+  showLess: { id: 'status.show_less', defaultMessage: 'Show less' },
+})
+
+export default
+@injectIntl
+class StatusContent extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -23,6 +29,7 @@ export default class StatusContent extends ImmutablePureComponent {
     onExpandedToggle: PropTypes.func,
     onClick: PropTypes.func,
     collapsable: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
   };
 
   state = {
@@ -145,7 +152,7 @@ export default class StatusContent extends ImmutablePureComponent {
   }
 
   render () {
-    const { status } = this.props;
+    const { status, intl } = this.props;
 
     if (status.get('content').length === 0) return null;
 
@@ -164,12 +171,6 @@ export default class StatusContent extends ImmutablePureComponent {
       directionStyle.direction = 'rtl';
     }
 
-    const readMoreButton = (
-      <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
-        <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-      </button>
-    );
-
     if (status.get('spoiler_text').length > 0) {
       let mentionsPlaceholder = '';
 
@@ -179,7 +180,7 @@ export default class StatusContent extends ImmutablePureComponent {
         </Permalink>
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
+      const toggleText = intl.formatMessaeg(hidden ? messages.showMore : messages.showLess);
 
       if (hidden) {
         mentionsPlaceholder = <div>{mentionLinks}</div>;
@@ -199,32 +200,37 @@ export default class StatusContent extends ImmutablePureComponent {
         </div>
       );
     } else if (this.props.onClick) {
-      const output = [
-        <div
-          ref={this.setRef}
-          tabIndex='0'
-          key='content'
-          className={classNames}
-          style={directionStyle}
-          dangerouslySetInnerHTML={content}
-          lang={status.get('language')}
-          onMouseDown={this.handleMouseDown}
-          onMouseUp={this.handleMouseUp}
-        />,
-      ];
+      return (
+        <Fragment>
+          <div
+            ref={this.setRef}
+            tabIndex='0'
+            className={[styles.statusContent].join(' ')}
+            style={directionStyle}
+            dangerouslySetInnerHTML={content}
+            lang={status.get('language')}
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+          />
 
-      if (this.state.collapsed) {
-        output.push(readMoreButton);
-      }
-
-      return output;
+          {
+            this.state.collapsed &&
+            <button
+              className={[styles.default].join(' ')}
+              onClick={this.props.onClick}
+            >
+              <FormattedMessage id='status.read_more' defaultMessage='Read more' />
+            </button>
+          }
+        </Fragment>
+      )
     }
 
     return (
       <div
         tabIndex='0'
         ref={this.setRef}
-        className='status__content'
+        className={[styles.statusContent].join(' ')}
         style={directionStyle}
         dangerouslySetInnerHTML={content}
         lang={status.get('language')}
diff --git a/app/javascript/gabsocial/components/status_quote/status_quote.js b/app/javascript/gabsocial/components/status_quote/status_quote.js
index 57a5e968..36d6777c 100644
--- a/app/javascript/gabsocial/components/status_quote/status_quote.js
+++ b/app/javascript/gabsocial/components/status_quote/status_quote.js
@@ -3,8 +3,6 @@ import StatusContent from '../status_content';
 import DisplayName from '../display_name';
 import { NavLink } from 'react-router-dom';
 
-import './status_quote.scss';
-
 const mapStateToProps = (state, { id }) => ({
   status: state.getIn(['statuses', id]),
   account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
diff --git a/app/javascript/gabsocial/components/timeline_compose_block/timeline_compose_block.js b/app/javascript/gabsocial/components/timeline_compose_block/timeline_compose_block.js
index acef7b8f..338ffe89 100644
--- a/app/javascript/gabsocial/components/timeline_compose_block/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block/timeline_compose_block.js
@@ -4,8 +4,6 @@ import { me } from '../../initial_state';
 import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
 import Avatar from '../avatar';
 
-import './timeline_compose_block.scss';
-
 const mapStateToProps = state => {
   return {
     account: state.getIn(['accounts', me]),
@@ -28,9 +26,9 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     const { account, size, ...rest } = this.props;
 
     return (
-      <div className='timeline-compose-block'>
-        <div className='timeline-compose-block__avatar'>
-          <Avatar account={account} size={size} />
+      <div className={[styles.default, styles.flexRow, styles.radiusSmall, styles.border1PX, styles.borderColorSubtle, styles.backgroundWhite, styles.marginBottom15PX, styles.paddingVertical10PX, styles.paddingHorizontal15PX].join(' ')}>
+        <div className={[styles.default, styles.marginRight10PX].join(' ')}>
+          <Avatar account={account} size={46} />
         </div>
         <ComposeFormContainer {...rest} />
       </div>
diff --git a/app/javascript/gabsocial/components/timeline_queue_button_header/timeline_queue_button_header.js b/app/javascript/gabsocial/components/timeline_queue_button_header/timeline_queue_button_header.js
index e2d95652..932322c0 100644
--- a/app/javascript/gabsocial/components/timeline_queue_button_header/timeline_queue_button_header.js
+++ b/app/javascript/gabsocial/components/timeline_queue_button_header/timeline_queue_button_header.js
@@ -2,8 +2,6 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { shortNumberFormat } from '../../utils/numbers';
 
-import './timeline_queue_button_header.scss';
-
 export default class TimelineQueueButtonHeader extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/toggle_switch/toggle_switch.js b/app/javascript/gabsocial/components/toggle_switch/toggle_switch.js
index 4b765924..63d558da 100644
--- a/app/javascript/gabsocial/components/toggle_switch/toggle_switch.js
+++ b/app/javascript/gabsocial/components/toggle_switch/toggle_switch.js
@@ -1,7 +1,5 @@
 import Toggle from 'react-toggle';
 
-import './toggle_switch.scss';
-
 export default class ToggleSwitch extends PureComponent {
   render() {
     return <Toggle {...this.props} />
diff --git a/app/javascript/gabsocial/components/trending_item.js b/app/javascript/gabsocial/components/trending_item.js
new file mode 100644
index 00000000..519fabe3
--- /dev/null
+++ b/app/javascript/gabsocial/components/trending_item.js
@@ -0,0 +1,54 @@
+import { FormattedMessage } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { NavLink } from 'react-router-dom'
+import classNames from 'classnames/bind'
+import { shortNumberFormat } from '../utils/numbers'
+
+export default class TrendingItem extends ImmutablePureComponent {
+
+  static propTypes = {
+    hashtag: ImmutablePropTypes.map.isRequired,
+  };
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { hashtag } = this.props
+    const { hovering } = this.state
+
+    const cx = classNames.bind(styles)
+    const subtitleClasses = cx({
+      default: 1,
+      text: 1,
+      displayFlex: 1,
+      fontSize13PX: 1,
+      fontWeightNormal: 1,
+      colorSubtle: 1,
+      underline: hovering,
+    })
+
+    return (
+      <NavLink
+        to='/test'
+        className={[styles.default, styles.noUnderline, styles.marginBottom10PX].join(' ')}
+        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseLeave={() => this.handleOnMouseLeave()}
+      >
+        <span className={[styles.default, styles.text, styles.displayFlex, styles.colorBrand, styles.fontSize15PX, styles.fontWeightBold, styles.lineHeight15].join(' ')}>#randomhashtag</span>
+        <span className={subtitleClasses}>10,240 Gabs</span>
+      </NavLink>
+    )
+  }
+
+}
diff --git a/app/javascript/gabsocial/components/trending_item/index.js b/app/javascript/gabsocial/components/trending_item/index.js
deleted file mode 100644
index 7b819fe2..00000000
--- a/app/javascript/gabsocial/components/trending_item/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './trending_item';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/trending_item/trending_item.js b/app/javascript/gabsocial/components/trending_item/trending_item.js
deleted file mode 100644
index 6e250a45..00000000
--- a/app/javascript/gabsocial/components/trending_item/trending_item.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Sparklines, SparklinesCurve } from 'react-sparklines';
-import { FormattedMessage } from 'react-intl';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { shortNumberFormat } from '../../utils/numbers';
-import Permalink from '../permalink';
-
-import './trending_item.scss';
-
-export default class TrendingItem extends ImmutablePureComponent {
-
-  static propTypes = {
-    hashtag: ImmutablePropTypes.map.isRequired,
-  };
-
-  render() {
-    const { hashtag } = this.props;
-
-    return (
-      <div className='trending-item'>
-        <div className='trending-item__text'>
-          <Permalink href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`}>
-            #<span>{hashtag.get('name')}</span>
-          </Permalink>
-
-          <FormattedMessage
-            id='trends.count_by_accounts'
-            defaultMessage='{count} {rawCount, plural, one {person} other {people}} talking'
-            values={{
-              rawCount: hashtag.getIn(['history', 0, 'accounts']),
-              count: <strong>{shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))}</strong>,
-            }}
-          />
-        </div>
-
-        <div className='trending-item__uses'>
-          {shortNumberFormat(hashtag.getIn(['history', 0, 'uses']))}
-        </div>
-
-        <div className='trending-item__sparkline'>
-          <Sparklines width={50} height={28} data={hashtag.get('history').reverse().map(day => day.get('uses')).toArray()}>
-            <SparklinesCurve style={{ fill: 'none' }} />
-          </Sparklines>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/gabsocial/components/trending_item/trending_item.scss b/app/javascript/gabsocial/components/trending_item/trending_item.scss
deleted file mode 100644
index 26a175df..00000000
--- a/app/javascript/gabsocial/components/trending_item/trending_item.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.trending-item {
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  &__name {
-    flex: 1 1 auto;
-    color: $dark-text-color;
-
-    @include text-overflow(nowrap);
-
-    strong {
-      font-weight: 500;
-    }
-
-    a {
-      display: block;
-      color: $darker-text-color;
-      text-decoration: none;
-
-      @include text-sizing(14px, 500);
-      @include text-overflow(nowrap);
-
-      &:hover,
-      &:focus,
-      &:active {
-        span {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  &__uses {
-    flex: 0 0 auto;
-    width: 100px;
-    color: $secondary-text-color;
-
-    @include text-sizing(24px, 500, 36px, center);
-  }
-
-  &__sparkline {
-    flex: 0 0 auto;
-    width: 50px;
-
-    path {
-      stroke: lighten($highlight-text-color, 6%) !important;
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/upload_area/upload_area.js b/app/javascript/gabsocial/components/upload_area/upload_area.js
index a7f9247f..53b1b6d0 100644
--- a/app/javascript/gabsocial/components/upload_area/upload_area.js
+++ b/app/javascript/gabsocial/components/upload_area/upload_area.js
@@ -2,8 +2,6 @@ import { FormattedMessage } from 'react-intl';
 import spring from 'react-motion/lib/spring';
 import Motion from '../../features/ui/util/optional_motion';
 
-import './upload_area.scss';
-
 export default class UploadArea extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/components/user_panel.js b/app/javascript/gabsocial/components/user_panel.js
new file mode 100644
index 00000000..f2581afa
--- /dev/null
+++ b/app/javascript/gabsocial/components/user_panel.js
@@ -0,0 +1,154 @@
+import { NavLink } from 'react-router-dom'
+import { injectIntl, defineMessages } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import classNames from 'classnames/bind'
+import { autoPlayGif, me } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import { shortNumberFormat } from '../utils/numbers'
+import Avatar from './avatar'
+
+const messages = defineMessages({
+  gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' }
+})
+
+const mapStateToProps = state => {
+  const getAccount = makeGetAccount()
+
+  return {
+    account: getAccount(state, me),
+  }
+}
+
+export default @connect(mapStateToProps)
+@injectIntl
+class UserPanel extends ImmutablePureComponent {
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { account, intl } = this.props
+    const displayNameHtml = { __html: account.get('display_name_html') }
+
+    const statItems = [
+      {
+        to: `/${account.get('acct')}`,
+        title: intl.formatMessage(messages.gabs),
+        value: shortNumberFormat(account.get('statuses_count')),
+      },
+      {
+        to: `/${account.get('acct')}/followers`,
+        title: intl.formatMessage(messages.followers),
+        value: shortNumberFormat(account.get('followers_count')),
+      },
+      {
+        to: `/${account.get('acct')}/following`,
+        title: intl.formatMessage(messages.follows),
+        value: shortNumberFormat(account.get('following_count')),
+      },
+    ]
+
+    return (
+      <aside className={[styles.default, styles.backgroundWhite, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX, styles.borderColorSubtle, styles.border1PX].join(' ')}>
+        <div className={[styles.default].join(' ')}>
+
+          <div className={[styles.default, styles.height122PX].join(' ')}>
+            <img
+              className={[styles.default, styles.image, styles.height122PX, styles.width100PC, styles.objectFitCover].join(' ')}
+              src={autoPlayGif ? account.get('header') : account.get('header_static')}
+              alt=''
+            />
+          </div>
+
+          <div className={[styles.default, styles.positionRelative].join(' ')}>
+            <NavLink
+              className={[styles.default, styles.flexRow, styles.paddingVertical10PX, styles.paddingHorizontal15PX, styles.noUnderline].join(' ')}
+              to={`/${account.get('acct')}`}
+            >
+              <div className={[styles.default, styles.marginTopNeg30PX, styles.circle, styles.borderColorWhite, styles.border2PX].join(' ')}>
+                <Avatar account={account} size={62} />
+              </div>
+              <h1 className={[styles.default, styles.marginLeft15PX].join(' ')}>
+                <span
+                  className={[styles.default, styles.text, styles.displayBlock, styles.textOverflowEllipsis, styles.fontSize14PX, styles.colorBlack, styles.fontWeightBold].join(' ')}
+                  dangerouslySetInnerHTML={displayNameHtml}
+                />
+                <small className={[styles.default, styles.text, styles.displayBlock, styles.textOverflowEllipsis, styles.fontWeightNormal, styles.fontSize14PX, styles.colorSubtle].join(' ')}>@{account.get('acct')}</small>
+              </h1>
+            </NavLink>
+          </div>
+
+          <div className={[styles.default, styles.marginBottom15PX, styles.marginTop5PX, styles.flexRow, styles.paddingHorizontal15PX].join(' ')}>
+            {
+              statItems.map((statItem, i) => (
+                <UserPanelStatItem {...statItem} key={`user-panel-stat-item-${i}`} />
+              ))
+            }
+          </div>
+        </div>
+      </aside>
+    )
+  }
+}
+
+class UserPanelStatItem extends PureComponent {
+  static propTypes = {
+    to: PropTypes.string,
+    title: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { to, title, value } = this.props
+    const { hovering } = this.state
+
+    const cx = classNames.bind(styles)
+    const titleClasses = cx({
+      default: 1,
+      fontWeightNormal: 1,
+      text: 1,
+      displayFlex: 1,
+      fontSize13PX: 1,
+      colorSubtle: !hovering,
+      colorBlack: hovering,
+      underline: hovering,
+    })
+
+    return (
+      <NavLink
+        to={to}
+        title={`${value} ${title}`}
+        className={[styles.default, styles.flexGrow1, styles.cursorPointer, styles.noUnderline, styles.paddingRight15PX].join(' ')}
+        onMouseEnter={() => this.handleOnMouseEnter()}
+        onMouseLeave={() => this.handleOnMouseLeave()}
+      >
+        <span
+          className={[styles.default, styles.fontWeightBold, styles.text, styles.displayFlex, styles.fontSize19PX, styles.colorBrand].join(' ')}
+        >
+          {value}
+        </span>
+        <strong
+          className={titleClasses}
+        >
+          {title}
+        </strong>
+      </NavLink>
+    )
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/user_panel/index.js b/app/javascript/gabsocial/components/user_panel/index.js
deleted file mode 100644
index 0a8281b4..00000000
--- a/app/javascript/gabsocial/components/user_panel/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './user_panel';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/user_panel/user_panel.js b/app/javascript/gabsocial/components/user_panel/user_panel.js
deleted file mode 100644
index cef32037..00000000
--- a/app/javascript/gabsocial/components/user_panel/user_panel.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Link } from 'react-router-dom';
-import { injectIntl, defineMessages } from 'react-intl';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { autoPlayGif, me } from '../../initial_state';
-import { makeGetAccount } from '../../selectors';
-import { shortNumberFormat } from '../../utils/numbers';
-import Avatar from '../avatar';
-
-import './user_panel.scss';
-
-const messages = defineMessages({
-  gabs: { id:'account.posts', defaultMessage: 'Gabs' },
-  followers: { id: 'account.followers', defaultMessage: 'Followers' },
-  follows: { id: 'account.follows', defaultMessage: 'Follows' }
-});
-
-
-const mapStateToProps = state => {
-  const getAccount = makeGetAccount();
-
-  return {
-    account: getAccount(state, me),
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class UserPanel extends ImmutablePureComponent {
-  static propTypes = {
-    account: ImmutablePropTypes.map,
-    intl: PropTypes.object.isRequired,
-  }
-
-  render() {
-    const { account, intl } = this.props;
-    const displayNameHtml = { __html: account.get('display_name_html') };
-
-    return (
-      <div className='user-panel'>
-        <div className='user-panel__container'>
-
-          <div className='user-panel__header'>
-            <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
-          </div>
-
-          <div className='user-panel__profile'>
-            <Link to={`/${account.get('acct')}`} title={account.get('acct')}>
-              <Avatar account={account} />
-            </Link>
-          </div>
-
-          <div className='user-panel__meta'>
-
-            <div className='user-panel__account'>
-              <h1>
-                <Link to={`/${account.get('acct')}`}>
-                  <span className='user-panel__account__name' dangerouslySetInnerHTML={displayNameHtml} />
-                  <small className='user-panel__account__username'>@{account.get('acct')}</small>
-                </Link>
-              </h1>
-            </div>
-
-            <div className='user-panel__stats-block'>
-
-              <div className='user-panel-stats-item'>
-                <Link to={`/${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
-                  <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('statuses_count'))}</strong>
-                  <span className='user-panel-stats-item__label'>{intl.formatMessage(messages.gabs)}</span>
-                </Link>
-              </div>
-
-              <div className='user-panel-stats-item'>
-                <Link to={`/${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
-                  <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
-                  <span className='user-panel-stats-item__label'>{intl.formatMessage(messages.followers)}</span>
-                </Link>
-              </div>
-
-              <div className='user-panel-stats-item'>
-                <Link to={`/${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
-                  <strong className='user-panel-stats-item__value'>{shortNumberFormat(account.get('following_count'))}</strong>
-                  <span className='user-panel-stats-item__label'>{intl.formatMessage(messages.follows)}</span>
-                </Link>
-              </div>
-
-            </div>
-
-          </div>
-
-        </div>
-      </div>
-    )
-  }
-};
diff --git a/app/javascript/gabsocial/components/user_panel/user_panel.scss b/app/javascript/gabsocial/components/user_panel/user_panel.scss
deleted file mode 100644
index 026b2828..00000000
--- a/app/javascript/gabsocial/components/user_panel/user_panel.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-.user-panel {
-  display: flex;
-  width: 265px;
-  flex-direction: column;
-  overflow-y: hidden;
-
-  // @include gab-container-standards();
-
-  &__header {
-    display: block;
-    background: lighten($gab-background-container, 4%);
-
-    @include size(100%, 112px);
-
-    body.theme-gabsocial-light & {
-      background: darken($gab-background-container-light, 4%);
-    }
-
-    img {
-      display: block;
-      margin: 0;
-      object-fit: cover;
-
-      @include size(100%);
-    }
-  }
-
-  &__profile {
-    display: flex;
-    align-items: flex-start;
-    padding: 0 10px;
-    margin-top: -53px;
-
-    .account__avatar {
-      display: block;
-      border: 6px solid $gab-background-base;
-      background-size: cover;
-
-      @include size(82px);
-
-      body.theme-gabsocial-light & {
-        border: 6px solid $gab-background-base-light;
-      }
-    }
-  }
-
-  &__meta {
-    display: block;
-    padding: 6px 20px 17px 20px;
-  }
-
-  &__account {
-    a {
-      text-decoration: none;
-      color: $primary-text-color;
-    }
-
-    &__name {
-      display: block;
-      color: #fff;
-
-      @include text-sizing(20px, 700, 24px);
-
-      body.theme-gabsocial-light & {
-        color: $gab-default-text-light;
-      }
-    }
-
-    &:hover & {
-      &__name {
-        text-decoration: underline;
-      }
-    }
-
-    &__username {
-      display: block;
-      color: $gab-secondary-text;
-      text-decoration: none !important;
-
-      @include text-sizing(14px, 16px);
-    }
-  }
-
-  &__stats-block {
-    padding-top: 12px;
-
-    @include flex(space-between);
-  }
-
-  .user-panel-stats-item {
-    flex-wrap: wrap;
-
-    @include flex(left, start, column);
-
-    a {
-      text-decoration: none;
-
-      color: $primary-text-color;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
-    &__value {
-      display: block;
-      width: 100%;
-      color: #fff;
-
-      @include text-sizing(20px, 800, 24px);
-
-      body.theme-gabsocial-light & {
-        color: $gab-default-text-light;
-      }
-    }
-
-    &__label {
-      display: block;
-      width: 100%;
-      color: $gab-secondary-text;
-
-      @include text-sizing(12px, 400, 14px);
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/verified_icon/index.js b/app/javascript/gabsocial/components/verified_icon/index.js
deleted file mode 100644
index f8d58dee..00000000
--- a/app/javascript/gabsocial/components/verified_icon/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './verified_icon';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/verified_icon/verified_icon.js b/app/javascript/gabsocial/components/verified_icon/verified_icon.js
deleted file mode 100644
index 3c3ca0a0..00000000
--- a/app/javascript/gabsocial/components/verified_icon/verified_icon.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import './verified_icon.scss';
-
-export default class VerifiedIcon extends PureComponent {
-
-  render() {
-    return (
-      <span className='verified-icon'>
-        <span className='invisible'>Verified Account</span>
-      </span>
-    );
-  }
-
-};
diff --git a/app/javascript/gabsocial/components/verified_icon/verified_icon.scss b/app/javascript/gabsocial/components/verified_icon/verified_icon.scss
deleted file mode 100644
index c8a229e4..00000000
--- a/app/javascript/gabsocial/components/verified_icon/verified_icon.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.verified-icon {
-  display: inline-block;
-  margin-top: 1px;
-  margin-left: 4px;
-  vertical-align: top;
-  position: relative;
-
-  @include size(15px);
-
-  &:before {
-    background-color: #00A3ED;
-    border-radius: 50%;
-
-    @include pseudo;
-    @include abs-position(0, 0, 0, 0, false);
-  }
-
-  &:after {
-    font: normal normal normal 14px/1 FontAwesome;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    color: #fff;
-
-    @include pseudo('\f00c');
-    @include size(15px);
-    @include text-sizing(0.6em, 400, 15px, center);
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/zoomable_image/zoomable_image.js b/app/javascript/gabsocial/components/zoomable_image/zoomable_image.js
index 409f287e..c9e97842 100644
--- a/app/javascript/gabsocial/components/zoomable_image/zoomable_image.js
+++ b/app/javascript/gabsocial/components/zoomable_image/zoomable_image.js
@@ -1,5 +1,3 @@
-import './zoomable_image.scss';
-
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
 
diff --git a/app/javascript/gabsocial/features/account_gallery/account_gallery.js b/app/javascript/gabsocial/features/account_gallery/account_gallery.js
index 5260981c..b8923268 100644
--- a/app/javascript/gabsocial/features/account_gallery/account_gallery.js
+++ b/app/javascript/gabsocial/features/account_gallery/account_gallery.js
@@ -15,8 +15,6 @@ import MediaItem from './components/media_item';
 import LoadMore from '../../components/load_more';
 import SectionHeadlineBar from '../../components/section_headline_bar';
 
-import './account_gallery.scss';
-
 const messages = defineMessages({
   posts: { id: 'account.posts', defaultMessage: 'Gabs' },
   postsWithReplies: { id: 'account.posts_with_replies', defaultMessage: 'Gabs and replies' },
diff --git a/app/javascript/gabsocial/features/account_gallery/components/media_item/media_item.js b/app/javascript/gabsocial/features/account_gallery/components/media_item/media_item.js
index a442f4c8..587a1974 100644
--- a/app/javascript/gabsocial/features/account_gallery/components/media_item/media_item.js
+++ b/app/javascript/gabsocial/features/account_gallery/components/media_item/media_item.js
@@ -6,8 +6,6 @@ import Icon from '../../../../components/icon';
 import { autoPlayGif, displayMedia } from '../../../../initial_state';
 import { isIOS } from '../../../../utils/is_mobile';
 
-import './media_item.scss';
-
 export default class MediaItem extends ImmutablePureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/features/account_timeline/components/header/header.js b/app/javascript/gabsocial/features/account_timeline/components/header/header.js
index d6df7b2d..1a8e7a1e 100644
--- a/app/javascript/gabsocial/features/account_timeline/components/header/header.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/header/header.js
@@ -3,8 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import InnerHeader from '../inner_header';
 import MovedNote from '../moved_note';
 
-import './header.scss';
-
 export default class Header extends ImmutablePureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/features/account_timeline/components/inner_header/index.js b/app/javascript/gabsocial/features/account_timeline/components/inner_header/index.js
index d89e9d3e..3a95bcab 100644
--- a/app/javascript/gabsocial/features/account_timeline/components/inner_header/index.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/inner_header/index.js
@@ -1 +1 @@
-export { default } from './inner_header.scss';
+export { default } from './inner_header';
diff --git a/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js b/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js
index 0b72a23b..54a89a9f 100644
--- a/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js
@@ -11,8 +11,6 @@ import { shortNumberFormat } from '../../../utils/numbers';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import ProfileInfoPanel from './profile_info_panel/profile_info_panel';
 
-import './inner_header.scss';
-
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
diff --git a/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js b/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js
index 5c61e6cc..a3f76cce 100644
--- a/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js
@@ -6,8 +6,6 @@ import AvatarOverlay from '../../../../components/avatar_overlay';
 import DisplayName from '../../../../components/display_name';
 import Icon from '../../../../components/icon';
 
-import './moved_note.scss';
-
 export default class MovedNote extends ImmutablePureComponent {
 
   static contextTypes = {
diff --git a/app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.js b/app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.js
index c0473619..709abbbd 100644
--- a/app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.js
@@ -6,8 +6,6 @@ import Icon from '../../../../components/icon';
 import VerifiedIcon from '../../../../components/verified_icon';
 import Badge from '../../../../components/badge';
 
-import './profile_info_panel.scss';
-
 const messages = defineMessages({
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
diff --git a/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js b/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
index 7efe6e46..55f4f063 100644
--- a/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
+++ b/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
@@ -1,8 +1,6 @@
 import { length } from 'stringz';
 import classNames from 'classnames';
 
-import './character_counter.scss';
-
 export default class CharacterCounter extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
new file mode 100644
index 00000000..fad12773
--- /dev/null
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -0,0 +1,71 @@
+import classNames from 'classnames/bind'
+import Icon from '../../../components/icon'
+
+export default class ComposeExtraButton extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    icon: PropTypes.string,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
+  render() {
+    const { title, disabled, onClick, icon, children } = this.props
+    const { hovering } = this.state
+
+    const cx = classNames.bind(styles)
+
+    const btnClasses = cx({
+      default: 1,
+      circle: 1,
+      flexRow: 1,
+      paddingVertical10PX: 1,
+      paddingHorizontal10PX: 1,
+      cursorPointer: 1,
+      backgroundSubtle: !hovering,
+      backgroundSubtle2: hovering,
+    })
+
+    const titleClasses = cx({
+      default: 1,
+      marginLeft5PX: 1,
+      text: 1,
+      lineHeight15: 1,
+      fontSize12PX: 1,
+      fontWeight500: 1,
+      colorSubtle: 1,
+      displayNone: !hovering,
+    })
+
+    return (
+      <div className={[styles.default, styles.marginRight10PX].join(' ')}>
+        <button
+          className={btnClasses}
+          title={title}
+          disabled={disabled}
+          onClick={onClick}
+          onMouseEnter={() => this.handleOnMouseEnter()}
+          onMouseLeave={() => this.handleOnMouseLeave()}
+        >
+          <Icon icon={icon} width='18px' height='18px' />
+          <span className={titleClasses}>
+            {title}
+          </span>
+        </button>
+        {children}
+      </div>
+    )
+  }
+}
\ No newline at end of file
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 b2cbd84f..aa6b663e 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
@@ -7,22 +7,20 @@ import CharacterCounter from '../character_counter';
 import UploadForm from '../upload_form';
 import ReplyIndicatorContainer from '../../containers/reply_indicator_container';
 import AutosuggestTextbox from '../../../../components/autosuggest_textbox';
-import PollButtonContainer from '../../containers/poll_button_container';
-import UploadButtonContainer from '../../containers/upload_button_container';
-import SpoilerButtonContainer from '../../containers/spoiler_button_container';
-import PrivacyDropdownContainer from '../../containers/privacy_dropdown_container';
+import PollButton from '../../components/poll_button';
+import UploadButton from '../../components/upload_button';
+import SpoilerButton from '../../components/spoiler_button';
+import PrivacyDropdown from '../../components/privacy_dropdown';
 import EmojiPickerDropdown from '../../containers/emoji_picker_dropdown_container';
 import PollFormContainer from '../../containers/poll_form_container';
 import WarningContainer from '../../containers/warning_container';
-import SchedulePostDropdownContainer from '../../containers/schedule_post_dropdown_container';
+import SchedulePostDropdown from '../../components/schedule_post_dropdown';
 import QuotedStatusPreviewContainer from '../../containers/quoted_status_preview_container';
 import Icon from '../../../../components/icon';
 import Button from '../../../../components/button';
 import { isMobile } from '../../../../utils/is_mobile';
 import { countableText } from '../../util/counter';
 
-import './compose_form.scss';
-
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 const maxPostCharacterCount = 3000;
 
@@ -30,7 +28,7 @@ const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
-  publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
+  publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}' },
   schedulePost: { id: 'compose_form.schedule_post', defaultMessage: 'Schedule Post' }
 });
 
@@ -220,29 +218,22 @@ class ComposeForm extends ImmutablePureComponent {
     const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > maxPostCharacterCount || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
 
-    let publishText = '';
-
-    if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
-      publishText = <span className='compose-form__publish-private'><Icon id='lock' /> {intl.formatMessage(messages.publish)}</span>;
-    } else {
-      publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
-    }
-
-    if (scheduledAt) {
-      publishText = intl.formatMessage(messages.schedulePost);
-    }
-
     const composeClassNames = classNames({
       'compose-form': true,
       'condensed': condensed,
     });
 
     return (
-      <div className={composeClassNames} ref={this.setForm} onClick={this.handleClick}>
-        <WarningContainer />
+      <div
+        className={[styles.default, styles.flexGrow1].join(' ')}
+        ref={this.setForm}
+        onClick={this.handleClick}
+      >
+        { /* <WarningContainer /> */ }
 
-        { !shouldCondense && <ReplyIndicatorContainer /> }
+        { /* !shouldCondense && <ReplyIndicatorContainer /> */ }
 
+        { /*
         <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
           <AutosuggestTextbox
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
@@ -260,13 +251,14 @@ class ComposeForm extends ImmutablePureComponent {
             className='spoiler-input__input'
           />
         </div>
+        */ }
 
+        { /*
         <div className='emoji-picker-wrapper'>
           <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
-        </div>
+        </div> */ }
 
         <AutosuggestTextbox
-          textarea={true}
           ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
           disabled={disabled}
@@ -280,38 +272,37 @@ class ComposeForm extends ImmutablePureComponent {
           onSuggestionSelected={this.onSuggestionSelected}
           onPaste={onPaste}
           autoFocus={shouldAutoFocus}
+          textarea
         >
-          {
+          { /*
             !condensed &&
             <div className='compose-form__modifiers'>
               <UploadForm />
               {!edit && <PollFormContainer />}
             </div>
-          }
+          */ }
         </AutosuggestTextbox>
 
-        {quoteOfId && <QuotedStatusPreviewContainer id={quoteOfId} />}
+        { /* quoteOfId && <QuotedStatusPreviewContainer id={quoteOfId} /> */ }
 
         {
-          !condensed &&
-          <div className='compose-form__buttons-wrapper'>
-            <div className='compose-form__buttons'>
-              <UploadButtonContainer />
-              {!edit && <PollButtonContainer />}
-              <PrivacyDropdownContainer />
-              <SpoilerButtonContainer />
-              <SchedulePostDropdownContainer
-                position={isModalOpen ? 'top' : undefined}
-              />
+          /* !condensed && */
+          <div className={[styles.default, styles.flexRow, styles.marginTop10PX].join(' ')}>
+            <div className={[styles.default, styles.flexRow, styles.marginRightAuto].join(' ')}>
+              <UploadButton />
+              {
+                !edit && <PollButton />
+              }
+              <PrivacyDropdown />
+              <SpoilerButton />
+              <SchedulePostDropdown position={isModalOpen ? 'top' : undefined} />
             </div>
             <CharacterCounter max={maxPostCharacterCount} text={text} />
-          </div>
-        }
-
-        {
-          !condensed &&
-          <div className='compose-form__publish'>
-            <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
+            <Button
+              text={intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+              onClick={this.handleSubmit}
+              disabled={disabledButton}
+            />
           </div>
         }
 
diff --git a/app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.js b/app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.js
index 50aa8013..86b789f0 100644
--- a/app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.js
+++ b/app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.js
@@ -7,8 +7,6 @@ import Overlay from 'react-overlays/lib/Overlay';
 import { EmojiPicker as EmojiPickerAsync } from '../../../ui/util/async-components';
 import { buildCustomEmojis } from '../../../../components/emoji/emoji';
 
-import './emoji_picker_dropdown.scss';
-
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
diff --git a/app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.js b/app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.js
index 21abc163..59914a19 100644
--- a/app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.js
+++ b/app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.js
@@ -7,8 +7,6 @@ import Permalink from '../../../../components/permalink';
 import IconButton from '../../../../components/icon_button';
 import { me } from '../../../../initial_state';
 
-import './navigation_bar.scss';
-
 const mapStateToProps = state => {
   return {
     account: state.getIn(['accounts', me]),
diff --git a/app/javascript/gabsocial/features/compose/components/poll_button.js b/app/javascript/gabsocial/features/compose/components/poll_button.js
new file mode 100644
index 00000000..91ebd843
--- /dev/null
+++ b/app/javascript/gabsocial/features/compose/components/poll_button.js
@@ -0,0 +1,62 @@
+import { defineMessages, injectIntl } from 'react-intl';
+import { addPoll, removePoll } from '../../../actions/compose';
+import ComposeExtraButton from './compose_extra_button'
+
+const messages = defineMessages({
+  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add poll' },
+  title: { id: 'poll_button.title', defaultMessage: 'Poll' },
+  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
+});
+
+const mapStateToProps = state => ({
+  unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
+  active: state.getIn(['compose', 'poll']) !== null,
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick() {
+    dispatch((_, getState) => {
+      if (getState().getIn(['compose', 'poll'])) {
+        dispatch(removePoll());
+      } else {
+        dispatch(addPoll());
+      }
+    });
+  },
+
+});
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class PollButton extends PureComponent {
+
+  static propTypes = {
+    disabled: PropTypes.bool,
+    unavailable: PropTypes.bool,
+    active: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  handleClick = () => {
+    this.props.onClick();
+  }
+
+  render() {
+    const { intl, active, unavailable, disabled } = this.props;
+
+    if (unavailable) return null;
+
+    return (
+      <ComposeExtraButton
+        title={intl.formatMessage(active ? messages.remove_poll : messages.title)}
+        disabled={disabled}
+        onClick={this.handleClick}
+        icon='tasks'
+      />
+    )
+  }
+
+}
diff --git a/app/javascript/gabsocial/features/compose/components/poll_button/index.js b/app/javascript/gabsocial/features/compose/components/poll_button/index.js
deleted file mode 100644
index 693d04d3..00000000
--- a/app/javascript/gabsocial/features/compose/components/poll_button/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './poll_button';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/poll_button/poll_button.js b/app/javascript/gabsocial/features/compose/components/poll_button/poll_button.js
deleted file mode 100644
index a0ac5c20..00000000
--- a/app/javascript/gabsocial/features/compose/components/poll_button/poll_button.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import IconButton from '../../../../components/icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
-
-const messages = defineMessages({
-  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
-  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
-});
-
-const iconStyle = {
-  height: null,
-  lineHeight: '27px',
-};
-
-export default
-@injectIntl
-class PollButton extends PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render () {
-    const { intl, active, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <div>
-        <IconButton
-          icon='tasks'
-          title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
-          disabled={disabled}
-          onClick={this.handleClick}
-          className={`${active ? 'active' : ''}`}
-          size={18}
-          inverted
-          style={iconStyle}
-        />
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/gabsocial/features/compose/components/poll_form/poll_form.js b/app/javascript/gabsocial/features/compose/components/poll_form/poll_form.js
index 78c08ef6..ec1da27f 100644
--- a/app/javascript/gabsocial/features/compose/components/poll_form/poll_form.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_form/poll_form.js
@@ -6,8 +6,6 @@ import IconButton from '../../../../components/icon_button';
 import Icon from '../../../../components/icon';
 import AutosuggestTextbox from '../../../../components/autosuggest_textbox';
 
-import './poll_form.scss';
-
 const messages = defineMessages({
   option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
   add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
diff --git a/app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.js b/app/javascript/gabsocial/features/compose/components/privacy_dropdown.js
similarity index 64%
rename from app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.js
rename to app/javascript/gabsocial/features/compose/components/privacy_dropdown.js
index 14655f10..4efb554c 100644
--- a/app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.js
+++ b/app/javascript/gabsocial/features/compose/components/privacy_dropdown.js
@@ -1,13 +1,14 @@
-import { injectIntl, defineMessages } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-import detectPassiveEvents from 'detect-passive-events';
-import classNames from 'classnames';
-import Overlay from 'react-overlays/lib/Overlay';
-import IconButton from '../../../../components/icon_button';
-import Motion from '../../../ui/util/optional_motion';
-import Icon from '../../../../components/icon';
-
-import './privacy_dropdown.scss';
+import { injectIntl, defineMessages } from 'react-intl'
+import spring from 'react-motion/lib/spring'
+import detectPassiveEvents from 'detect-passive-events'
+import classNames from 'classnames'
+import Overlay from 'react-overlays/lib/Overlay'
+import { changeComposeVisibility } from '../../../actions/compose'
+import { openModal, closeModal } from '../../../actions/modal'
+import { isUserTouching } from '../../../utils/is_mobile'
+import Motion from '../../ui/util/optional_motion'
+import Icon from '../../../components/icon'
+import ComposeExtraButton from './compose_extra_button'
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
@@ -16,11 +17,11 @@ const messages = defineMessages({
   unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' },
   private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
   private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
   change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
-});
+  visibility: { id: 'privacy.visibility', defaultMessage: 'Visibility' },
+})
 
-const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
+const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
 
 class PrivacyDropdownMenu extends PureComponent {
 
@@ -31,96 +32,96 @@ class PrivacyDropdownMenu extends PureComponent {
     placement: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-  };
+  }
 
   state = {
     mounted: false,
-  };
+  }
 
   handleDocumentClick = e => {
     if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
+      this.props.onClose()
     }
   }
 
   handleKeyDown = e => {
-    const { items } = this.props;
-    const value = e.currentTarget.getAttribute('data-index');
+    const { items } = this.props
+    const value = e.currentTarget.getAttribute('data-index')
     const index = items.findIndex(item => {
-      return (item.value === value);
-    });
-    let element;
+      return (item.value === value)
+    })
+    let element
 
     switch(e.key) {
     case 'Escape':
-      this.props.onClose();
-      break;
+      this.props.onClose()
+      break
     case 'Enter':
-      this.handleClick(e);
-      break;
+      this.handleClick(e)
+      break
     case 'ArrowDown':
-      element = this.node.childNodes[index + 1];
+      element = this.node.childNodes[index + 1]
       if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
+        element.focus()
+        this.props.onChange(element.getAttribute('data-index'))
       }
-      break;
+      break
     case 'ArrowUp':
-      element = this.node.childNodes[index - 1];
+      element = this.node.childNodes[index - 1]
       if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
+        element.focus()
+        this.props.onChange(element.getAttribute('data-index'))
       }
-      break;
+      break
     case 'Home':
-      element = this.node.firstChild;
+      element = this.node.firstChild
       if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
+        element.focus()
+        this.props.onChange(element.getAttribute('data-index'))
       }
-      break;
+      break
     case 'End':
-      element = this.node.lastChild;
+      element = this.node.lastChild
       if (element) {
-        element.focus();
-        this.props.onChange(element.getAttribute('data-index'));
+        element.focus()
+        this.props.onChange(element.getAttribute('data-index'))
       }
-      break;
+      break
     }
   }
 
   handleClick = e => {
-    const value = e.currentTarget.getAttribute('data-index');
+    const value = e.currentTarget.getAttribute('data-index')
 
-    e.preventDefault();
+    e.preventDefault()
 
-    this.props.onClose();
-    this.props.onChange(value);
+    this.props.onClose()
+    this.props.onChange(value)
   }
 
   componentDidMount () {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-    if (this.focusedItem) this.focusedItem.focus();
-    this.setState({ mounted: true });
+    document.addEventListener('click', this.handleDocumentClick, false)
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions)
+    if (this.focusedItem) this.focusedItem.focus()
+    this.setState({ mounted: true })
   }
 
   componentWillUnmount () {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+    document.removeEventListener('click', this.handleDocumentClick, false)
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions)
   }
 
   setRef = c => {
-    this.node = c;
+    this.node = c
   }
 
   setFocusRef = c => {
-    this.focusedItem = c;
+    this.focusedItem = c
   }
 
   render () {
-    const { mounted } = this.state;
-    const { style, items, placement, value } = this.props;
+    const { mounted } = this.state
+    const { style, items, placement, value } = this.props
 
     return (
       <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
@@ -144,12 +145,31 @@ class PrivacyDropdownMenu extends PureComponent {
           </div>
         )}
       </Motion>
-    );
+    )
   }
 
 }
 
-export default @injectIntl
+const mapStateToProps = state => ({
+  isModalOpen: state.get('modal').modalType === 'ACTIONS',
+  value: state.getIn(['compose', 'privacy']),
+})
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (value) {
+    dispatch(changeComposeVisibility(value))
+  },
+
+  isUserTouching,
+  onModalOpen: props => dispatch(openModal('ACTIONS', props)),
+  onModalClose: () => dispatch(closeModal()),
+
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
 class PrivacyDropdown extends PureComponent {
 
   static propTypes = {
@@ -160,84 +180,78 @@ class PrivacyDropdown extends PureComponent {
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
+  }
 
   state = {
     open: false,
     placement: 'bottom',
-  };
+  }
 
   handleToggle = ({ target }) => {
     if (this.props.isUserTouching()) {
       if (this.state.open) {
-        this.props.onModalClose();
+        this.props.onModalClose()
       } else {
         this.props.onModalOpen({
           actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })),
           onClick: this.handleModalActionClick,
-        });
+        })
       }
     } else {
-      const { top } = target.getBoundingClientRect();
-      this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
-      this.setState({ open: !this.state.open });
+      const { top } = target.getBoundingClientRect()
+      this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' })
+      this.setState({ open: !this.state.open })
     }
   }
 
   handleModalActionClick = (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
-    const { value } = this.options[e.currentTarget.getAttribute('data-index')];
+    const { value } = this.options[e.currentTarget.getAttribute('data-index')]
 
-    this.props.onModalClose();
-    this.props.onChange(value);
+    this.props.onModalClose()
+    this.props.onChange(value)
   }
 
   handleKeyDown = e => {
     switch(e.key) {
     case 'Escape':
-      this.handleClose();
-      break;
+      this.handleClose()
+      break
     }
   }
 
   handleClose = () => {
-    this.setState({ open: false });
+    this.setState({ open: false })
   }
 
   handleChange = value => {
-    this.props.onChange(value);
+    this.props.onChange(value)
   }
 
   componentWillMount () {
-    const { intl: { formatMessage } } = this.props;
+    const { intl: { formatMessage } } = this.props
 
     this.options = [
       { icon: 'globe', value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
       { icon: 'unlock', value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long) },
       { icon: 'lock', value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
-    ];
+    ]
   }
 
   render () {
-    const { value, intl } = this.props;
-    const { open, placement } = this.state;
+    const { value, intl } = this.props
+    const { open, placement } = this.state
 
-    const valueOption = this.options.find(item => item.value === value);
+    const valueOption = this.options.find(item => item.value === value)
 
     return (
       <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}>
         <div className={classNames('privacy-dropdown__value', { active: this.options.indexOf(valueOption) === 0 })}>
-          <IconButton
-            className='privacy-dropdown__value-icon'
+          <ComposeExtraButton
             icon={valueOption.icon}
-            title={intl.formatMessage(messages.change_privacy)}
-            size={18}
-            expanded={open}
-            active={open}
-            inverted
+            title={intl.formatMessage(messages.visibility)}
             onClick={this.handleToggle}
-            style={{ height: null, lineHeight: '27px' }}
           />
         </div>
 
@@ -251,7 +265,7 @@ class PrivacyDropdown extends PureComponent {
           />
         </Overlay>
       </div>
-    );
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/features/compose/components/privacy_dropdown/index.js b/app/javascript/gabsocial/features/compose/components/privacy_dropdown/index.js
deleted file mode 100644
index d8911633..00000000
--- a/app/javascript/gabsocial/features/compose/components/privacy_dropdown/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './privacy_dropdown';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.scss b/app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.scss
deleted file mode 100644
index a62d754d..00000000
--- a/app/javascript/gabsocial/features/compose/components/privacy_dropdown/privacy_dropdown.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.privacy-dropdown {
-
-  &__dropdown {
-    position: absolute;
-    background: $simple-background-color;
-    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-    border-radius: 4px;
-    margin-left: 40px;
-    overflow: hidden;
-    z-index: 10000;
-
-    &.top {
-      transform-origin: 50% 100%;
-    }
-
-    &.bottom {
-      transform-origin: 50% 0;
-    }
-  }
-
-  &__option {
-    color: $inverted-text-color;
-    padding: 10px;
-    cursor: pointer;
-    display: flex;
-
-    &:hover,
-    &.active {
-      background: $ui-highlight-color;
-      color: $primary-text-color;
-      outline: 0;
-
-      .privacy-dropdown__option__content {
-        color: $primary-text-color;
-
-        strong {
-          color: $primary-text-color;
-        }
-      }
-    }
-
-    &.active:hover {
-      background: lighten($ui-highlight-color, 4%);
-    }
-
-    &__icon {
-      margin-right: 10px;
-
-      @include flex(center, center);
-    }
-
-    &__content {
-      flex: 1 1 auto;
-      color: $lighter-text-color;
-
-      strong {
-        font-weight: 500;
-        display: block;
-        color: $inverted-text-color;
-
-        @each $lang in $cjk-langs {
-          &:lang(#{$lang}) {
-            font-weight: 700;
-          }
-        }
-      }
-    }
-  }
-
-  &.active & {
-    &__dropdown {
-      display: block;
-      box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
-    }
-
-
-    &__value {
-      background: $simple-background-color;
-      border-radius: 4px 4px 0 0;
-      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-
-      .icon-button {
-        transition: none;
-      }
-
-      &.active {
-        background: $ui-highlight-color;
-
-        .icon-button {
-          color: $primary-text-color;
-        }
-      }
-    }
-  }
-
-  &.active.top & {
-    &__value {
-      border-radius: 0 0 4px 4px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.js b/app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.js
index 8f66ec99..a30f6d23 100644
--- a/app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.js
+++ b/app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.js
@@ -7,8 +7,6 @@ import IconButton from '../../../../components/icon_button';
 import DisplayName from '../../../../components/display_name';
 import { isRtl } from '../../../../utils/rtl';
 
-import './reply_indicator.scss';
-
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
 });
diff --git a/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js b/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
index fe2e8ff8..994a3807 100644
--- a/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
+++ b/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
@@ -1,32 +1,53 @@
-import { injectIntl, defineMessages } from 'react-intl';
-import DatePicker from 'react-datepicker';
-import IconButton from '../../../components/icon_button';
-import { isMobile } from '../../../utils/is_mobile';
+import { injectIntl, defineMessages } from 'react-intl'
+import DatePicker from 'react-datepicker'
+import IconButton from '../../../components/icon_button'
+import { changeScheduledAt } from '../../../actions/compose'
+import { openModal } from '../../../actions/modal'
+import { me } from '../../../initial_state'
+import { isMobile } from '../../../utils/is_mobile'
+import ComposeExtraButton from './compose_extra_button'
 
-import "react-datepicker/dist/react-datepicker.css";
+import 'react-datepicker/dist/react-datepicker.css'
 
 const messages = defineMessages({
-  schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule Status' },
-});
+  schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule' },
+})
+
+const mapStateToProps = state => ({
+  date: state.getIn(['compose', 'scheduled_at']),
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+})
+
+const mapDispatchToProps = dispatch => ({
+  setScheduledAt (date) {
+    dispatch(changeScheduledAt(date))
+  },
+
+  onOpenProUpgradeModal() {
+    dispatch(openModal('PRO_UPGRADE'))
+  },
+})
 
 class DatePickerWrapper extends PureComponent {
   static propTypes = {
     value: PropTypes.string,
     onClick: PropTypes.func,
-  };
+  }
 
   render() {
-    const { value, onClick } = this.props;
+    const { value, onClick } = this.props
 
     return (
-      <button className="schedule-post-dropdown-wrapper" onClick={onClick}>
+      <button className='schedule-post-dropdown-wrapper' onClick={onClick}>
         {value}
       </button>
     )
   }
 }
 
-export default @injectIntl
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
 class SchedulePostDropdown extends PureComponent {
 
   static propTypes = {
@@ -36,43 +57,37 @@ class SchedulePostDropdown extends PureComponent {
     isPro: PropTypes.bool,
     onOpenProUpgradeModal: PropTypes.func.isRequired,
     position: PropTypes.string,
-  };
+  }
 
   handleToggle = () => {
     if (!this.props.isPro) {
-      return this.props.onOpenProUpgradeModal();
+      return this.props.onOpenProUpgradeModal()
     }
 
-    const { date } = this.props;
-    const value = date ? null : new Date();
-    this.handleSetDate(value);
+    const { date } = this.props
+    const value = date ? null : new Date()
+    this.handleSetDate(value)
   }
 
   handleSetDate = (date) => {
-    this.props.setScheduledAt(date);
+    this.props.setScheduledAt(date)
   }
 
   render () {
-    const { intl, date, isPro, position } = this.props;
+    const { intl, date, isPro, position } = this.props
 
-    const open = !!date;
-    const datePickerDisabled = !isPro;
-    const withPortal = isMobile(window.innerWidth);
-    const popperPlacement = position || undefined;
+    const open = !!date
+    const datePickerDisabled = !isPro
+    const withPortal = isMobile(window.innerWidth)
+    const popperPlacement = position || undefined
 
     return (
-      <div className='schedule-post-dropdown'>
-        <div className='schedule-post-dropdown__container'>
-          <IconButton
-            inverted
-            className='schedule-post-dropdown__icon'
+      <div className={[].join(' ')}>
+        <div className={[].join(' ')}>
+          <ComposeExtraButton
             icon='calendar'
             title={intl.formatMessage(messages.schedule_status)}
-            size={18}
-            expanded={open}
-            active={open}
             onClick={this.handleToggle}
-            style={{ height: null, lineHeight: '27px' }}
           />
         </div>
         {
@@ -83,10 +98,10 @@ class SchedulePostDropdown extends PureComponent {
             minDate={new Date()}
             selected={date}
             onChange={date => this.handleSetDate(date)}
-            timeFormat="p"
+            timeFormat='p'
             timeIntervals={15}
-            timeCaption="Time"
-            dateFormat="MMM d, yyyy h:mm aa"
+            timeCaption='Time'
+            dateFormat='MMM d, yyyy h:mm aa'
             disabled={datePickerDisabled}
             showTimeSelect
             customInput={<DatePickerWrapper />}
@@ -95,18 +110,18 @@ class SchedulePostDropdown extends PureComponent {
             popperModifiers={{
               offset: {
                 enabled: true,
-                offset: "0px, 5px"
+                offset: '0px, 5px'
               },
               preventOverflow: {
                 enabled: true,
                 escapeWithReference: false,
-                boundariesElement: "viewport"
+                boundariesElement: 'viewport'
               }
             }}
           />
         }
       </div>
-    );
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/features/compose/components/spoiler_button.js b/app/javascript/gabsocial/features/compose/components/spoiler_button.js
new file mode 100644
index 00000000..dce933dc
--- /dev/null
+++ b/app/javascript/gabsocial/features/compose/components/spoiler_button.js
@@ -0,0 +1,50 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { changeComposeSpoilerness } from '../../../actions/compose'
+import ComposeExtraButton from './compose_extra_button'
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
+  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
+  title: { id: 'compose_form.spoiler.title', defaultMessage: 'Warning' },
+})
+
+const mapStateToProps = (state) => ({
+  active: state.getIn(['compose', 'spoiler']),
+})
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch(changeComposeSpoilerness())
+  },
+
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+class SpoilerButton extends PureComponent {
+
+  static propTypes = {
+    active: PropTypes.bool,
+    intl: PropTypes.map,
+  }
+
+  handleClick = (e) => {
+    e.preventDefault()
+    this.props.onClick()
+  }
+
+  render () {
+    const { active, intl } = this.props
+
+    return (
+      <ComposeExtraButton
+        title={intl.formatMessage(messages.title)}
+        icon='warning'
+        onClick={this.handleClick}
+      />
+    )
+  }
+
+}
diff --git a/app/javascript/gabsocial/features/compose/components/text_icon_button/index.js b/app/javascript/gabsocial/features/compose/components/text_icon_button/index.js
deleted file mode 100644
index 356546a4..00000000
--- a/app/javascript/gabsocial/features/compose/components/text_icon_button/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './text_icon_button';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.js b/app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.js
deleted file mode 100644
index 7a3683ab..00000000
--- a/app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default class TextIconButton extends PureComponent {
-
-  static propTypes = {
-    label: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    ariaControls: PropTypes.string,
-  };
-
-  handleClick = (e) => {
-    e.preventDefault();
-    this.props.onClick();
-  }
-
-  render () {
-    const { label, title, active, ariaControls } = this.props;
-
-    return (
-      <button
-        title={title}
-        aria-label={title}
-        className={`text-icon-button ${active ? 'text-icon-button--active' : ''}`}
-        aria-expanded={active}
-        onClick={this.handleClick}
-        aria-controls={ariaControls}
-      >
-        {label}
-      </button>
-    );
-  }
-
-}
diff --git a/app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.scss b/app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.scss
deleted file mode 100644
index 5e19683e..00000000
--- a/app/javascript/gabsocial/features/compose/components/text_icon_button/text_icon_button.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.text-icon-button {
-  color: $gab-secondary-text;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0 3px;
-  outline: 0;
-  transition: color 100ms ease-in;
-
-  @include text-sizing(11px, 600, 27px);
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: darken($lighter-text-color, 7%);
-    transition: color 200ms ease-out;
-  }
-
-  &--active {
-    color: $highlight-text-color;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/upload/upload.js b/app/javascript/gabsocial/features/compose/components/upload/upload.js
index 904667cd..be19075d 100644
--- a/app/javascript/gabsocial/features/compose/components/upload/upload.js
+++ b/app/javascript/gabsocial/features/compose/components/upload/upload.js
@@ -6,8 +6,6 @@ import spring from 'react-motion/lib/spring';
 import Motion from '../../../ui/util/optional_motion';
 import IconButton from '../../../../components/icon_button';
 
-import './upload.scss';
-
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
   delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
diff --git a/app/javascript/gabsocial/features/compose/components/upload_button.js b/app/javascript/gabsocial/features/compose/components/upload_button.js
new file mode 100644
index 00000000..b95cec33
--- /dev/null
+++ b/app/javascript/gabsocial/features/compose/components/upload_button.js
@@ -0,0 +1,87 @@
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
+import { uploadCompose } from '../../../actions/compose'
+import ComposeExtraButton from './compose_extra_button'
+
+const messages = defineMessages({
+  upload: { id: 'upload_button.label', defaultMessage: 'Add media (JPEG, PNG, GIF, WebM, MP4, MOV)' },
+  title: { id: 'upload_button.title', defaultMessage: 'Photo/Video' },
+})
+
+const makeMapStateToProps = () => {
+  const mapStateToProps = state => ({
+    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
+    disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+    unavailable: state.getIn(['compose', 'poll']) !== null,
+    resetFileKey: state.getIn(['compose', 'resetFileKey']),
+  })
+
+  return mapStateToProps
+}
+
+const mapDispatchToProps = dispatch => ({
+  onSelectFile(files) {
+    dispatch(uploadCompose(files))
+  },
+})
+
+export default
+@connect(makeMapStateToProps, mapDispatchToProps)
+@injectIntl
+class UploadButton extends ImmutablePureComponent {
+
+  static propTypes = {
+    disabled: PropTypes.bool,
+    unavailable: PropTypes.bool,
+    onSelectFile: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    resetFileKey: PropTypes.number,
+    acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  handleChange = (e) => {
+    if (e.target.files.length > 0) {
+      this.props.onSelectFile(e.target.files)
+    }
+  }
+
+  handleClick = () => {
+    this.fileElement.click()
+  }
+
+  setRef = (c) => {
+    this.fileElement = c
+  }
+
+  render() {
+    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props
+
+    if (unavailable) return null
+
+    return (
+      <ComposeExtraButton
+        title={intl.formatMessage(messages.title)}
+        disabled={disabled}
+        onClick={this.handleClick}
+        icon='upload'
+      >
+        <label>
+          <span className={styles.displayNone}>{intl.formatMessage(messages.upload)}</span>
+          <input
+            key={resetFileKey}
+            ref={this.setRef}
+            type='file'
+            accept={acceptContentTypes.toArray().join(',')}
+            onChange={this.handleChange}
+            disabled={disabled}
+            className={styles.displayNone}
+            multiple
+          />
+        </label>
+      </ComposeExtraButton>
+    )
+  }
+
+}
diff --git a/app/javascript/gabsocial/features/compose/components/upload_button/index.js b/app/javascript/gabsocial/features/compose/components/upload_button/index.js
deleted file mode 100644
index 67cdb712..00000000
--- a/app/javascript/gabsocial/features/compose/components/upload_button/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './upload_button';
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/upload_button/upload_button.js b/app/javascript/gabsocial/features/compose/components/upload_button/upload_button.js
deleted file mode 100644
index 959a7fee..00000000
--- a/app/javascript/gabsocial/features/compose/components/upload_button/upload_button.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from '../../../../components/icon_button';
-
-import './upload_button.scss';
-
-const messages = defineMessages({
-  upload: { id: 'upload_button.label', defaultMessage: 'Add media (JPEG, PNG, GIF, WebM, MP4, MOV)' },
-});
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = state => ({
-    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
-  });
-
-  return mapStateToProps;
-};
-
-const iconStyle = {
-  height: null,
-  lineHeight: '27px',
-};
-
-export default @connect(makeMapStateToProps)
-@injectIntl
-class UploadButton extends ImmutablePureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    onSelectFile: PropTypes.func.isRequired,
-    style: PropTypes.object,
-    resetFileKey: PropTypes.number,
-    acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleChange = (e) => {
-    if (e.target.files.length > 0) {
-      this.props.onSelectFile(e.target.files);
-    }
-  }
-
-  handleClick = () => {
-    this.fileElement.click();
-  }
-
-  setRef = (c) => {
-    this.fileElement = c;
-  }
-
-  render () {
-    const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <div className='compose-form-upload-button'>
-        <IconButton
-          inverted
-          icon='camera'
-          title={intl.formatMessage(messages.upload)}
-          disabled={disabled}
-          onClick={this.handleClick}
-          className='compose-form-upload-button__icon'
-          size={18}
-          style={iconStyle}
-        />
-        <label>
-          <span style={{ display: 'none' }}>{intl.formatMessage(messages.upload)}</span>
-          <input
-            key={resetFileKey}
-            ref={this.setRef}
-            type='file'
-            multiple
-            accept={acceptContentTypes.toArray().join(',')}
-            onChange={this.handleChange}
-            disabled={disabled}
-            style={{ display: 'none' }}
-          />
-        </label>
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/gabsocial/features/compose/components/upload_button/upload_button.scss b/app/javascript/gabsocial/features/compose/components/upload_button/upload_button.scss
deleted file mode 100644
index 2cd05f67..00000000
--- a/app/javascript/gabsocial/features/compose/components/upload_button/upload_button.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.compose-form-upload-button {
-  &__icon {
-    line-height: 27px;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/compose/components/upload_form/upload_form.js b/app/javascript/gabsocial/features/compose/components/upload_form/upload_form.js
index d6d24dd3..b146ca92 100644
--- a/app/javascript/gabsocial/features/compose/components/upload_form/upload_form.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_form/upload_form.js
@@ -4,8 +4,6 @@ import UploadProgress from '../upload_progress';
 import UploadContainer from '../../containers/upload_container';
 import SensitiveButtonContainer from '../../containers/sensitive_button_container';
 
-import './upload_form.scss';
-
 const mapStateToProps = state => ({
   mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
 });
diff --git a/app/javascript/gabsocial/features/compose/components/upload_progress/upload_progress.js b/app/javascript/gabsocial/features/compose/components/upload_progress/upload_progress.js
index f02d3115..fbe7c9cd 100644
--- a/app/javascript/gabsocial/features/compose/components/upload_progress/upload_progress.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_progress/upload_progress.js
@@ -3,8 +3,6 @@ import spring from 'react-motion/lib/spring';
 import Motion from '../../../ui/util/optional_motion';
 import Icon from '../../../../components/icon';
 
-import './upload_progress.scss'
-
 const mapStateToProps = state => ({
   active: state.getIn(['compose', 'is_uploading']),
   progress: state.getIn(['compose', 'progress']),
diff --git a/app/javascript/gabsocial/features/compose/components/warning/warning.js b/app/javascript/gabsocial/features/compose/components/warning/warning.js
index d76b42d1..0f4760f4 100644
--- a/app/javascript/gabsocial/features/compose/components/warning/warning.js
+++ b/app/javascript/gabsocial/features/compose/components/warning/warning.js
@@ -1,8 +1,6 @@
 import Motion from '../../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 
-import './warning.scss';
-
 export default class Warning extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/gabsocial/features/compose/compose.js b/app/javascript/gabsocial/features/compose/compose.js
index 28076570..0d100431 100644
--- a/app/javascript/gabsocial/features/compose/compose.js
+++ b/app/javascript/gabsocial/features/compose/compose.js
@@ -15,8 +15,6 @@ import SearchResultsContainer from './containers/search_results_container';
 import NavigationBar from './components/navigation_bar';
 import elephantUIPlane from '../../../images/logo_ui_column_footer.png';
 
-import './compose.scss';
-
 const messages = defineMessages({
   start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
   home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
diff --git a/app/javascript/gabsocial/features/compose/containers/poll_button_container.js b/app/javascript/gabsocial/features/compose/containers/poll_button_container.js
deleted file mode 100644
index 6fda3485..00000000
--- a/app/javascript/gabsocial/features/compose/containers/poll_button_container.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import PollButton from '../components/poll_button';
-import { addPoll, removePoll } from '../../../actions/compose';
-
-const mapStateToProps = state => ({
-  unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
-  active: state.getIn(['compose', 'poll']) !== null,
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onClick () {
-    dispatch((_, getState) => {
-      if (getState().getIn(['compose', 'poll'])) {
-        dispatch(removePoll());
-      } else {
-        dispatch(addPoll());
-      }
-    });
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(PollButton);
diff --git a/app/javascript/gabsocial/features/compose/containers/privacy_dropdown_container.js b/app/javascript/gabsocial/features/compose/containers/privacy_dropdown_container.js
deleted file mode 100644
index de4a2fc5..00000000
--- a/app/javascript/gabsocial/features/compose/containers/privacy_dropdown_container.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import PrivacyDropdown from '../components/privacy_dropdown';
-import { changeComposeVisibility } from '../../../actions/compose';
-import { openModal, closeModal } from '../../../actions/modal';
-import { isUserTouching } from '../../../utils/is_mobile';
-
-const mapStateToProps = state => ({
-  isModalOpen: state.get('modal').modalType === 'ACTIONS',
-  value: state.getIn(['compose', 'privacy']),
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onChange (value) {
-    dispatch(changeComposeVisibility(value));
-  },
-
-  isUserTouching,
-  onModalOpen: props => dispatch(openModal('ACTIONS', props)),
-  onModalClose: () => dispatch(closeModal()),
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown);
diff --git a/app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js b/app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js
deleted file mode 100644
index a046e704..00000000
--- a/app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import SchedulePostDropdown from '../components/schedule_post_dropdown';
-import { changeScheduledAt } from '../../../actions/compose';
-import { openModal } from '../../../actions/modal';
-import { me } from '../../../initial_state';
-
-const mapStateToProps = state => ({
-  date: state.getIn(['compose', 'scheduled_at']),
-  isPro: state.getIn(['accounts', me, 'is_pro']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  setScheduledAt (date) {
-    dispatch(changeScheduledAt(date));
-  },
-
-  onOpenProUpgradeModal() {
-    dispatch(openModal('PRO_UPGRADE'));
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(SchedulePostDropdown);
diff --git a/app/javascript/gabsocial/features/compose/containers/spoiler_button_container.js b/app/javascript/gabsocial/features/compose/containers/spoiler_button_container.js
deleted file mode 100644
index b7aca741..00000000
--- a/app/javascript/gabsocial/features/compose/containers/spoiler_button_container.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import TextIconButton from '../components/text_icon_button';
-import { changeComposeSpoilerness } from '../../../actions/compose';
-import { injectIntl, defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
-  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
-});
-
-const mapStateToProps = (state, { intl }) => ({
-  label: 'CW',
-  title: intl.formatMessage(state.getIn(['compose', 'spoiler']) ? messages.marked : messages.unmarked),
-  active: state.getIn(['compose', 'spoiler']),
-  ariaControls: 'cw-spoiler-input',
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onClick () {
-    dispatch(changeComposeSpoilerness());
-  },
-
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton));
diff --git a/app/javascript/gabsocial/features/compose/containers/upload_button_container.js b/app/javascript/gabsocial/features/compose/containers/upload_button_container.js
deleted file mode 100644
index 03b0c552..00000000
--- a/app/javascript/gabsocial/features/compose/containers/upload_button_container.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import UploadButton from '../components/upload_button';
-import { uploadCompose } from '../../../actions/compose';
-
-const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
-  unavailable: state.getIn(['compose', 'poll']) !== null,
-  resetFileKey: state.getIn(['compose', 'resetFileKey']),
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onSelectFile (files) {
-    dispatch(uploadCompose(files));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);
diff --git a/app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.js b/app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.js
index 0834ff61..53b220cb 100644
--- a/app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.js
+++ b/app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.js
@@ -8,8 +8,6 @@ import Avatar from '../../../../components/avatar';
 import DisplayName from '../../../../components/display_name';
 import IconButton from '../../../../components/icon_button';
 
-import './account_authorize.scss';
-
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
   reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
diff --git a/app/javascript/gabsocial/features/groups/sidebar_panel/index.js b/app/javascript/gabsocial/features/groups/sidebar_panel/index.js
deleted file mode 100644
index d31dcb0e..00000000
--- a/app/javascript/gabsocial/features/groups/sidebar_panel/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
-import Item from './item';
-import Icon from '../../../components/icon';
-
-const messages = defineMessages({
-    title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups You\'re In' },
-    show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
-});
-
-const mapStateToProps = (state, { id }) => ({
-	groupIds: state.getIn(['group_lists', 'member']),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class GroupSidebarPanel extends ImmutablePureComponent {
-    static propTypes = {
-        groupIds: ImmutablePropTypes.list,
-    }
-
-    render() {
-        const { intl, groupIds } = this.props;
-        const count = groupIds.count();
-
-        // Only when there are groups to show
-        if (count === 0) return null;
-
-        return (
-            <div className='wtf-panel group-sidebar-panel'>
-                <div className='wtf-panel-header'>
-                    <Icon id='users' className='wtf-panel-header__icon' />
-                    <span className='wtf-panel-header__label'>{intl.formatMessage(messages.title)}</span>
-                </div>
-
-                <div className='wtf-panel__content'>
-                    <div className="group-sidebar-panel__items">
-                        {groupIds.slice(0, 10).map(groupId => <Item key={groupId} id={groupId} />)}
-                        {count > 10 && <Link className="group-sidebar-panel__items__show-all" to='/groups/browse/member'>{intl.formatMessage(messages.show_all)}</Link>}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/app/javascript/gabsocial/features/groups/sidebar_panel/item.js b/app/javascript/gabsocial/features/groups/sidebar_panel/item.js
deleted file mode 100644
index 9ee283f4..00000000
--- a/app/javascript/gabsocial/features/groups/sidebar_panel/item.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
-import { shortNumberFormat } from '../../../utils/numbers';
-
-const messages = defineMessages({
-    new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
-    no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
-});
-
-const mapStateToProps = (state, { id }) => ({
-	group: state.getIn(['groups', id]),
-	relationships: state.getIn(['group_relationships', id]),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Item extends ImmutablePureComponent {
-    static propTypes = {
-        group: ImmutablePropTypes.map,
-        relationships: ImmutablePropTypes.map,
-    }
-
-    render() {
-        const { intl, group, relationships } = this.props;
-
-        // Wait for relationships
-        if (!relationships) return null;
-
-        const unreadCount = relationships.get('unread_count');
-
-        return (
-            <Link to={`/groups/${group.get('id')}`} className="group-sidebar-panel__item">
-                <div className="group-sidebar-panel__item__title">{group.get('title')}</div>
-                <div className="group-sidebar-panel__item__meta">
-                    {unreadCount > 0 && <span className="group-sidebar-panel__item__meta__unread">{shortNumberFormat(unreadCount)} {intl.formatMessage(messages.new_statuses)}</span>}
-                    {unreadCount === 0 && <span>{intl.formatMessage(messages.no_recent_activity)}</span>}
-                </div>
-            </Link>
-        );
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/home_timeline/index.js b/app/javascript/gabsocial/features/home_timeline/index.js
index 5b58b7a5..6d9344b0 100644
--- a/app/javascript/gabsocial/features/home_timeline/index.js
+++ b/app/javascript/gabsocial/features/home_timeline/index.js
@@ -67,9 +67,6 @@ class HomeTimeline extends PureComponent {
 
     return (
       <Column heading={intl.formatMessage(messages.title)}>
-        <HomeColumnHeader activeItem='home' active={hasUnread}>
-          <ColumnSettings />
-        </HomeColumnHeader>
         <StatusListContainer
           scrollKey='home_timeline'
           onLoadMore={this.handleLoadMore}
diff --git a/app/javascript/gabsocial/features/introduction/introduction.js b/app/javascript/gabsocial/features/introduction/introduction.js
index b454aec6..7965b427 100644
--- a/app/javascript/gabsocial/features/introduction/introduction.js
+++ b/app/javascript/gabsocial/features/introduction/introduction.js
@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { closeOnboarding } from '../../actions/onboarding';
 
-import './introduction.scss';
-
 class FrameWelcome extends Component {
   static propTypes = {
     domain: PropTypes.string.isRequired,
diff --git a/app/javascript/gabsocial/features/list_adder/components/list/list.js b/app/javascript/gabsocial/features/list_adder/components/list/list.js
index fbd94d56..8b896ce0 100644
--- a/app/javascript/gabsocial/features/list_adder/components/list/list.js
+++ b/app/javascript/gabsocial/features/list_adder/components/list/list.js
@@ -5,8 +5,6 @@ import { removeFromListAdder, addToListAdder } from '../../../../actions/lists';
 import IconButton from '../../../../components/icon_button';
 import Icon from '../../../../components/icon';
 
-import './list.scss';
-
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
   add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
diff --git a/app/javascript/gabsocial/features/list_adder/list_adder.js b/app/javascript/gabsocial/features/list_adder/list_adder.js
index 649def5f..6c1feea6 100644
--- a/app/javascript/gabsocial/features/list_adder/list_adder.js
+++ b/app/javascript/gabsocial/features/list_adder/list_adder.js
@@ -9,8 +9,6 @@ import IconButton from '../../components/icon_button';
 import NewListForm from '../lists/components/new_list_form';
 import ColumnSubheading from '../../components/column_subheading/column_subheading';
 
-import './list_adder.scss';
-
 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
   if (!lists) {
     return lists;
diff --git a/app/javascript/gabsocial/features/list_editor/list_editor.js b/app/javascript/gabsocial/features/list_editor/list_editor.js
index f19d3e83..e28229b2 100644
--- a/app/javascript/gabsocial/features/list_editor/list_editor.js
+++ b/app/javascript/gabsocial/features/list_editor/list_editor.js
@@ -8,8 +8,6 @@ import EditListForm from './components/edit_list_form/edit_list_form';
 import ColumnSubheading from '../../components/column_subheading';
 import IconButton from '../../components/icon_button';
 
-import './list_editor.scss';
-
 const mapStateToProps = state => ({
   accountIds: state.getIn(['listEditor', 'accounts', 'items']),
   searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
diff --git a/app/javascript/gabsocial/features/notifications/components/notification/notification.js b/app/javascript/gabsocial/features/notifications/components/notification/notification.js
index 1121ee45..587cdd20 100644
--- a/app/javascript/gabsocial/features/notifications/components/notification/notification.js
+++ b/app/javascript/gabsocial/features/notifications/components/notification/notification.js
@@ -7,8 +7,6 @@ import AccountContainer from '../../../../containers/account_container';
 import Permalink from '../../../../components/permalink';
 import Icon from '../../../../components/icon';
 
-import './notification.scss';
-
 const notificationForScreenReader = (intl, message, timestamp) => {
   const output = [message];
 
diff --git a/app/javascript/gabsocial/features/status/components/card/card.js b/app/javascript/gabsocial/features/status/components/card/card.js
index fdf4e91a..7e6fb593 100644
--- a/app/javascript/gabsocial/features/status/components/card/card.js
+++ b/app/javascript/gabsocial/features/status/components/card/card.js
@@ -5,8 +5,6 @@ import punycode from 'punycode';
 import classnames from 'classnames';
 import Icon from '../../../../components/icon';
 
-import './card.scss';
-
 const IDNA_PREFIX = 'xn--';
 
 const decodeIDNA = domain => {
diff --git a/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js b/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js
index dfd0f928..77a320b4 100644
--- a/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js
+++ b/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js
@@ -14,8 +14,6 @@ import Poll from '../../../../components/poll';
 import Card from '../card';
 import Video from '../../../video';
 
-import './detailed_status.scss';
-
 export default class DetailedStatus extends ImmutablePureComponent {
 
   static contextTypes = {
diff --git a/app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js b/app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js
index 11390877..39a90cfa 100644
--- a/app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js
+++ b/app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js
@@ -6,8 +6,6 @@ import { me, isStaff } from '../../../../initial_state';
 import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
 import IconButton from '../../../../components/icon_button';
 
-import './detailed_status_action_bar.scss';
-
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
   edit: { id: 'status.edit', defaultMessage: 'Edit' },
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index c6914ea2..d1bf92a0 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -70,9 +70,6 @@ import { me, meUsername } from '../../initial_state';
 import '../../components/status';
 import { fetchGroups } from '../../actions/groups';
 
-// import '../../../styles/application.scss';
-// import './ui.scss';
-
 const messages = defineMessages({
   beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
diff --git a/app/javascript/gabsocial/pages/group_page.js b/app/javascript/gabsocial/pages/group_page.js
index b575dc42..98ca2e10 100644
--- a/app/javascript/gabsocial/pages/group_page.js
+++ b/app/javascript/gabsocial/pages/group_page.js
@@ -8,7 +8,6 @@ import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import PageLayout from '../components/page_layout';
 import { WhoToFollowPanel } from '../components/panel';
 import LinkFooter from '../components/link_footer';
-import PromoPanel from '../components/promo_panel';
 
 const mapStateToProps = (state, { params: { id } }) => ({
 	group: state.getIn(['groups', id]),
@@ -51,7 +50,6 @@ class GroupPage extends ImmutablePureComponent {
 									group={group}
 									relationships={relationships}
 								/>}
-							<PromoPanel />
 							<LinkFooter />
 						</Fragment>
 					)
diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js
index 2470e6c9..1a8c609f 100644
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -1,38 +1,38 @@
-import { Fragment } from 'react';
-import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import LinkFooter from '../components/link_footer';
-import PromoPanel from '../components/panel/promo_panel';
-import SignUpPanel from '../components/panel/sign_up_panel';
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel';
-import TrendsPanel from '../components/panel/trends_panel';
-import ProgressPanel from '../components/panel/progress_panel';
-// import UserPanel from '../components/user_panel';
-import PageLayout from '../components/page_layout';
-// import TimelineComposeBlock from '../components/timeline_compose_block';
+import { Fragment } from 'react'
+import GroupSidebarPanel from '../components/panel/groups_panel'
+import LinkFooter from '../components/link_footer'
+import SignUpPanel from '../components/panel/sign_up_panel'
+import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+import TrendsPanel from '../components/panel/trends_panel'
+import ProgressPanel from '../components/panel/progress_panel'
+import UserPanel from '../components/user_panel'
+import Search from '../components/search'
+import PageLayout from '../components/page_layout'
+import TimelineComposeBlock from '../components/timeline_compose_block'
 
 export default class HomePage extends PureComponent {
-  render () {
-    const {children} = this.props;
+  render() {
+    const { children } = this.props
 
     return (
       <PageLayout
         layout={{
           RIGHT: (
             <Fragment>
-              { /* <SearchInput /> */ }
-              { /* <GroupSidebarPanel /> */ }
-              <PromoPanel />
+              <Search />
+              <UserPanel />
+              <WhoToFollowPanel />
+              <TrendsPanel />
+              <GroupSidebarPanel />
               <SignUpPanel />
-              { /* <WhoToFollowPanel /> */ }
-              { /* <TrendsPanel /> */ }
               <ProgressPanel />
               <LinkFooter />
             </Fragment>
           ),
         }}
       >
-        {/*<TimelineComposeBlock size={46} shouldCondense={true} autoFocus={false} />*/}
-      { /* children */ }
+        <TimelineComposeBlock autoFocus={false} shouldCondense />
+        {children}
       </PageLayout>
     )
   }
diff --git a/app/javascript/gabsocial/utils/numbers.js b/app/javascript/gabsocial/utils/numbers.js
index 7ae77d4c..9786b26f 100644
--- a/app/javascript/gabsocial/utils/numbers.js
+++ b/app/javascript/gabsocial/utils/numbers.js
@@ -1,9 +1,14 @@
-import { FormattedNumber } from 'react-intl';
+import { Fragment } from 'react'
+import { FormattedNumber } from 'react-intl'
 
 export const shortNumberFormat = number => {
   if (number < 1000) {
-    return <FormattedNumber value={number} />;
+    return <FormattedNumber value={number} />
   }
 
-  return <span><FormattedNumber value={number / 1000} maximumFractionDigits={1} />K</span>;
-};
+  return (
+    <Fragment>
+      <FormattedNumber value={number / 1000} maximumFractionDigits={1} />K
+    </Fragment>
+  )
+}
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index 86531b32..201dec78 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -9,6 +9,13 @@ body {
   overscroll-behavior-y: none;
 }
 
+.statusContent * {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 15px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+}
+
 .default {
   display: flex;
   flex-basis: auto;
@@ -49,7 +56,7 @@ body {
   white-space: inherit;
 }
 
-.flex-normal {
+.flexNormal {
   flex-basis: 0%;
   flex-grow: 1;
   flex-shrink: 1;
@@ -80,13 +87,23 @@ body {
   white-space: nowrap;
 }
 
+.whiteSpaceNoWrap { white-space: nowrap; }
+
+.outlineNone { outline: none; }
+.resizeNone { resize: none; }
+
 .circle { border-radius: 9999px; }
 .radiusSmall { border-radius: 4px; }
 
-.borderColorSubtle { border-color: #e4e4e4; }
+.borderColorSubtle { border-color: #ECECED; }
+.borderColorWhite { border-color: #fff; }
+.borderColorBrand { border-color: #21cf7a; }
 .borderRight1PX { border-right-width: 1px; }
 .borderBottom1PX { border-bottom-width: 1px; }
 .borderLeft1PX { border-left-width: 1px; }
+.borderTop1PX { border-top-width: 1px; }
+.border1PX { border-width: 1px; }
+.border2PX { border-width: 2px; }
 
 .marginAuto { margin: auto; }
 
@@ -101,8 +118,11 @@ body {
 .pointerEventsAuto > * { pointer-events: auto;}
 .pointerEventsNone { pointer-events: none !important; }
 
+.backgroundTransparent { background-color: transparent; }
 .backgroundPanel { background-color: #aaa; }
 .backgroundSubtle { background-color: #F5F8FA; }
+.backgroundSubtle2 { background-color: #e8ecef; }
+.backgroundColorSubtle3 { background-color: #F6F6F9; }
 .backgroundWhite { background-color: #fff; }
 .backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); }
 .backgroundColorBrandLight { background-color: #36e991; }
@@ -114,16 +134,19 @@ body {
 .colorBrand { color: #21cf7a }
 .fillColorBlack { fill: #000; }
 .fillColorBrand { fill: #21cf7a; }
+.fillColorSubtle { fill: #666; }
 
 .bottom0 { bottom: 0; }
 .left0 { left: 0px; }
 .right0 { right: 0px; }
 .top0 { top: 0px; }
 
-.lineHeight125 { height: 1.25em; }
+.lineHeight125 { line-height: 1.25em; }
+.lineHeight15 { line-height: 1.5em; }
 .lineHeight2 { line-height: 2em; }
 
 .positionFixed { position: fixed; }
+.positionSticky { position: sticky; }
 .positionRelative { position: relative; }
 .positionAbsolute { position: absolute; }
 
@@ -131,12 +154,14 @@ body {
 
 .height100VH { height: 100vh; }
 .height100PC { height: 100%; }
-.height50PX { height: 50px; }
-.height72PX { height: 72px; }
 .height22PX { height: 22px; }
+.height50PX { height: 50px; }
+.height53PX { height: 53px; }
+.height72PX { height: 72px; }
+.height122PX { height: 122px; }
 
 .width1015PX { width: 1015px; }
-.width660PX { width: 660px; }
+.width670PX { width: 670px; }
 .width325PX { width: 325px; }
 .width250PX { width: 250px; }
 .width100PC { width: 100%; }
@@ -149,35 +174,48 @@ body {
 .textAlignCenter { text-align: center; }
 
 .fontSize19PX { font-size: 19px; }
+.fontSize16PX { font-size: 16px; }
 .fontSize15PX { font-size: 15px; }
+.fontSize14PX { font-size: 14px; }
 .fontSize13PX { font-size: 13px; }
+.fontSize12PX { font-size: 12px; }
 
 .fontWeightNormal { font-weight: 400; }
+.fontWeight500 { font-weight: 500; }
 .fontWeightBold { font-weight: 600; }
 .fontWeightExtraBold { font-weight: 800; }
 
 .noUnderline { text-decoration: none; }
 .underline { text-decoration: underline; }
 
+.objectFitCover { object-fit: cover; }
+
 .z1 { z-index: 1; }
 .z2 { z-index: 2; }
 .z3 { z-index: 3; }
 
-.marginRight10PX { margin-right: 10px; }
-
 .marginVertical5PX {
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
+.marginLeft5PX { margin-left: 5px; }
+.marginRight2PX { margin-right: 2px; }
+
 .marginVertical10PX {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+.marginRight10PX { margin-right: 10px; }
+.marginLeft15PX { margin-left: 15px; }
+.marginLeftAuto { margin-left: auto; }
+.marginRightAuto { margin-right: auto; }
 .marginBottom15PX { margin-bottom: 15px; }
+.marginBottom10PX { margin-bottom: 10px; }
 .marginTop10PX { margin-top: 10px; }
 .marginTop5PX { margin-top: 5px; }
+.marginTopNeg30PX { margin-top: -30px; }
 
 .paddingHorizontal15PX {
   padding-left: 15px;
@@ -185,6 +223,11 @@ body {
 }
 .paddingRight15PX { padding-right: 15px; }
 
+.paddingVertical5PX {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
 .paddingVertical10PX {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -195,7 +238,12 @@ body {
   padding-bottom: 15px;
 }
 
-.paddingHoizontal10PX {
+.paddingVertical2PX {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.paddingHorizontal10PX {
   padding-left: 10px;
   padding-right: 10px;
 }
diff --git a/package.json b/package.json
index 1ee812ef..26d66e92 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
     "type": "git",
     "url": "https://code.gab.com/gab/social/gab-social"
   },
-  "sideEffects": [ "*.scss" ],
+  "sideEffects": [
+    "*.scss"
+  ],
   "browserslist": [
     "last 2 versions",
     "IE >= 11",
@@ -95,7 +97,6 @@
     "exif-js": "^2.3.0",
     "express": "^4.17.1",
     "file-loader": "^3.0.1",
-    "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
     "http-link-header": "^1.0.2",
     "immutable": "^3.8.2",
@@ -140,7 +141,6 @@
     "react-router-dom": "^4.1.1",
     "react-router-scroll-4": "^1.0.0-beta.1",
     "react-select": "^2.4.4",
-    "react-sparklines": "^1.7.0",
     "react-swipeable-views": "^0.13.0",
     "react-textarea-autosize": "^7.1.0",
     "react-toggle": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 30f6ac39..ae8e5e4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4095,11 +4095,6 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "^3.0.0"
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -8285,13 +8280,6 @@ react-select@^2.4.4:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
-react-sparklines@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/react-sparklines/-/react-sparklines-1.7.0.tgz#9b1d97e8c8610095eeb2ad658d2e1fcf91f91a60"
-  integrity sha512-bJFt9K4c5Z0k44G8KtxIhbG+iyxrKjBZhdW6afP+R7EnIq+iKjbWbEFISrf3WKNFsda+C46XAfnX0StS5fbDcg==
-  dependencies:
-    prop-types "^15.5.10"
-
 react-swipeable-views-core@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.13.1.tgz#8829a922462a8bdd701709cd1b385393d38f1527"