Merge pull request #160 from gabitoesmiapodo/restyling

Restyling
poanetwork · Jul 25, 2018 · 84b3a6f · 84b3a6f
2 parents f725562 + 7ac6ddd
commit 84b3a6f
Show file tree

Hide file tree

Showing 117 changed files with 1,385 additions and 937 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png
diff --git a/public/favicons/android-chrome-256x256.png b/public/favicons/android-chrome-256x256.png
diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png
diff --git a/public/favicons/browserconfig.xml b/public/favicons/browserconfig.xml
@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#5c3698</TileColor>
         </tile>
     </msapplication>
 </browserconfig>
diff --git a/public/favicons/fav_2.png b/public/favicons/fav_2.png
diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
diff --git a/public/favicons/mstile-150x150.png b/public/favicons/mstile-150x150.png
diff --git a/public/index.html b/public/index.html
@@ -4,21 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      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%/favicons/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
     <title>POA Network Governance DApp</title>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD97qDOBYZ2fH86Wq1vzhDOiSUsZGVqbVQ&libraries=places"></script>
   </head>
@@ -27,15 +15,5 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Governance",
+  "name": "Governance DApp",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.js b/src/App.js
@@ -1,14 +1,56 @@
-import React, { Component } from 'react'
-import { Route, NavLink } from 'react-router-dom'
-import { Header, Ballots, NewBallot, Settings, Footer } from './components'
-import './assets/App.css'
 //import DevTools from 'mobx-react-devtools'
+import './assets/App.css'
 import Loading from './Loading'
+import React, { Component } from 'react'
+import { Header, Ballots, NewBallot, Settings, Footer } from './components'
+import { Route } from 'react-router-dom'
 import { inject, observer } from 'mobx-react'
 
 @inject('commonStore', 'contractsStore')
 @observer
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    const { commonStore } = this.props
+
+    this.state = {
+      showMobileMenu: false,
+      navigationData: [
+        {
+          icon: '',
+          title: 'All',
+          url: commonStore.rootPath,
+          class: ''
+        },
+        {
+          icon: '',
+          title: 'Active',
+          url: `${commonStore.rootPath}/active`,
+          class: ''
+        },
+        {
+          icon: '',
+          title: 'To Finalize',
+          url: `${commonStore.rootPath}/tofinalize`,
+          class: ''
+        },
+        {
+          icon: '',
+          title: 'New Ballot',
+          url: `${commonStore.rootPath}/new`,
+          class: 'btn btn-new-ballot btn-success btn-new'
+        }
+        // {
+        //   'icon': '',
+        //   'title': 'Settings',
+        //   'url': `${ commonStore.rootPath }/settings`,
+        //    class: ''
+        // }
+      ]
+    }
+  }
+
   onBallotsRender = () => {
     return <Ballots isActiveFilter={false} />
   }
@@ -34,52 +76,79 @@ class App extends Component {
     commonStore.setSearchTerm(e.target.value.toLowerCase())
   }
 
