From 43a6e26a36dd73fcccd6613ef9f6018b68f0da7e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 22 Sep 2021 00:16:05 -0500
Subject: [PATCH] SidebarMenu: update X icon, caret, and plus

---
 app/soapbox/components/icon_button.js   |  2 +-
 app/soapbox/components/sidebar_menu.js  |  6 +++---
 app/styles/components/sidebar-menu.scss | 25 ++++++++++++++-----------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/components/icon_button.js b/app/soapbox/components/icon_button.js
index e858dbcbe..ee7367370 100644
--- a/app/soapbox/components/icon_button.js
+++ b/app/soapbox/components/icon_button.js
@@ -135,7 +135,7 @@ export default class IconButton extends React.PureComponent {
           tabIndex={tabIndex}
           disabled={disabled}
         >
-          <div style={style}>
+          <div style={src ? {} : style}>
             {emoji
               ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
               : <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}
diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index a42cc45c1..d320815a1 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -171,7 +171,7 @@ class SidebarMenu extends ImmutablePureComponent {
           <div className='sidebar-menu__content'>
 
             <div className='sidebar-menu-profile'>
-              <IconButton title='close' onClick={this.handleClose} icon='times' className='sidebar-menu__close' />
+              <IconButton title='close' onClick={this.handleClose} src={require('@tabler/icons/icons/x.svg')} className='sidebar-menu__close' />
               <div className='sidebar-menu-profile__avatar'>
                 <Link to={`/@${acct}`} title={acct} onClick={this.handleClose}>
                   <Avatar account={account} />
@@ -179,7 +179,7 @@ class SidebarMenu extends ImmutablePureComponent {
               </div>
               <a href='#' className='sidebar-menu-profile__name' onClick={this.handleSwitcherClick}>
                 <DisplayName account={account} />
-                <Icon id={switcher ? 'caret-up' : 'caret-down'} />
+                <Icon src={switcher ? require('@tabler/icons/icons/caret-up.svg') : require('@tabler/icons/icons/caret-down.svg')} className='sidebar-menu-profile__caret' />
               </a>
             </div>
 
@@ -187,7 +187,7 @@ class SidebarMenu extends ImmutablePureComponent {
               {otherAccounts.map(account => this.renderAccount(account))}
 
               <NavLink className='sidebar-menu-item' to='/auth/sign_in' onClick={this.handleClose}>
-                <Icon id='plus' />
+                <Icon src={require('@tabler/icons/icons/plus.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.add_account)}</span>
               </NavLink>
             </div>}
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 16e706557..b69e22db6 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -84,16 +84,16 @@
 
 .sidebar-menu__close {
   position: absolute;
-  top: 22px;
+  top: 16px;
   right: 18px;
 
-  i.fa {
-    font-size: 20px;
-  }
-
   .svg-icon {
-    width: 20px;
-    height: 20px;
+    width: 32px;
+    height: 32px;
+
+    svg {
+      stroke-width: 1px;
+    }
   }
 }
 
@@ -122,11 +122,14 @@
       margin-top: 2px;
       color: var(--primary-text-color--faint);
     }
+  }
 
-    i.fa-caret-up,
-    i.fa-caret-down {
-      margin-left: auto;
-      padding-left: 10px;
+  &__caret {
+    margin-left: auto;
+    padding-left: 10px;
+
+    svg {
+      stroke-width: 1px;
     }
   }
 }