Refactor

src/Components/Header/Header.js

@@ -1,13 +1,10 @@
 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);
 
 const Header = ({
-                activeEditors,
                 toggleEditors,
               }) => {
   return (
@@ -17,16 +14,7 @@ const Header = ({
         className={ cx('headerItem', 'editorToggle') }
         style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}
       >
-        <div
-          onClick={toggleEditors.bind(this, 'MARKDOWN')}
-          className={ activeEditors.includes('MARKDOWN') ? styles.active : '' }
-        >
-          <MarkdownIcon style={{ width: '32px', height: '20px', color: '#fff' }} />
-        </div>
-        <div
-          onClick={toggleEditors.bind(this, 'TEXT')}
-          className={ activeEditors.includes('TEXT') ? styles.active : '' }
-        >
+        <div>
           <span className={ styles.textIcon }>Aa</span>
         </div>
       </div>

src/Components/Header/Header.scss

@@ -19,7 +19,7 @@
     width: 150px;
     padding: 12px 22px;
 
-    font-size: 13px;
+    font-size: 15px;
     font-weight: 300;
     font-family: "Atlas Grotesk", "Helvetica Neue", sans-serif;
     text-align: center;

src/Components/MarkdownEditor/MarkdownEditor.js

@@ -3,12 +3,13 @@ import Codemirror from 'react-codemirror';
 import 'codemirror/mode/gfm/gfm';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/edit/continuelist';
+import 'codemirror/addon/display/placeholder.js';
 import Dropzone from 'react-dropzone';
 
 import styles from './MarkdownEditor.scss';
-import './codemirror.css';
+import './codemirror.scss';
 
-import { client } from '../../Utils/ApiClient';
+import { client } from '../../utils/ApiClient';
 
 class MarkdownAtlas extends React.Component {
   static propTypes = {
@@ -97,6 +98,7 @@ class MarkdownAtlas extends React.Component {
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
       },
+      placeholder: "# Start with a title...",
     };
 
     // http://codepen.io/lubelski/pen/fnGae

src/Components/MarkdownEditor/codemirror.css

@@ -1,65 +0,0 @@
-/*
-
-    Name:       Base16 Default Light
-    Author:     Chris Kempson (http://chriskempson.com)
-
-    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
-    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
-
-*/
-
-@import url(https://fonts.googleapis.com/css?family=Cousine:400,700,700italic,400italic);
-
-/* Custom styling */
-.cm-s-atlas.CodeMirror {
-  background: #ffffff;
-  color: #202020;
-  font-family: 'Atlas Typewriter', 'Cousine', 'Monaco', monospace;
-  font-weight: 300;
-  height: auto;
-}
-.cm-s-atlas div.CodeMirror-selected {
-  background: #90CAF9;
-}
-
-/* Disable ondrag cursor for file uploads */
-.cm-s-atlas div.CodeMirror-dragcursors {
-  visibility: hidden;
-}
-
-.cm-s-atlas .CodeMirror-line::selection,
-.cm-s-atlas .CodeMirror-line > span::selection,
-.cm-s-atlas .CodeMirror-line > span > span::selection {
-  background: #90CAF9;
-}
-
-.cm-s-atlas .CodeMirror-line::-moz-selection, .cm-s-atlas .CodeMirror-line > span::-moz-selection, .cm-s-atlas .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
-.cm-s-atlas .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
-.cm-s-atlas .CodeMirror-guttermarker { color: #ac4142; }
-.cm-s-atlas .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
-.cm-s-atlas .CodeMirror-linenumber { color: #b0b0b0; }
-.cm-s-atlas .CodeMirror-cursor {
-  border-left: 2px solid #2196F3;
-}
-
-.cm-s-atlas span.cm-quote {
-  font-style: italic;
-}
-.cm-s-atlas span.cm-comment { color: #8f5536; }
-.cm-s-atlas span.cm-atom { color: #aa759f; }
-.cm-s-atlas span.cm-number { color: #aa759f; }
-
-.cm-s-atlas span.cm-property, .cm-s-atlas span.cm-attribute { color: #90a959; }
-.cm-s-atlas span.cm-keyword { color: #ac4142; }
-.cm-s-atlas span.cm-string { color: #f4bf75; }
-
-.cm-s-atlas span.cm-variable { color: #90a959; }
-.cm-s-atlas span.cm-variable-2 { color: #788696; }
-.cm-s-atlas span.cm-def { color: #d28445; }
-.cm-s-atlas span.cm-bracket { color: #202020; }
-.cm-s-atlas span.cm-tag { color: #ac4142; }
-.cm-s-atlas span.cm-link { color: #aa759f; }
-.cm-s-atlas span.cm-error { background: #ac4142; color: #505050; }
-
-.cm-s-atlas .CodeMirror-activeline-background { background: #DDDCDC; }
-.cm-s-atlas .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }