Updating cell styles

src/components/Cell/Cell.jsx

@@ -15,16 +15,12 @@ export default class Cell extends React.Component {
 
   render() {
     return (
-      <div style={{
-        paddingLeft: '10px',
-        paddingRight: '10px',
-        paddingBottom: '10px',
-      }}>
-      {
-      this.props.type === 'markdown' ?
-        <MarkdownCell {...this.props}/> :
-        <CodeCell {...this.props}/>
-      }
+      <div className="cell">
+        {
+        this.props.type === 'markdown' ?
+          <MarkdownCell {...this.props}/> :
+          <CodeCell {...this.props}/>
+        }
       </div>
     );
   }

src/components/Cell/CodeCell.jsx

@@ -17,7 +17,7 @@ export default class CodeCell extends React.Component {
     return (
       <div>
         <Editor {...this.props} />
-        <Display {...this.props} />
+        <Display className="cell_display" {...this.props} />
       </div>
     );
   }

src/components/Cell/Editor.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import CodeMirror from 'react-code-mirror';
 
+import Inputs from './Inputs';
+
 import { updateCell } from '../../actions';
 
 export default class Editor extends React.Component {
@@ -43,26 +45,31 @@ export default class Editor extends React.Component {
 
   render() {
     return (
-      <CodeMirror value={this.state.source}
-                  mode={this.props.language}
-                  textAreaClassName={['editor']}
-                  textAreaStyle={{
-                    minHeight: '10em',
-                  }}
-                  lineNumbers={this.props.lineNumbers}
-                  theme={this.props.theme}
-                  onChange={
-                    (e) => {
-                      if (this.props.onChange) {
-                        this.props.onChange(e.target.value);
-                      } else {
-                        this.setState({
-                          source: e.target.value,
-                        });
-                        this.context.dispatch(updateCell(this.props.notebook, this.props.index, e.target.value));
+      <div className="cell_editor">
+        <Inputs {...this.props}/>
+        <CodeMirror value={this.state.source}
+                    className="cell_cm"
+                    mode={this.props.language}
+                    textAreaClassName={['editor']}
+                    textAreaStyle={{
+                      minHeight: '10em',
+                      backgroundColor: 'red'
+                    }}
+                    lineNumbers={this.props.lineNumbers}
+                    theme={this.props.theme}
+                    onChange={
+                      (e) => {
+                        if (this.props.onChange) {
+                          this.props.onChange(e.target.value);
+                        } else {
+                          this.setState({
+                            source: e.target.value,
+                          });
+                          this.context.dispatch(updateCell(this.props.notebook, this.props.index, e.target.value));
+                        }
                       }
-                    }
-                  }/>
+                    }/>
+      </div>
     );
   }
 }

src/components/Cell/Inputs.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class Inputs extends React.Component {
+  static displayName = 'Inputs';
+
+  static propTypes = {
+    index: React.PropTypes.any
+  };
+
+  render() {
+    return (
+      <div className="cell_inputs">
+        [{this.props.index}]
+      </div>
+    );
+  }
+}

src/components/Cell/MarkdownCell.jsx

@@ -45,7 +45,9 @@ export default class MarkdownCell extends React.Component {
   render() {
     return (
         (this.state && this.state.view) ?
-          <div onDoubleClick={() => this.setState({ view: false }) }>
+          <div
+            className="cell_markdown"
+            onDoubleClick={() => this.setState({ view: false }) }>
             <ReactMarkdown source={this.state.source} />
           </div> :
           <div onKeyDown={this.keyDown.bind(this)}>

styles/cm-composition.css

@@ -2,9 +2,7 @@
 	font-family: 'Source Code Pro', monospace;
 	letter-spacing: 0.3px;
 	word-spacing: 1px;
-	background: #FCFCFC;
-	border: 1px solid #cfcfcf;
-	border-radius: 2px;
+	background: #fafafa;
 	color: #000000;
 }
 .cm-s-composition .CodeMirror-lines {

styles/main.css

@@ -1,51 +1,126 @@
-pre {
-  word-wrap: break-word;
-  line-height: 1.21429em;
-  font-size: 14px;
+/*
+  Globals
+ */
+pre
+{
+    font-size: 14px;
+    line-height: 1.21429em;
+
+    word-wrap: break-word;
 }
 
-body {
-  color: rgb(51,51,51);
-  font-family: 'Source Sans Pro';
-  font-size: 16px;
-  line-height: 22px;
+body
+{
+    font-family: 'Source Sans Pro';
+    font-size: 16px;
+    line-height: 22px;
+
+    color: rgb(51,51,51);
 }
 
-.CodeMirror {
-    line-height: 20px;
+/* By default the notebook centers all images. */
+img
+{
+    display: block;
+
+    margin-right: auto;
+    margin-left: auto;
+}
+
+/*
+    Codemirror
+ */
+
+.CodeMirror
+{
+    font-family: 'Source Code Pro';
     font-size: 14px;
+    line-height: 20px;
+
     height: auto;
+
     background: none;
-    font-family: 'Source Code Pro';
 }
 
-.CodeMirror-scroll {
-    overflow-y: hidden;
+.CodeMirror-scroll
+{
     overflow-x: auto;
+    overflow-y: hidden;
 }
 
-.CodeMirror-lines {
-    padding: 0.4em;
+.CodeMirror-lines
+{
+    padding: .4em;
 }
 
-.CodeMirror-linenumber {
+.CodeMirror-linenumber
+{
     padding: 0 8px 0 4px;
 }
 
-.CodeMirror-gutters {
-    border-bottom-left-radius: 2px;
+.CodeMirror-gutters
+{
     border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
 }
 
-.CodeMirror pre {
+.CodeMirror pre
+{
     padding: 0;
+
     border: 0;
     border-radius: 0;
 }
 
-/* By default the notebook centers all images. */
-img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+/*
+  Cell
+ */
+
+.cell
+{
+    margin: 10px;
+
+    transition: all .2s ease-in-out;
+}
+
+.cell:hover
+{
+    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
+}
+
+.cell_markdown
+{
+    padding: 10px;
+}
+
+.cell_display
+{
+    padding: 10px 10px 10px 60px;
+}
+
+.cell_editor
+{
+    display: flex;
+    flex-direction: row;
+}
+
+.cell_editor .cell_inputs
+{
+    font-family: monospace;
+    font-size: 12px;
+
+    width: 50px;
+    padding: 10px 0;
+
+    text-align: center;
+
+    color: #8c8a8e;
+    background-color: #e2dfe3;
+
+    flex: 0 0 auto;
+}
+
+.cell_editor .cell_cm
+{
+    flex: 1 1 auto;
 }