From e97b9d2168530e1dab0b03a8d80fcc543409d381 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 9 Aug 2020 14:37:02 -0500
Subject: [PATCH] Update columns layout for all pages

---
 .../features/ui/components/features_panel.js  | 26 +++++++++----------
 app/soapbox/features/ui/index.js              | 12 ++++-----
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/soapbox/features/ui/components/features_panel.js b/app/soapbox/features/ui/components/features_panel.js
index 9dbba637d..b77eeb677 100644
--- a/app/soapbox/features/ui/components/features_panel.js
+++ b/app/soapbox/features/ui/components/features_panel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Icon from 'soapbox/components/icon';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 export default class FeaturesPanel extends React.PureComponent {
 
@@ -10,45 +10,45 @@ export default class FeaturesPanel extends React.PureComponent {
         <div className='promo-panel__container'>
 
           <div className='promo-panel-item'>
-            <Link className='promo-panel-item__btn' to='/settings/profile'>
+            <NavLink className='promo-panel-item__btn' to='/settings/profile'>
               <Icon id='user' className='promo-panel-item__icon' fixedWidth />
               Edit Profile
-            </Link>
+            </NavLink>
           </div>
 
           <div className='promo-panel-item'>
-            <Link className='promo-panel-item__btn' to='/messages'>
+            <NavLink className='promo-panel-item__btn' to='/messages'>
               <Icon id='envelope' className='promo-panel-item__icon' fixedWidth />
               Messages
-            </Link>
+            </NavLink>
           </div>
 
           <div className='promo-panel-item'>
-            <Link className='promo-panel-item__btn' to='/bookmarks'>
+            <NavLink className='promo-panel-item__btn' to='/bookmarks'>
               <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
               Bookmarks
-            </Link>
+            </NavLink>
           </div>
 
           <div className='promo-panel-item'>
-            <Link className='promo-panel-item__btn' to='/lists'>
+            <NavLink className='promo-panel-item__btn' to='/lists'>
               <Icon id='list' className='promo-panel-item__icon' fixedWidth />
               Lists
-            </Link>
+            </NavLink>
           </div>
 
           <div className='promo-panel-item'>
-            <Link className='promo-panel-item__btn' to='/auth/edit'>
+            <NavLink className='promo-panel-item__btn' to='/auth/edit'>
               <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
               Security
-            </Link>
+            </NavLink>
           </div>
 
           <div className='promo-panel-item'>
-            <Link className='promo-panel-item__btn' to='/settings/preferences'>
+            <NavLink className='promo-panel-item__btn' to='/settings/preferences'>
               <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
               Preferences
-            </Link>
+            </NavLink>
           </div>
 
         </div>
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index f4a4be413..170fb56c7 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -24,6 +24,7 @@ import UploadArea from './components/upload_area';
 import TabsBar from './components/tabs_bar';
 import WhoToFollowPanel from './components/who_to_follow_panel';
 import LinkFooter from './components/link_footer';
+import FeaturesPanel from './components/features_panel';
 import ProfilePage from 'soapbox/pages/profile_page';
 // import GroupsPage from 'soapbox/pages/groups_page';
 // import GroupPage from 'soapbox/pages/group_page';
@@ -137,19 +138,16 @@ const LAYOUT = {
   },
   DEFAULT: {
     LEFT: [
-      <WhoToFollowPanel key='0' />,
       <LinkFooter key='1' />,
     ],
     RIGHT: [
-      // <GroupSidebarPanel key='0' />
+      <FeaturesPanel key='0' />,
     ],
   },
   STATUS: {
     TOP: null,
     LEFT: null,
     RIGHT: [
-      // <GroupSidebarPanel key='0' />,
-      <WhoToFollowPanel key='1' />,
       <LinkFooter key='2' />,
     ],
   },
@@ -197,13 +195,13 @@ class SwitchingColumnsArea extends React.PureComponent {
       <Switch>
         <WrappedRoute path='/auth/sign_in' component={LoginPage} publicRoute exact />
         <WrappedRoute path='/auth/reset_password' component={PasswordReset} publicRoute exact />
-        <WrappedRoute path='/auth/edit' component={SecurityForm} exact />
-        <WrappedRoute path='/auth/mfa' component={MfaForm} exact />
+        <WrappedRoute path='/auth/edit' layout={LAYOUT.DEFAULT} component={SecurityForm} exact />
+        <WrappedRoute path='/auth/mfa' layout={LAYOUT.DEFAULT} component={MfaForm} exact />
 
         <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
         <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} />
         <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} />
-        <WrappedRoute path='/messages' component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
+        <WrappedRoute path='/messages' layout={LAYOUT.DEFAULT} component={DirectTimeline} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
 
         {/*
         <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />