From af062a46dfad1f237850232df6e876006863fbf6 Mon Sep 17 00:00:00 2001
From: "F. Mitjans" <fmitjans@protonmail.com>
Date: Thu, 1 Sep 2022 23:25:36 -0400
Subject: [PATCH] Make Maker page scale with fontsize

---
 .../src/components/AutocompletePayments.js    | 73 +++++++++----------
 frontend/src/components/MakerPage.js          | 48 ++++++------
 frontend/src/components/RangeSlider.js        | 10 +--
 3 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/AutocompletePayments.js b/frontend/src/components/AutocompletePayments.js
index 949166da..62bc9974 100644
--- a/frontend/src/components/AutocompletePayments.js
+++ b/frontend/src/components/AutocompletePayments.js
@@ -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)
       }
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index 54beb3b4..8a8897c6 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -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}
diff --git a/frontend/src/components/RangeSlider.js b/frontend/src/components/RangeSlider.js
index b4a794f8..a0bcc715 100644
--- a/frontend/src/components/RangeSlider.js
+++ b/frontend/src/components/RangeSlider.js
@@ -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`,
   },
 }));