Coleur (#61)

* small bugs in dashboard fixed * the arcade bazaar * beautify dark landing page * resolve issues * fix travis script * fix travis ONCE AND FOR ALL (JK)
convergentcx · Dec 9, 2018 · 7ed31d7 · 7ed31d7
1 parent 86068ce
commit 7ed31d7
Show file tree

Hide file tree

Showing 36 changed files with 765 additions and 542 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,4 +24,4 @@ node_modules
 .vscode
 package-lock.json
 .firebase
-.env
+.env
diff --git a/.travis.yml b/.travis.yml
@@ -16,4 +16,4 @@ deploy:
   skip_cleanup: true
   provider: firebase
   token:
-    secure: Zs/oGX6gHQ3jtsp11dm66hMgcrA9bj2am2evWNlWMHliz3ey0rhO6njwL/Xsduw2azq5yD+LmH8Qj7IGBu30Oj0480W5YOXWhqKT7eANVkV21yBjehOhhWl7FeiJKLqBXIlSE7BwDAJqKMcttFyBj8PKM7gq2RKnT3T51cC9IJ52qOwA4Y6M4VT/UMIdnon7Pjvgruvno+jdEHewY0zUkOeQbUIO1rJLegMu6GQ0SBUs6opmo/hX6e+GPvPhMDEb1Aj6Gqo6pbjHTOyojrphc3NfWz+Ks/1+WgoFHLjqy+q6Ta8dVklyLEnaFWiXnDiUhsZ/6XmEadk8fK/FTJHWizbs11yU6UefSbFq35N5ZyTeMj6jjE4lj0g3Y6zdCDVhzlAJoVLE5vMgXb8ebUwHEhBz50/3H3LWSxoyQGB579iTz3thS01Lb8jl9NHkx09EZ4mUYv47ZLtG+EirX376JVTcF7yls7Frh0uYbxwNephqWq3m8Jhho5LwUUSGodOgOebWSOHzSh2FgYO8JxN/NrhnnPR2L/iiNRCxELW+vorzOCjstj6M+veeIqkNMKMH7qPJfwnahlAraI+bw74HMY9cF5KdVU4OTBzQlxDEImwFRw20bO6P2lr0e/YUfZeYtgJZzqNrCpv+zhy+GcRs6Dw1o/xvrtb4Y2Tw8nJlHqM=
+  - secure: Zs/oGX6gHQ3jtsp11dm66hMgcrA9bj2am2evWNlWMHliz3ey0rhO6njwL/Xsduw2azq5yD+LmH8Qj7IGBu30Oj0480W5YOXWhqKT7eANVkV21yBjehOhhWl7FeiJKLqBXIlSE7BwDAJqKMcttFyBj8PKM7gq2RKnT3T51cC9IJ52qOwA4Y6M4VT/UMIdnon7Pjvgruvno+jdEHewY0zUkOeQbUIO1rJLegMu6GQ0SBUs6opmo/hX6e+GPvPhMDEb1Aj6Gqo6pbjHTOyojrphc3NfWz+Ks/1+WgoFHLjqy+q6Ta8dVklyLEnaFWiXnDiUhsZ/6XmEadk8fK/FTJHWizbs11yU6UefSbFq35N5ZyTeMj6jjE4lj0g3Y6zdCDVhzlAJoVLE5vMgXb8ebUwHEhBz50/3H3LWSxoyQGB579iTz3thS01Lb8jl9NHkx09EZ4mUYv47ZLtG+EirX376JVTcF7yls7Frh0uYbxwNephqWq3m8Jhho5LwUUSGodOgOebWSOHzSh2FgYO8JxN/NrhnnPR2L/iiNRCxELW+vorzOCjstj6M+veeIqkNMKMH7qPJfwnahlAraI+bw74HMY9cF5KdVU4OTBzQlxDEImwFRw20bO6P2lr0e/YUfZeYtgJZzqNrCpv+zhy+GcRs6Dw1o/xvrtb4Y2Tw8nJlHqM=
diff --git a/package.json b/package.json
@@ -4,26 +4,26 @@
   "version": "0.0.1",
   "description": "Personal economy platform",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/convergentcx/Arena#readme",
+  "homepage": "https://proto.convergent.cx",
   "dependencies": {
     "@material-ui/core": "3.6.1",
     "@material-ui/icons": "3.0.1",
     "d3": "4.10.0",
-    "d3-scale": "^2.1.2",
+    "d3-scale": "2.1.2",
     "downshift": "3.1.5",
     "drizzle": "1.2.4",
     "drizzle-react": "1.2.0",
     "ethereum-blockies-base64": "1.0.2",
     "ganache-cli": "6.1.8",
-    "notistack": "^0.4.0",
+    "notistack": "0.4.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.3",
     "react-router-dom": "4.3.1",
     "react-router-hash-link": "1.2.1",
     "react-scripts": "2.0.5",
     "react-toastify": "4.4.3",
     "recharts": "1.3.5",
-    "styled-components": "^4.1.2",
+    "styled-components": "4.1.2",
     "web3": "1.0.0-beta.36"
   },
   "devDependencies": {
@@ -42,7 +42,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build --max-old-size=4096",
+    "build": "react-scripts build --max-old-size=4096",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint 'src/**/*.js' 'src/**/*.jsx'",

diff --git a/src/App.jsx b/src/App.jsx
@@ -7,38 +7,51 @@ import { Landing, Launch, Leaderboard, Profile } from './pages';
 
 /// MUI Theme
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import { hackerTheme, slateTheme } from './themes';
+import { slateTheme, achillTheme } from './themes';
 
 /// Notistack
 import { SnackbarProvider } from 'notistack';
 export default class App extends Component {
-  state= {
-    lights: true,
-  }
+  state = {
+    lights: false
+  };
 
   toggleLights = () => {
     this.setState({ lights: !this.state.lights });
-  }
+  };
 
   render() {
     return (
-    <SnackbarProvider maxSnack={6} anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'center',
-    }}>
-      <MuiThemeProvider theme={this.state.lights ? slateTheme : hackerTheme}>
-        <AppContainer>
-          <Switch>
-            <Route path="/" exact component={Landing} />
-            <Route path="/dashboard" exact component={Dashboard} />
-            <Route path="/dashboard/:tokenAddress" exact render={props => <Interface key={props.match.params.tokenAddress} lights={this.state.lights} toggleLights={this.toggleLights} />} />
-            <Route path="/launch" component={Launch} />
-            <Route path="/leaderboard" component={Leaderboard} />
-            <Route path="/economies/:economyAddress" exact component={Profile} />
-          </Switch>
-        </AppContainer>
-      </MuiThemeProvider>
-    </SnackbarProvider>
+      <SnackbarProvider
+        maxSnack={6}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+      >
+        <MuiThemeProvider theme={this.state.lights ? slateTheme : achillTheme}>
+          <AppContainer>
+            <Switch>
+              <Route path="/" exact component={Landing} />
+              <Route path="/dashboard" exact component={Dashboard} />
+              <Route
+                path="/dashboard/:tokenAddress"
+                exact
+                render={props => (
+                  <Interface
+                    key={props.match.params.tokenAddress}
+                    lights={this.state.lights}
+                    toggleLights={this.toggleLights}
+                  />
+                )}
+              />
+              <Route path="/launch" component={Launch} />
+              <Route path="/leaderboard" component={Leaderboard} />
+              <Route path="/economies/:economyAddress" exact component={Profile} />
+            </Switch>
+          </AppContainer>
+        </MuiThemeProvider>
+      </SnackbarProvider>
     );
   }
 }
