From 715779653c0aa8d8418831c33c37f57451c937d5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 9 Aug 2020 00:29:28 -0500
Subject: [PATCH] Rearrange home sidebars

---
 .../features/ui/components/features_panel.js  | 59 +++++++++++++++++++
 app/soapbox/pages/home_page.js                |  6 +-
 app/styles/components/wtf-panel.scss          |  4 ++
 app/styles/donations.scss                     |  2 +-
 4 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/features_panel.js

diff --git a/app/soapbox/features/ui/components/features_panel.js b/app/soapbox/features/ui/components/features_panel.js
new file mode 100644
index 000000000..9dbba637d
--- /dev/null
+++ b/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>
+    );
+  }
+
+}
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index eeeafede9..81f2c93e3 100644
--- a/app/soapbox/pages/home_page.js
+++ b/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>
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index 37566af47..a555e9490 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/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;
   }
diff --git a/app/styles/donations.scss b/app/styles/donations.scss
index b108949c1..bb4798f1d 100644
--- a/app/styles/donations.scss
+++ b/app/styles/donations.scss
@@ -169,7 +169,7 @@ body.admin {
 }
 
 .funding-panel {
-  margin: 20px 0;
+  margin-top: 15px;
 
   strong {
     font-weight: bold;