From a5fe41d9093c790cd4154e168f2b153a1291fc45 Mon Sep 17 00:00:00 2001
From: Rifqy Zacky Ariadhy <rifqyzackya@gmail.com>
Date: Sat, 5 Jan 2019 18:03:42 +0700
Subject: [PATCH] update: Voucher and Points info at navbar

---
 src/common/pages/App/index.js   | 25 +++++++++++++++----------
 src/common/pages/App/style.scss | 19 +++++++++++++++++--
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index 3236cc7..24f3729 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -43,6 +43,7 @@ import Alert from "../../components/Alert";
 import EmptyComponent from '../EmptyComponent';
 import NumberFormat from 'react-number-format';
 import faker from 'faker';
+import { Route as RouteDOM } from 'react-router-dom'
 
 faker.locale = 'id_ID';
 @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'}/>
 
                 <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
-                <IconButton className="hide-on-small-only" style={{marginRight: 10}}
-                            onClick={() => this.toggleDrawer()}>
-                  <IconMenus/>
-                </IconButton>
+                {/*<IconButton className="hide-on-small-only" style={{marginRight: 10}}*/}
+                            {/*onClick={() => this.toggleDrawer()}>*/}
+                  {/*<IconMenus/>*/}
+                {/*</IconButton>*/}
                 {/* <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                     style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                     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={'containerVoucher'}>
                     <p className={'titleVoucher'}>Voucher</p>
-                    <p className={'textVoucher'}>
-                      <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                    </p>
+                    <RouteDOM render={({ history}) => (
+                      <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
+                        <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                      </p>
+                    )} />
                   </div>
                   <div className={'containerPoints'}>
                     <p className={'titlePoints'}>Points</p>
-                    <p className={'textPoints'}>
-                      <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
-                    </p>
+                    <RouteDOM render={({ history}) => (
+                      <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
+                        <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
+                      </p>
+                    )} />
                   </div>
                 </div>
 
diff --git a/src/common/pages/App/style.scss b/src/common/pages/App/style.scss
index 3125f11..ead6329 100644
--- a/src/common/pages/App/style.scss
+++ b/src/common/pages/App/style.scss
@@ -12,7 +12,7 @@
     .containerVoucher{
 
       .titleVoucher{
-        margin-bottom: 0px;
+        margin-bottom: 5px;
         font-size: 0.65rem;
       }
 
@@ -20,13 +20,20 @@
         margin-bottom: 0px;
         font-weight: 600;
         color: #424770;
+        transition: transform 100ms linear;
+        cursor: pointer;
+      }
+
+      .textVoucher:hover{
+        transform: translateY(-2px);
+        color: #6772e5;
       }
     }
 
     .containerPoints{
 
       .titlePoints{
-        margin-bottom: 0px;
+        margin-bottom: 5px;
         font-size: 0.65rem;
       }
 
@@ -34,6 +41,13 @@
         margin-bottom: 0px;
         font-weight: 600;
         color: #424770;
+        transition: transform 100ms linear;
+        cursor: pointer;
+      }
+
+      .textPoints:hover{
+        transform: translateY(-2px);
+        color: #6772e5;
       }
     }
   }
@@ -132,6 +146,7 @@
   }
 
   .menuAkunItem {
+    padding: 0px;
     transition: all 0.2s ease !important;
   }