Align SVG currency icons with text

This commit is contained in:
Reckless_Satoshi 2022-02-19 10:44:02 -08:00
parent 78f5c1cbdc
commit eafda9ddf7
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
5 changed files with 6 additions and 18 deletions

View File

@ -129,7 +129,7 @@ export default class BookPage extends Component {
)}},
{ field: 'currency', headerName: 'Currency', width: 100,
renderCell: (params) => {return (
<div style={{ cursor: "pointer" }}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
<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 },
{ field: 'price', headerName: 'Price', type: 'number', width: 140,
@ -198,14 +198,7 @@ export default class BookPage extends Component {
{ field: 'currency', headerName: 'Currency', width: 100,
renderCell: (params) => {return (
<Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
<Grid container xs={12} aling="center">
<Grid item xs={6} aling="center">
<span>{params.row.currency}</span>
</Grid>
<Grid item xs={6} aling="center">
<Typography>{getFlags(params.row.currency)}</Typography>
</Grid>
</Grid>
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>
</Tooltip>
)} },
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
@ -272,7 +265,7 @@ export default class BookPage extends Component {
> <MenuItem value={0}>🌍 ANY</MenuItem>
{
Object.entries(this.state.currencies_dict)
.map( ([key, value]) => <MenuItem value={parseInt(key)}>{getFlags(value)} {" " + value}</MenuItem> )
.map( ([key, value]) => <MenuItem value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div></MenuItem> )
}
</Select>
</FormControl>

View File

@ -211,7 +211,7 @@ export default class MakerPage extends Component {
onChange={this.handleCurrencyChange}>
{Object.entries(this.state.currencies_dict)
.map( ([key, value]) => <MenuItem value={parseInt(key)}>
{getFlags(value)}{" " + value}
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
</MenuItem> )}
</Select>
</div>

View File

@ -38,6 +38,6 @@ export default function getFlags(code){
if(code == 'UYU') return '🇺🇾';
if(code == 'PYG') return '🇵🇾';
if(code == 'BOB') return '🇧🇴';
if(code == 'BTC') return <SwapCallsIcon className='svg-icon' color="primary" />;
if(code == 'BTC') return <SwapCallsIcon color="primary"/>;
return '🏳';
};

View File

@ -89,8 +89,3 @@ body {
border: 0.3px solid #555;
filter: drop-shadow(0.5px 0.5px 0.5px #000000);
}
.svg-icon {
position: relative;
top: 4px;
}

File diff suppressed because one or more lines are too long