From 57c2edbd2fdc883b109d3b0aa2f728dd06b86188 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 16 Oct 2020 17:00:59 -0500
Subject: [PATCH] Updated DefaultNavigationBar to have light/muted/dark mode
 toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- DefaultNavigationBar to have light/muted/dark mode toggle on desktop only
---
 .../navigation_bar/default_navigation_bar.js     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
index 0a5d9e38..9e01568f 100644
--- a/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
@@ -21,6 +21,8 @@ import { makeGetAccount } from '../../selectors'
 import Responsive from '../../features/ui/util/responsive_component'
 import {
   CX,
+  THEMES,
+  DEFAULT_THEME,
   POPOVER_NAV_SETTINGS,
 } from '../../constants'
 import Avatar from '../avatar'
@@ -34,6 +36,13 @@ import Text from '../text'
 
 class DefaultNavigationBar extends ImmutablePureComponent {
 
+  handleOnClickLightBulb = () => {
+    let index = THEMES.findIndex((t) => t === this.props.theme)
+    const nextIndex = (index === THEMES.length -1) ? 0 : index += 1
+    const newTheme = THEMES[nextIndex]
+    this.props.onChange('theme', newTheme)
+  }
+
   handleOnOpenNavSettingsPopover = () => {
     this.props.onOpenNavSettingsPopover(this.avatarNode)
   }
@@ -166,6 +175,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
 
                     <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
                     <NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' />
+                    <NavigationBarButton attrTitle='Dark/Muted/Light Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />
 
                     <div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
                   
@@ -282,6 +292,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
 const mapStateToProps = (state) => ({
   account: makeGetAccount()(state, me),
   emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
+  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
 })
 
 const mapDispatchToProps = (dispatch) => ({
@@ -300,6 +311,10 @@ const mapDispatchToProps = (dispatch) => ({
   onResendUserConfirmationEmail() {
     dispatch(resendUserConfirmationEmail())
   },
+  onChange(key, value) {
+    dispatch(changeSetting(['displayOptions', key], value))
+    dispatch(saveSettings())
+  },
 })
 
 DefaultNavigationBar.propTypes = {
@@ -315,6 +330,7 @@ DefaultNavigationBar.propTypes = {
   emailConfirmationResends: PropTypes.number.isRequired,
   noActions: PropTypes.bool,
   noSearch: PropTypes.bool,
+  theme: PropTypes.string,
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(DefaultNavigationBar)
\ No newline at end of file