From 7a5f61029ac0ac70ba8034a226f62709a5d07b7c Mon Sep 17 00:00:00 2001
From: tsabit ghazwan <tsabitg23@gmail.com>
Date: Tue, 29 Jan 2019 19:26:07 +0700
Subject: [PATCH] fix: make component centered

---
 src/common/pages/Wallet/index.js | 256 ++++++++++++++++---------------
 1 file changed, 130 insertions(+), 126 deletions(-)

diff --git a/src/common/pages/Wallet/index.js b/src/common/pages/Wallet/index.js
index d3c3b42..7c77e8c 100644
--- a/src/common/pages/Wallet/index.js
+++ b/src/common/pages/Wallet/index.js
@@ -158,145 +158,149 @@ export default class WalletComponent extends React.Component {
       }];
 
     return (
-      <div className="wallet containerMiddle">
-        <div className="row">
-          <div className="col s12">
-            <div style={{marginBottom: '16px'}}>
-              <h3 className="headerMenu">Wallet</h3>
-            </div>
-          </div>
-          <div>
-            <div className="col s6 m6">
-              <Card className="cardLite row">
-                <CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
-              </Card>
-            </div>
-            <div className="col s6 m6">
-              <Card className="cardLite row">
-                <CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
-              </Card>
-            </div>
-          </div>
+        <div className="wallet">
+          <div className="row">
+            <div className={"col s10 offset-s1"}>
+              <div className={"row"}>
+                <div className="col s12">
+                  <div style={{marginBottom: '16px'}}>
+                    <h3 className="headerMenu">Wallet</h3>
+                  </div>
+                </div>
+                <div className="col s6 m6">
+                  <Card className="cardLite row">
+                    <CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
+                  </Card>
+                </div>
+                <div className="col s6 m6">
+                  <Card className="cardLite row">
+                    <CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
+                  </Card>
+                </div>
 
-          <div className="col s12">
-            <Card className="cardLite" style={{paddingBottom: 5}}>
-              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
-                <ToolbarGroup>
-                  <SearchIcon style={{marginRight: 8, color: "#999"}}/>
-                  <TextField
-                    hintText="Search Redeem History"
-                    style={{fontSize: 14}}
-                    hintStyle={{fontSize: 14}}
-                    fullWidth={true}
-                    underlineShow={false}
-                  />
-                </ToolbarGroup>
-                <ToolbarGroup className="ToolbarGroupLast">
-                  <ToolbarSeparator/>
-                  {(window.innerWidth < 600) ?
-                    <div className="flexSpaceBetween">
-                      <IconMenu
-                        iconButtonElement={<IconButton><MoreIcon/></IconButton>}
-                        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
-                        targetOrigin={{horizontal: 'left', vertical: 'top'}}
-                      >
-                        <MenuItem primaryText="Deposit"
-                                  onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
-                        <MenuItem primaryText="Withdrawal"
-                                  onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
-                      </IconMenu>
-                    </div>
-                    :
+                <div className="col s12">
+                  <Card className="cardLite" style={{paddingBottom: 5}}>
+                    <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
+                      <ToolbarGroup>
+                        <SearchIcon style={{marginRight: 8, color: "#999"}}/>
+                        <TextField
+                          hintText="Search Redeem History"
+                          style={{fontSize: 14}}
+                          hintStyle={{fontSize: 14}}
+                          fullWidth={true}
+                          underlineShow={false}
+                        />
+                      </ToolbarGroup>
+                      <ToolbarGroup className="ToolbarGroupLast">
+                        <ToolbarSeparator/>
+                        {(window.innerWidth < 600) ?
+                          <div className="flexSpaceBetween">
+                            <IconMenu
+                              iconButtonElement={<IconButton><MoreIcon/></IconButton>}
+                              anchorOrigin={{horizontal: 'left', vertical: 'top'}}
+                              targetOrigin={{horizontal: 'left', vertical: 'top'}}
+                            >
+                              <MenuItem primaryText="Deposit"
+                                        onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
+                              <MenuItem primaryText="Withdrawal"
+                                        onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
+                            </IconMenu>
+                          </div>
+                          :
+                          <div>
+                            {/*<RaisedButton*/}
+                            {/*className=""*/}
+                            {/*icon={<UnarchiveIcon/>}*/}
+                            {/*label="Deposit"*/}
+                            {/*style={{marginRight: 20}}*/}
+                            {/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
+                            {/*primary={true}/>*/}
+                            <RaisedButton
+                              className="ToolbarGroupLastButton"
+                              icon={<UnarchiveIcon/>}
+                              label="Top Up"
+                              onClick={() => this.setModalTopup(true)}
+                              primary={true}/>
+                          </div>
+                        }
+
+                      </ToolbarGroup>
+                    </Toolbar>
+                    <Divider/>
                     <div>
-                      {/*<RaisedButton*/}
-                        {/*className=""*/}
-                        {/*icon={<UnarchiveIcon/>}*/}
-                        {/*label="Deposit"*/}
-                        {/*style={{marginRight: 20}}*/}
-                        {/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
-                        {/*primary={true}/>*/}
-                      <RaisedButton
-                        className="ToolbarGroupLastButton"
-                        icon={<UnarchiveIcon/>}
-                        label="Top Up"
-                        onClick={() => this.setModalTopup(true)}
-                        primary={true}/>
-                    </div>
-                  }
-
-                </ToolbarGroup>
-              </Toolbar>
-              <Divider/>
-              <div>
-                <Loader show={false} message={<LoadingDialog/>}
-                        messageStyle={{textAlign: 'center'}}
-                        backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
-                  <TableAntd
-                    pagination={true}
-                    className='table-padded tableWallet'
-                    dataSource={data}
-                    // onChange={this.handleChangeSorter}
-                    columns={columns}
-                    // onRow={(record) => {`
-                    //   return {
-                    //     onClick: () => {
-                    //       this.props.history.push(`${LINKS.ORDER}/${record.id}`);
-                    //     },       // click row
-                    //   };
-                    // }}
-                  />
-                  {/*<Table selectable={false}>*/}
-                    {/*<TableHeader displaySelectAll={false}*/}
-                                 {/*adjustForCheckbox={false}*/}
-                                 {/*enableSelectAll={false}>*/}
-                      {/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
+                      <Loader show={false} message={<LoadingDialog/>}
+                              messageStyle={{textAlign: 'center'}}
+                              backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
+                        <TableAntd
+                          pagination={true}
+                          className='table-padded tableWallet'
+                          dataSource={data}
+                          // onChange={this.handleChangeSorter}
+                          columns={columns}
+                          // onRow={(record) => {`
+                          //   return {
+                          //     onClick: () => {
+                          //       this.props.history.push(`${LINKS.ORDER}/${record.id}`);
+                          //     },       // click row
+                          //   };
+                          // }}
+                        />
+                        {/*<Table selectable={false}>*/}
+                        {/*<TableHeader displaySelectAll={false}*/}
+                        {/*adjustForCheckbox={false}*/}
+                        {/*enableSelectAll={false}>*/}
+                        {/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
                         {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                                           {/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
+                        {/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
                         {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                                           {/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
+                        {/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
                         {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                                           {/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
+                        {/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
                         {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                                           {/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
+                        {/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
                         {/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
-                                           {/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
-                      {/*</TableRow>*/}
-                    {/*</TableHeader>*/}
-                    {/*<TableBody displayRowCheckbox={false}>*/}
-                      {/*{*/}
+                        {/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
+                        {/*</TableRow>*/}
+                        {/*</TableHeader>*/}
+                        {/*<TableBody displayRowCheckbox={false}>*/}
+                        {/*{*/}
                         {/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}
 
-                          {/*return (*/}
-                            {/*<TableRow key={index}>*/}
-                              {/*<TableRowColumn style={{width:'13%'}}>*/}
-                                {/*{item.id.split('-')[0]}*/}
-                              {/*</TableRowColumn>*/}
-                              {/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
-                              {/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
-                              {/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
-                              {/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
-                                                            {/*thousandSeparator={true}*/}
-                                                            {/*prefix={'IDR '}/></TableRowColumn>*/}
-                            {/*</TableRow>*/}
-                          {/*);*/}
+                        {/*return (*/}
+                        {/*<TableRow key={index}>*/}
+                        {/*<TableRowColumn style={{width:'13%'}}>*/}
+                        {/*{item.id.split('-')[0]}*/}
+                        {/*</TableRowColumn>*/}
+                        {/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
+                        {/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
+                        {/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
+                        {/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
+                        {/*thousandSeparator={true}*/}
+                        {/*prefix={'IDR '}/></TableRowColumn>*/}
+                        {/*</TableRow>*/}
+                        {/*);*/}
                         {/*})*/}
-                      {/*}*/}
-                      {/*{*/}
+                        {/*}*/}
+                        {/*{*/}
                         {/*(this.transactionStore.list.length === 0) ?*/}
-                          {/*<TableRow>*/}
-                            {/*<TableRowColumn>*/}
-                              {/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
-                            {/*</TableRowColumn>*/}
-                          {/*</TableRow> : ""*/}
-                      {/*}*/}
-                    {/*</TableBody>*/}
-                  {/*</Table>*/}
-                </Loader>
+                        {/*<TableRow>*/}
+                        {/*<TableRowColumn>*/}
+                        {/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
+                        {/*</TableRowColumn>*/}
+                        {/*</TableRow> : ""*/}
+                        {/*}*/}
+                        {/*</TableBody>*/}
+                        {/*</Table>*/}
+                      </Loader>
+                    </div>
+                  </Card></div>
               </div>
-            </Card></div>
+            </div>
+
+          </div>
+          <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
         </div>
-        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
-      </div>
+
     )
   }
 }