New Atlas view

src/assets/icons/more.svg

@@ -0,0 +1 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>

src/components/FullscreenField/FullscreenField.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import CenteredContent from 'components/CenteredContent';
+import { Button } from 'rebass';
+
+import styles from './FullscreenField.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+class FullscreenField extends React.Component {
+  render() {
+    return (
+      <div className={ styles.container }>
+        <CenteredContent>
+          <div className={ styles.content }>
+            <h2>Create a new atlas</h2>
+            <p>Atlases are collections where you, your teams or friends can share and collect information.</p>
+
+            <div className={ styles.field }>
+              <div className={ styles.label }>Atlas name</div>
+              <input type="text" placeholder="Meeting notes" />
+            </div>
+
+            <div className={ cx(styles.field, styles.description) }>
+              <div className={ styles.label }>Description</div>
+              <input type="text" placeholder="All your note are belong to us" />
+            </div>
+
+            <div className={ styles.field }>
+              <button className={ styles.button }>Create atlas</button>
+            </div>
+          </div>
+        </CenteredContent>
+      </div>
+    );
+  }
+}
+
+export default FullscreenField;

src/components/FullscreenField/FullscreenField.scss

@@ -0,0 +1,46 @@
+.container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+
+  background-color: #fff;
+}
+
+.content {
+  padding: 100px 0;
+}
+
+.field {
+  padding: 20px 0;
+
+  .label {
+    font-size: 16px;
+    font-weight: bold;
+    color: #242425;
+  }
+
+  input {
+    font-size: 32px;
+    width: 100%;
+    padding: 5px 0;
+
+    border: 0;
+    border-bottom: 1px solid #242425;
+    border-radius: 0;
+
+    outline: none;
+  }
+}
+
+.button {
+  font-size: 20px;
+  background-color: #171B35;
+  color: #FAFAFA;
+  padding: 8px 20px 5px;
+  border: none;
+}

src/components/FullscreenField/index.js

@@ -0,0 +1,2 @@
+import FullscreenField from './FullscreenField';
+export default FullscreenField;

src/components/Layout/components/Title/Title.scss

@@ -1,5 +1,5 @@
 .title {
-  color: #444;
+
 }
 
 .untitled {

src/scenes/Dashboard/Dashboard.js

@@ -9,6 +9,8 @@ import Layout from 'components/Layout';
 import AtlasPreview from 'components/AtlasPreview';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
+import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
+import FullscreenField from 'components/FullscreenField';
 
 import styles from './Dashboard.scss';
 
@@ -18,19 +20,50 @@ class Dashboard extends React.Component {
     store.fetchAtlases(userStore.team.id);
   }
 
+  state = {
+    newAtlasVisible: false
+  }
+
+  onClickNewAtlas = () => {
+    this.setState({
+      newAtlasVisible: true,
+    });
+  }
+
   render() {
+    const actions = (
+      <Flex direction="row">
+        <DropdownMenu label={
+          <img
+            src={ require("../../assets/icons/more.svg") }
+            className={ styles.moreIcon }
+          />
+        } >
+          <MenuItem onClick={ this.onClickNewAtlas }>
+            New Atlas
+          </MenuItem>
+        </DropdownMenu>
+      </Flex>
+    );
+
     return (
-      <Layout>
-        <CenteredContent>
-          <Flex direction="column" flex={ true }>
-            { store.isFetching ? (
-              <AtlasPreviewLoading />
-            ) : store.atlases.map((atlas) => {
-             return  (<AtlasPreview key={ atlas.id } data={ atlas } />);
-            }) }
-          </Flex>
-        </CenteredContent>
-      </Layout>
+      <Flex flex={ true }>
+        <Layout
+          actions={ actions }
+        >
+          <CenteredContent>
+            <Flex direction="column" flex={ true }>
+              { store.isFetching ? (
+                <AtlasPreviewLoading />
+              ) : store.atlases.map((atlas) => {
+               return  (<AtlasPreview key={ atlas.id } data={ atlas } />);
+              }) }
+            </Flex>
+          </CenteredContent>
+        </Layout>
+
+        { this.state.newAtlasVisible && <FullscreenField /> }
+      </Flex>
     );
   }
 }

src/scenes/Dashboard/Dashboard.scss

@@ -0,0 +1,4 @@
+.moreIcon {
+  width: 21px;
+  margin-top: 6px;
+}