Formatted dev mode better

3 files changed, 17 insertions, 0 deletions

diff --git a/development/index.html b/development/index.html
index deb3dc690..aca074f3e 100644
--- a/development/index.html
+++ b/development/index.html
@@ -11,4 +11,16 @@
     <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
 
   </body>
+
+<style>
+html, body, #app-content, .super-dev-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: #cccccc;
+}
+.mock-app-root {
+  background: #F7F7F7;
+}
+</style>
 </html>
diff --git a/development/mocker.js b/development/mocker.js
index 593037f2e..0656e66ea 100644
--- a/development/mocker.js
+++ b/development/mocker.js
@@ -54,6 +54,8 @@ render(
       style: {
         height: '500px',
         width: '360px',
+        boxShadow: '2px 2px 5px grey',
+        margin: '20px',
       },
     }, [
       h(Root, {
diff --git a/development/selector.js b/development/selector.js
index b58904cdf..c466905ca 100644
--- a/development/selector.js
+++ b/development/selector.js
@@ -17,6 +17,9 @@ NewComponent.prototype.render = function () {
   const selected = state.selected || selectedKey
 
   return h('select', {
+    style: {
+      margin: '20px 20px 0px',
+    },
     value: selected,
     onChange:(event) => {
       const selectedKey = event.target.value