Fix payment methods icon/text align and orderbook ANY currency

frontend/src/components/BookPage.js

@@ -148,10 +148,9 @@ export default class BookPage extends Component {
           renderCell: (params) => {return (
             <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
           }},
-          { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
+          { field: 'payment_method', headerName: 'Payment Method', width: 180 ,
-          { field: 'payment_icons', headerName: 'Payment', width: 180 ,
           renderCell: (params) => {return (
-            <div style={{ cursor: "pointer", align:"center"}}><PaymentText size={20} text={params.row.payment_method}/></div>
+            <div style={{ cursor: "pointer" }}><PaymentText verbose={true} size={20} text={params.row.payment_method}/></div>
           )} },
           { field: 'price', headerName: 'Price', type: 'number', width: 140,
           renderCell: (params) => {return (
@@ -231,7 +230,7 @@ export default class BookPage extends Component {
           { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
           { field: 'payment_icons', headerName: 'Pay', width: 75 ,
           renderCell: (params) => {return (
-            <div style={{position:'relative', left:'-8px', cursor: "pointer", align:"center"}}><PaymentText size={16} text={params.row.payment_method}/></div>
+            <div style={{position:'relative', left:'-4px', cursor: "pointer", align:"center"}}><PaymentText size={16} text={params.row.payment_method}/></div>
           )} },
           { field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
           renderCell: (params) => {return (
@@ -310,7 +309,7 @@ export default class BookPage extends Component {
         { this.state.not_found ? "" :
           <Grid item xs={12} align="center">
             <Typography component="h5" variant="h5">
-              You are {this.state.type == 0 ? <b> selling </b> : (this.state.type == 1 ? <b> buying </b> :" looking at all ")} BTC for {this.state.currencyCode}
+              You are {this.state.type == 0 ? <b> selling </b> : (this.state.type == 1 ? <b> buying </b> :" looking at all ")} BTC for {this.state.currencyCode ? this.state.currencyCode : 'ANY'}
             </Typography>
           </Grid>
           }

frontend/src/components/PaymentText.js

@@ -70,14 +70,14 @@ export default class PaymentText extends Component {
         
         if(chars_left.length > 0){rows.push(
             <Tooltip placement="top" enterTouchDelay="0" title={this.props.verbose ? "Others": "Other: "+ custom_methods} >
-                <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'1px'}}>
+                <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'-1px'}}>
                     <PaymentIcon width={this.props.size*1.1} height={this.props.size*1.1} icon={"custom"}/>
                 </div>
             </Tooltip>
             )}
 
         if(this.props.verbose){
-            return (<>{rows} <span>{custom_methods}</span></>)
+            return (<>{rows} <div style={{display: 'inline-block'}}> <span>{custom_methods}</span></div></>)
         }else{
             return rows
         }
@@ -85,7 +85,7 @@ export default class PaymentText extends Component {
 
     render() {
       return ( 
-        <div style={{position:'flex',alignItems:'center', flexWrap:'wrap'}}>
+        <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
             {this.parseText()}
         </div>
       )

frontend/src/components/autocompletePayments.js

@@ -247,19 +247,17 @@ export default function AutocompletePayments(props) {
             <div style={{position:'fixed', minHeight:'20px',  marginLeft: '53px', marginTop: '-13px'}}>
                 <ListHeader><i>You can add any method </i></ListHeader>
             </div>
-            {val != null?
-              (val.length > 2 ?
-                <div style={{position:'relative',top:'3px'}}>
-                  <Button size="small" sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>Add</Button>
-                </div>
-              :null)
-            :null}
           {groupedOptions.map((option, index) => (
             <li {...getOptionProps({ option, index })}>
               <span style={{textAlign: 'left'}}>{option.name}</span>
               <CheckIcon fontSize="small" />
             </li>
           ))}
+          {val != null?
+              (val.length > 2 ?
+                  <Button size="small" sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>Add</Button>
+              :null)
+            :null}
         </Listbox>
       ) : 
       //Here goes what happens if there is no groupedOptions