From 796bf9c8443934324ac283dd140ca9b024bb3645 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 19 Jul 2020 15:50:16 -0600
Subject: [PATCH 1/4] Change design of toggle button

---
 .../components/setting_toggle.js              | 16 +++++++++++-----
 .../features/ui/components/tabs_bar.js        | 19 ++++++-------------
 app/styles/components/tabs-bar.scss           | 19 +++++++++++++++++++
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/notifications/components/setting_toggle.js b/app/soapbox/features/notifications/components/setting_toggle.js
index b9adbedd5..145e2b03a 100644
--- a/app/soapbox/features/notifications/components/setting_toggle.js
+++ b/app/soapbox/features/notifications/components/setting_toggle.js
@@ -9,8 +9,14 @@ export default class SettingToggle extends React.PureComponent {
     prefix: PropTypes.string,
     settings: ImmutablePropTypes.map.isRequired,
     settingPath: PropTypes.array.isRequired,
-    label: PropTypes.node.isRequired,
+    label: PropTypes.node,
     onChange: PropTypes.func.isRequired,
+    icons: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
+    condition: PropTypes.string,
+    ariaLabel: PropTypes.string,
   }
 
   onChange = ({ target }) => {
@@ -18,13 +24,13 @@ export default class SettingToggle extends React.PureComponent {
   }
 
   render() {
-    const { prefix, settings, settingPath, label } = this.props;
+    const { prefix, settings, settingPath, label, icons, condition, ariaLabel } = this.props;
     const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
 
     return (
-      <div className='setting-toggle'>
-        <Toggle id={id} checked={settings.getIn(settingPath)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
-        <label htmlFor={id} className='setting-toggle__label'>{label}</label>
+      <div className='setting-toggle' aria-label={ariaLabel}>
+        <Toggle id={id} checked={condition ? settings.getIn(settingPath) === condition : settings.getIn(settingPath)} onChange={this.onChange} icons={icons} onKeyDown={this.onKeyDown} />
+        {label && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
       </div>
     );
   }
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index 0801bb7bd..8442c5cb1 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -13,6 +13,7 @@ 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';
 
 const messages = defineMessages({
   post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
@@ -31,7 +32,7 @@ class TabsBar extends React.PureComponent {
     toggleTheme: PropTypes.func,
     logo: PropTypes.string,
     account: ImmutablePropTypes.map,
-    themeMode: PropTypes.string,
+    settings: ImmutablePropTypes.map.isRequired,
   }
 
   state = {
@@ -83,18 +84,12 @@ class TabsBar extends React.PureComponent {
       }));
   }
 
-  getNewThemeValue() {
-    if (this.props.themeMode === 'light') return 'dark';
-
-    return 'light';
-  }
-
   handleToggleTheme = () => {
-    this.props.toggleTheme(this.getNewThemeValue());
+    this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
   }
 
   render() {
-    const { account, onOpenCompose, onOpenSidebar, intl, themeMode } = this.props;
+    const { account, onOpenCompose, onOpenSidebar, intl, settings } = this.props;
     const { collapsed } = this.state;
 
     const classes = classNames('tabs-bar', {
@@ -113,9 +108,7 @@ class TabsBar extends React.PureComponent {
             </div>
             { account &&
               <div className='flex'>
-                <button className='tabs-bar__button-theme-toggle button' onClick={this.handleToggleTheme} aria-label={themeMode === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)}>
-                  <Icon id={themeMode === 'light' ? 'sun' : 'moon'} />
-                </button>
+                <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)} />
                 <div className='tabs-bar__profile'>
                   <Avatar account={account} />
                   <button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
@@ -151,7 +144,7 @@ const mapStateToProps = state => {
   return {
     account: state.getIn(['accounts', me]),
     logo: state.getIn(['soapbox', 'logo']),
-    themeMode: settings.get('themeMode'),
+    settings: settings,
   };
 };
 
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 91a6c678a..d2519f12b 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -149,6 +149,25 @@
     display: flex;
   }
 
+  .setting-toggle {
+    margin-top: 5px;
+    margin-left: 10px;
+
+    .react-toggle-track-check,
+    .react-toggle-track-x {
+      height: 15px;
+      color: #fff;
+    }
+
+    .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);
+      }
+    }
+  }
 }
 
 .tabs-bar__link {

From 277f4b5f22823b09234ea57358935ffa95b5cef9 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 19 Jul 2020 18:44:17 -0600
Subject: [PATCH 2/4] Move ThemeToggle to separate class, style it, and fix it
 on mobile

---
 app/soapbox/components/sidebar_menu.js        |  7 ++++
 .../features/ui/components/tabs_bar.js        | 20 ++---------
 app/styles/application.scss                   |  1 +
 app/styles/components/sidebar-menu.scss       |  4 +++
 app/styles/components/tabs-bar.scss           | 34 +++++++------------
 5 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 187f73135..a62c32957 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/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>
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index 8442c5cb1..de1864a7d 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/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(
diff --git a/app/styles/application.scss b/app/styles/application.scss
index cc7f50243..bb3d0ca82 100644
--- a/app/styles/application.scss
+++ b/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';
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index e6b4d15a5..e8f59d047 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/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);
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index d2519f12b..d5083f81d 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/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);
+        }
       }
     }
   }

