From 389b189d64fade993713cc4b8da635ddd52ba0ec Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Sat, 8 Feb 2020 17:57:09 -0500
Subject: [PATCH] Progress

---
 .../gabsocial/components/account/account.js   |  8 +-
 .../assets/tabs_bar_icon/home_icon.js         | 24 ------
 .../components/assets/tabs_bar_icon/index.js  | 11 ---
 .../tabs_bar_icon/notifications_icon.js       | 26 -------
 .../assets/tabs_bar_icon/search_icon.js       | 24 ------
 .../autosuggest_textbox.js                    |  2 +-
 .../gabsocial/components/display_name.js      |  2 +-
 app/javascript/gabsocial/components/header.js | 36 ++++-----
 .../gabsocial/components/icon/icon.js         | 78 ++++++++++++-------
 .../gabsocial/components/icon/icon.scss       | 46 -----------
 .../components/icon/svgs/close_icon.js        | 26 +++++++
 .../components/icon/svgs/comment_icon.js      | 26 +++++++
 .../components/icon/svgs/ellipsis_icon.js     | 28 +++++++
 .../components/icon/svgs/globe_icon.js        | 28 +++++++
 .../tabs_bar_icon => icon/svgs}/group_icon.js |  4 +-
 .../components/icon/svgs/home_icon.js         | 26 +++++++
 .../components/icon/svgs/like_icon.js         | 26 +++++++
 .../icon/svgs/notifications_icon.js           | 28 +++++++
 .../components/icon/svgs/repost_icon.js       | 26 +++++++
 .../components/icon/svgs/search_icon.js       | 26 +++++++
 .../components/icon/svgs/share_icon.js        | 30 +++++++
 .../components/icon/svgs/verified_icon.js     | 26 +++++++
 .../gabsocial/components/page_layout.js       | 17 +++-
 .../components/panel/groups_panel.js          |  2 +-
 .../gabsocial/components/search/search.js     | 12 +--
 .../gabsocial/components/status/status.js     | 12 +--
 .../status_action_bar/status_action_bar.js    | 44 ++++++-----
 .../timeline_compose_block.js                 | 17 ++--
 .../components/schedule_post_dropdown.js      |  3 +-
 app/javascript/gabsocial/pages/home_page.js   |  4 +-
 app/javascript/styles/global.css              | 14 +++-
 app/views/layouts/application.html.haml       |  2 +-
 32 files changed, 449 insertions(+), 235 deletions(-)
 delete mode 100644 app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js
 delete mode 100644 app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js
 delete mode 100644 app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js
 delete mode 100644 app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js
 delete mode 100644 app/javascript/gabsocial/components/icon/icon.scss
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/close_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/comment_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/ellipsis_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/globe_icon.js
 rename app/javascript/gabsocial/components/{assets/tabs_bar_icon => icon/svgs}/group_icon.js (92%)
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/home_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/like_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/notifications_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/repost_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/search_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/share_icon.js
 create mode 100644 app/javascript/gabsocial/components/icon/svgs/verified_icon.js