diff --git a/src/assets/logo_white.png b/src/assets/logo_white.png
diff --git a/src/components/AppContainer/TopNavbar/MetamaskLogin.jsx b/src/components/AppContainer/TopNavbar/MetamaskLogin.jsx
@@ -13,7 +13,7 @@ const styles = theme => {
   let bg = '#464646';
 
   if (theme.palette.type === 'dark') {
-    bg = '#FFFFFF'
+    bg = '#FFFFFF';
   }
 
   return {
@@ -31,8 +31,8 @@ const styles = theme => {
         height: '1em',
         '&::before': {
           borderWidth: '0 1em 1em 1em',
-          borderColor: `transparent transparent ${bg} transparent`,
-        },
+          borderColor: `transparent transparent ${bg} transparent`
+        }
       },
       '&[x-placement*="top"] $arrowArrow': {
         bottom: 0,
@@ -42,8 +42,8 @@ const styles = theme => {
         height: '1em',
         '&::before': {
           borderWidth: '1em 1em 0 1em',
-          borderColor: `${bg} transparent transparent transparent`,
-        },
+          borderColor: `${bg} transparent transparent transparent`
+        }
       },
       '&[x-placement*="right"] $arrowArrow': {
         left: 0,
@@ -52,8 +52,8 @@ const styles = theme => {
         width: '1em',
         '&::before': {
           borderWidth: '1em 1em 1em 0',
-          borderColor: `transparent ${bg} transparent transparent`,
-        },
+          borderColor: `transparent ${bg} transparent transparent`
+        }
       },
       '&[x-placement*="left"] $arrowArrow': {
         right: 0,
@@ -62,9 +62,9 @@ const styles = theme => {
         width: '1em',
         '&::before': {
           borderWidth: '1em 0 1em 1em',
-          borderColor: `transparent transparent transparent ${bg}`,
-        },
-      },
+          borderColor: `transparent transparent transparent ${bg}`
+        }
+      }
     },
     arrowArrow: {
       position: 'absolute',
@@ -77,20 +77,20 @@ const styles = theme => {
         display: 'block',
         width: 0,
         height: 0,
-        borderStyle: 'solid',
-      },
-    },
-  }
+        borderStyle: 'solid'
+      }
+    }
+  };
 };
 
 class MetamaskLogin extends Component {
   state = {
-    arrowRef: null,
+    arrowRef: null
   };
 
   handleArrowRef = node => {
     this.setState({
-      arrowRef: node,
+      arrowRef: node
     });
   };
 
@@ -108,12 +108,10 @@ class MetamaskLogin extends Component {
 
           const blockie = makeBlockie(drizzleState.accounts[0]);
 
-          const shortenAddress = address => (
-            address.slice(0,8) + '...' + address.slice(-6)
-          );
+          const shortenAddress = address => address.slice(0, 8) + '...' + address.slice(-6);
 
           let contrastText = '#FFFFFF';
-          if (theme.palette.type === 'dark' ) {
+          if (theme.palette.type === 'dark') {
             contrastText = '#232323';
           }
 
@@ -128,16 +126,26 @@ class MetamaskLogin extends Component {
                 <React.Fragment>
                   <Grid container style={{ textAlign: 'center' }}>
                     <Grid item xs={12}>
-                      <Typography variant="subtitle1" style={{ color: contrastText, fontSize: '12px' }}>
+                      <Typography
+                        variant="subtitle1"
+                        style={{ color: contrastText, fontSize: '12px' }}
+                      >
                         {shortenAddress(drizzleState.accounts[0])}
                       </Typography>
                     </Grid>
                     <Grid item xs={12}>
-                      <Typography variant="subtitle1" style={{ color: contrastText, fontSize: '14px' }}>
+                      <Typography
+                        variant="subtitle1"
+                        style={{ color: contrastText, fontSize: '14px' }}
+                      >
                         Balance: {removeDecimals(balance)} ETH
                       </Typography>
                     </Grid>
-                    <Grid item xs={12} style={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}>
+                    <Grid
+                      item
+                      xs={12}
+                      style={{ display: 'flex', justifyContent: 'center', textAlign: 'center' }}
+                    >
                       <NavLink to="/dashboard">
                         <Button color="secondary" variant="outlined">
                           DASHBOARD
@@ -154,10 +162,10 @@ class MetamaskLogin extends Component {
                   modifiers: {
                     arrow: {
                       enabled: Boolean(this.state.arrowRef),
-                      element: this.state.arrowRef,
-                    },
-                  },
-                },
+                      element: this.state.arrowRef
+                    }
+                  }
+                }
               }}
             >
               <NavLink to="/dashboard">

