add basic styles to demo

Author: J.C. Hiatt

__tests__/createChaos.test.js

@@ -1,5 +1,5 @@
-import expect from 'expect'
-import { createChaos } from '../src/utils/createChaos'
+import expect from 'expect';
+import { createChaos } from '../src/utils/createChaos';
 
 const mockMath = (val) => {
   let mr = Math.random;

demo/src/index.css

@@ -0,0 +1,66 @@
+.button {
+  position: absolute;
+  top: 2rem;
+  left: 1rem;
+  width: 180px;
+  padding: 1rem;
+  background-color: palevioletred;
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+  font-family: Arial;
+}
+
+.button:hover {
+  cursor: pointer;
+  background-color: goldenrod;
+}
+
+.header {
+  color: #333;
+  font-family: monospace;
+  font-size: 2rem;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 8rem);
+  width: 100vw;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem;
+  padding: 0.25rem;
+}
+
+.child {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 480px;
+  height: 480px;
+  margin: 1rem;
+  padding: 0.5rem;
+  font-size: 1.5rem;
+}
+
+.one {
+  background-color: peru;
+}
+
+.two {
+  background-color: papayawhip;
+}
+
+.three {
+  background-color: peachpuff;
+}

demo/src/index.js

@@ -2,36 +2,47 @@ import React from 'react'
 import withChaos from '../../src/index'
 import { render } from 'react-dom'
 import ErrorBoundary from '../../src/components/ErrorBoundary';
+import './index.css';
 
 function Demo() {
   return (
     <React.Fragment>
-      <button onClick={() => {
-        // eslint-disable-next-line
-        location.reload()
-      }}>Reload</button>
-      <ComponentOne />
-      <ErrorBoundary fallback={<Fallback />}>
-        <ComponentWithChaos />
-      </ErrorBoundary>
-      <ComponentTwo />
-      <ComponentThree />
+      <div className="header">
+        <h1>🔥🐒💥 React Chaos</h1>
+      </div>
+      <button className="button" onClick={() => {
+          // eslint-disable-next-line
+          location.reload()
+        }}>Reload</button>
+      <div className="wrapper">
+        <div className="container child one">
+          <ComponentOne />
+          <ErrorBoundary fallback={<Fallback />}>
+            <ComponentWithChaos />
+          </ErrorBoundary>
+        </div>
+        <div className="container child two">
+          <ComponentTwo />
+        </div>
+        <div className="container child three">
+          <ComponentThree />
+        </div>
+      </div>
     </React.Fragment>
   );
 }
 
 const Fallback = () => <div style={{
-  height: '4rem',
   backgroundColor: 'yellow',
   color: '#333',
-  fontSize: '3rem',
+  fontSize: '2rem',
   fontWeight: 700
 }}
 >
   <span> I'm handling the error gracefully. 💅 </span>
 </div>
 
-const GenericComponent = ({ text }) => <h1>Component {text}</h1>
+const GenericComponent = ({ text }) => <pre>Component {text}</pre>
 
 const NestedComponent = ({ children }) => children;