-  shouldShowNavPan = () => {
+  shouldShowSearch = () => {
     const { commonStore } = this.props
     const currentPath = this.props.location.pathname
-    let showNavPan =
+
+    let showSearch =
       currentPath === `${commonStore.rootPath}` ||
       currentPath === '/' ||
       currentPath === `${commonStore.rootPath}/` ||
       currentPath === `${commonStore.rootPath}/active` ||
       currentPath === `${commonStore.rootPath}/tofinalize`
-    return showNavPan
+
+    return showSearch
+  }
+
+  toggleMobileMenu = () => {
+    this.setState(prevState => ({ showMobileMenu: !prevState.showMobileMenu }))
+  }
+
+  getTitle = () => {
+    const currentPath = this.props.location.pathname
+
+    if (currentPath === `${this.state.navigationData[1].url}`) {
+      return this.state.navigationData[1].title
+    } else if (currentPath === `${this.state.navigationData[2].url}`) {
+      return this.state.navigationData[2].title
+    } else if (currentPath === `${this.state.navigationData[3].url}`) {
+      return this.state.navigationData[3].title
+    } else {
+      return this.state.navigationData[0].title
+    }
   }
 
   render() {
     const { commonStore, contractsStore } = this.props
     const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
-    const nav = this.shouldShowNavPan() ? (
-      <div className="search">
-        <div className="container flex-container">
-          <div className="nav">
-            <NavLink className="nav-i" exact activeClassName="nav-i_active" to={`${commonStore.rootPath}/`}>
-              All
-            </NavLink>
-            <NavLink className="nav-i" activeClassName="nav-i_active" to={`${commonStore.rootPath}/active`}>
-              Active
-            </NavLink>
-            <NavLink className="nav-i" activeClassName="nav-i_active" to={`${commonStore.rootPath}/tofinalize`}>
-              To finalize
-            </NavLink>
-          </div>
-          <input type="search" className="search-input" onChange={this.onSearch} />
-        </div>
-      </div>
-    ) : null
+    console.log(contractsStore.netId)
+
+    const search = this.shouldShowSearch() ? (
+      <input type="search" className="search-input" onChange={this.onSearch} />
+    ) : (
+      ''
+    )
+
     return (
-      <div>
+      <section className={`content ${this.state.showMobileMenu ? 'content-menu-open' : ''}`}>
         {loading}
-        <Header netId={contractsStore.netId} />
-        {nav}
-        <Route exact path={`/`} render={this.onBallotsRender} />
-        <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
-        <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />
-        <Route exact path={`${commonStore.rootPath}/tofinalize`} render={this.onToFinalizeBallotsRender} />
-        <Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
-        {/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
+        <Header
+          baseRootPath={commonStore.rootPath}
+          navigationData={this.state.navigationData}
+          netId={contractsStore.netId}
+          onMenuToggle={this.toggleMobileMenu}
+          showMobileMenu={this.state.showMobileMenu}
+        />
+        <div
+          className={`app-container ${this.state.showMobileMenu ? 'app-container-open-mobile-menu' : ''} ${
+            this.state.netId === '77' ? 'sokol' : ''
+          }`}
+        >
+          <div className="container">
+            <div className="main-title-container">
+              <span className="main-title">{this.getTitle()}</span>
+              {search}
+            </div>
+          </div>
+          <Route exact path={`/`} render={this.onBallotsRender} />
+          <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
+          <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />
+          <Route exact path={`${commonStore.rootPath}/tofinalize`} render={this.onToFinalizeBallotsRender} />
+          <Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
+          {/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
+        </div>
         <Footer netId={contractsStore.netId} />
-      </div>
+      </section>
     )
   }
 }

diff --git a/src/Loading.js b/src/Loading.js
@@ -1,18 +1,19 @@
 import React from 'react'
+
 const styles = netId => {
   const core = {
-    backgroundColor: 'rgba(35, 29, 115, 0.8)'
+    backgroundColor: 'rgba(78,44,137, 0.9)'
   }
   const sokol = {
     backgroundColor: 'rgba(47, 109, 99, 0.8)'
   }
+
   switch (netId) {
     case '77':
       return sokol
     case '99':
-      return core
     default:
-      return {}
+      return core
   }
 }
 const Loading = ({ netId }) => (

diff --git a/src/assets/App.css b/src/assets/App.css
diff --git a/src/assets/App.scss b/src/assets/App.scss
@@ -1,27 +1,32 @@
-@import 'stylesheets/vars';
-@import 'stylesheets/mixins';
-@import 'stylesheets/placeholders';
-@import 'stylesheets/fonts';
-@import 'stylesheets/base';
-@import 'stylesheets/controls';
-@import 'stylesheets/footer';
-@import 'stylesheets/header';
-@import 'stylesheets/info';
-@import 'stylesheets/loading';
-@import 'stylesheets/nav';
-@import 'stylesheets/new';
-@import 'stylesheets/search';
-@import 'stylesheets/settings';
-@import 'stylesheets/socials';
-@import 'stylesheets/vote-scale';
-@import 'stylesheets/ballot-types';
-@import 'stylesheets/ballots/placeholders';
-@import 'stylesheets/ballots/base';
-@import 'stylesheets/ballots/about';
-@import 'stylesheets/ballots/footer';
-@import 'stylesheets/select/select';
-@import 'stylesheets/select/control';
-@import 'stylesheets/select/menu';
-@import 'stylesheets/select/mixins';
-@import 'stylesheets/select/multi';
-@import 'stylesheets/select/spinner';
+@import 'stylesheets/helpers/vars';
+@import 'stylesheets/helpers/mixins';
+@import 'stylesheets/helpers/placeholders';
+
+@import 'stylesheets/application/base';
+@import 'stylesheets/application/buttons';
+@import 'stylesheets/application/controls';
+@import 'stylesheets/application/footer';
+@import 'stylesheets/application/header';
+@import 'stylesheets/application/info';
+@import 'stylesheets/application/layout';
+@import 'stylesheets/application/loading';
+@import 'stylesheets/application/main-title';
+@import 'stylesheets/application/nav';
+@import 'stylesheets/application/new';
+@import 'stylesheets/application/search';
+@import 'stylesheets/application/settings';
+@import 'stylesheets/application/socials';
+@import 'stylesheets/application/vote-scale';
+
+@import 'stylesheets/application/select/select';
+@import 'stylesheets/application/select/control';
+@import 'stylesheets/application/select/menu';
+@import 'stylesheets/application/select/mixins';
+@import 'stylesheets/application/select/multi';
+@import 'stylesheets/application/select/spinner';
+
+@import 'stylesheets/application/ballot-types';
+@import 'stylesheets/application/ballots/placeholders';
+@import 'stylesheets/application/ballots/base';
+@import 'stylesheets/application/ballots/about';
+@import 'stylesheets/application/ballots/footer';
diff --git a/src/assets/images/btn-new-success.png b/src/assets/images/btn-new-success.png
diff --git a/src/assets/images/icons/icon-close-sokol.svg b/src/assets/images/icons/icon-close-sokol.svg
diff --git a/src/assets/images/icons/icon-close.svg b/src/assets/images/icons/icon-close.svg
diff --git a/src/assets/images/icons/icon-events-sokol.svg b/src/assets/images/icons/icon-events-sokol.svg
diff --git a/src/assets/images/icons/icon-events.svg b/src/assets/images/icons/icon-events.svg
diff --git a/src/assets/images/icons/icon-menu-sokol.svg b/src/assets/images/icons/icon-menu-sokol.svg
diff --git a/src/assets/images/icons/icon-menu.svg b/src/assets/images/icons/icon-menu.svg
diff --git a/src/assets/images/icons/icon-statistics-sokol.svg b/src/assets/images/icons/icon-statistics-sokol.svg
diff --git a/src/assets/images/icons/icon-statistics.svg b/src/assets/images/icons/icon-statistics.svg
diff --git a/src/assets/images/icons/icon-status-sokol.svg b/src/assets/images/icons/icon-status-sokol.svg
diff --git a/src/assets/images/icons/icon-status.svg b/src/assets/images/icons/icon-status.svg
diff --git a/src/assets/images/info.png b/src/assets/images/info.png
diff --git a/src/assets/images/[email protected] b/src/assets/images/[email protected]
diff --git a/src/assets/images/loading.png b/src/assets/images/loading.png
diff --git a/src/assets/images/[email protected] b/src/assets/images/[email protected]
diff --git a/src/assets/images/logo_sokol.png b/src/assets/images/logo_sokol.png
diff --git a/src/assets/images/[email protected] b/src/assets/images/[email protected]
diff --git a/src/assets/images/logos.png b/src/assets/images/logos.png