preview

src/Components/Header/Header.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import MarkdownIcon from '../../Components/Icons/Markdown';
+
 import styles from './Header.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
@@ -7,23 +9,26 @@ const cx = classNames.bind(styles);
 const Header = ({
                 activeEditors,
                 toggleEditors,
-                addRevision,
               }) => {
   return (
     <div className={ styles.header }>
       <div className={ styles.headerItem }><i>Beautiful</i> Atlas</div>
-      <div className={ cx('headerItem', 'editorToggle') }>
-        <span
+      <div
+        className={ cx('headerItem', 'editorToggle') }
+        style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}
+      >
+        <div
           onClick={toggleEditors.bind(this, 'MARKDOWN')}
           className={ activeEditors.includes('MARKDOWN') ? styles.active : '' }
-        >Markdown</span>
-        <span
+        >
+          <MarkdownIcon style={{ width: '32px', height: '20px', color: '#fff' }} />
+        </div>
+        <div
           onClick={toggleEditors.bind(this, 'TEXT')}
           className={ activeEditors.includes('TEXT') ? styles.active : '' }
-        >Text</span>
-      </div>
-      <div className={ cx('headerItem', 'sidebar') }>
-        <span onClick={addRevision.bind(this, (new Date()).toISOString())}>Save</span>
+        >
+          <span className={ styles.textIcon }>Aa</span>
+        </div>
       </div>
     </div>
   );
@@ -32,7 +37,6 @@ const Header = ({
 Header.propTypes = {
   activeEditors: React.PropTypes.array.isRequired,
   toggleEditors: React.PropTypes.func.isRequired,
-  addRevision: React.PropTypes.func.isRequired,
 };
 
 export default Header;

src/Components/Header/Header.scss

@@ -2,6 +2,9 @@
   display: flex;
   width: 100%;
   height: 42px;
+  position: fixed;
+  z-index: 9999;
+
   justify-content: space-between;
 
   background-color: #111;
@@ -29,26 +32,29 @@
     }
   }
 
-  .editorToggle {
-    span {
-      margin-right: 12px;
-      cursor: pointer;
+  .editorToggle div {
+    margin-right: 12px;
+    cursor: pointer;
+    opacity: 0.4;
+    color: #fff;
 
-      &:last-child {
-        margin-right: 0;
-      }
+    &.active {
+      opacity: 1;
+    }
+
+    &:first-child {
+      margin-top: 2px;
+      margin-right: 15px;
+    }
+
+    &:last-child {
+      margin-top: -2px;
     }
   }
 
-  .sidebar {
-    span {
-      margin-right: 12px;
-      cursor: pointer;
-    }
-  }
+  .textIcon {
+    font-family: Times, serif;
+    font-size: 20px;
 
-  .active {
-    text-decoration: underline;
-    text-decoration-color: #fff;
   }
 }

src/Components/Icons/Markdown.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export default ({ style = {}, className }) => {
+  return (
+    <span className={className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={ style.width || 208 }
+        height={ style.height || 128 }
+        viewBox="0 0 208 128"
+        color={ style.color }
+      >
+        <rect
+          width="198"
+          height="118"
+          x="5"
+          y="5"
+          ry="10"
+          stroke="currentColor"
+          strokeWidth="10"
+          fill="none"
+          fillOpacity="0"
+        />
+        <path
+          d="M30 98v-68h20l20 25 20-25h20v68h-20v-39l-20 25-20-25v39zM155 98l-30-33h20v-35h20v35h20z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  );
+};

src/Components/MarkdownEditor/MarkdownEditor.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Codemirror from 'react-codemirror';
 import 'codemirror/mode/gfm/gfm';
+import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/edit/continuelist';
 
 import styles from './MarkdownEditor.scss';

src/Components/MarkdownEditor/MarkdownEditor.scss

@@ -1,4 +1,13 @@
 .container {
-  width: 70%;
-  margin: 48px auto;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.5em;
+
+  margin: 0 auto;
+  padding: 2em 3em;
+  max-width: 50em;
+}
+
+@media all and (max-width: 2000px) and (min-width: 960px) {
+  .container {font-size: 1.1em}
 }

src/Components/MarkdownEditor/codemirror.css

@@ -11,10 +11,11 @@
 @import url(https://fonts.googleapis.com/css?family=Cousine:400,700,700italic,400italic);
 
 .cm-s-atlas.CodeMirror {
-  background: #fcfcfc;
+  background: #ffffff;
   color: #202020;
   font-family: 'Cousine', 'Monaco', monospace;
   font-weight: 300;
+  height: auto;
 }
 .cm-s-atlas div.CodeMirror-selected {
   background: #90CAF9;

src/Components/TextEditor/TextEditor.scss

@@ -1,5 +1,17 @@
+.container {
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.5em;
+
+  margin: 0 auto;
+  padding: 2em 3em;
+  max-width: 50em;
+}
+
 .editor {
   outline: none;
-  margin: 0 0 20px 0;
-  padding: 0 0 20px 0;
+}
+
+@media all and (max-width: 2000px) and (min-width: 960px) {
+  .container {font-size: 1.1em}
 }