fix(structure): restructured files/folders

app/app.global.scss

@@ -14,8 +14,7 @@ body {
   overflow-y: hidden;
   margin: 0;
   padding: 0;
-  // background: linear-gradient(to bottom, $grey 0%, $black 100%);
-  color: $white;
+  color: #333;
   height: 100vh;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;

app/containers/App.js

@@ -1,17 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import type { Children } from 'react';
-
-export default class App extends Component {
-  props: {
-    children: Children
-  };
-
-  render() {
-    return (
-      <div>
-        {this.props.children}
-      </div>
-    );
-  }
-}

app/routes.js

@@ -1,7 +1,7 @@
 /* eslint flowtype-errors/show-errors: 0 */
 import React from 'react'
 import { Switch, Route } from 'react-router'
-import App from './containers/App'
+import App from './routes/app'
 import Home from './routes/home'
 
 export default () => (

app/routes/app/components/App.js

@@ -0,0 +1,23 @@
+// @flow
+import React, { Component } from 'react'
+import Nav from './components/Nav.js'
+import styles from './App.scss'
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+        <Nav />
+        <div className={styles.content}>
+          {this.props.children}
+        </div>
+      </div>
+    )
+  }
+}
+
+App.propTypes = {
+  children: React.PropTypes.object
+}
+
+export default App

app/routes/app/components/App.scss

@@ -0,0 +1,6 @@
+.content {
+	width: 85%;
+	height: 100vh;
+	display: inline-block;
+	vertical-align: top;
+}

app/routes/app/components/components/Nav.js

@@ -0,0 +1,59 @@
+// @flow
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import ReactSVG from 'react-svg'
+import { MdAccountBalanceWallet, MdSettings } from 'react-icons/lib/md'
+import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
+import styles from './Nav.scss'
+
+class Nav extends Component {
+  render() {
+    return (
+      <nav className={styles.nav}>
+        <ul className={styles.info}>
+          <li className={`${styles.currencies} ${styles.link}`}>
+            <span className={`${styles.currency} ${styles.btc}`}>
+              <FaBitcoin />
+            </span>
+            <span className={`${styles.currency} ${styles.usd}`}>
+              <FaDollar />
+            </span>
+          </li>
+          <li className={`${styles.logo} ${styles.link}`}>
+            <ReactSVG path='../resources/zap_2.svg' />
+          </li>
+          <li className={`${styles.wallet} ${styles.link}`}>
+            <span>
+              $56.13
+            </span>
+          </li>
+        </ul>
+
+        <ul className={styles.links}>
+          <li className={styles.link}>
+            <FaClockO />
+            <span>Activity</span>
+          </li>
+          <li className={styles.link}>
+            <MdAccountBalanceWallet />
+            <span>Wallet</span>
+          </li>
+          <li className={styles.link}>
+            <MdSettings />
+            <span>Settings</span>
+          </li>
+        </ul>  
+        <div className={styles.buttons}>
+          <div className={styles.button}>
+            <span>Pay</span>
+          </div>
+          <div className={styles.button}>
+            <span>Request</span>
+          </div>
+        </div>
+      </nav>
+    )
+  }
+}
+
+export default Nav

app/routes/app/components/components/Nav.scss

@@ -0,0 +1,107 @@
+.nav {
+	display: inline-block;
+	vertical-align: top;
+	width: 15%;
+	font-size: 24px;
+	background: #1d1d1d;
+	height: 100vh;
+	position: relative;
+	min-width: 15%;
+	color: #ffffff;
+}
+
+.info {
+	margin-bottom: 50%;
+	padding: 10px;
+
+	.link {
+		display: inline-block;
+		vertical-align: top;
+		list-style-type: none;
+		width: 33.3%;
+		cursor: pointer;
+	}
+}
+
+
+.currency {
+	margin: 0 5px;
+
+	&.usd {
+		color: #ebb864;
+		font-weight: bold;
+	}
+}
+
+.logo {
+	text-align: center;
+	margin-top: 50px;
+
+	svg {
+		width: 100px;
+		height: 100px;
+	}
+}
+
+.wallet {
+	text-align: right;
+ 	color: #ebb864;
+}
+
+.links {
+	width: 50%;
+	margin: 0 auto;
+
+	.link {
+	  margin-bottom: 20px;
+	  padding: 0 10px;
+	  opacity: 0.5;
+	  cursor: pointer;
+
+	  &:first-child {
+	  	color: #ebb864;
+	  	opacity: 1.0;
+	  }
+
+	  svg {
+	  	width: 22px;
+	  	height: 22px;
+	  }
+
+    span {
+    	margin-left: 15px;
+    	line-height: 22px;
+	    font-size: 18px;
+	    font-weight: 500;
+	    letter-spacing: .2px;
+    }
+	}
+}
+
+.buttons {
+	width: 75%;
+	font-size: 18px;
+	position: absolute;
+  bottom: 10px;
+  right: 12.5%;
+}
+
+.button {
+	text-align: center;
+	border-radius: 8px;
+	background: #ebb864;
+	margin-bottom: 20px;
+	padding: 20px 10px;
+	font-weight: bold;
+	cursor: pointer;
+	text-transform: uppercase;
+	letter-spacing: .2px;
+
+	&:hover {
+		background: lighten(#ebb864, 5%);
+	}
+}
+
+.content {
+	width: 80%;
+}

app/routes/app/containers/AppContainer.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux'
+import App from '../components/App'
+
+const mapDispatchToProps = {}
+
+const mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)

