From e8288ffdf86038a4bcf3bb7a3ff8b37c54d182ac Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 20 Jul 2020 15:34:54 -0500
Subject: [PATCH] Fix theme-toggle v-align issues

---
 app/soapbox/features/ui/components/tabs_bar.js     | 4 ++--
 app/soapbox/features/ui/components/theme_toggle.js | 2 +-
 app/styles/components/sidebar-menu.scss            | 4 ----
 app/styles/components/tabs-bar.scss                | 8 ++------
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index de1864a7d..d26f294fe 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -98,7 +98,7 @@ class TabsBar extends React.PureComponent {
               <SearchContainer openInRoute />
             </div>
             { account &&
-              <div className='flex'>
+              <>
                 <ThemeToggle />
                 <div className='tabs-bar__profile'>
                   <Avatar account={account} />
@@ -108,7 +108,7 @@ class TabsBar extends React.PureComponent {
                 <button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label={intl.formatMessage(messages.post)}>
                   <span>{intl.formatMessage(messages.post)}</span>
                 </button>
-              </div>
+              </>
             }
             {
               !account &&
diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
index 54fe27404..50e6fbb7f 100644
--- a/app/soapbox/features/ui/components/theme_toggle.js
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@@ -52,7 +52,7 @@ class ThemeToggle extends React.PureComponent {
     }
 
     return (
-      <div class='theme-toggle'>
+      <div className='theme-toggle'>
         {toggle}
       </div>
     );
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index e8f59d047..e6b4d15a5 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -161,10 +161,6 @@
     margin-right: 10px;
   }
 
-  &.theme-toggle {
-    padding-top: 0;
-  }
-
   &:hover {
     &__title {
       color: var(--primary-text-color);
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index d5083f81d..02dac4e2b 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -39,7 +39,7 @@
 
     &--right {
       margin-left: auto;
-      padding-top: 8px;
+      align-items: center;
     }
   }
 
@@ -137,21 +137,17 @@
     height: 34px;
   }
 
-  .flex {
-    display: flex;
-  }
-
   .theme-toggle {
     @media screen and (max-width: $nav-breakpoint-3) {display: none;}
 
     .setting-toggle {
-      margin-top: 3px;
       margin-left: 10px;
 
       .react-toggle--checked {
         .react-toggle-track {
           background-color: var(--accent-color);
         }
+
         &:hover:not(.react-toggle--disabled) .react-toggle-track {
           background-color: var(--accent-color--bright);
         }