Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-22 13:19:02 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Make Maker page scale with fontsize

Browse Source
This commit is contained in:
F. Mitjans 2022-09-01 23:25:36 -04:00 committed by Felipe Mitjans
parent cad000d838
commit af062a46df
3 changed files with 65 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/AutocompletePayments.js
View File

@ -18,7 +18,7 @@ const Root = styled('div')(
color: ${ color: ${
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)' 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}) => ` ({ theme , error}) => `
color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') : (error? '#dd0000':'#717171')}; color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') : (error? '#dd0000':'#717171')};
align: center; align: center;
padding: 0 0 4px;
line-height: 1.5; f44336 line-height: 1.5; f44336
display: block; display: block;
font-size: 13px; font-size: ${13/16}em;
`, `,
); );
const InputWrapper = styled('div')( const InputWrapper = styled('div')(
({ theme , error}) => ` ({ theme , error}) => `
width: 244px; width: ${244/16}em;
min-height: 44px; min-height: ${44/16}em;
max-height: 124px; max-height: ${124/16}em;
border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')}; border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')};
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
border-radius: 4px; border-radius: ${4/16}em;
padding: 1px; padding: 1px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -59,17 +58,17 @@ const InputWrapper = styled('div')(
color: ${ color: ${
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)' 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; box-sizing: border-box;
padding: 4px 6px; padding: ${4/16}em ${6/16}em;
width: 0; width: 0;
min-width: 30px; min-width: ${30/16}em;
font-size: 15px; font-size: ${15/16}em;
flex-grow: 1; flex-grow: 1;
border: 0; border: 0;
margin: 0; margin: 0;
outline: 0; outline: 0;
max-height: 124px; max-height: ${124/16}em;
} }
`, `,
); );
@ -78,8 +77,8 @@ function Tag(props) {
const { label, icon, onDelete, ...other } = props; const { label, icon, onDelete, ...other } = props;
return ( return (
<div {...other}> <div {...other}>
<div style={{position:'relative',left:'-5px',top:'4px'}}> <div style={{position:'relative',left: `-${5/16}em`,top: `${4/16}em`}}>
<PaymentIcon width={22} height={22} icon={icon}/> <PaymentIcon width={`22em`} height={`22em`} icon={icon}/>
</div> </div>
<span style={{position:'relative',left:'2px'}}>{label}</span> <span style={{position:'relative',left:'2px'}}>{label}</span>
<CloseIcon onClick={onDelete} /> <CloseIcon onClick={onDelete} />
@ -97,16 +96,16 @@ const StyledTag = styled(Tag)(
({ theme }) => ` ({ theme }) => `
display: flex; display: flex;
align-items: center; align-items: center;
height: 34px; height: ${34/16}em;
margin: 2px; margin: ${2/16}em;
line-height: 22px; line-height: ${22/16}em;
background-color: ${ background-color: ${
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa' theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
}; };
border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'}; border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
border-radius: 2px; border-radius: 2px;
box-sizing: content-box; box-sizing: content-box;
padding: 0 4px 0 10px; padding: 0 ${4/16}em 0 ${10/16}em;
outline: 0; outline: 0;
overflow: hidden; overflow: hidden;
@ -119,13 +118,13 @@ const StyledTag = styled(Tag)(
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 15px; font-size: ${15/16}em;
} }
& svg { & svg {
font-size: 15px; font-size: ${15/16}em;
cursor: pointer; cursor: pointer;
padding: 4px; padding: ${4/16}em;
} }
`, `,
); );
@ -134,31 +133,31 @@ const ListHeader = styled('span')(
({ theme }) => ` ({ theme }) => `
color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'}; color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
align: left; align: left;
line-height:10px; line-height: ${10/16}em;
max-height: 10px; max-height: ${10/16}em;
display: inline-block; display: inline-block;
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'}; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'};
font-size: 12px; font-size: ${12/16}em;
pointer-events: none; pointer-events: none;
`, `,
); );
const Listbox = styled('ul')( const Listbox = styled('ul')(
({ theme }) => ` ({ theme }) => `
width: 244px; width: ${244/16}em;
margin: 2px 0 0; margin: 2px 0 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
list-style: none; list-style: none;
background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
overflow: auto; overflow: auto;
max-height: 250px; max-height: ${250/16}em;
border-radius: 4px; border-radius: ${4/16}em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 ${2/16}em ${8/16}em rgba(0, 0, 0, 0.15);
z-index: 999; z-index: 999;
& li { & li {
padding: 5px 12px; padding: ${5/16}em ${12/16}em;
display: flex; display: flex;
& span { & span {
@ -205,7 +204,7 @@ export default function AutocompletePayments(props) {
focused="true", focused="true",
setAnchorEl, setAnchorEl,
} = useAutocomplete({ } = useAutocomplete({
sx: {width:'200px', align:'left'}, sx: {width: `${200/16}em`, align:'left'},
id: 'payment-methods', id: 'payment-methods',
multiple: true, multiple: true,
options: props.optionsType=="fiat" ? paymentMethods : swapDestinations, options: props.optionsType=="fiat" ? paymentMethods : swapDestinations,
@ -237,7 +236,7 @@ export default function AutocompletePayments(props) {
return ( return (
<Root> <Root>
<div style={{height:'5px'}}></div> <div style={{height: `${5/16}em`}} />
<Tooltip placement="top" enterTouchDelay={300} enterDelay={700} enterNextDelay={2000} title={props.tooltipTitle}> <Tooltip placement="top" enterTouchDelay={300} enterDelay={700} enterNextDelay={2000} title={props.tooltipTitle}>
<div {...getRootProps()} > <div {...getRootProps()} >
<Label {...getInputLabelProps()} error={props.error ? "error" : null}> {props.label}</Label> <Label {...getInputLabelProps()} error={props.error ? "error" : null}> {props.label}</Label>
@ -251,23 +250,23 @@ export default function AutocompletePayments(props) {
</Tooltip> </Tooltip>
{groupedOptions.length > 0 ? ( {groupedOptions.length > 0 ? (
<Listbox {...getListboxProps()}> <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> <ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
</div> </div>
{groupedOptions.map((option, index) => ( {groupedOptions.map((option, index) => (
<li key={option.name} {...getOptionProps({ option, index })}> <li key={option.name} {...getOptionProps({ option, index })}>
<Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}> <Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
<div style={{position:'relative', right: '4px', top:'4px'}}> <div style={{position:'relative', right: `${4/16}em`, top: `${4/16}em`}}>
<AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} /> <AddIcon style={{color : '#1976d2'}} sx={{width: `${18/24}em`, height: `${18/24}em`}} />
</div> </div>
{t(option.name)} {t(option.name)}
</Button> </Button>
<div style={{position:'relative', top: '5px'}}><CheckIcon/></div> <div style={{position:'relative', top: `${5/16}em`}}><CheckIcon/></div>
</li> </li>
))} ))}
{val != null? {val != null?
(val.length > 2 ? (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)
:null} :null}
</Listbox> </Listbox>
@ -275,7 +274,7 @@ export default function AutocompletePayments(props) {
//Here goes what happens if there is no groupedOptions //Here goes what happens if there is no groupedOptions
(getInputProps().value.length > 0 ? (getInputProps().value.length > 0 ?
<Listbox {...getListboxProps()}> <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> </Listbox>
:null) :null)
} }

48
frontend/src/components/MakerPage.js
View File

@ -302,9 +302,9 @@ class MakerPage extends Component {
StandardMakerOptions = () => { StandardMakerOptions = () => {
const { t } = this.props; const { t } = this.props;
return( 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"> <Grid item xs={12} align="center">
<div style={{position:'relative', left:'5px'}}> <div style={{position:'relative'}}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormHelperText sx={{textAlign:"center"}}> <FormHelperText sx={{textAlign:"center"}}>
{t("Buy or Sell Bitcoin?")} {t("Buy or Sell Bitcoin?")}
@ -313,13 +313,13 @@ class MakerPage extends Component {
<RadioGroup row value={this.state.type} onChange={this.handleTypeChange}> <RadioGroup row value={this.state.type} onChange={this.handleTypeChange}>
<FormControlLabel <FormControlLabel
value={0} 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>} label={this.state.type == 0 ? <Typography color="primary"><b>{t("Buy")}</b></Typography>: <Typography color="text.secondary">{t("Buy")}</Typography>}
labelPlacement="end" labelPlacement="end"
/> />
<FormControlLabel <FormControlLabel
value={1} 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>} label={this.state.type == 1 ? <Typography color="secondary"><b>{t("Sell")}</b></Typography>: <Typography color="text.secondary">{t("Sell")}</Typography>}
labelPlacement="end" labelPlacement="end"
/> />
@ -329,7 +329,7 @@ class MakerPage extends Component {
</Grid> </Grid>
<Grid alignItems="stretch" style={{ display: "flex" }}> <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")}> <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Amount of fiat to exchange for bitcoin")}>
<TextField <TextField
disabled = {this.state.enableAmountRange} disabled = {this.state.enableAmountRange}
@ -351,7 +351,7 @@ class MakerPage extends Component {
</div> </div>
<div > <div >
<Select <Select
sx={{width:'120px'}} sx={{width: `${120/16}em`}}
required={true} required={true}
defaultValue={this.defaultCurrency} defaultValue={this.defaultCurrency}
inputProps={{ inputProps={{
@ -411,7 +411,7 @@ class MakerPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<div style={{display: this.state.is_explicit ? '':'none'}}> <div style={{display: this.state.is_explicit ? '':'none'}}>
<TextField <TextField
sx={{width:240}} sx={{width: `${240/16}em`}}
label={t("Satoshis")} label={t("Satoshis")}
error={this.state.badSatoshis ? true : false} error={this.state.badSatoshis ? true : false}
helperText={this.state.badSatoshis} helperText={this.state.badSatoshis}
@ -428,7 +428,7 @@ class MakerPage extends Component {
</div> </div>
<div style={{display: this.state.is_explicit ? 'none':''}}> <div style={{display: this.state.is_explicit ? 'none':''}}>
<TextField <TextField
sx={{width:240}} sx={{width: `${240/16}em`}}
error={this.state.badPremium} error={this.state.badPremium}
helperText={this.state.badPremium} helperText={this.state.badPremium}
label={t("Premium over Market (%)")} label={t("Premium over Market (%)")}
@ -527,8 +527,8 @@ class MakerPage extends Component {
rangeText =()=> { rangeText =()=> {
const { t } = this.props; const { t } = this.props;
return ( return (
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}> <div style={{display:'flex', alignItems:'center', flexWrap:'nowrap', justifyContent:'space-around'}}>
<span style={{width: t("From").length*8+2, textAlign:"left"}}>{t("From")}</span> <span style={{ textAlign:"left" }}>{t("From ")}</span>
<TextField <TextField
variant="standard" variant="standard"
type="number" type="number"
@ -536,9 +536,9 @@ class MakerPage extends Component {
value={this.state.minAmount} value={this.state.minAmount}
onChange={this.handleMinAmountChange} onChange={this.handleMinAmountChange}
error={this.minAmountError()} 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 <TextField
variant="standard" variant="standard"
size="small" size="small"
@ -546,9 +546,9 @@ class MakerPage extends Component {
value={this.state.maxAmount} value={this.state.maxAmount}
error={this.maxAmountError()} error={this.maxAmountError()}
onChange={this.handleMaxAmountChange} 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> </div>
) )
@ -557,14 +557,14 @@ class MakerPage extends Component {
AdvancedMakerOptions = () => { AdvancedMakerOptions = () => {
const { t } = this.props; const { t } = this.props;
return( 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 container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<FormControl align="center"> <FormControl align="center">
<Tooltip enterTouchDelay={0} placement="top" align="center" title={t("Let the taker chose an amount within the range")}> <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()}/> <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")} {this.state.enableAmountRange & this.state.minAmount != null? this.rangeText() : t("Enable Amount Range")}
</FormHelperText> </FormHelperText>
@ -575,7 +575,7 @@ class MakerPage extends Component {
<div style={{ display: this.state.loadingLimits == false ? '':'none'}}> <div style={{ display: this.state.loadingLimits == false ? '':'none'}}>
<RangeSlider <RangeSlider
disableSwap={true} disableSwap={true}
sx={{width:200, align:"center"}} sx={{width: `${200/16}em`, align:"center"}}
disabled={!this.state.enableAmountRange || this.state.loadingLimits} disabled={!this.state.enableAmountRange || this.state.loadingLimits}
value={[Number(this.state.minAmount), Number(this.state.maxAmount)]} value={[Number(this.state.minAmount), Number(this.state.maxAmount)]}
step={(this.getMaxAmount()-this.getMinAmount())/5000} step={(this.getMaxAmount()-this.getMinAmount())/5000}
@ -596,7 +596,7 @@ class MakerPage extends Component {
</Grid> </Grid>
<Grid item xs={12} align="center"> <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"/>}> <AccordionSummary expandIcon={<ExpandMoreIcon color="primary"/>}>
<Typography sx={{flexGrow: 1, textAlign: "center"}} color="text.secondary">{t("Expiry Timers")}</Typography> <Typography sx={{flexGrow: 1, textAlign: "center"}} color="text.secondary">{t("Expiry Timers")}</Typography>
</AccordionSummary> </AccordionSummary>
@ -605,7 +605,7 @@ class MakerPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<LocalizationProvider dateAdapter={DateFnsUtils}> <LocalizationProvider dateAdapter={DateFnsUtils}>
<TimePicker <TimePicker
sx={{width:210, align:"center"}} sx={{ align:"center"}}
ampm={false} ampm={false}
openTo="hours" openTo="hours"
views={['hours', 'minutes']} views={['hours', 'minutes']}
@ -634,7 +634,7 @@ class MakerPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<LocalizationProvider dateAdapter={DateFnsUtils}> <LocalizationProvider dateAdapter={DateFnsUtils}>
<TimePicker <TimePicker
sx={{width:210, align:"center"}} sx={{ align:"center" }}
ampm={false} ampm={false}
openTo="hours" openTo="hours"
views={['hours', 'minutes']} views={['hours', 'minutes']}
@ -668,11 +668,11 @@ class MakerPage extends Component {
<FormControl align="center"> <FormControl align="center">
<Tooltip enterDelay={800} enterTouchDelay={0} placement="top" title={t("Set the skin-in-the-game, increase for higher safety assurance")}> <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)'}}> <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> </FormHelperText>
</Tooltip> </Tooltip>
<Slider <Slider
sx={{width:220, align:"center"}} sx={{width: `${220/16}em`, align:"center"}}
aria-label="Bond Size (%)" aria-label="Bond Size (%)"
defaultValue={3} defaultValue={3}
valueLabelDisplay="auto" valueLabelDisplay="auto"
@ -711,7 +711,7 @@ class MakerPage extends Component {
makeOrderBox=()=>{ makeOrderBox=()=>{
const { t } = this.props; const { t } = this.props;
return( 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'}}> <Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
<Tabs value={this.state.tabValue} variant="fullWidth" > <Tabs value={this.state.tabValue} variant="fullWidth" >
<Tab label={t("Order")} {...this.a11yProps(0)} onClick={() => this.setState({tabValue:0})}/> <Tab label={t("Order")} {...this.a11yProps(0)} onClick={() => this.setState({tabValue:0})}/>
@ -733,7 +733,7 @@ class MakerPage extends Component {
render() { render() {
const { t } = this.props; const { t } = this.props;
return ( return (
<Grid container align="center" spacing={1} sx={{minWidth:380}}> <Grid container align="center" spacing={1} sx={{minWidth: "60%"}}>
{getCookie("robot_token") ? {getCookie("robot_token") ?
<StoreTokenDialog <StoreTokenDialog
open={this.state.openStoreToken} open={this.state.openStoreToken}

10
frontend/src/components/RangeSlider.js
View File

@ -6,15 +6,15 @@ const RangeSlider = styled(Slider)(({ theme }) => ({
height: 3, height: 3,
padding: '13px 0', padding: '13px 0',
'& .MuiSlider-thumb': { '& .MuiSlider-thumb': {
height: 27, height: `${27/16}em`,
width: 27, width: `${27/16}em`,
backgroundColor: '#fff', backgroundColor: '#fff',
border: '1px solid currentColor', border: '1px solid currentColor',
'&:hover': { '&:hover': {
boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)', boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
}, },
'& .range-bar': { '& .range-bar': {
height: 9, height: `${9/16}em`,
width: 1, width: 1,
backgroundColor: 'currentColor', backgroundColor: 'currentColor',
marginLeft: 1, marginLeft: 1,
@ -22,12 +22,12 @@ const RangeSlider = styled(Slider)(({ theme }) => ({
}, },
}, },
'& .MuiSlider-track': { '& .MuiSlider-track': {
height: 3, height: `${3/16}em`,
}, },
'& .MuiSlider-rail': { '& .MuiSlider-rail': {
color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8', color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
opacity: theme.palette.mode === 'dark' ? undefined : 1, opacity: theme.palette.mode === 'dark' ? undefined : 1,
height: 3, height: `${3/16}em`,
}, },
})); }));