updates

src/common/pages/Dashboard/index.js

@@ -27,6 +27,8 @@ import {
 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 {default as MuiCardActions} from '@material-ui/core/CardActions';
+import {default as MuiCardButton} from '@material-ui/core/Button';
 import EmptyComponent from '../EmptyComponent';
 import * as _ from 'lodash';
 import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
@@ -49,6 +51,7 @@ import PopularItemCardComponent from "./PopularItemCard";
 import NewItemCardComponent from "./NewItemCard";
 import '../Vouchers/style.scss';
 import ModalTopupComponent from "../Wallet/Modal";
+import Typography from '@material-ui/core/Typography';
 import {styles} from "../RegisterNew/styles";
 
 const {
@@ -119,7 +122,7 @@ class DashboardComponent extends React.Component {
     };
 
     return (
-      <div className={classes.root}>
+      <Grid className={classes.root}>
         <Grid
           container
           direction="row"
@@ -131,25 +134,16 @@ class DashboardComponent extends React.Component {
             {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 '}/> */}
+                  <Typography variant="h5" component="h2">
+                    Voucher
+                  </Typography>
+                  <Typography component="p">
                     <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>
+                  </Typography>
                 </MuiCardContent>
+                <MuiCardActions>
+                  <MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
+                </MuiCardActions>
               </MuiCard>
             ) : ''}
           </Grid>
@@ -201,8 +195,15 @@ class DashboardComponent extends React.Component {
           </Grid>
         </Grid>
 
-        <div style={{marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff'}}>
-          <div>
+        <Grid
+          container
+          direction="row"
+          justify="center"
+          alignItems="center"
+          spacing={24}
+          style={{marginTop: 30}}>
+
+          <Grid item xs={12} sm={12} md={12} lg={12}>
             <Slider {...settings}>
               <div>
                 <img src={slider1} width={'100%'}/>
@@ -220,10 +221,9 @@ class DashboardComponent extends React.Component {
                 <img src={slider5} width={'100%'}/>
               </div>
             </Slider>
-          </div>
+          </Grid>
 
-          <div>
-            <Grid container spacing={0} style={{}}>
+          <Grid item xs={12} sm={12} md={12} lg={12}>
             {/* <Grid item xs={12}>
                 <div>
                   <div className="row">
@@ -252,6 +252,7 @@ class DashboardComponent extends React.Component {
                   </div>
                 </div>
               </Grid> */}
+
             <Grid item xs={12}>
               <div className={"voucher"} style={{marginTop: 0}}>
                 <div className="row">
@@ -286,10 +287,9 @@ class DashboardComponent extends React.Component {
               </div>
             </Grid>
           </Grid>
-          </div>
-        </div>
+        </Grid>
         <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
-      </div>
+      </Grid>
     );
   }
 }