app/routes/app/index.js

@@ -0,0 +1,3 @@
+import AppContainer from './containers/AppContainer'
+
+export default AppContainer

app/routes/home/components/Home.js

@@ -1,62 +1,12 @@
 // @flow
 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import ReactSVG from 'react-svg'
-import { MdAccountBalanceWallet, MdSettings } from 'react-icons/lib/md'
-import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
 import styles from './Home.scss'
 
 class Home extends Component {
   render() {
     return (
-      <div className={styles.container} data-tid='container'>
-        <nav className={styles.nav}>
-          <ul className={styles.info}>
-            <li className={`${styles.currencies} ${styles.link}`}>
-              <span className={`${styles.currency} ${styles.btc}`}>
-                <FaBitcoin />
-              </span>
-              <span className={`${styles.currency} ${styles.usd}`}>
-                <FaDollar />
-              </span>
-            </li>
-            <li className={`${styles.logo} ${styles.link}`}>
-              <ReactSVG path='../resources/zap_2.svg' />
-            </li>
-            <li className={`${styles.wallet} ${styles.link}`}>
-              <span>
-                $56.13
-              </span>
-            </li>
-          </ul>
-
-          <ul className={styles.links}>
-            <li className={styles.link}>
-              <FaClockO />
-              <span>Activity</span>
-            </li>
-            <li className={styles.link}>
-              <MdAccountBalanceWallet />
-              <span>Wallet</span>
-            </li>
-            <li className={styles.link}>
-              <MdSettings />
-              <span>Settings</span>
-            </li>
-          </ul>  
-          <div className={styles.buttons}>
-            <div className={styles.button}>
-              <span>Pay</span>
-            </div>
-            <div className={styles.button}>
-              <span>Request</span>
-            </div>
-          </div>
-        </nav>
-
-        <div className={styles.content}>
-
-        </div>
+      <div>
+        yo
       </div>
     )
   }

app/routes/home/components/Home.scss

@@ -1,104 +0,0 @@
-.nav {
-	display: inline-block;
-	width: 15%;
-	padding: 10px;
-	font-size: 32px;
-	background: #1d1d1d;
-	height: 100vh;
-	position: relative;
-}
-
-.info {
-	margin-bottom: 50%;
-
-	.link {
-		display: inline-block;
-		vertical-align: top;
-		list-style-type: none;
-		width: 33.3%;
-		cursor: pointer;
-	}
-}
-
-
-.currency {
-	margin: 0 5px;
-
-	&.usd {
-		color: #ebb864;
-		font-weight: bold;
-	}
-}
-
-.logo {
-	text-align: center;
-	margin-top: 50px;
-
-	svg {
-		width: 100px;
-		height: 100px;
-	}
-}
-
-.wallet {
-	text-align: right;
- 	color: #ebb864;
-}
-
-.links {
-	width: 50%;
-	margin: 0 auto;
-
-	.link {
-	  margin-bottom: 20px;
-	  padding: 0 10px;
-	  opacity: 0.5;
-	  cursor: pointer;
-
-	  &:first-child {
-	  	color: #ebb864;
-	  	opacity: 1.0;
-	  }
-
-	  svg {
-	  	width: 22px;
-	  	height: 22px;
-	  }
-
-    span {
-    	margin-left: 15px;
-    	line-height: 22px;
-	    font-size: 18px;
-	    font-weight: 500;
-	    letter-spacing: .2px;
-    }
-	}
-}
-
-.buttons {
-	width: 75%;
-	font-size: 18px;
-	position: absolute;
-  bottom: 10px;
-  right: 12.5%;
-}
-
-.button {
-	text-align: center;
-	border-radius: 8px;
-	background: #ebb864;
-	margin-bottom: 20px;
-	padding: 20px 10px;
-	font-weight: bold;
-	cursor: pointer;
-	text-transform: uppercase;
-	letter-spacing: .2px;
-
-	&:hover {
-		background: lighten(#ebb864, 5%);
-	}
-}
-
-.content {
-	width: 80%;
-}