Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: Voucher and Points info at navbar

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy 2019-01-05 18:03:42 +07:00
parent 6dacd1f44e
commit a5fe41d909
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/common/pages/App/index.js
View File

@ -43,6 +43,7 @@ import Alert from "../../components/Alert";
import EmptyComponent from '../EmptyComponent'; import EmptyComponent from '../EmptyComponent';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import faker from 'faker'; import faker from 'faker';
import { Route as RouteDOM } from 'react-router-dom'
faker.locale = 'id_ID'; faker.locale = 'id_ID';
@inject("appstate") @inject("appstate")
@ -364,10 +365,10 @@ export default class App extends React.Component {
src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'}/> src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'}/>
<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/> <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
<IconButton className="hide-on-small-only" style={{marginRight: 10}} {/*<IconButton className="hide-on-small-only" style={{marginRight: 10}}*/}
onClick={() => this.toggleDrawer()}> {/*onClick={() => this.toggleDrawer()}>*/}
<IconMenus/> {/*<IconMenus/>*/}
</IconButton> {/*</IconButton>*/}
{/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed" {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}} style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}> onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
@ -440,15 +441,19 @@ export default class App extends React.Component {
<div className={'containerWalletBar'}> <div className={'containerWalletBar'}>
<div className={'containerVoucher'}> <div className={'containerVoucher'}>
<p className={'titleVoucher'}>Voucher</p> <p className={'titleVoucher'}>Voucher</p>
<p className={'textVoucher'}> <RouteDOM render={({ history}) => (
<NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
</p> <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
</p>
)} />
</div> </div>
<div className={'containerPoints'}> <div className={'containerPoints'}>
<p className={'titlePoints'}>Points</p> <p className={'titlePoints'}>Points</p>
<p className={'textPoints'}> <RouteDOM render={({ history}) => (
<NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/> <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
</p> <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
</p>
)} />
</div> </div>
</div> </div>

19
src/common/pages/App/style.scss
View File

@ -12,7 +12,7 @@
.containerVoucher{ .containerVoucher{
.titleVoucher{ .titleVoucher{
margin-bottom: 0px; margin-bottom: 5px;
font-size: 0.65rem; font-size: 0.65rem;
} }
@ -20,13 +20,20 @@
margin-bottom: 0px; margin-bottom: 0px;
font-weight: 600; font-weight: 600;
color: #424770; color: #424770;
transition: transform 100ms linear;
cursor: pointer;
}
.textVoucher:hover{
transform: translateY(-2px);
color: #6772e5;
} }
} }
.containerPoints{ .containerPoints{
.titlePoints{ .titlePoints{
margin-bottom: 0px; margin-bottom: 5px;
font-size: 0.65rem; font-size: 0.65rem;
} }
@ -34,6 +41,13 @@
margin-bottom: 0px; margin-bottom: 0px;
font-weight: 600; font-weight: 600;
color: #424770; color: #424770;
transition: transform 100ms linear;
cursor: pointer;
}
.textPoints:hover{
transform: translateY(-2px);
color: #6772e5;
} }
} }
} }
@ -132,6 +146,7 @@
} }
.menuAkunItem { .menuAkunItem {
padding: 0px;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
} }