diff --git a/app/javascript/gabsocial/components/account/account.js b/app/javascript/gabsocial/components/account/account.js
index a326fecb..8f1ff1b2 100644
--- a/app/javascript/gabsocial/components/account/account.js
+++ b/app/javascript/gabsocial/components/account/account.js
@@ -131,9 +131,11 @@ class Account extends ImmutablePureComponent {
             </button>
           </div>
 
-          <button className={[styles.default, styles.marginLeftAuto, styles.paddingVertical2PX, styles.cursorPointer].join(' ')}>
-            <Icon width='14px' height='14px' />
-          </button>
+          <div className={[styles.default, styles.marginLeftAuto].join(' ')}>
+            <button className={[styles.default, styles.circle, styles.backgroundSubtle2, styles.paddingVertical5PX, styles.paddingHorizontal5PX, styles.cursorPointer].join(' ')}>
+              <Icon id='close' width='8px' height='8px' />
+            </button>
+          </div>
 
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js
deleted file mode 100644
index be20b07d..00000000
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const HomeIcon = ({
-  className = 'header-nav__item__icon',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48'
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    xmlSpace='preserve'
-  >
-    <g>
-      <path className='header-nav__item__icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
-    </g>
-  </svg>
-)
-
-export default HomeIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js
deleted file mode 100644
index b86af141..00000000
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import GroupIcon from './group_icon';
-import HomeIcon from './home_icon';
-import NotificationsIcon from './notifications_icon';
-import SearchIcon from './search_icon';
-
-export {
-  GroupIcon,
-  HomeIcon,
-  NotificationsIcon,
-  SearchIcon,
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js
deleted file mode 100644
index b661c9f1..00000000
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const NotificationsIcon = ({
-  className = 'header-nav__item__icon',
-  width = '26px',
-  height = '26px',
-  viewBox = '0 0 48 48'
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    xmlSpace='preserve'
-  >
-    <g>
-      <path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
-      <path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
-      <path className='header-nav__item__icon__path' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
-    </g>
-  </svg>
-)
-
-export default NotificationsIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js b/app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js
deleted file mode 100644
index 6b49234e..00000000
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const SearchIcon = ({
-  className = 'tabs-bar-icon',
-  width = '16px',
-  height = '16px',
-  viewBox = '0 0 48 48'
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    xmlSpace='preserve'
-  >
-    <g>
-      <path className='tabs-bar-icon__path' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
-    </g>
-  </svg>
-)
-
-export default SearchIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
index c26d57e9..717a5503 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
@@ -203,7 +203,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
             <div className={[styles.default, styles.marginLeft5PX].join(' ')}>
               <Textarea
                 inputRef={this.setTextbox}
-                className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineNone, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
+                className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineFocusBrand, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
                 disabled={disabled}
                 placeholder={placeholder}
                 autoFocus={autoFocus}
diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index be28471d..3455a2ab 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -21,7 +21,7 @@ export default class DisplayName extends ImmutablePureComponent {
         </bdi>
         {
           account.get('is_verified') &&
-          <Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Verified Account' />
+          <Icon id='verified' width='16px' height='16px' 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' />*/
diff --git a/app/javascript/gabsocial/components/header.js b/app/javascript/gabsocial/components/header.js
index 7e49ffae..aa628bf2 100644
--- a/app/javascript/gabsocial/components/header.js
+++ b/app/javascript/gabsocial/components/header.js
@@ -4,17 +4,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
 import classNames from 'classnames/bind'
 import Button from './button'
-import Icon from './icon'
 import { closeSidebar } from '../actions/sidebar'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 // import ProgressPanel from './progress_panel'
 import GabLogo from './assets/gab_logo'
-import {
-  GroupIcon,
-  HomeIcon,
-  NotificationsIcon,
-} from './assets/tabs_bar_icon'
+import Icon from './icon'
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -110,32 +105,32 @@ class Header extends ImmutablePureComponent {
     const menuItems = [
       {
         title: 'Home',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='home' />,
         to: '/',
       },
       {
         title: 'Notifications',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='notifications' />,
         to: '/notifications',
       },
       {
         title: 'Groups',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='groups' />,
         to: '/groups',
       },
       {
         title: 'Lists',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='lists' />,
         to: '/lists',
       },
       {
         title: 'Chat',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='chat' />,
         to: '/',
       },
       {
         title: 'Profile',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='profile' />,
         to: '/',
       },
     ]
@@ -143,12 +138,12 @@ class Header extends ImmutablePureComponent {
     const shortcutItems = [
       {
         title: 'Meme Group',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='group' />,
         to: '/',
       },
       {
         title: 'Andrew',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='user' />,
         to: '/',
       },
     ]
@@ -156,22 +151,22 @@ class Header extends ImmutablePureComponent {
     const exploreItems = [
       {
         title: 'Trends',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='trends' />,
         to: '/',
       },
       {
         title: 'Dissenter',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='dissenter' />,
         to: '/',
       },
       {
         title: 'Apps',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='apps' />,
         to: '/',
       },
       {
         title: 'Shop',
-        icon: <NotificationsIcon />,
+        icon: <Icon id='shop' />,
         to: '/',
       },
     ]
@@ -186,9 +181,6 @@ class Header extends ImmutablePureComponent {
                   <GabLogo />
                 </NavLink>
               </h1>
-              <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>
                 {
@@ -283,7 +275,7 @@ class HeaderMenuItem extends PureComponent {
       >
         <div className={containerClasses}>
           <div className={[styles.default]}>
-            <NotificationsIcon className={iconClasses} width='16px' height='16px' />
+            <Icon 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>
diff --git a/app/javascript/gabsocial/components/icon/icon.js b/app/javascript/gabsocial/components/icon/icon.js
index e0977920..a7f07ad2 100644
--- a/app/javascript/gabsocial/components/icon/icon.js
+++ b/app/javascript/gabsocial/components/icon/icon.js
@@ -1,4 +1,15 @@
-import classNames from 'classnames';
+import CloseIcon from './svgs/close_icon'
+import CommentIcon from './svgs/comment_icon'
+import EllipsisIcon from './svgs/ellipsis_icon'
+import GlobeIcon from './svgs/globe_icon'
+import GroupIcon from './svgs/group_icon'
+import HomeIcon from './svgs/home_icon'
+import LikeIcon from './svgs/like_icon'
+import NotificationsIcon from './svgs/notifications_icon'
+import RepostIcon from './svgs/repost_icon'
+import SearchIcon from './svgs/search_icon'
+import ShareIcon from './svgs/share_icon'
+import VerifiedIcon from './svgs/verified_icon'
 
 export default class Icon extends PureComponent {
 
@@ -7,35 +18,42 @@ export default class Icon extends PureComponent {
     className: PropTypes.string,
     width: PropTypes.string,
     height: PropTypes.string,
-  };
-
-  static defaultProps = {
-    width: '26px',
-    height: '26px',
-  };
-
-  render () {
-    const { className, width, height } = this.props;
-
-    return (
-      <svg
-        className={className}
-        version='1.1'
-        xmlns='http://www.w3.org/2000/svg'
-        x='0px'
-        y='0px'
-        width={width}
-        height={height}
-        viewBox='0 0 48 48'
-        xmlSpace='preserve'
-      >
-        <g>
-          <path d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
-          <path d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
-          <path d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
-        </g>
-      </svg>
-    );
   }
 
+  render() {
+    const { id, ...options } = this.props
+
+    console.log("id:", id)
+
+    switch (id) {
+      case 'close':
+        return <CloseIcon {...options} />
+      case 'comment':
+        return <CommentIcon {...options} />
+      case 'ellipsis':
+        return <EllipsisIcon {...options} />
+      case 'globe':
+        return <GlobeIcon {...options} />
+      case 'group':
+        return <GroupIcon {...options} />
+      case 'home':
+        return <HomeIcon {...options} />
+      case 'like':
+        return <LikeIcon {...options} />
+      case 'notifications':
+        return <NotificationsIcon {...options} />
+      case 'repost':
+        return <RepostIcon {...options} />
+      case 'search':
+        return <SearchIcon {...options} />
+        case 'share':
+            return <ShareIcon {...options} />
+      case 'verified':
+        return <VerifiedIcon {...options} />
+
+      default:
+        return <NotificationsIcon {...options} />
+    }
+
+  }
 }
diff --git a/app/javascript/gabsocial/components/icon/icon.scss b/app/javascript/gabsocial/components/icon/icon.scss
deleted file mode 100644
index 8abe42da..00000000
--- a/app/javascript/gabsocial/components/icon/icon.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.star-icon.active {
-  color: $gold-star;
-}
-
-button.icon-button i.fa-retweet {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23999999' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23999999' stroke-width='0'/></svg>");
-
-  &:hover {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($action-button-color, 7%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($action-button-color, 9%))}' stroke-width='0'/></svg>");
-  }
-}
-
-button.icon-button.disabled i.fa-retweet {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(darken($action-button-color, 13%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($gab-secondary-text)}' stroke-width='0'/></svg>");
-}
-
-.no-reduce-motion button.icon-button i.fa-retweet {
-  background-position: 0 0;
-  height: 19px;
-  transition: background-position 0.9s steps(10);
-  transition-duration: 0s;
-  vertical-align: middle;
-  width: 22px;
-
-  &::before {
-    display: none !important;
-  }
-}
-
-.no-reduce-motion button.icon-button.active i.fa-retweet {
-  transition-duration: 0.9s;
-  background-position: 0 100%;
-}
-
-.reduce-motion button.icon-button i.fa-retweet {
-  color: $action-button-color;
-  transition: color 100ms ease-in;
-}
-
-.reduce-motion button.icon-button.active i.fa-retweet {
-  color: $highlight-text-color;
-}
-
-.icon-button.active i.fa-retweet {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%2321cf7a' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%2321cf7a' stroke-width='0'/></svg>");
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/close_icon.js b/app/javascript/gabsocial/components/icon/svgs/close_icon.js
new file mode 100644
index 00000000..b4fafaa1
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/close_icon.js
@@ -0,0 +1,26 @@
+const CloseIcon = ({
+  className = '',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 24 24',
+  title = 'Close',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+  <g>
+    <path d="M 14.121094 12 L 23.558594 2.5625 C 24.144531 1.976562 24.144531 1.027344 23.558594 0.441406 C 22.972656 -0.144531 22.027344 -0.144531 21.4375 0.441406 L 12 9.878906 L 2.5625 0.441406 C 1.972656 -0.144531 1.027344 -0.144531 0.441406 0.441406 C -0.144531 1.027344 -0.144531 1.976562 0.441406 2.5625 L 9.878906 12 L 0.441406 21.4375 C -0.144531 22.023438 -0.144531 22.972656 0.441406 23.558594 C 0.730469 23.855469 1.117188 24 1.5 24 C 1.882812 24 2.269531 23.855469 2.5625 23.558594 L 12 14.121094 L 21.4375 23.558594 C 21.730469 23.855469 22.117188 24 22.5 24 C 22.882812 24 23.269531 23.855469 23.558594 23.558594 C 24.144531 22.972656 24.144531 22.023438 23.558594 21.4375 Z M 14.121094 12 "/>
+  </g>
+</svg>
+)
+
+export default CloseIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/comment_icon.js b/app/javascript/gabsocial/components/icon/svgs/comment_icon.js
new file mode 100644
index 00000000..0e1d53c8
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/comment_icon.js
@@ -0,0 +1,26 @@
+const CommentIcon = ({
+  className = '',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48',
+  title = 'Comment',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d="M 34.511719 47 C 34.085938 47 33.664062 46.863281 33.324219 46.582031 L 20.855469 36.339844 L 4.492188 36.339844 C 2.027344 36.339844 0 34.273438 0 31.75 L 0 4.539062 C 0 2.03125 2.027344 0.0273438 4.492188 0.0273438 L 43.492188 0.0273438 C 45.984375 0.0273438 48 2.03125 48 4.539062 L 48 31.75 C 48 34.273438 45.984375 36.339844 43.492188 36.339844 L 36.367188 36.339844 L 36.367188 45.125 C 36.367188 45.851562 35.960938 46.511719 35.304688 46.820312 C 35.050781 46.941406 34.785156 47 34.511719 47 Z M 4.492188 3.769531 C 4.097656 3.769531 3.773438 4.097656 3.773438 4.539062 L 3.773438 31.75 C 3.773438 32.199219 4.101562 32.597656 4.492188 32.597656 L 21.523438 32.597656 C 21.960938 32.597656 22.375 32.738281 22.707031 33.015625 L 32.625 41.160156 L 32.625 34.449219 C 32.625 33.417969 33.476562 32.597656 34.511719 32.597656 L 43.492188 32.597656 C 43.894531 32.597656 44.253906 32.183594 44.253906 31.75 L 44.253906 4.539062 C 44.253906 4.109375 43.902344 3.769531 43.492188 3.769531 Z M 4.492188 3.769531" />
+    </g>
+  </svg>
+)
+
+export default CommentIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/ellipsis_icon.js b/app/javascript/gabsocial/components/icon/svgs/ellipsis_icon.js
new file mode 100644
index 00000000..e2d47a18
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/ellipsis_icon.js
@@ -0,0 +1,28 @@
+const EllipsisIcon = ({
+  className = '',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 24 24',
+  title = 'Ellipsis',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+  <g>
+    <circle cx='5' cy='12' r='2' />
+    <circle cx='12' cy='12' r='2' />
+    <circle cx='19' cy='12' r='2' />
+  </g>
+</svg>
+)
+
+export default EllipsisIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/globe_icon.js b/app/javascript/gabsocial/components/icon/svgs/globe_icon.js
new file mode 100644
index 00000000..b9483a93
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/globe_icon.js
@@ -0,0 +1,28 @@
+const GlobeIcon = ({
+  className = '',
+  width = '12px',
+  height = '12px',
+  viewBox = '0 0 28 28',
+  title = 'Globe',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <circle fill='none' stroke='#616770' stroke-width='1px' cx='14' cy='14' r='13.5' />
+      <path fill='#616770' d='M 16 5 L 18 4 L 20 5 L 22 5 L 23 4 C 24 5 25 6 25 7 L 25 7 L 22 8 L 20 7 L 19 6 L 16 6 L 14 7 L 15 11 L 18 12 L 20 12 L 21 13 L 21 14 L 22 16 L 23 18 L 23 20 L 26.4 21 C 20 27 12 29 6 25 C 1 21 0 14 1 8 L 2 11 L 3 12 L 5 13 L 4 14 L 4 15 L 5 17 L 7 17 L 7 22 L 8 24 L 9 25 L 9 22 L 11 21 L 11 20 L 13 18 L 14 15 L 12 15 L 10 13 L 7 13 L 6 11 L 5 13 L 5 11 L 4 10 L 4 8 L 7 8 L 9 7 L 11 4 L 12 4 L 13 2 L 10 2 L 10 1 C 12 0 16 0 18 1 L 18 2 L 16 2 L 15 4 Z M 16 5' />
+      {/*<path fill='#616770' d='M 14 27 C 21 28 28 21 28 14 C 28 6 21 0 14 0 C 8 0 3 3 1 8 L 0 8 L 1 8 C -1 15 1 24 8 26 C 10 27 12 28 14 27 Z M 24 21 L 24 20 L 24 18 C 24 18 24 18 24 18 L 22 14 L 22 13 C 22 12 22 12 22 12 L 20 11 C 20 11 20 11 20 11 L 18 12 L 15 10 L 15 8 L 16 7 L 18 7 L 19 8 C 19 8 19 8 19 8 L 22 8 C 22 8 22 8 23 8 L 25 7 C 27 12 27 17 24 21 Z M 23 4 L 22 5 L 20 4 L 18 4 C 18 4 18 4 18 4 L 16 4 L 16 4 L 16 3 L 18 3 C 18 3 18 3 18 3 L 20 2 C 21 2 22 3 23 4 Z M 8 1 L 10 2 C 10 2 10 2 10 2 L 12 3 L 12 3 L 11 4 C 10 4 10 4 10 4 L 9 6 L 7 7 L 4 8 C 3 8 3 8 3 8 L 3 10 C 3 10 3 10 3 10 L 4 11 L 4 12 L 2 10 L 2 8 C 3 5 5 3 8 1 Z M 7 17 L 5 16 L 4 15 L 4 14 L 6 12 L 7 13 C 7 13 7 14 7 14 L 10 14 L 11 16 C 11 16 11 16 12 16 L 13 16 L 13 17 L 11 19 C 11 19 11 19 11 20 L 11 21 L 9 22 C 9 22 9 22 9 22 L 9 24 L 8 24 L 7 22 L 7 17 C 7 17 7 17 7 17 Z M 1 10 L 1 11 C 1 11 1 11 2 11 L 4 13 L 3 13 C 3 13 3 13 3 14 L 3 15 C 3 15 3 15 3 15 L 4 17 C 4 17 4 17 5 17 L 7 18 L 7 22 C 7 22 7 22 7 22 L 7 24 C 8 25 8 25 8 25 L 9 25 C 9 25 9 25 9 25 C 10 25 10 25 10 25 L 10 23 L 11 21 C 12 21 12 21 12 21 L 12 20 L 13 18 C 13 18 13 18 13 18 L 14 15 C 14 15 14 15 14 15 C 14 15 14 15 14 15 L 12 15 L 11 13 C 11 13 10 13 10 13 L 7 13 L 6 11 C 6 11 6 11 6 11 C 6 11 6 11 6 11 L 5 11 L 5 11 C 5 11 5 10 5 10 L 4 10 L 4 9 L 7 8 C 7 8 7 8 7 8 L 10 7 C 10 7 10 7 10 7 L 11 5 L 12 4 C 12 4 12 4 13 4 L 13 2 C 13 2 13 2 13 2 C 13 2 13 2 13 2 L 10 1 L 9 1 C 12 0 16 0 18 1 L 18 2 L 16 2 C 16 2 15 2 15 2 L 14 4 C 14 4 14 4 15 5 C 15 5 15 5 15 5 L 16 5 C 16 5 16 5 16 5 L 18 5 L 19 5 C 19 5 19 5 19 5 L 22 6 C 22 6 22 6 22 5 L 23 5 C 24 5 24 6 25 7 L 22 7 L 20 7 L 19 6 C 19 6 19 6 19 6 L 16 6 C 16 6 16 6 16 6 L 14 7 C 14 7 14 7 14 8 L 14 11 C 14 11 15 11 15 11 L 18 13 C 18 13 18 13 18 13 L 20 12 L 21 13 L 21 14 C 21 15 21 15 21 15 L 23 18 L 23 20 C 23 20 23 20 23 20 L 24 21 C 20 27 11 28 6 24 C 1 21 0 15 1 10 Z M 1 10' /> */}
+    </g>
+  </svg>
+)
+
+export default GlobeIcon
diff --git a/app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js b/app/javascript/gabsocial/components/icon/svgs/group_icon.js
similarity index 92%
rename from app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js
rename to app/javascript/gabsocial/components/icon/svgs/group_icon.js
index f92fe5d1..2837e232 100644
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js
+++ b/app/javascript/gabsocial/components/icon/svgs/group_icon.js
@@ -2,7 +2,8 @@ const GroupIcon = ({
   className = 'header-nav__item__icon',
   width = '26px',
   height = '26px',
-  viewBox = '0 0 48 48'
+  viewBox = '0 0 48 48',
+  title = 'Group',
 }) => (
   <svg
     className={className}
@@ -14,6 +15,7 @@ const GroupIcon = ({
     height={height}
     viewBox={viewBox}
     xmlSpace='preserve'
+    aria-label={title}
   >
     <g>
       <path className='header-nav__item__icon__path' d="M 41 25 L 37 25 C 37 26 37 27 37 28 L 37 42 C 37 43 37 43 37 44 L 43 44 C 46 44 48 42 48 40 L 48 32 C 48 28 44 25 41 25 Z M 41 25"/>
diff --git a/app/javascript/gabsocial/components/icon/svgs/home_icon.js b/app/javascript/gabsocial/components/icon/svgs/home_icon.js
new file mode 100644
index 00000000..89507ffa
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/home_icon.js
@@ -0,0 +1,26 @@
+const HomeIcon = ({
+  className = '',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48',
+  title = 'Home',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path className='' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
+    </g>
+  </svg>
+)
+
+export default HomeIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/like_icon.js b/app/javascript/gabsocial/components/icon/svgs/like_icon.js
new file mode 100644
index 00000000..c5aa3110
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/like_icon.js
@@ -0,0 +1,26 @@
+const LikeIcon = ({
+  className = '',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48',
+  title = 'Like',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d='M 44.75 26.832031 C 45.691406 25.410156 46.164062 23.839844 46.164062 22.128906 C 46.164062 20.148438 45.433594 18.425781 43.972656 16.964844 C 42.507812 15.503906 40.777344 14.773438 38.777344 14.773438 L 33.699219 14.773438 C 34.621094 12.867188 35.085938 11.019531 35.085938 9.234375 C 35.085938 6.980469 34.746094 5.195312 34.074219 3.867188 C 33.402344 2.539062 32.421875 1.5625 31.132812 0.9375 C 29.84375 0.3125 28.390625 0 26.773438 0 C 25.792969 0 24.929688 0.355469 24.179688 1.066406 C 23.351562 1.875 22.753906 2.914062 22.390625 4.183594 C 22.023438 5.453125 21.730469 6.667969 21.507812 7.832031 C 21.289062 8.996094 20.945312 9.820312 20.484375 10.300781 C 19.542969 11.320312 18.515625 12.550781 17.398438 13.992188 C 15.457031 16.511719 14.136719 18.003906 13.445312 18.464844 L 5.539062 18.464844 C 4.519531 18.464844 3.652344 18.828125 2.929688 19.546875 C 2.207031 20.269531 1.847656 21.140625 1.847656 22.160156 L 1.847656 40.625 C 1.847656 41.644531 2.207031 42.511719 2.929688 43.234375 C 3.652344 43.957031 4.519531 44.316406 5.539062 44.316406 L 13.847656 44.316406 C 14.273438 44.316406 15.597656 44.703125 17.832031 45.46875 C 20.195312 46.296875 22.277344 46.925781 24.078125 47.359375 C 25.875 47.792969 27.699219 48.011719 29.542969 48.011719 L 33.265625 48.011719 C 35.976562 48.011719 38.160156 47.234375 39.816406 45.6875 C 41.46875 44.136719 42.285156 42.027344 42.269531 39.355469 C 43.421875 37.871094 44 36.160156 44 34.21875 C 44 33.796875 43.96875 33.382812 43.914062 32.976562 C 44.644531 31.691406 45.007812 30.304688 45.007812 28.824219 C 45.007812 28.132812 44.921875 27.46875 44.75 26.832031 Z M 8.683594 40.074219 C 8.320312 40.441406 7.886719 40.625 7.386719 40.625 C 6.886719 40.625 6.453125 40.441406 6.089844 40.074219 C 5.722656 39.710938 5.539062 39.277344 5.539062 38.777344 C 5.539062 38.277344 5.722656 37.84375 6.089844 37.480469 C 6.453125 37.113281 6.886719 36.929688 7.386719 36.929688 C 7.886719 36.929688 8.320312 37.113281 8.683594 37.480469 C 9.050781 37.84375 9.234375 38.277344 9.234375 38.777344 C 9.234375 39.277344 9.050781 39.710938 8.683594 40.074219 Z M 41.851562 24.496094 C 41.4375 25.382812 40.921875 25.832031 40.308594 25.851562 C 40.59375 26.179688 40.835938 26.636719 41.027344 27.222656 C 41.21875 27.808594 41.316406 28.34375 41.316406 28.824219 C 41.316406 30.152344 40.808594 31.296875 39.789062 32.257812 C 40.132812 32.871094 40.308594 33.535156 40.308594 34.246094 C 40.308594 34.960938 40.140625 35.667969 39.800781 36.367188 C 39.464844 37.070312 39.007812 37.574219 38.433594 37.882812 C 38.527344 38.460938 38.574219 38.996094 38.574219 39.496094 C 38.574219 42.710938 36.730469 44.316406 33.035156 44.316406 L 29.546875 44.316406 C 27.027344 44.316406 23.738281 43.613281 19.679688 42.210938 C 19.582031 42.171875 19.304688 42.070312 18.839844 41.90625 C 18.378906 41.742188 18.039062 41.625 17.816406 41.546875 C 17.59375 41.46875 17.257812 41.359375 16.808594 41.214844 C 16.355469 41.070312 15.988281 40.964844 15.710938 40.898438 C 15.433594 40.828125 15.113281 40.765625 14.757812 40.710938 C 14.402344 40.652344 14.101562 40.625 13.851562 40.625 L 12.925781 40.625 L 12.925781 22.160156 L 13.851562 22.160156 C 14.15625 22.160156 14.5 22.074219 14.875 21.898438 C 15.25 21.726562 15.632812 21.46875 16.027344 21.121094 C 16.421875 20.773438 16.792969 20.433594 17.140625 20.097656 C 17.484375 19.757812 17.871094 19.335938 18.292969 18.828125 C 18.714844 18.316406 19.046875 17.910156 19.289062 17.601562 C 19.527344 17.292969 19.832031 16.898438 20.199219 16.417969 C 20.5625 15.9375 20.785156 15.648438 20.859375 15.550781 C 21.917969 14.246094 22.660156 13.371094 23.082031 12.925781 C 23.871094 12.101562 24.441406 11.046875 24.800781 9.769531 C 25.15625 8.488281 25.449219 7.28125 25.679688 6.148438 C 25.910156 5.011719 26.273438 4.195312 26.777344 3.695312 C 28.621094 3.695312 29.851562 4.144531 30.46875 5.050781 C 31.082031 5.953125 31.390625 7.347656 31.390625 9.234375 C 31.390625 10.367188 30.929688 11.910156 30.007812 13.863281 C 29.082031 15.816406 28.621094 17.351562 28.621094 18.464844 L 38.777344 18.464844 C 39.738281 18.464844 40.59375 18.835938 41.34375 19.578125 C 42.09375 20.316406 42.472656 21.179688 42.472656 22.160156 C 42.472656 22.832031 42.265625 23.609375 41.851562 24.496094 Z M 41.851562 24.496094' />
+    </g>
+  </svg>
+)
+
+export default LikeIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/notifications_icon.js b/app/javascript/gabsocial/components/icon/svgs/notifications_icon.js
new file mode 100644
index 00000000..2ac2ac37
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/notifications_icon.js
@@ -0,0 +1,28 @@
+const NotificationsIcon = ({
+  className = '',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48',
+  title = 'Notifications',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path className='' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
+      <path className='' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
+      <path className='' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
+    </g>
+  </svg>
+)
+
+export default NotificationsIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/repost_icon.js b/app/javascript/gabsocial/components/icon/svgs/repost_icon.js
new file mode 100644
index 00000000..23299d83
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/repost_icon.js
@@ -0,0 +1,26 @@
+const CloseIcon = ({
+  className = '',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 48 48',
+  title = 'Close',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+  <g>
+    <path d="M 43.820312 8.179688 C 43.105469 7.859375 42.269531 7.984375 41.679688 8.5 L 38.960938 10.921875 C 35.230469 6.527344 29.761719 4 24 4 C 13.824219 3.992188 5.265625 11.621094 4.109375 21.730469 C 2.957031 31.835938 9.574219 41.203125 19.488281 43.488281 C 29.402344 45.773438 39.453125 40.253906 42.839844 30.660156 C 43.203125 29.617188 42.652344 28.472656 41.609375 28.109375 C 40.566406 27.746094 39.425781 28.296875 39.058594 29.339844 C 36.34375 37.011719 28.300781 41.421875 20.371094 39.589844 C 12.441406 37.753906 7.152344 30.257812 8.082031 22.175781 C 9.011719 14.089844 15.859375 7.988281 24 8 C 28.621094 8 33.011719 10.03125 36 13.558594 L 32.679688 16.5 C 32.054688 17.054688 31.839844 17.941406 32.140625 18.71875 C 32.4375 19.488281 33.175781 19.996094 34 20 L 43 20 C 44.105469 20 45 19.105469 45 18 L 45 10 C 45 9.214844 44.535156 8.503906 43.820312 8.179688 Z M 43.820312 8.179688 "/>
+  </g>
+</svg>
+)
+
+export default CloseIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/search_icon.js b/app/javascript/gabsocial/components/icon/svgs/search_icon.js
new file mode 100644
index 00000000..3bae5ed9
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/search_icon.js
@@ -0,0 +1,26 @@
+const SearchIcon = ({
+  className = '',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 48 48',
+  title = 'Search',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path className='' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
+    </g>
+  </svg>
+)
+
+export default SearchIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/share_icon.js b/app/javascript/gabsocial/components/icon/svgs/share_icon.js
new file mode 100644
index 00000000..aa4ee3a9
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/share_icon.js
@@ -0,0 +1,30 @@
+const ShareIcon = ({
+  className = '',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 24 24',
+  title = 'Share',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <circle cx="18" cy="5" r="3"/>
+      <circle cx="6" cy="12" r="3"/>
+      <circle cx="18" cy="19" r="3"/>
+      <line stroke='#666' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
+      <line stroke='#666' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
+    </g>
+  </svg>
+)
+
+export default ShareIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/icon/svgs/verified_icon.js b/app/javascript/gabsocial/components/icon/svgs/verified_icon.js
new file mode 100644
index 00000000..6a55569d
--- /dev/null
+++ b/app/javascript/gabsocial/components/icon/svgs/verified_icon.js
@@ -0,0 +1,26 @@
+const VerifiedIcon = ({
+  className = '',
+  width = '24px',
+  height = '24px',
+  viewBox = '0 0 24 24',
+  title = 'Verified Account',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path fill='#3E99ED' d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' />
+    </g>
+  </svg>
+)
+
+export default VerifiedIcon
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/page_layout.js b/app/javascript/gabsocial/components/page_layout.js
index a7538b60..cf44cfca 100644
--- a/app/javascript/gabsocial/components/page_layout.js
+++ b/app/javascript/gabsocial/components/page_layout.js
@@ -9,13 +9,24 @@ export default class PageLayout extends PureComponent {
     const { children, layout } = this.props
 
     const right = layout.RIGHT || null
+    const headerRight = layout.HEADER_RIGHT || null
 
     return (
       <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.width670PX, styles.z1].join(' ')}>
+        <main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.borderColorSubtle2, styles.borderLeft1PX].join(' ')}>
+          <div className={[styles.default, styles.height53PX, styles.borderBottom1PX, styles.borderColorSubtle2, styles.backgroundColorSubtle3].join(' ')}>
+            <div className={[styles.default, styles.height53PX, styles.paddingLeft15PX, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
+              <div className={[styles.default, styles.width660PX].join(' ')}>
+                test
+              </div>
+              <div className={[styles.default, styles.width325PX].join(' ')}>
+                { headerRight }
+              </div>
+            </div>
+          </div>
+          <div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween, styles.paddingLeft15PX, styles.paddingVertical15PX].join(' ')}>
+            <div className={[styles.default, styles.width660PX, 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
index 12de6bda..1cb53480 100644
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -145,7 +145,7 @@ class GroupPanelItem extends ImmutablePureComponent {
                 {intl.formatMessage(messages.no_recent_activity)}
               </Fragment>
             }
-            <Icon className={styles.marginLeftAuto} width='10px' height='10px' />
+            <span className={[styles.marginLeftAuto, styles.inherit].join(' ')}>→</span>
           </span>
         </div>
       </NavLink>
diff --git a/app/javascript/gabsocial/components/search/search.js b/app/javascript/gabsocial/components/search/search.js
index bbf2d47d..f349262e 100644
--- a/app/javascript/gabsocial/components/search/search.js
+++ b/app/javascript/gabsocial/components/search/search.js
@@ -44,11 +44,11 @@ export default class Search extends PureComponent {
     const iconClass = hasValue ? 'active' : '';
 
     return (
-      <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(' ')} />
+      <div className={[styles.default, styles.justifyContentCenter, styles.height53PX].join(' ')}>
+        <div className={[styles.default, styles.backgroundWhite, styles.border1PX, styles.borderColorSubtle, styles.flexRow, styles.circle, styles.alignItemsCenter].join(' ')}>
+          <Icon id='search' width='16px' height='16px' className={[styles.default, styles.marginLeft15PX, styles.marginRight10PX].join(' ')} />
           <input
-            className={[styles.default, styles.text, styles.lineHeight125, styles.displayBlock, styles.paddingVertical10PX, styles.paddingHorizontal10PX, styles.backgroundTransparent, styles.fontSize15PX, styles.flexGrow1].join(' ')}
+            className={[styles.default, styles.text, styles.outlineFocusBrand, styles.lineHeight125, styles.displayBlock, styles.paddingVertical10PX, styles.paddingHorizontal10PX, styles.backgroundTransparent, styles.fontSize15PX, styles.flexGrow1].join(' ')}
             type='text'
             placeholder='Search on Gab...'
             value={value}
@@ -57,8 +57,8 @@ export default class Search extends PureComponent {
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
           />
-          <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 role='button' tabIndex='0' className={[styles.default, styles.cursorPointer, styles.marginRight5PX, styles.paddingHorizontal10PX, styles.paddingVertical10PX, styles.circle, styles.backgroundColorBrandLight].join(' ')} onClick={handleClear}>
+            <Icon id='close' width='10px' height='10px' className={styles.fillColorWhite} aria-label={placeholder} />
           </div>
         </div>
 
diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js
index 220b856b..7213e05c 100644
--- a/app/javascript/gabsocial/components/status/status.js
+++ b/app/javascript/gabsocial/components/status/status.js
@@ -424,6 +424,8 @@ class Status extends ImmutablePureComponent {
 
     const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
 
+    console.log("const replies = state.getIn(['contexts', 'replies', id]);", state.getIn(['contexts', 'replies', id]))
+
     return (
       <HotKeys handlers={handlers}>
         <div
@@ -457,7 +459,7 @@ class Status extends ImmutablePureComponent {
                     >
                       <DisplayName account={status.get('account')} />
                     </NavLink>
-                    <Icon id='ellipsis-h' width='14px' height='15px' className={[styles.default, styles.marginLeftAuto].join(' ')} />
+                    <Icon id='ellipsis' width='20px' height='20px' className={[styles.default, styles.fillColorSubtle, styles.marginLeftAuto].join(' ')} />
                   </div>
                   <div className={[styles.default, styles.flexRow, styles.alignItemsCenter, styles.lineHeight15].join(' ')}>
                     <NavLink
@@ -466,13 +468,13 @@ class Status extends ImmutablePureComponent {
                     >
                       <RelativeTimestamp timestamp={status.get('created_at')} />
                     </NavLink>
-                    <span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
+                    <span className={[styles.default, styles.text, styles.fontSize12PX, 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>
+                        <span className={[styles.default, styles.text, styles.fontSize12PX, 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(' ')}
@@ -485,7 +487,7 @@ class Status extends ImmutablePureComponent {
                     {
                       status.get('revised_at') !== null &&
                       <Fragment>
-                        <span className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
+                        <span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
                         <button
                           onClick={() => other.onShowRevisions(status)}
                           className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}
@@ -500,7 +502,7 @@ class Status extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className={[styles.default, styles.paddingHorizontal15PX].join(' ')}>
+            <div className={[styles.default, styles.paddingHorizontal15PX, styles.marginBottom15PX].join(' ')}>
               <StatusContent
                 status={status}
                 reblogContent={reblogContent}
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 6917d753..6cf2a737 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
@@ -17,7 +17,9 @@ const messages = defineMessages({
   mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
   reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  comment: { id: 'status.comment', defaultMessage: 'Comment' },
   more: { id: 'status.more', defaultMessage: 'More' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
   replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
   reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
   quote: { id: 'status.quote', defaultMessage: 'Quote' },
@@ -25,7 +27,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
   cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
+  like: { id: 'status.like', defaultMessage: 'Like' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
@@ -76,7 +78,8 @@ class StatusActionBarItem extends PureComponent {
     const btnClasses = cx({
       default: 1,
       text: 1,
-      fontSize15PX: 1,
+      fontSize13PX: 1,
+      fontWeight500: 1,
       cursorPointer: 1,
       displayFlex: 1,
       justifyContentCenter: 1,
@@ -86,17 +89,12 @@ class StatusActionBarItem extends PureComponent {
       paddingHorizontal10PX: 1,
       width100PC: 1,
       radiusSmall: 1,
+      outlineFocusBrand: 1,
       backgroundTransparent: !hovering,
-      backgroundSubtle2: hovering,
-      colorBlack: !hovering,
-      colorBrand: hovering,
-    })
-
-    const iconClasses = cx({
-      default: 1,
-      marginRight10PX: 1,
-      fillColorSubtle: !hovering,
-      fillColorBrand: hovering,
+      backgroundSubtle: hovering,
+      colorSubtle: 1,
+      // colorSubtle: !hovering,
+      // colorBrand: hovering,
     })
 
     return (
@@ -109,7 +107,7 @@ class StatusActionBarItem extends PureComponent {
           onMouseEnter={() => this.handleOnMouseEnter()}
           onMouseLeave={() => this.handleOnMouseLeave()}
           >
-          <Icon width='16px' height='16px' icon={icon} className={iconClasses} />
+          <Icon width='16px' height='16px' id={icon} className={[styles.default, styles.marginRight10PX, styles.fillColorSubtle].join(' ')} />
           {title}
         </button>
       </div>
@@ -334,24 +332,30 @@ class StatusActionBar extends ImmutablePureComponent {
 
     const items = [
       {
-        title: formatMessage(messages.favourite),
-        icon: 'star',
+        title: formatMessage(messages.like),
+        icon: 'like',
         active: status.get('favourited'),
         onClick: this.handleFavouriteClick,
       },
       {
-        title: replyTitle,
-        icon: 'reply',
+        title: formatMessage(messages.comment),
+        icon: 'comment',
         active: 0,
         onClick: this.handleReplyClick,
       },
       {
         title: reblogTitle,
-        icon: (status.get('visibility') === 'private') ? 'lock' : 'retweet',
+        icon: (status.get('visibility') === 'private') ? 'lock' : 'repost',
         disabled: !publicStatus,
         active: status.get('reblogged'),
         onClick: this.handleReblogClick,
-      }
+      },
+      {
+        title: formatMessage(messages.share),
+        icon: 'share',
+        active: false,
+        onClick: this.handleFavouriteClick,
+      },
     ]
 
     return (
@@ -359,7 +363,7 @@ class StatusActionBar extends ImmutablePureComponent {
         <div className={[styles.default, styles.paddingVertical2PX, styles.flexRow, styles.borderTop1PX, styles.borderColorSubtle].join(' ')}>
           {
             items.map((item, i) => (
-              <StatusActionBarItem {...item} />
+              <StatusActionBarItem key={`status-action-bar-item-${i}`} {...item} />
             ))
           }
 
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 338ffe89..83c4c65d 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
@@ -26,12 +26,19 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     const { account, size, ...rest } = this.props;
 
     return (
-      <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} />
+      <section className={[styles.default, styles.radiusSmall, styles.border1PX, styles.borderColorSubtle, styles.backgroundWhite, styles.marginBottom15PX].join(' ')}>
+        <div className={[styles.default, styles.backgroundSubtle, styles.borderBottom1PX, styles.borderColorSubtle, styles.paddingHorizontal15PX, styles.paddingVertical2PX].join(' ')}>
+          <h1 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize12PX, styles.fontWeight500, styles.lineHeight2, styles.paddingVertical2PX].join(' ')}>
+            Create Post
+          </h1>
         </div>
-        <ComposeFormContainer {...rest} />
-      </div>
+        <div className={[styles.default, styles.flexRow, styles.paddingVertical15PX, styles.paddingHorizontal15PX].join(' ')}>
+          <div className={[styles.default, styles.marginRight10PX].join(' ')}>
+            <Avatar account={account} size={46} />
+          </div>
+          <ComposeFormContainer {...rest} />
+        </div>
+      </section>
     )
   }
 
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 994a3807..87d40da6 100644
--- a/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
+++ b/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
@@ -1,13 +1,12 @@
 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' },
diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js
index 1a8c609f..4fccdc46 100644
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -17,9 +17,10 @@ export default class HomePage extends PureComponent {
     return (
       <PageLayout
         layout={{
+          HEADER: <span>hello</span>,
+          HEADER_RIGHT: <Search />,
           RIGHT: (
             <Fragment>
-              <Search />
               <UserPanel />
               <WhoToFollowPanel />
               <TrendsPanel />
@@ -32,6 +33,7 @@ export default class HomePage extends PureComponent {
         }}
       >
         <TimelineComposeBlock autoFocus={false} shouldCondense />
+        <div className={[styles.default, styles.borderBottom1PX, styles.borderColorSubtle2, styles.marginBottom15PX, styles.width100PC].join(' ')} />
         {children}
       </PageLayout>
     )
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index 201dec78..41206f03 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -89,12 +89,13 @@ body {
 
 .whiteSpaceNoWrap { white-space: nowrap; }
 
-.outlineNone { outline: none; }
+.outlineFocusBrand:focus {outline: 2px solid #21cf7a; }
 .resizeNone { resize: none; }
 
 .circle { border-radius: 9999px; }
 .radiusSmall { border-radius: 4px; }
 
+.borderColorSubtle2 { border-color: #e5e9ed; }
 .borderColorSubtle { border-color: #ECECED; }
 .borderColorWhite { border-color: #fff; }
 .borderColorBrand { border-color: #21cf7a; }
@@ -133,6 +134,7 @@ body {
 .colorSubtle { color: #666; }
 .colorBrand { color: #21cf7a }
 .fillColorBlack { fill: #000; }
+.fillColorWhite { fill: #fff; }
 .fillColorBrand { fill: #21cf7a; }
 .fillColorSubtle { fill: #666; }
 
@@ -161,7 +163,7 @@ body {
 .height122PX { height: 122px; }
 
 .width1015PX { width: 1015px; }
-.width670PX { width: 670px; }
+.width660PX { width: 660px; }
 .width325PX { width: 325px; }
 .width250PX { width: 250px; }
 .width100PC { width: 100%; }
@@ -201,6 +203,7 @@ body {
 
 .marginLeft5PX { margin-left: 5px; }
 .marginRight2PX { margin-right: 2px; }
+.marginRight5PX { margin-right: 5px; }
 
 .marginVertical10PX {
   margin-top: 10px;
@@ -221,6 +224,8 @@ body {
   padding-left: 15px;
   padding-right: 15px;
 }
+
+.paddingLeft15PX { padding-left: 15px; }
 .paddingRight15PX { padding-right: 15px; }
 
 .paddingVertical5PX {
@@ -243,6 +248,11 @@ body {
   padding-bottom: 2px;
 }
 
+.paddingHorizontal5PX {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .paddingHorizontal10PX {
   padding-left: 10px;
   padding-right: 10px;
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 6e59c661..39cd6cc1 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -28,7 +28,7 @@
     %title= content_for?(:page_title) ? safe_join([yield(:page_title).chomp.html_safe, title], ' - ') : title
 
     = stylesheet_pack_tag 'common', media: 'all'
-    = stylesheet_pack_tag 'application', media: 'all'
+    -# = stylesheet_pack_tag 'application', media: 'all'
     -# = stylesheet_pack_tag current_theme, media: 'all'
     = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
     = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'