feat: commandline chic

client/src/components/layouts/Default.js

@@ -11,7 +11,8 @@ import {
   fetchUser,
   isSignedInSelector,
   onlineStatusChange,
-  isOnlineSelector
+  isOnlineSelector,
+  userSelector
 } from '../../redux';
 import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
 
@@ -25,7 +26,7 @@ import Footer from '../Footer';
 
 import './global.css';
 import './layout.css';
-import './night.css';
+import './variables.css';
 
 fontawesome.config = {
   autoAddCss: false
@@ -70,18 +71,21 @@ const propTypes = {
   onlineStatusChange: PropTypes.func.isRequired,
   pathname: PropTypes.string.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
-  showFooter: PropTypes.bool
+  showFooter: PropTypes.bool,
+  theme: PropTypes.string
 };
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
   flashMessageSelector,
   isOnlineSelector,
-  (isSignedIn, flashMessage, isOnline) => ({
+  userSelector,
+  (isSignedIn, flashMessage, isOnline, user) => ({
     isSignedIn,
     flashMessage,
     hasMessage: !!flashMessage.message,
-    isOnline
+    isOnline,
+    theme: user.theme
   })
 );
 const mapDispatchToProps = dispatch =>
@@ -131,11 +135,15 @@ class DefaultLayout extends Component {
       isSignedIn,
       landingPage,
       removeFlashMessage,
-      showFooter = true
+      showFooter = true,
+      theme
     } = this.props;
     return (
       <Fragment>
         <Helmet
+          bodyAttributes={{
+            class: `${theme === 'default' ? 'light-palette' : 'dark-palette'}`
+          }}
           meta={[
             {
               name: 'description',
@@ -151,7 +159,8 @@ class DefaultLayout extends Component {
         <WithInstantSearch>
           <Header disableSettings={landingPage} />
           <div
-            className={`default-layout ${landingPage ? 'landing-page' : ''}`}
+            className={`default-layout
+          ${landingPage ? 'landing-page' : ''}`}
           >
             <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
             {hasMessage && flashMessage ? (