Fit book and maker UI for variable length text

docker-compose.yml

@@ -27,7 +27,7 @@ services:
     build: ./frontend
     container_name: npm-dev
     restart: always
-    command: npm run build
+    command: npm run dev
     volumes:
       - ./frontend:/usr/src/frontend
 

frontend/src/components/BookPage.js

@@ -262,7 +262,7 @@ class BookPage extends Component {
                 {t("I want to")} 
               </FormHelperText>
               <Select
-                  sx={{width:90}}
+                  sx={{width:130}}
                   autoWidth={true}
                   label={t("Select Order Type")}
                   required="true" 
@@ -285,7 +285,7 @@ class BookPage extends Component {
               </FormHelperText>
               <Select
                   //autoWidth={true}
-                  sx={{width:110}}
+                  sx={{width:130}}
                   label={t("Select Payment Currency")}
                   required="true" 
                   value={this.props.currency} 

frontend/src/components/BottomBar.js

@@ -606,7 +606,7 @@ bottomBarDesktop =()=>{
                 }}
                 onChange={this.handleChangeLang}> 
                     <MenuItem value={'en'}>EN</MenuItem>
-                    <MenuItem disabled={true} value={'es'}>ES</MenuItem>
+                    <MenuItem value={'es'}>ES</MenuItem>
                     <MenuItem disabled={true} value={'de'}>DE</MenuItem>
                     <MenuItem disabled={true} value={'ru'}>RU</MenuItem>
                     <MenuItem disabled={true} value={'zh'}>ZH</MenuItem>

frontend/src/components/MakerPage.js

@@ -264,7 +264,7 @@ class MakerPage extends Component {
             <Grid item xs={12} align="center" spacing={1}>
                 <div style={{position:'relative', left:'5px'}}>
                 <FormControl component="fieldset">
-                    <FormHelperText>
+                    <FormHelperText sx={{align:"center"}}>
                         {t("Buy or Sell Bitcoin?")}
                     </FormHelperText>
                     <RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
@@ -504,7 +504,7 @@ class MakerPage extends Component {
                     error={this.minAmountError()}
                     sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
                   />
-                <span style={{width: 20}}>{t("to")}</span>
+                <span style={{width: t("to").length*8, align:"center"}}>{t("to")}</span>
                 <TextField
                     variant="standard"
                     size="small"
@@ -514,7 +514,7 @@ class MakerPage extends Component {
                     onChange={this.handleMaxAmountChange}
                     sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
                   />
-                <span>{this.state.currencyCode}</span>
+                <span style={{width: this.state.currencyCode.length*9+4, align:"right"}}>{this.state.currencyCode}</span>
             </div>
             )
 

frontend/src/components/autocompletePayments.js

@@ -130,8 +130,7 @@ const StyledTag = styled(Tag)(
 const ListHeader = styled('span')(
     ({ theme }) => `
   color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
-  aling: center;
-  width: 141px;
+  align: left;
   line-height:10px;
   max-height: 10px;
   display: inline-block;
@@ -246,8 +245,8 @@ export default function AutocompletePayments(props) {
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-            <div style={{position:'fixed', minHeight:'20px',  marginLeft: '53px', marginTop: '-13px'}}>
-                <ListHeader><i>{props.listHeaderText}</i></ListHeader>
+            <div style={{position:'fixed', minHeight:'20px',  marginLeft: 120-props.listHeaderText.length*3, marginTop: '-13px'}}>
+                <ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
             </div>
           {groupedOptions.map((option, index) => (
             <li {...getOptionProps({ option, index })}>