protofire · Agupane · Jan 8, 2019 · Jan 7, 2019 · Jan 7, 2019 · Jan 7, 2019
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,5 @@
-/node_modules
-/coverage
-/public
+node_modules/
+coverage/
+public/
+!.eslintrc.js
+build/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,20 +11,41 @@
     "livepeer"
   ],
   "dependencies": {
+    "@material-ui/core": "3.1.1",
+    "@material-ui/icons": "3.0.1",
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
+    "chartist": "0.10.1",
+    "history": "4.7.2",
     "logdown": "^3.2.7",
+    "moment": "2.22.2",
+    "node-sass-chokidar": "1.3.3",
+    "nouislider": "12.0.0",
+    "npm-run-all": "4.1.3",
+    "perfect-scrollbar": "1.4.0",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
+    "react-big-calendar": "0.20.1",
+    "react-bootstrap-sweetalert": "4.4.1",
+    "react-chartist": "0.13.1",
+    "react-datetime": "2.15.0",
     "react-dom": "^16.6.3",
+    "react-google-maps": "9.4.5",
+    "react-jvectormap": "0.0.3",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "^2.1.2",
+    "react-scripts": "^2.1.3",
+    "react-swipeable-views": "0.13.0",
+    "react-table": "6.8.6",
+    "react-tagsinput": "3.19.0",
     "react-toastify": "^4.5.1",
     "validator": "^10.10.0",
     "web3": "^1.0.0-beta.37"
   },
   "devDependencies": {
+    "@babel/core": "7.0.0",
+    "@types/googlemaps": "3.30.13",
+    "@types/markerclustererplus": "2.1.33",
     "babel-eslint": "^9.0.0",
     "coveralls": "^3.0.2",
     "enzyme": "^3.8.0",
@@ -39,11 +60,15 @@
     "react-test-renderer": "^16.6.3"
   },
   "scripts": {
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom --coverage",
     "eject": "react-scripts eject",
     "lint": "eslint . src/**/*.js",
+    "lint:check": "eslint . --ext=js,jsx;  exit 0",
+    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
   "eslintConfig": {},
@@ -61,7 +86,6 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run test && npm run lint",
       "pre-push": "npm run test && npm run lint"
     }
   }

diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,12 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+
+    <!--     Fonts and icons     -->
+    <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/src/App.js b/src/App.js
@@ -11,11 +11,25 @@ import Web3Provider, {
   Web3ContextConsumer
 } from './Components/Common/Hoc/Web3Provider/Web3Provider'
 
