fix janky loading and improve devtools

ryolambert · Mar 27, 2020 · 60859fe · 60859fe
1 parent f469fe2
commit 60859fe
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 32 deletions.
diff --git a/public/msw.js → public/mockServiceWorker.js b/public/msw.js → public/mockServiceWorker.js
diff --git a/src/authenticated-app.js b/src/authenticated-app.js
@@ -65,7 +65,7 @@ function AuthenticatedApp() {
           width: '100%',
           display: 'grid',
           gridGap: '1em',
-          gridTemplateColumns: '3fr 9fr',
+          gridTemplateColumns: '1fr 3fr',
           [mq.small]: {
             gridTemplateColumns: '1fr',
             gridTemplateRows: 'auto',
@@ -81,7 +81,6 @@ function AuthenticatedApp() {
             <AppRoutes />
           </ErrorBoundary>
         </main>
-        <footer />
       </div>
     </>
   )

diff --git a/src/bootstrap.js b/src/bootstrap.js
@@ -1,6 +1,6 @@
 import 'stop-runaway-react-effects/hijack'
 import './test/server'
+import 'bootstrap/dist/css/bootstrap-reboot.css'
 import '@reach/dialog/styles.css'
 import '@reach/menu-button/styles.css'
 import '@reach/tooltip/styles.css'
-import './styles/global.css'
diff --git a/src/dev-tools/dev-tools.js b/src/dev-tools/dev-tools.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import {jsx} from '@emotion/core'
+import {jsx, Global} from '@emotion/core'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -37,18 +37,57 @@ function install() {
         document.body.removeEventListener('mousemove', updateHoverState)
     }, [])
     return (
-      <div ref={rootRef} id="dev-tools" className={show ? 'show' : null}>
-        <button
-          css={{
-            border: 'none',
-            background: 'none',
-            marginBottom: 10,
-          }}
-          onClick={toggleShow}
+      <div
+        css={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <div
+          ref={rootRef}
+          css={[
+            {
+              background: 'black',
+              opacity: '0',
+              color: 'white',
+              padding: '20px',
+              height: '60px',
+              width: '100%',
+              transition: 'all 0.3s',
+              overflow: 'scroll',
+            },
+            show
+              ? {
+                  height: '50vh',
+                  width: '100%',
+                  opacity: '1',
+                }
+              : null,
+          ]}
         >
-          🎛
-        </button>
-        {show ? <ReactQueryDevtoolsPanel /> : null}
+          <button
+            css={{
+              border: 'none',
+              background: 'none',
+              marginBottom: 10,
+            }}
+            onClick={toggleShow}
+          >
+            🎛
+          </button>
+          {show ? <ReactQueryDevtoolsPanel /> : null}
+        </div>
+        {show ? (
+          <Global
+            styles={{
+              '#root': {
+                marginBottom: '50vh',
+              },
+            }}
+          />
+        ) : null}
       </div>
     )
   }

diff --git a/src/styles/global.css b/src/styles/global.css
diff --git a/src/test/server.js b/src/test/server.js
@@ -10,7 +10,7 @@ async function setupServer() {
   }
 
   // Start the Service Worker
-  const result = await composeMocks(...handlers).start('/msw.js')
+  const result = await composeMocks(...handlers).start('/mockServiceWorker.js')
 
   // https://github.com/open-draft/msw/issues/73
   await new Promise(resolve => setTimeout(resolve, 500))