Add example cover

example.config.js

@@ -11,7 +11,7 @@ module.exports = {
   INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M',
   MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN',
   features: {
-    USE_COVER: true,
+    USE_COVER: false,
     USE_TAGS: false,
     USE_SEARCH: false,
     USE_SITES: true,

src/components/Dashboard.jsx

@@ -14,6 +14,7 @@ import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 import StaticPage from './StaticPage'
+import DefaultCover from './presentational/covers/Default'
 
 import { parseDate } from '../js/utilities'
 
@@ -160,8 +161,9 @@ class Dashboard extends React.Component {
         ) : null}
         {process.env.features.USE_COVER && (
           <StaticPage showing={app.flags.isCover}>
-            {/* enable USE_COVER in config.js features, and put content here if you want a header */}
+            {/* enable USE_COVER in config.js features, and customise your header */}
             {/* pass 'actions.toggleCover' as a prop to your custom header */}
+            <DefaultCover showAppHandler={actions.toggleCover} />
           </StaticPage>
         )}
         <LoadingOverlay

src/components/presentational/covers/Default.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default ({ showAppHandler }) => (
+  <div className='default-cover-container'>
+    <h3>Here's an example cover.</h3>
+    <p>Replace it with a more descriptive one:</p>
+    <ul>
+      <li>Create a new component in <code>components/presentational/covers</code>.</li>
+      <li>Import in in <code>components/Dashboard.jsx</code> in the <code>render</code> function.</li>
+    </ul>
+    <br /><br />
+    <div>
+      <button onClick={showAppHandler}>Go to app</button>
+    </div>
+  </div>
+)

src/js/utilities.js

@@ -132,7 +132,7 @@ export function toggleFlagAC (flag) {
     ...appState,
     flags: {
       ...appState.flags,
-      isCover: !appState.flags[flag]
+      [flag]: !appState.flags[flag]
     }
   })
 }

src/scss/cover.scss

@@ -15,4 +15,12 @@
     top: 0;
     left: 0;
   }
+}
+
+.default-cover-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
 }