Fix theme-toggle v-align issues

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 &&

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>
     );

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);

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);
         }