+// @material-ui/core components
+import withStyles from '@material-ui/core/styles/withStyles'
+import PropTypes from 'prop-types'
+
+// core components
+import PagesHeader from './Components/Common/Header/PagesHeader.js'
+import Footer from './Components/Common/Footer/Footer.js'
+import pagesStyle from './assets/jss/dashboard/layouts/pagesStyle.js'
+import bgImage from './assets/img/register.jpeg'
+
 export class App extends Component {
   state = {
     render: true
   }
 
+  componentDidMount() {
+    document.body.style.overflow = 'unset'
+  }
+
   shouldComponentUpdate(nextProps, nextState, nextContext) {
     logger.log('Trigger shouldComponentUpdate')
     let shouldUpdate = true
@@ -31,60 +45,72 @@ export class App extends Component {
 
   render() {
     const spinner = <Spinner />
+    const { classes, ...rest } = this.props
+
     const routes = (
-      <>
-        <Switch>
-          <Route
-            exact
-            path="/"
-            render={routeProps => <HomeComponent {...this.state} {...this.props} {...routeProps} />}
-          />
-          <Web3Provider>
-            <Web3ContextConsumer>
-              {({ web3, userData, authenticated, error, displayMsg }) => {
-                return (
-                  <>
-                    <Switch>
-                      <PrivateRoute
-                        exact
-                        path="/account"
-                        web3={web3}
-                        userData={userData}
-                        authenticated={authenticated}
-                        error={error}
-                        displayMsg={displayMsg}
-                        component={AccountSummaryComponent}
-                      />
-                      <PrivateRoute
-                        exact
-                        path="/account/subscription"
-                        component={AccountSummarySubscriptionForm}
-                        web3={web3}
-                        userData={userData}
-                        error={error}
-                        displayMsg={displayMsg}
-                        authenticated={authenticated}
-                      />
-                      <Redirect to="/" />
-                    </Switch>
-                  </>
-                )
-              }}
-            </Web3ContextConsumer>
-          </Web3Provider>
-        </Switch>
-      </>
+      <div className={classes.wrapper} ref="wrapper">
+        <div className={classes.fullPage} style={{ backgroundImage: 'url(' + bgImage + ')' }}>
+          <Switch>
+            <Route
+              exact
+              path="/"
+              render={routeProps => (
+                <HomeComponent {...this.state} {...this.props} {...routeProps} />
+              )}
+            />
+            <Web3Provider>
+              <Web3ContextConsumer>
+                {({ web3, userData, authenticated, error, displayMsg }) => {
+                  return (
+                    <>
+                      <Switch>
+                        <PrivateRoute
+                          exact
+                          path="/account"
+                          web3={web3}
+                          userData={userData}
+                          authenticated={authenticated}
+                          error={error}
+                          displayMsg={displayMsg}
+                          component={AccountSummaryComponent}
+                        />
+                        <PrivateRoute
+                          exact
+                          path="/account/subscription"
+                          component={AccountSummarySubscriptionForm}
+                          web3={web3}
+                          userData={userData}
+                          error={error}
+                          displayMsg={displayMsg}
+                          authenticated={authenticated}
+                        />
+                        <Redirect to="/" />
+                      </Switch>
+                    </>
+                  )
+                }}
+              </Web3ContextConsumer>
+            </Web3Provider>
+          </Switch>
+          <Footer white />
+        </div>
+      </div>
     )
     let content = this.state.render ? routes : spinner
 
     return (
       <Router>
-        <div className="App">
-          <header className="App-header">{content}</header>
+        <div>
+          <PagesHeader {...rest} />
+          {content}
         </div>
       </Router>
     )
   }
 }
 
-export default withRouter(App)
+App.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(pagesStyle)(withRouter(App))
diff --git a/src/Components/Common/Card/Card.js b/src/Components/Common/Card/Card.js
@@ -0,0 +1,70 @@
+import React from 'react'
+// nodejs library that concatenates classes
+import classNames from 'classnames'
+// nodejs library to set properties for components
+import PropTypes from 'prop-types'
+// @material-ui/core components
+import withStyles from '@material-ui/core/styles/withStyles'
+// @material-ui/icons
+
+// core components
+import cardStyle from '../../../assets/jss/dashboard/components/cardStyle.js'
+
+function Card({ ...props }) {
+  const {
+    classes,
+    className,
+    children,
+    plain,
+    profile,
+    blog,
+    raised,
+    background,
+    pricing,
+    color,
+    product,
+    testimonial,
+    chart,
+    login,
+    ...rest
+  } = props
+  const cardClasses = classNames({
+    [classes.card]: true,
+    [classes.cardPlain]: plain,
+    [classes.cardProfile]: profile || testimonial,
+    [classes.cardBlog]: blog,
+    [classes.cardRaised]: raised,
+    [classes.cardBackground]: background,
+    [classes.cardPricingColor]:
+      (pricing && color !== undefined) || (pricing && background !== undefined),
+    [classes[color]]: color,
+    [classes.cardPricing]: pricing,
+    [classes.cardProduct]: product,
+    [classes.cardChart]: chart,
+    [classes.cardLogin]: login,
+    [className]: className !== undefined
+  })
+  return (
+    <div className={cardClasses} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+Card.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  plain: PropTypes.bool,
+  profile: PropTypes.bool,
+  blog: PropTypes.bool,
+  raised: PropTypes.bool,
+  background: PropTypes.bool,
+  pricing: PropTypes.bool,
+  testimonial: PropTypes.bool,
+  color: PropTypes.oneOf(['primary', 'info', 'success', 'warning', 'danger', 'rose']),
+  product: PropTypes.bool,
+  chart: PropTypes.bool,
+  login: PropTypes.bool
+}
+
+export default withStyles(cardStyle)(Card)
diff --git a/src/Components/Common/Card/CardAvatar.js b/src/Components/Common/Card/CardAvatar.js
@@ -0,0 +1,48 @@
+import React from 'react'
+// nodejs library that concatenates classes
+import classNames from 'classnames'
+// nodejs library to set properties for components
+import PropTypes from 'prop-types'
+// @material-ui/core components
+import withStyles from '@material-ui/core/styles/withStyles'
+// @material-ui/icons
+// core components
+
+import cardAvatarStyle from '../../../assets/jss/dashboard/components/cardAvatarStyle.js'
+
+function CardAvatar({ ...props }) {
+  const {
+    classes,
+    children,
+    className,
+    plain,
+    profile,
+    testimonial,
+    testimonialFooter,
+    ...rest
+  } = props
+  const cardAvatarClasses = classNames({
+    [classes.cardAvatar]: true,
+    [classes.cardAvatarProfile]: profile,
+    [classes.cardAvatarPlain]: plain,
+    [classes.cardAvatarTestimonial]: testimonial,
+    [classes.cardAvatarTestimonialFooter]: testimonialFooter,
+    [className]: className !== undefined
+  })
+  return (
+    <div className={cardAvatarClasses} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+CardAvatar.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  profile: PropTypes.bool,
+  plain: PropTypes.bool,
+  testimonial: PropTypes.bool,
+  testimonialFooter: PropTypes.bool
+}
+
+export default withStyles(cardAvatarStyle)(CardAvatar)