Implemented some of api keys

frontend/scenes/Application.js

@@ -2,25 +2,70 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import Helmet from 'react-helmet';
 
-const Application = observer((props) => {
-  return (
-    <div style={{ width: '100%', height: '100%', display: 'flex', flex: 1 }}>
-      <Helmet
-        title="Atlas"
-        meta={ [
-          {
-            name: 'viewport',
-            content: 'width=device-width, initial-scale=1.0',
-          },
-        ] }
-      />
-      { props.children }
-    </div>
-  );
-});
+@observer
+class Application extends React.Component {
+  static childContextTypes = {
+    rebass: React.PropTypes.object,
+  }
 
-Application.propTypes = {
-  children: React.PropTypes.node.isRequired,
-};
+  propTypes = {
+    children: React.PropTypes.node.isRequired,
+  }
+
+  getChildContext() {
+    return {
+      rebass: {
+        colors: {
+          primary: '#171B35',
+        },
+        // color: '#eee',
+        // backgroundColor: '#fff',
+        borderRadius: 2,
+        borderColor: '#eee',
+
+        // fontSizes: [64, 48, 28, 20, 18, 16, 14],
+        bold: 500,
+        scale: [
+          0,
+          8,
+          18,
+          36,
+          72,
+        ],
+        Input: {
+          // borderBottom: '1px solid #eee',
+        },
+        Button: {
+          // color: '#eee',
+          // backgroundColor: '#fff',
+          // border: '1px solid #ccc',
+        },
+        ButtonOutline: {
+          color: '#000',
+        },
+        InlineForm: {
+
+        },
+      },
+    };
+  }
+
+  render() {
+    return (
+      <div style={{ width: '100%', height: '100%', display: 'flex', flex: 1 }}>
+        <Helmet
+          title="Atlas"
+          meta={ [
+            {
+              name: 'viewport',
+              content: 'width=device-width, initial-scale=1.0',
+            },
+          ] }
+        />
+        { this.props.children }
+      </div>
+    );
+  }
+}
 
 export default Application;