Rearrange home sidebars

app/soapbox/features/ui/components/features_panel.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Icon from 'soapbox/components/icon';
+import { Link } from 'react-router-dom';
+
+export default class FeaturesPanel extends React.PureComponent {
+
+  render() {
+    return (
+      <div className='wtf-panel promo-panel'>
+        <div className='promo-panel__container'>
+
+          <div className='promo-panel-item'>
+            <Link className='promo-panel-item__btn' to='/settings/profile'>
+              <Icon id='user' className='promo-panel-item__icon' fixedWidth />
+              Edit Profile
+            </Link>
+          </div>
+
+          <div className='promo-panel-item'>
+            <Link className='promo-panel-item__btn' to='/messages'>
+              <Icon id='envelope' className='promo-panel-item__icon' fixedWidth />
+              Messages
+            </Link>
+          </div>
+
+          <div className='promo-panel-item'>
+            <Link className='promo-panel-item__btn' to='/bookmarks'>
+              <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
+              Bookmarks
+            </Link>
+          </div>
+
+          <div className='promo-panel-item'>
+            <Link className='promo-panel-item__btn' to='/lists'>
+              <Icon id='list' className='promo-panel-item__icon' fixedWidth />
+              Lists
+            </Link>
+          </div>
+
+          <div className='promo-panel-item'>
+            <Link className='promo-panel-item__btn' to='/auth/edit'>
+              <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
+              Security
+            </Link>
+          </div>
+
+          <div className='promo-panel-item'>
+            <Link className='promo-panel-item__btn' to='/settings/preferences'>
+              <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
+              Preferences
+            </Link>
+          </div>
+
+        </div>
+      </div>
+    );
+  }
+
+}

app/soapbox/pages/home_page.js

@@ -4,6 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
 import TrendsPanel from '../features/ui/components/trends_panel';
 import LinkFooter from '../features/ui/components/link_footer';
+import FeaturesPanel from '../features/ui/components/features_panel';
 import PromoPanel from '../features/ui/components/promo_panel';
 import UserPanel from '../features/ui/components/user_panel';
 import FundingPanel from '../features/ui/components/funding_panel';
@@ -42,8 +43,6 @@ class HomePage extends ImmutablePureComponent {
               <div className='columns-area__panels__pane__inner'>
                 <UserPanel accountId={me} />
                 {hasPatron && <FundingPanel />}
-                <PromoPanel />
-                <LinkFooter />
               </div>
             </div>
 
@@ -69,6 +68,9 @@ class HomePage extends ImmutablePureComponent {
                 {/* <GroupSidebarPanel /> */}
                 {features.trends && <TrendsPanel limit={3} />}
                 {features.suggestions && <WhoToFollowPanel limit={5} />}
+                <FeaturesPanel />
+                <PromoPanel />
+                <LinkFooter />
               </div>
             </div>
           </div>

app/styles/components/wtf-panel.scss

@@ -8,6 +8,10 @@
   box-sizing: border-box;
   background: var(--foreground-color);
 
+  &:first-child {
+    margin-top: 0;
+  }
+
   &:not(:last-of-type) {
     margin-bottom: 10px;
   }

app/styles/donations.scss

@@ -169,7 +169,7 @@ body.admin {
 }
 
 .funding-panel {
-  margin: 20px 0;
+  margin-top: 15px;
 
   strong {
     font-weight: bold;