From 9a3321552807836436c4512b0da4356be48fd186 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 12 Sep 2021 18:36:52 -0500
Subject: [PATCH] Improve SidebarMenu design

---
 app/soapbox/components/sidebar_menu.js  | 12 +++-------
 app/styles/components/sidebar-menu.scss | 30 ++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 8bbde589d..a4f5781c7 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -5,7 +5,7 @@ import { throttle } from 'lodash';
 import { Link, NavLink } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 import Avatar from './avatar';
 import IconButton from './icon_button';
@@ -168,17 +168,10 @@ class SidebarMenu extends ImmutablePureComponent {
       <div className={classes}>
         <div className='sidebar-menu__wrapper' role='button' onClick={this.handleClose} />
         <div className='sidebar-menu'>
-
-          <div className='sidebar-menu-header'>
-            <span className='sidebar-menu-header__title'>
-              <FormattedMessage id='tabs_bar.header' defaultMessage='Account Info' />
-            </span>
-            <IconButton title='close' onClick={this.handleClose} icon='close' className='sidebar-menu-header__btn' />
-          </div>
-
           <div className='sidebar-menu__content'>
 
             <div className='sidebar-menu-profile'>
+              <IconButton title='close' onClick={this.handleClose} icon='times' className='sidebar-menu__close' />
               <div className='sidebar-menu-profile__avatar'>
                 <Link to={`/@${acct}`} title={acct} onClick={this.handleClose}>
                   <Avatar account={account} />
@@ -284,6 +277,7 @@ class SidebarMenu extends ImmutablePureComponent {
 
             <div className='sidebar-menu__section'>
               <Link className='sidebar-menu-item' to='/auth/sign_out' onClick={onClickLogOut}>
+                <Icon id='sign-out' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
               </Link>
             </div>
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index fd3480c32..34d54cd92 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -29,6 +29,7 @@
   }
 
   &__content {
+    position: relative;
     overflow-y: scroll;
     overflow: auto;
     height: 100%;
@@ -84,6 +85,21 @@
   }
 }
 
+.sidebar-menu__close {
+  position: absolute;
+  top: 22px;
+  right: 18px;
+
+  i.fa {
+    font-size: 20px;
+  }
+
+  .svg-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .sidebar-menu-profile {
   display: flex;
   flex-direction: column;
@@ -161,18 +177,26 @@
   color: var(--primary-text-color--faint);
   font-size: 15px;
   font-weight: 400;
+  align-items: center;
 
   &:hover {
     background-color: hsla(var(--brand-color_hsl), 0.1);
     color: var(--primary-text-color);
   }
 
-  .fa {
-    width: 18px;
-    margin-right: 10px;
+  > .fa {
+    width: 24px;
+    font-size: 20px;
+    margin-right: 15px;
     text-align: center;
   }
 
+  > .svg-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 15px;
+  }
+
   &:hover {
     &__title {
       color: var(--primary-text-color);