diff --git a/app/app.global.scss b/app/app.global.scss index 2e58bf57..079f2b7f 100644 --- a/app/app.global.scss +++ b/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; diff --git a/app/containers/App.js b/app/containers/App.js deleted file mode 100644 index 19f9934a..00000000 --- a/app/containers/App.js +++ /dev/null @@ -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 ( -
- {this.props.children} -
- ); - } -} diff --git a/app/routes.js b/app/routes.js index 76da1a9b..55ce60f4 100644 --- a/app/routes.js +++ b/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 () => ( diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js new file mode 100644 index 00000000..5c1c19c7 --- /dev/null +++ b/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 ( +
+
+ ) + } +} + +App.propTypes = { + children: React.PropTypes.object +} + +export default App \ No newline at end of file diff --git a/app/routes/app/components/App.scss b/app/routes/app/components/App.scss new file mode 100644 index 00000000..038ba291 --- /dev/null +++ b/app/routes/app/components/App.scss @@ -0,0 +1,6 @@ +.content { + width: 85%; + height: 100vh; + display: inline-block; + vertical-align: top; +} \ No newline at end of file diff --git a/app/routes/app/components/components/Nav.js b/app/routes/app/components/components/Nav.js new file mode 100644 index 00000000..cf79866d --- /dev/null +++ b/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 ( + + ) + } +} + +export default Nav \ No newline at end of file diff --git a/app/routes/app/components/components/Nav.scss b/app/routes/app/components/components/Nav.scss new file mode 100644 index 00000000..f7a79ea9 --- /dev/null +++ b/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%; +} diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js new file mode 100644 index 00000000..e123a843 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/app/routes/app/index.js b/app/routes/app/index.js new file mode 100644 index 00000000..e05ddf1b --- /dev/null +++ b/app/routes/app/index.js @@ -0,0 +1,3 @@ +import AppContainer from './containers/AppContainer' + +export default AppContainer \ No newline at end of file diff --git a/app/routes/home/components/Home.js b/app/routes/home/components/Home.js index d7164a26..1682bec4 100644 --- a/app/routes/home/components/Home.js +++ b/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 ( -
- - -
- -
+
+ yo
) } diff --git a/app/routes/home/components/Home.scss b/app/routes/home/components/Home.scss index 15d1c751..e69de29b 100644 --- a/app/routes/home/components/Home.scss +++ b/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%; -}