From 9df1b085cbfb758a133024516e4c0a99ee81f0ff Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 19 Jul 2020 18:50:09 -0600
Subject: [PATCH 3/4] ThemeToggle class

---
 .../features/ui/components/theme_toggle.js    | 61 +++++++++++++++++++
 app/styles/components/theme-toggle.scss       | 19 ++++++
 2 files changed, 80 insertions(+)
 create mode 100644 app/soapbox/features/ui/components/theme_toggle.js
 create mode 100644 app/styles/components/theme-toggle.scss

diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
new file mode 100644
index 000000000..e823c740e
--- /dev/null
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, defineMessages } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Icon from '../../../components/icon';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import SettingToggle from '../../notifications/components/setting_toggle';
+
+const messages = defineMessages({
+  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
+  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
+});
+
+const mapStateToProps = state => {
+  return {
+    settings: getSettings(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleTheme(setting) {
+    dispatch(changeSetting(['themeMode'], setting));
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ThemeToggle extends React.PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    toggleTheme: PropTypes.func,
+    showLabel: PropTypes.bool,
+  };
+
+  handleToggleTheme = () => {
+    this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
+  }
+
+  render() {
+    const { intl, settings, showLabel } = this.props;
+    let toggle = (
+      <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)} />
+    );
+
+    if (showLabel) {
+      toggle = (
+        <SettingToggle settings={settings} settingPath={['themeMode']} condition={'light'} onChange={this.handleToggleTheme} icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} label={settings.get('themeMode') === 'light' ? intl.formatMessage(messages.switchToDark) : intl.formatMessage(messages.switchToLight)} />
+      );
+    }
+
+    return (
+      <div class='theme-toggle'>
+        {toggle}
+      </div>
+    );
+  }
+  
+}
diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss
new file mode 100644
index 000000000..f1a33e66b
--- /dev/null
+++ b/app/styles/components/theme-toggle.scss
@@ -0,0 +1,19 @@
+.theme-toggle {
+  .setting-toggle {
+
+    &__label {
+      margin-bottom: 0px;
+      vertical-align: middle;
+    }
+
+    .react-toggle {
+      vertical-align: middle;
+
+      &-track-check,
+      &-track-x {
+        height: 15px;
+        color: #fff;
+      }
+    }
+  }
+}

From 1a0c3131bfefc04e96d183e694130531d2957947 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 19 Jul 2020 19:03:39 -0600
Subject: [PATCH 4/4] Spacing fix

---
 app/soapbox/features/ui/components/theme_toggle.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
index e823c740e..54fe27404 100644
--- a/app/soapbox/features/ui/components/theme_toggle.js
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@@ -42,7 +42,7 @@ class ThemeToggle extends React.PureComponent {
   render() {
     const { intl, settings, showLabel } = this.props;
     let toggle = (
-      <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)} />
+      <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)} />
     );
 
     if (showLabel) {
@@ -57,5 +57,5 @@ class ThemeToggle extends React.PureComponent {
       </div>
     );
   }
-  
+
 }