diff --git a/src/components/AppContainer/TopNavbar/index.jsx b/src/components/AppContainer/TopNavbar/index.jsx
@@ -1,34 +1,37 @@
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 
-import {
-  AppBar,
-  CssBaseline,
-  Toolbar,
-  Typography
-} from '@material-ui/core';
+import { withTheme } from '@material-ui/core/styles';
+
+import { AppBar, CssBaseline, Toolbar, Typography } from '@material-ui/core';
 
 import MetamaskLogin from './MetamaskLogin';
 
 import Logo from '../../../assets/logo.png';
+import WhiteLogo from '../../../assets/logo_white.png';
 
-export default class TopNav extends Component {
+class TopNav extends Component {
   render() {
     return (
       <div>
         <CssBaseline />
         <AppBar
           position="static"
           elevation={3}
-          color="primary"
-          style={{ paddingLeft: '4%', paddingRight: '4%', height: '7vh' }}
+          color="bar"
+          style={{ paddingLeft: '4%', paddingRight: '4%' }}
         >
           <Toolbar>
             <NavLink to={'/'}>
-              <img src={Logo} alt="Convergent" width="40px" height="40px" />
+              <img
+                src={this.props.theme.palette.type === 'dark' ? WhiteLogo : Logo}
+                alt="Convergent"
+                width="40px"
+                height="40px"
+              />
             </NavLink>
             &nbsp;&nbsp;
-            <Typography variant="h5" color="inherit" noWrap>
+            <Typography variant="h5" color="common" noWrap>
               Arena
             </Typography>
             <div style={{ flexGrow: 1 }} />
@@ -42,3 +45,5 @@ export default class TopNav extends Component {
     );
   }
 }
+
+export default withTheme()(TopNav);
diff --git a/src/components/AppContainer/index.jsx b/src/components/AppContainer/index.jsx
@@ -7,7 +7,7 @@ const appStyles = {
   height: '100%',
   padding: 0,
   marginBottom: 0,
-  width: '100vw',
+  width: '100vw'
 };
 
 const AppContainer = props => (
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,4 +24,4 @@ node_modules @@
     .vscode
     package-lock.json
     .firebase
-    .env
+    .env