From 5221815e85ccddafec5aa2be26157ab3de67be00 Mon Sep 17 00:00:00 2001
From: Ridwan Abadi <devaby@gmail.com>
Date: Mon, 28 Jan 2019 20:12:46 +0700
Subject: [PATCH] updates

---
 src/common/pages/App/style.scss     |   8 +-
 src/common/pages/Dashboard/index.js | 148 +++++++++++++++-------------
 2 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/src/common/pages/App/style.scss b/src/common/pages/App/style.scss
index 3f01f8c..b27319b 100644
--- a/src/common/pages/App/style.scss
+++ b/src/common/pages/App/style.scss
@@ -55,10 +55,10 @@
   }
 
   .mainContent {
-    width: calc(100vw - 14vw);
-    margin-left: 2.5vw;
-    margin-right: 2.5vw;
-    position: relative;
+    //width: calc(100vw - 14vw);
+    //margin-left: 2.5vw;
+    //margin-right: 2.5vw;
+    //position: relative;
   }
   @media screen and (max-width: 780px) {
     .mainContent {
diff --git a/src/common/pages/Dashboard/index.js b/src/common/pages/Dashboard/index.js
index d9a201c..16ffaad 100644
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import {inject, observer} from "mobx-react";
+import withStyles from "@material-ui/core/styles/withStyles";
 import QueueAnim from 'rc-queue-anim';
 import "./style.scss";
 import NumberFormat from 'react-number-format';
@@ -24,6 +25,8 @@ import {
   Divider, ListItem, List
 } from 'material-ui';
 import Grid from '@material-ui/core/Grid';
+import {default as MuiCard} from '@material-ui/core/Card'
+import {default as MuiCardContent} from '@material-ui/core/CardContent';
 import EmptyComponent from '../EmptyComponent';
 import * as _ from 'lodash';
 import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
@@ -46,6 +49,7 @@ import PopularItemCardComponent from "./PopularItemCard";
 import NewItemCardComponent from "./NewItemCard";
 import '../Vouchers/style.scss';
 import ModalTopupComponent from "../Wallet/Modal";
+import {styles} from "../RegisterNew/styles";
 
 const {
   LineChart,
@@ -65,7 +69,7 @@ const {
 
 @inject('appstate')
 @observer
-export default class DashboardComponent extends React.Component {
+class DashboardComponent extends React.Component {
 
   constructor(props) {
     super(props);
@@ -104,6 +108,7 @@ export default class DashboardComponent extends React.Component {
   };
 
   render() {
+    const {classes} = this.props;
     const settings = {
       arrows: true,
       infinite: true,
@@ -114,88 +119,87 @@ export default class DashboardComponent extends React.Component {
     };
 
     return (
-      <div>
-        <div className="dashboard animated fadeIn" style={{
-          marginLeft: '8%',
-          marginRight: '7%'
-        }}>
-          <div className="row ">
-            <div className="col s12 m12 l12 col-leftDashboard" style={{marginBottom: 0}}>
-              <div className="row no-margin">
-                {this.props.appstate.wallet.data.wallet ? (
-                  <div className="col s12 m4 l4" style={{marginBottom: 0}}>
-                    <Card className="cardLite cardDashboard">
-                      <h3 style={{
-                        display: 'block',
-                        fontSize: '1rem',
-                        textTransform: 'uppercase',
-                        color: '#0006',
-                        letterSpacing: 1
-                      }}>Voucher</h3>
-                      <div className="value">
-                        {/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
-                        <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                      </div>
-                      <div style={{marginTop: 10}}>
-                        <Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
-                        {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
+      <div className={classes.root}>
+        <Grid
+          container
+          direction="row"
+          justify="center"
+          alignItems="center"
+          spacing={24}
+          style={{marginTop: 30}}>
+          <Grid item xs={12} sm={3} md={3} lg={3}>
+            {this.props.appstate.wallet.data.wallet ? (
+              <MuiCard className={classes.card}>
+                <MuiCardContent>
+                  <h3 style={{
+                    display: 'block',
+                    fontSize: '1rem',
+                    textTransform: 'uppercase',
+                    color: '#0006',
+                    letterSpacing: 1
+                  }}>Voucher</h3>
+                  <div className="value">
+                    {/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
+                    <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                  </div>
+                  <div style={{marginTop: 10}}>
+                    <Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
+                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                       <span>Add Voucher</span>
                       <Icon className="ml-8" type="right" />
                     </a> */}
-                      </div>
-                    </Card>
                   </div>
-                ) : ''}
-
-                {this.props.appstate.wallet.data.wallet ? (
-                  <div className="col s12 m4 l4" style={{marginBottom: 0}}>
-                    <Card className="cardLite cardDashboard">
-                      <h3 style={{
-                        display: 'block',
-                        fontSize: '1rem',
-                        textTransform: 'uppercase',
-                        color: '#0006',
-                        letterSpacing: 1
-                      }}> Profile</h3>
-                      <div className="value">Please complete your profile</div>
-                      <div style={{marginTop: 10}}>
-                        <Button type="primary" icon="edit">Edit Profile</Button>
-                        {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
+                </MuiCardContent>
+              </MuiCard>
+            ) : ''}
+          </Grid>
+          <Grid item xs={12} sm={3} md={3} lg={3}>
+            {this.props.appstate.wallet.data.wallet ? (
+              <MuiCard className={classes.card}>
+                <MuiCardContent>
+                  <h3 style={{
+                    display: 'block',
+                    fontSize: '1rem',
+                    textTransform: 'uppercase',
+                    color: '#0006',
+                    letterSpacing: 1
+                  }}> Profile</h3>
+                  <div className="value">Please complete your profile</div>
+                  <div style={{marginTop: 10}}>
+                    <Button type="primary" icon="edit">Edit Profile</Button>
+                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                         <span>Edit Profile</span>
                         <Icon className="ml-8" type="right" />
                       </a> */}
-                      </div>
-                    </Card>
                   </div>
-                ) : ''}
-
-
-                {this.props.appstate.wallet.data.wallet ? (
-                  <div className="col s12 m4 l4" style={{marginBottom: 0}}>
-                    <Card className="cardLite cardDashboard">
-                      <h3 style={{
-                        display: 'block',
-                        fontSize: '1rem',
-                        textTransform: 'uppercase',
-                        color: '#0006',
-                        letterSpacing: 1
-                      }}>Credit Card</h3>
-                      <div className="value ">Please add your credit card</div>
-                      <div style={{marginTop: 10}}>
-                        <Button type="primary" icon="plus">Add Credit Card</Button>
-                        {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
+                </MuiCardContent>
+              </MuiCard>
+            ) : ''}
+          </Grid>
+          <Grid item xs={12} sm={3} md={3} lg={3}>
+            {this.props.appstate.wallet.data.wallet ? (
+              <MuiCard className={classes.card}>
+                <MuiCardContent>
+                  <h3 style={{
+                    display: 'block',
+                    fontSize: '1rem',
+                    textTransform: 'uppercase',
+                    color: '#0006',
+                    letterSpacing: 1
+                  }}>Credit Card</h3>
+                  <div className="value ">Please add your credit card</div>
+                  <div style={{marginTop: 10}}>
+                    <Button type="primary" icon="plus">Add Credit Card</Button>
+                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                         <span>Add Credit Car</span>
                         <Icon className="ml-8" type="right" />
                       </a> */}
-                      </div>
-                    </Card>
                   </div>
-                ) : ''}
-              </div>
-            </div>
-          </div>
-        </div>
-
+                </MuiCardContent>
+              </MuiCard>
+            ) : ''}
+          </Grid>
+        </Grid>
 
         <div style={{marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff'}}>
           <div>
@@ -289,3 +293,5 @@ export default class DashboardComponent extends React.Component {
     );
   }
 }
+
+export default withStyles(styles)(DashboardComponent);