Add Sass and create pages directory

package.json

@@ -6,13 +6,14 @@
   "dependencies": {
     "axios": "^0.18.0",
     "d3": "^4.13.0",
+    "node-sass": "^4.9.3",
     "npm": "^6.0.0",
     "react": "^16.2.0",
     "react-cookies": "^0.1.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.0.7",
-    "react-scripts": "1.1.0",
+    "react-scripts": "2.0.4",
     "react-scroll-to-component": "^1.0.2",
     "react-select": "^1.2.1",
     "redux": "^3.7.2",
@@ -29,5 +30,11 @@
   },
   "devDependencies": {
     "gh-pages": "^1.1.0"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

public/index.html

@@ -9,7 +9,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
-    <link rel="shortcut icon" href="%PUBLIC_URL%/🦄.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/🦄.png">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

-@import url('https://rsms.me/inter/inter-ui.css');
-
-body{
-  margin: 0;
-  padding: 0;
-  font-family: "Inter UI", sans-serif;
-  font-size: 20px;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-  overflow-x: hidden;
-}
-
-.dim input{
-  pointer-events:none;
-}
-
-input{
-  font-size: 20px;
-  line-height: 1.6;
-}
-
-p{
-  margin: 0;
-}
-
-a{
-  cursor: pointer;
-  color: #2F80ED;
-  text-decoration: none;
-}
-
-a:hover{
-  text-decoration: underline;
-}
-
-.pa2 {
-  padding: 2.5rem;
-  /* padding-top: 1.5rem; */
-  /* padding-bottom: 1.5rem; */
-}
-
-.title{
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-.border{
-  border: 1px solid #f7f7f7;
-}
-
-.logo{
-  /* width: 10vw; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.connection{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /* color: #27AE60; */
-  flex: 1;
-  z-index: 2;
-  font-family: "Inter UI", sans-serif;
-}
-
-.connection a{
-  /* text-decoration: none; */
-  /* color: #27AE60; */
-  padding-right: 2em;
-}
-
-.userBalance{
-  overflow-y: hidden;
-  overflow-x: scroll;
-  white-space: nowrap;
-  z-index: 10;
-  padding-right: 2em;
-}
-
-.order {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  font-family: "Inter UI", sans-serif;
-  /* justify-content: space-between; */
-}
-.arrow{
-  max-width: 100vw;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
-.value{
-  width: 35vw;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.value input, select{
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-.value input:focus{
-    outline: none;
-}
-
-.investValue{
-  width: 80vw;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dropdown{
-  transform: rotate(-90deg);
-  opacity: .4;
-  position: relative;
-  z-index: -99;
-  left: -5px;
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.rate-info{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  opacity: .6;
-}
-
-.rate p{
-  margin: 0px;
-  padding: .25rem;
-  font-family: "Inter UI", sans-serif;
-}
-
-.info{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  font-family: "Inter UI", sans-serif;
-}
-
-.links{
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  font-family: "Inter UI", sans-serif;
-}
-
-.link{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  text-decoration: none;
-  color: black;
-}
-
-.link:hover .underline{
-  text-decoration: underline;
-}
-
-.about{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  text-decoration: none;
-  color: black;
-  font-family: "Inter UI", sans-serif;
-}
-
-.about:hover .underline{
-  text-decoration: underline;
-}
-
-.swap{
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  height: 48px;
-  transition: height .3s ease;
-  cursor: pointer;
-  font-family: "Inter UI", sans-serif;
-}
-
-.expand{
-  display: flex;
-  flex-direction: column;
-  /* justify-content: center; */
-  background-color: #f2f2f2;
-  height: auto;
-  transition: height .3s ease;
-  font-family: "Inter UI", sans-serif;
-}
-
-.transaction p{
-  margin: 0px;
-  font-family: "Inter UI", sans-serif;
-}
-
-.transaction ol{
-  padding: 0px;
-  padding-left: 20px;
-}
-
-.grey-bg{
-  background-color: #f7f7f7;
-}
-
-.white-bg{
-  background-color: #ffffff;
-}
-
-.red-bg{
-  /* background-color: red; */
-  background-color: #d73a49;
-}
-
-.blue-bg{
-  background-color: #2F80ED;
-}
-
-.red{
-  /* color: red; */
-  color: #d73a49;
-}
-
-.green{
-  color: #27AE60;
-}
-
-.green a{
-  color: #27AE60;
-}
-
-.yellow{
-  color: #F2C94C;
-}
-
-.dim .order , .liq, .ex{
-  opacity: .4;
-  pointer-events:none;
-}
-
-.dim .rate{
-  opacity: .4;
-  pointer-events:none;
-}
-
-.dim .links{
-  opacity: .4;
-  pointer-events:none;
-}
-
-.hidden{
-  padding: 0px;
-  height: 0px;
-  border: 0px solid #f2f2f2;
-}
-
-.f-a{
-  cursor: pointer;
-}
-
-.About p{
-  /* margin: .5rem; */
-}
-.expand p{
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-  /* margin-before: 1em;
-  margin-after: 1em;
-  margin-start: 0px;
-  margin-end: 0px; */
-}
-
-.invest {
-  font-family: "Inter UI", sans-serif;
-}
-
-.investValue {
-  width: 90vw;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.investValue input {
-  width: 15vw;
-  height: 100%;
-  border: none;
-  outline: none;
-}
-
-.investValueInput {
-  background-color: #ffffff;
-}
-
-.investSelectToken {
-  /* background-color: #ffffff; */
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-}
-
-.investDropdown {
-  transform: rotate(-90deg);
-  opacity: .4;
-  position: relative;
-  left: -5px;
-}
-
-.visualization {
-  font-family: "Inter UI", sans-serif;
-}

src/components/SharePurchase.js

@@ -80,9 +80,11 @@ class Purchase extends Component {
     if(this.props.web3Store.investToggle == true && this.props.exchange.investSharesInput > 0) {
       // Doesn't work
       if (this.props.exchange.investToken.value == "ETH") {
-        <div className="swap border pa2 red-bg">
-          <b><p>Please select a token other than ETH.</p></b>
-        </div>
+        return (
+          <div className="swap border pa2 red-bg">
+            <b><p>Please select a token other than ETH.</p></b>
+          </div>
+        )
       } else if(this.props.exchange.investTokenAllowance == 0) {
         return (
           <div className="swap border pa2 blue-bg" role="button" onClick={() => {this.approveInvestAllowance()}}>

src/components/UniHead.js

 import React from 'react';
 import { Helmet } from "react-helmet";
 
-import unicorn from '../images/🦄.png'
+import unicorn from '../assets/images/logo.png'
 
 function UniHead(props) {
   return (

src/index.css

-body {
+@import url('https://rsms.me/inter/inter-ui.css');
+
+html, body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: "Inter UI", sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+.root {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100vh;
+  width: 100vw;
+  overflow-x: hidden;
+  overflow-y: auto;
 }

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './pages/App';
 
 import { Provider } from 'react-redux';
 import store from './store';

src/pages/App.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import UniHead from '../components/UniHead'
+import Header from '../components/Header';
+import ConnectionHelper from '../components/ConnectionHelper'
+import Exchange from '../components/Exchange';
+import RateAndFee from '../components/RateAndFee';
+import Purchase from '../components/Purchase';
+import About from '../components/About';
+import Links from '../components/Links';
+import SharePurchase from '../components/SharePurchase';
+import './App.scss';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="app">
+        <UniHead />
+        <Header metamask={this.props.metamask}/>
+        <ConnectionHelper
+          metamask={this.props.metamask}
+          approveAllowance={this.approveAllowance}
+          toggleAbout={this.toggleAbout}
+        />
+        <Exchange
+          getAccountInfo={this.getAccountInfo}
+          getMarketInfo={this.getMarketInfo}
+          symbolToTokenContract={this.symbolToTokenContract}
+          symbolToExchangeAddress={this.symbolToExchangeAddress}
+        />
+        <RateAndFee
+          exchangeRate={this.props.exchange.rate}
+          outputTokenValue={this.props.exchange.outputToken.value}
+          inputTokenValue={this.props.exchange.inputToken.value}
+          exchangeFee={this.props.exchange.fee}
+        />
+        <Purchase
+          symbolToExchangeContract={this.symbolToExchangeContract}
+          symbolToTokenAddress={this.symbolToTokenAddress}
+        />
+        {/* <Visualization /> */}
+        <Links
+          toggleInvest={this.toggleInvest}
+          location={this}
+          symbolToTokenContract={this.symbolToTokenContract}
+          symbolToExchangeContract={this.symbolToExchangeContract}
+          symbolToExchangeAddress={this.symbolToExchangeAddress}
+        />
+        <SharePurchase
+          symbolToTokenContract={this.symbolToTokenContract}
+          symbolToExchangeContract={this.symbolToExchangeContract}
+          symbolToTokenAddress={this.symbolToTokenAddress}
+          symbolToExchangeAddress={this.symbolToExchangeAddress}
+        />
+        <About toggleAbout={this.toggleAbout} location={this}/>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    web3Store: state.web3Store,
+    exchangeContracts: state.exchangeContracts,
+    tokenContracts: state.tokenContracts,
+    exchange: state.exchange,
+  }),
+)(App);

src/pages/App.scss

+.app {
+}
\ No newline at end of file