Move ThemeToggle to separate class, style it, and fix it on mobile

app/soapbox/components/sidebar_menu.js

@@ -15,6 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
 import { isStaff } from '../utils/accounts';
 import { makeGetAccount } from '../selectors';
 import { logOut } from 'soapbox/actions/auth';
+import ThemeToggle from '../features/ui/components/theme_toggle';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -119,6 +120,12 @@ class SidebarMenu extends ImmutablePureComponent {
             </div>
 
             <div className='sidebar-menu__section sidebar-menu__section--borderless'>
+              <div className='sidebar-menu-item theme-toggle'>
+                <ThemeToggle showLabel />
+              </div>
+            </div>
+
+            <div className='sidebar-menu__section sidebar-menu__section'>
               <NavLink className='sidebar-menu-item' to={`/@${acct}`} onClick={onClose}>
                 <Icon id='user' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>

app/soapbox/features/ui/components/tabs_bar.js

@@ -12,13 +12,10 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
 import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
 import Icon from '../../../components/icon';
-import { changeSetting, getSettings } from 'soapbox/actions/settings';
-import SettingToggle from '../../notifications/components/setting_toggle';
+import ThemeToggle from '../../ui/components/theme_toggle';
 
 const messages = defineMessages({
   post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
-  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
-  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
 });
 
 @withRouter
@@ -29,10 +26,8 @@ class TabsBar extends React.PureComponent {
     history: PropTypes.object.isRequired,
     onOpenCompose: PropTypes.func,
     onOpenSidebar: PropTypes.func.isRequired,
-    toggleTheme: PropTypes.func,
     logo: PropTypes.string,
     account: ImmutablePropTypes.map,
-    settings: ImmutablePropTypes.map.isRequired,
   }
 
   state = {
@@ -84,12 +79,8 @@ class TabsBar extends React.PureComponent {
       }));
   }
 
-  handleToggleTheme = () => {
-    this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
-  }
-
   render() {
-    const { account, onOpenCompose, onOpenSidebar, intl, settings } = this.props;
+    const { account, onOpenCompose, onOpenSidebar, intl } = this.props;
     const { collapsed } = this.state;
 
     const classes = classNames('tabs-bar', {
@@ -108,7 +99,7 @@ class TabsBar extends React.PureComponent {
             </div>
             { account &&
               <div className='flex'>
-                <SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} ariaLabel={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
+                <ThemeToggle />
                 <div className='tabs-bar__profile'>
                   <Avatar account={account} />
                   <button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
@@ -140,11 +131,9 @@ class TabsBar extends React.PureComponent {
 
 const mapStateToProps = state => {
   const me = state.get('me');
-  const settings = getSettings(state);
   return {
     account: state.getIn(['accounts', me]),
     logo: state.getIn(['soapbox', 'logo']),
-    settings: settings,
   };
 };
 
@@ -155,9 +144,6 @@ const mapDispatchToProps = (dispatch) => ({
   onOpenSidebar() {
     dispatch(openSidebar());
   },
-  toggleTheme(setting) {
-    dispatch(changeSetting(['themeMode'], setting));
-  },
 });
 
 export default injectIntl(

app/styles/application.scss

@@ -61,6 +61,7 @@
 @import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';
+@import 'components/theme-toggle';
 @import 'components/trends';
 @import 'components/wtf-panel';
 @import 'components/profile-info-panel';

app/styles/components/sidebar-menu.scss

@@ -161,6 +161,10 @@
     margin-right: 10px;
   }
 
+  &.theme-toggle {
+    padding-top: 0;
+  }
+
   &:hover {
     &__title {
       color: var(--primary-text-color);

app/styles/components/tabs-bar.scss

@@ -111,14 +111,6 @@
     }
   }
 
-  &__button-theme-toggle {
-    margin-left: 10px;
-    padding: 0 10px;
-    font-size: 20px;
-
-    .fa { margin-right: 0; }
-  }
-
   &__button-compose {
     display: block;
     @media screen and (max-width: $nav-breakpoint-3) {display: none;}
@@ -149,22 +141,20 @@
     display: flex;
   }
 
-  .setting-toggle {
-    margin-top: 5px;
-    margin-left: 10px;
+  .theme-toggle {
+    @media screen and (max-width: $nav-breakpoint-3) {display: none;}
 
-    .react-toggle-track-check,
-    .react-toggle-track-x {
-      height: 15px;
-      color: #fff;
-    }
+    .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);
+      .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);
+        }
       }
     }
   }