mirror of
https://github.com/RoboSats/robosats.git
synced 2025-02-20 12:19:00 +00:00
Make Maker page scale with fontsize
This commit is contained in:
F. Mitjans
Felipe Mitjans
parent
cad000d838
commit
af062a46df
@ -18,7 +18,7 @@ const Root = styled('div')(
|
||||
color: ${
|
||||
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
|
||||
};
|
||||
font-size: 14px;
|
||||
font-size: ${14/16}em;
|
||||
`,
|
||||
);
|
||||
|
||||
@ -26,21 +26,20 @@ const Label = styled('label')(
|
||||
({ theme , error}) => `
|
||||
color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') : (error? '#dd0000':'#717171')};
|
||||
align: center;
|
||||
padding: 0 0 4px;
|
||||
line-height: 1.5; f44336
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: ${13/16}em;
|
||||
`,
|
||||
);
|
||||
|
||||
const InputWrapper = styled('div')(
|
||||
({ theme , error}) => `
|
||||
width: 244px;
|
||||
min-height: 44px;
|
||||
max-height: 124px;
|
||||
width: ${244/16}em;
|
||||
min-height: ${44/16}em;
|
||||
max-height: ${124/16}em;
|
||||
border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')};
|
||||
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
|
||||
border-radius: 4px;
|
||||
border-radius: ${4/16}em;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -59,17 +58,17 @@ const InputWrapper = styled('div')(
|
||||
color: ${
|
||||
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
|
||||
};
|
||||
height: 30px;
|
||||
height: ;${30/16}em
|
||||
box-sizing: border-box;
|
||||
padding: 4px 6px;
|
||||
padding: ${4/16}em ${6/16}em;
|
||||
width: 0;
|
||||
min-width: 30px;
|
||||
font-size: 15px;
|
||||
min-width: ${30/16}em;
|
||||
font-size: ${15/16}em;
|
||||
flex-grow: 1;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
max-height: 124px;
|
||||
max-height: ${124/16}em;
|
||||
}
|
||||
`,
|
||||
);
|
||||
@ -78,8 +77,8 @@ function Tag(props) {
|
||||
const { label, icon, onDelete, ...other } = props;
|
||||
return (
|
||||
<div {...other}>
|
||||
<div style={{position:'relative',left:'-5px',top:'4px'}}>
|
||||
<PaymentIcon width={22} height={22} icon={icon}/>
|
||||
<div style={{position:'relative',left: `-${5/16}em`,top: `${4/16}em`}}>
|
||||
<PaymentIcon width={`22em`} height={`22em`} icon={icon}/>
|
||||
</div>
|
||||
<span style={{position:'relative',left:'2px'}}>{label}</span>
|
||||
<CloseIcon onClick={onDelete} />
|
||||
@ -97,16 +96,16 @@ const StyledTag = styled(Tag)(
|
||||
({ theme }) => `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
margin: 2px;
|
||||
line-height: 22px;
|
||||
height: ${34/16}em;
|
||||
margin: ${2/16}em;
|
||||
line-height: ${22/16}em;
|
||||
background-color: ${
|
||||
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
|
||||
};
|
||||
border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
|
||||
border-radius: 2px;
|
||||
box-sizing: content-box;
|
||||
padding: 0 4px 0 10px;
|
||||
padding: 0 ${4/16}em 0 ${10/16}em;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@ -119,13 +118,13 @@ const StyledTag = styled(Tag)(
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 15px;
|
||||
font-size: ${15/16}em;
|
||||
}
|
||||
|
||||
& svg {
|
||||
font-size: 15px;
|
||||
font-size: ${15/16}em;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
padding: ${4/16}em;
|
||||
}
|
||||
`,
|
||||
);
|
||||
@ -134,31 +133,31 @@ const ListHeader = styled('span')(
|
||||
({ theme }) => `
|
||||
color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
|
||||
align: left;
|
||||
line-height:10px;
|
||||
max-height: 10px;
|
||||
line-height: ${10/16}em;
|
||||
max-height: ${10/16}em;
|
||||
display: inline-block;
|
||||
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'};
|
||||
font-size: 12px;
|
||||
font-size: ${12/16}em;
|
||||
pointer-events: none;
|
||||
`,
|
||||
);
|
||||
|
||||
const Listbox = styled('ul')(
|
||||
({ theme }) => `
|
||||
width: 244px;
|
||||
width: ${244/16}em;
|
||||
margin: 2px 0 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
|
||||
overflow: auto;
|
||||
max-height: 250px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
max-height: ${250/16}em;
|
||||
border-radius: ${4/16}em;
|
||||
box-shadow: 0 ${2/16}em ${8/16}em rgba(0, 0, 0, 0.15);
|
||||
z-index: 999;
|
||||
|
||||
& li {
|
||||
padding: 5px 12px;
|
||||
padding: ${5/16}em ${12/16}em;
|
||||
display: flex;
|
||||
|
||||
& span {
|
||||
@ -205,7 +204,7 @@ export default function AutocompletePayments(props) {
|
||||
focused="true",
|
||||
setAnchorEl,
|
||||
} = useAutocomplete({
|
||||
sx: {width:'200px', align:'left'},
|
||||
sx: {width: `${200/16}em`, align:'left'},
|
||||
id: 'payment-methods',
|
||||
multiple: true,
|
||||
options: props.optionsType=="fiat" ? paymentMethods : swapDestinations,
|
||||
@ -237,7 +236,7 @@ export default function AutocompletePayments(props) {
|
||||
|
||||
return (
|
||||
<Root>
|
||||
<div style={{height:'5px'}}></div>
|
||||
<div style={{height: `${5/16}em`}} />
|
||||
<Tooltip placement="top" enterTouchDelay={300} enterDelay={700} enterNextDelay={2000} title={props.tooltipTitle}>
|
||||
<div {...getRootProps()} >
|
||||
<Label {...getInputLabelProps()} error={props.error ? "error" : null}> {props.label}</Label>
|
||||
@ -251,23 +250,23 @@ export default function AutocompletePayments(props) {
|
||||
</Tooltip>
|
||||
{groupedOptions.length > 0 ? (
|
||||
<Listbox {...getListboxProps()}>
|
||||
<div style={{position:'fixed', minHeight:'20px', marginLeft: 120-props.listHeaderText.length*3, marginTop: '-13px'}}>
|
||||
<div style={{position:'fixed', minHeight: `${20/16}em`, marginLeft: `${(120-3*props.listHeaderText.length)/16}em`, marginTop: `-${13/16}em`}}>
|
||||
<ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
|
||||
</div>
|
||||
{groupedOptions.map((option, index) => (
|
||||
<li key={option.name} {...getOptionProps({ option, index })}>
|
||||
<Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
|
||||
<div style={{position:'relative', right: '4px', top:'4px'}}>
|
||||
<AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
|
||||
<div style={{position:'relative', right: `${4/16}em`, top: `${4/16}em`}}>
|
||||
<AddIcon style={{color : '#1976d2'}} sx={{width: `${18/24}em`, height: `${18/24}em`}} />
|
||||
</div>
|
||||
{t(option.name)}
|
||||
</Button>
|
||||
<div style={{position:'relative', top: '5px'}}><CheckIcon/></div>
|
||||
<div style={{position:'relative', top: `${5/16}em`}}><CheckIcon/></div>
|
||||
</li>
|
||||
))}
|
||||
{val != null?
|
||||
(val.length > 2 ?
|
||||
<Button size="small" fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>{props.addNewButtonText}</Button>
|
||||
<Button size="small" fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width: `${18/16}em`, height: `${18/16}em`}}/>{props.addNewButtonText}</Button>
|
||||
:null)
|
||||
:null}
|
||||
</Listbox>
|
||||
@ -275,7 +274,7 @@ export default function AutocompletePayments(props) {
|
||||
//Here goes what happens if there is no groupedOptions
|
||||
(getInputProps().value.length > 0 ?
|
||||
<Listbox {...getListboxProps()}>
|
||||
<Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:20,height:20}}/>{props.addNewButtonText}</Button>
|
||||
<Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width: `${20/16}em`, height: `${20/16}em`}}/>{props.addNewButtonText}</Button>
|
||||
</Listbox>
|
||||
:null)
|
||||
}
|
||||
|
||||
@ -302,9 +302,9 @@ class MakerPage extends Component {
|
||||
StandardMakerOptions = () => {
|
||||
const { t } = this.props;
|
||||
return(
|
||||
<Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
|
||||
<Paper elevation={12} style={{ padding: 8, width: `${260/16}em`, align:'center'}}>
|
||||
<Grid item xs={12} align="center">
|
||||
<div style={{position:'relative', left:'5px'}}>
|
||||
<div style={{position:'relative'}}>
|
||||
<FormControl component="fieldset">
|
||||
<FormHelperText sx={{textAlign:"center"}}>
|
||||
{t("Buy or Sell Bitcoin?")}
|
||||
@ -313,13 +313,13 @@ class MakerPage extends Component {
|
||||
<RadioGroup row value={this.state.type} onChange={this.handleTypeChange}>
|
||||
<FormControlLabel
|
||||
value={0}
|
||||
control={<Radio icon={<BuySatsIcon sx={{width:"30px",height:"30px"}} color="text.secondary"/>} checkedIcon={<BuySatsCheckedIcon sx={{width:"30px",height:"30px"}} color="primary"/>}/>}
|
||||
control={<Radio icon={<BuySatsIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="text.secondary"/>} checkedIcon={<BuySatsCheckedIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="primary"/>}/>}
|
||||
label={this.state.type == 0 ? <Typography color="primary"><b>{t("Buy")}</b></Typography>: <Typography color="text.secondary">{t("Buy")}</Typography>}
|
||||
labelPlacement="end"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={1}
|
||||
control={<Radio color="secondary" icon={<SellSatsIcon sx={{width:"30px",height:"30px"}} color="text.secondary"/>} checkedIcon={<SellSatsCheckedIcon sx={{width:"30px",height:"30px"}} color="secondary"/>}/>}
|
||||
control={<Radio color="secondary" icon={<SellSatsIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="text.secondary"/>} checkedIcon={<SellSatsCheckedIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="secondary"/>}/>}
|
||||
label={this.state.type == 1 ? <Typography color="secondary"><b>{t("Sell")}</b></Typography>: <Typography color="text.secondary">{t("Sell")}</Typography>}
|
||||
labelPlacement="end"
|
||||
/>
|
||||
@ -329,7 +329,7 @@ class MakerPage extends Component {
|
||||
</Grid>
|
||||
|
||||
<Grid alignItems="stretch" style={{ display: "flex" }}>
|
||||
<div style={{maxWidth:150}}>
|
||||
<div style={{}}>
|
||||
<Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Amount of fiat to exchange for bitcoin")}>
|
||||
<TextField
|
||||
disabled = {this.state.enableAmountRange}
|
||||
@ -351,7 +351,7 @@ class MakerPage extends Component {
|
||||
</div>
|
||||
<div >
|
||||
<Select
|
||||
sx={{width:'120px'}}
|
||||
sx={{width: `${120/16}em`}}
|
||||
required={true}
|
||||
defaultValue={this.defaultCurrency}
|
||||
inputProps={{
|
||||
@ -411,7 +411,7 @@ class MakerPage extends Component {
|
||||
<Grid item xs={12} align="center">
|
||||
<div style={{display: this.state.is_explicit ? '':'none'}}>
|
||||
<TextField
|
||||
sx={{width:240}}
|
||||
sx={{width: `${240/16}em`}}
|
||||
label={t("Satoshis")}
|
||||
error={this.state.badSatoshis ? true : false}
|
||||
helperText={this.state.badSatoshis}
|
||||
@ -428,7 +428,7 @@ class MakerPage extends Component {
|
||||
</div>
|
||||
<div style={{display: this.state.is_explicit ? 'none':''}}>
|
||||
<TextField
|
||||
sx={{width:240}}
|
||||
sx={{width: `${240/16}em`}}
|
||||
error={this.state.badPremium}
|
||||
helperText={this.state.badPremium}
|
||||
label={t("Premium over Market (%)")}
|
||||
@ -527,8 +527,8 @@ class MakerPage extends Component {
|
||||
rangeText =()=> {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
<span style={{width: t("From").length*8+2, textAlign:"left"}}>{t("From")}</span>
|
||||
<div style={{display:'flex', alignItems:'center', flexWrap:'nowrap', justifyContent:'space-around'}}>
|
||||
<span style={{ textAlign:"left" }}>{t("From ")}</span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
type="number"
|
||||
@ -536,9 +536,9 @@ class MakerPage extends Component {
|
||||
value={this.state.minAmount}
|
||||
onChange={this.handleMinAmountChange}
|
||||
error={this.minAmountError()}
|
||||
sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
|
||||
sx={{ px: "1em" }}
|
||||
/>
|
||||
<span style={{width: t("to").length*8, textAlign:"center"}}>{t("to")}</span>
|
||||
<span style={{ textAlign:"center" }}>{t("to")}</span>
|
||||
<TextField
|
||||
variant="standard"
|
||||
size="small"
|
||||
@ -546,9 +546,9 @@ class MakerPage extends Component {
|
||||
value={this.state.maxAmount}
|
||||
error={this.maxAmountError()}
|
||||
onChange={this.handleMaxAmountChange}
|
||||
sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
|
||||
sx={{ px: "1em" }}
|
||||
/>
|
||||
<span style={{width: this.state.currencyCode.length*9+3, textAlign:"right"}}>{this.state.currencyCode}</span>
|
||||
<span style={{ textAlign:"right" }}>{this.state.currencyCode}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -557,14 +557,14 @@ class MakerPage extends Component {
|
||||
AdvancedMakerOptions = () => {
|
||||
const { t } = this.props;
|
||||
return(
|
||||
<Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
|
||||
<Paper elevation={12} style={{ padding: 8, width: `${280/16}em`, align:'center'}}>
|
||||
|
||||
<Grid container spacing={1}>
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl align="center">
|
||||
<Tooltip enterTouchDelay={0} placement="top" align="center" title={t("Let the taker chose an amount within the range")}>
|
||||
<FormHelperText align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
<FormHelperText align="center" style={{display:'flex',alignItems:'center', flexWrap:'nowrap'}}>
|
||||
<Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked, is_explicit: false}) & this.recalcBounds()}/>
|
||||
{this.state.enableAmountRange & this.state.minAmount != null? this.rangeText() : t("Enable Amount Range")}
|
||||
</FormHelperText>
|
||||
@ -575,7 +575,7 @@ class MakerPage extends Component {
|
||||
<div style={{ display: this.state.loadingLimits == false ? '':'none'}}>
|
||||
<RangeSlider
|
||||
disableSwap={true}
|
||||
sx={{width:200, align:"center"}}
|
||||
sx={{width: `${200/16}em`, align:"center"}}
|
||||
disabled={!this.state.enableAmountRange || this.state.loadingLimits}
|
||||
value={[Number(this.state.minAmount), Number(this.state.maxAmount)]}
|
||||
step={(this.getMaxAmount()-this.getMinAmount())/5000}
|
||||
@ -596,7 +596,7 @@ class MakerPage extends Component {
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
<Accordion defaultExpanded={true} elevation={0} sx={{width:'280px', position:'relative', left:'-8px'}}>
|
||||
<Accordion defaultExpanded={true} elevation={0} sx={{ position:'relative', left:'-8px'}}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon color="primary"/>}>
|
||||
<Typography sx={{flexGrow: 1, textAlign: "center"}} color="text.secondary">{t("Expiry Timers")}</Typography>
|
||||
</AccordionSummary>
|
||||
@ -605,7 +605,7 @@ class MakerPage extends Component {
|
||||
<Grid item xs={12} align="center">
|
||||
<LocalizationProvider dateAdapter={DateFnsUtils}>
|
||||
<TimePicker
|
||||
sx={{width:210, align:"center"}}
|
||||
sx={{ align:"center"}}
|
||||
ampm={false}
|
||||
openTo="hours"
|
||||
views={['hours', 'minutes']}
|
||||
@ -634,7 +634,7 @@ class MakerPage extends Component {
|
||||
<Grid item xs={12} align="center">
|
||||
<LocalizationProvider dateAdapter={DateFnsUtils}>
|
||||
<TimePicker
|
||||
sx={{width:210, align:"center"}}
|
||||
sx={{ align:"center" }}
|
||||
ampm={false}
|
||||
openTo="hours"
|
||||
views={['hours', 'minutes']}
|
||||
@ -668,11 +668,11 @@ class MakerPage extends Component {
|
||||
<FormControl align="center">
|
||||
<Tooltip enterDelay={800} enterTouchDelay={0} placement="top" title={t("Set the skin-in-the-game, increase for higher safety assurance")}>
|
||||
<FormHelperText align="center" sx={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
|
||||
{t("Fidelity Bond Size")} <LockIcon sx={{height:20,width:20}}/>
|
||||
{t("Fidelity Bond Size")} <LockIcon sx={{height: `${20/24}em` ,width: `${20/24}em`}}/>
|
||||
</FormHelperText>
|
||||
</Tooltip>
|
||||
<Slider
|
||||
sx={{width:220, align:"center"}}
|
||||
sx={{width: `${220/16}em`, align:"center"}}
|
||||
aria-label="Bond Size (%)"
|
||||
defaultValue={3}
|
||||
valueLabelDisplay="auto"
|
||||
@ -711,7 +711,7 @@ class MakerPage extends Component {
|
||||
makeOrderBox=()=>{
|
||||
const { t } = this.props;
|
||||
return(
|
||||
<Box sx={{width: this.state.tabValue==1? '270px':'252px'}}>
|
||||
<Box sx={{width: this.state.tabValue==1? `${270/16}em`: `${252/16}em`}}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
|
||||
<Tabs value={this.state.tabValue} variant="fullWidth" >
|
||||
<Tab label={t("Order")} {...this.a11yProps(0)} onClick={() => this.setState({tabValue:0})}/>
|
||||
@ -733,7 +733,7 @@ class MakerPage extends Component {
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<Grid container align="center" spacing={1} sx={{minWidth:380}}>
|
||||
<Grid container align="center" spacing={1} sx={{minWidth: "60%"}}>
|
||||
{getCookie("robot_token") ?
|
||||
<StoreTokenDialog
|
||||
open={this.state.openStoreToken}
|
||||
|
||||
@ -6,15 +6,15 @@ const RangeSlider = styled(Slider)(({ theme }) => ({
|
||||
height: 3,
|
||||
padding: '13px 0',
|
||||
'& .MuiSlider-thumb': {
|
||||
height: 27,
|
||||
width: 27,
|
||||
height: `${27/16}em`,
|
||||
width: `${27/16}em`,
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid currentColor',
|
||||
'&:hover': {
|
||||
boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
|
||||
},
|
||||
'& .range-bar': {
|
||||
height: 9,
|
||||
height: `${9/16}em`,
|
||||
width: 1,
|
||||
backgroundColor: 'currentColor',
|
||||
marginLeft: 1,
|
||||
@ -22,12 +22,12 @@ const RangeSlider = styled(Slider)(({ theme }) => ({
|
||||
},
|
||||
},
|
||||
'& .MuiSlider-track': {
|
||||
height: 3,
|
||||
height: `${3/16}em`,
|
||||
},
|
||||
'& .MuiSlider-rail': {
|
||||
color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
|
||||
opacity: theme.palette.mode === 'dark' ? undefined : 1,
|
||||
height: 3,
|
||||
height: `${3/16}em`,
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user