feat(night-mode): Add initial night mode styles

client/src/components/Layout.js

@@ -11,12 +11,14 @@ import { flashMessagesSelector, removeFlashMessage } from './Flash/redux';
 import Flash from './Flash';
 import Header from './Header';
 
-import './layout.css';
 import './global.css';
+import './layout.css';
+import './night.css';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
   disableSettings: PropTypes.bool,
+  fetchUser: PropTypes.func.isRequired,
   flashMessages: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string,
@@ -26,6 +28,7 @@ const propTypes = {
   ),
   hasMessages: PropTypes.bool,
   isSignedIn: PropTypes.bool,
+  landingPage: PropTypes.bool,
   removeFlashMessage: PropTypes.func.isRequired
 };
 
@@ -54,7 +57,8 @@ class Layout extends Component {
       disableSettings,
       hasMessages,
       flashMessages = [],
-      removeFlashMessage
+      removeFlashMessage,
+      landingPage
     } = this.props;
     return (
       <StaticQuery
@@ -77,12 +81,12 @@ class Layout extends Component {
               title={data.site.siteMetadata.title}
             />
             <Header disableSettings={disableSettings} />
-            <div style={{ marginTop: '38px' }}>
+            <main className={landingPage && 'landing-page'}>
               {hasMessages ? (
                 <Flash messages={flashMessages} onClose={removeFlashMessage} />
               ) : null}
               {children}
-            </div>
+            </main>
           </Fragment>
         )}
       />

client/src/components/global.css

@@ -27,5 +27,4 @@ h6 {
 .btn-invert {
   background-color: #fff;
   color: #006400;
-
 }

client/src/components/layout.css

@@ -622,3 +622,6 @@ pre tt:after {
     font-size: 100%;
   }
 }
+main {
+  margin-top: 38px;
+}

client/src/components/night.css

@@ -0,0 +1,31 @@
+.night body {
+  background-color: #333;
+  color: #ddd;
+}
+
+.night .btn-invert {
+  background-color: #ddd;
+  color: #006400;
+}
+
+.night .btn-invert:hover, .night .btn-invert:focus {
+  background-color: #006400;
+  color: #ddd;
+}
+
+.night .toggle-active {
+  color: #ddd;
+}
+
+.night input, .night textarea {
+  background-color: #ddd;
+  color: #333;
+}
+
+.night #top-right-nav li > a, .night #top-right-nav li > span {
+  color: #ddd;
+}
+
+.night .btn.btn-primary {
+  color: #ddd;
+}

client/src/pages/index.css

@@ -1,3 +1,17 @@
+
+/*
+  Embrace the cascade to override night mode styles
+  This ensures a consistent landing page, even for users with nigt mode enabled
+*/
+.night body .landing-page{
+  background-color: #fff;
+  color: #333;
+}
+.night .landing-page #top-right-nav li > a, .night #top-right-nav li > span {
+  color: #fff;
+}
+/* End night mode override */
+
 .black-text {
   color: #333;
   font-weight: 400;

client/src/pages/index.js

@@ -26,7 +26,7 @@ const BigCallToAction = () => (
 );
 
 const IndexPage = () => (
-  <Layout disableSettings={true}>
+  <Layout disableSettings={true} landingPage={true}>
     <Spacer />
     <Spacer />
     <Grid className='text-center'>