diff --git a/src/assets/icons/more.svg b/src/assets/icons/more.svg
new file mode 100644
index 000000000..57e2d41b1
--- /dev/null
+++ b/src/assets/icons/more.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/FullscreenField/FullscreenField.js b/src/components/FullscreenField/FullscreenField.js
new file mode 100644
index 000000000..3308bc809
--- /dev/null
+++ b/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 (
+
+
+
+
Create a new atlas
+
Atlases are collections where you, your teams or friends can share and collect information.
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default FullscreenField;
\ No newline at end of file
diff --git a/src/components/FullscreenField/FullscreenField.scss b/src/components/FullscreenField/FullscreenField.scss
new file mode 100644
index 000000000..ca1e4c995
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/FullscreenField/index.js b/src/components/FullscreenField/index.js
new file mode 100644
index 000000000..12ae902e8
--- /dev/null
+++ b/src/components/FullscreenField/index.js
@@ -0,0 +1,2 @@
+import FullscreenField from './FullscreenField';
+export default FullscreenField;
\ No newline at end of file
diff --git a/src/components/Layout/components/Title/Title.scss b/src/components/Layout/components/Title/Title.scss
index d7a2fa841..6a51ea94c 100644
--- a/src/components/Layout/components/Title/Title.scss
+++ b/src/components/Layout/components/Title/Title.scss
@@ -1,5 +1,5 @@
.title {
- color: #444;
+
}
.untitled {
diff --git a/src/scenes/Dashboard/Dashboard.js b/src/scenes/Dashboard/Dashboard.js
index cf7ef23f4..447ae2c70 100644
--- a/src/scenes/Dashboard/Dashboard.js
+++ b/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 = (
+
+
+ } >
+
+
+
+ );
+
return (
-
-
-
- { store.isFetching ? (
-
- ) : store.atlases.map((atlas) => {
- return ();
- }) }
-
-
-
+
+
+
+
+ { store.isFetching ? (
+
+ ) : store.atlases.map((atlas) => {
+ return ();
+ }) }
+
+
+
+
+ { this.state.newAtlasVisible && }
+
);
}
}
diff --git a/src/scenes/Dashboard/Dashboard.scss b/src/scenes/Dashboard/Dashboard.scss
index e69de29bb..d58a0af4e 100644
--- a/src/scenes/Dashboard/Dashboard.scss
+++ b/src/scenes/Dashboard/Dashboard.scss
@@ -0,0 +1,4 @@
+.moreIcon {
+ width: 21px;
+ margin-top: 6px;
+}
\ No newline at end of file