Merge pull request #380 from MetaMask/FrankieDisclaimer

Frankie disclaimer

4 files changed, 21 insertions, 37 deletions

diff --git a/development/beefy.js b/development/beefy.js
index 0ed40f177..9eff94320 100644
--- a/development/beefy.js
+++ b/development/beefy.js
@@ -2,28 +2,18 @@ const beefy = require('beefy')
 const http = require('http')
 const fs = require('fs')
 const path = require('path')
-const states = require('./states')
-
-const statesPath = path.join(__dirname, 'states.js')
-const statesJson = JSON.stringify(states)
-fs.writeFileSync(statesPath, statesJson)
 
 const port = 8124
 
 const handler = beefy({
-    entries: ['mocker.js']
+    entries: {'mocker.js': 'bundle.js'}
   , cwd: __dirname
   , live: true
+  , open: true
   , quiet: false
   , bundlerFlags: ['-t', 'brfs']
 })
 
-console.dir(handler)
 
 http.createServer(handler).listen(port)
 console.log(`Now listening on port ${port}`)
-
-function on404(req, resp) {
-  resp.writeHead(404, {})
-  resp.end('sorry folks!')
-}
diff --git a/development/index.html b/development/index.html
index 02fd01b03..aca074f3e 100644
--- a/development/index.html
+++ b/development/index.html
@@ -10,28 +10,17 @@
     <div id="app-content" style="height: 100%"></div>
     <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
 
-    <!-- design reference -->
-    <link rel="stylesheet" type="text/css" href="../ui/app/css/debug.css">
-    <div id="design-container">
-      <!-- persist scroll position on refresh -->
-      <script type="text/javascript">
-        var scrollElement = document.getElementById('design-container')
-        function getScrollPosition () {
-          var scrollTop = scrollElement.scrollTop, scrollLeft = scrollElement.scrollLeft
-          window.location.hash = 'scrollTop='+scrollTop+'&scrollLeft='+scrollLeft
-        }
-        window.onload = function () {
-          setInterval(getScrollPosition, 1000)
-          var hashLocation = window.location.hash.split('#')[1]
-          if (!hashLocation) return
-          var sections = hashLocation.split('&')
-          var scrollTop = sections[0].split('=')[1]
-          var scrollLeft = sections[1].split('=')[1]
-          scrollElement.scrollTop = scrollTop
-          scrollElement.scrollLeft = scrollLeft
-        }
-      </script>
-    </div>
-
   </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 098d46c75..0656e66ea 100644
--- a/development/mocker.js
+++ b/development/mocker.js
@@ -9,13 +9,13 @@ const Selector = require('./selector')
 const qs = require('qs')
 let queryString = qs.parse(window.location.href.split('#')[1])
 let selectedView = queryString.view || 'account detail'
+const firstState = states[selectedView]
+updateQueryParams(selectedView)
 
 // CSS
 const MetaMaskUiCss = require('../ui/css')
 const injectCss = require('inject-css')
 
-const firstState = states[selectedView]
-updateQueryParams()
 
 function updateQueryParams(newView) {
   queryString.view = newView
@@ -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