Right Alighn Scalar/Unit selector (#1169)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
minio · Nov 2, 2021 · f4c90bb · f4c90bb
1 parent 2d51f64
commit f4c90bb
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 33 deletions.
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
@@ -174,8 +174,8 @@ const EnableQuota = ({
                   />
                 </Grid>
                 <Grid item xs={12}>
-                  <div className={classes.multiContainer}>
-                    <div className={classes.quotaSizeContainer}>
+                  <Grid container>
+                    <Grid item xs={10}>
                       <InputBoxWrapper
                         type="number"
                         id="quota_size"
@@ -188,20 +188,22 @@ const EnableQuota = ({
                         required
                         min="1"
                       />
-                    </div>
-                    <div className={classes.sizeFactorContainer}>
-                      <SelectWrapper
-                        label="&nbsp;"
-                        id="quota_unit"
-                        name="quota_unit"
-                        value={quotaUnit}
-                        onChange={(e: SelectChangeEvent<string>) => {
-                          setQuotaUnit(e.target.value as string);
-                        }}
-                        options={factorForDropdown()}
-                      />
-                    </div>
-                  </div>
+                    </Grid>
+                    <Grid item xs={2}>
+                      <div style={{ width: 100 }}>
+                        <SelectWrapper
+                          label=""
+                          id="quota_unit"
+                          name="quota_unit"
+                          value={quotaUnit}
+                          onChange={(e: SelectChangeEvent<string>) => {
+                            setQuotaUnit(e.target.value as string);
+                          }}
+                          options={factorForDropdown()}
+                        />
+                      </div>
+                    </Grid>
+                  </Grid>
                 </Grid>
               </React.Fragment>
             )}

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -384,8 +384,8 @@ const AddBucket = ({
                   />
                 </Grid>
                 <Grid item xs={12}>
-                  <div className={classes.multiContainer}>
-                    <div className={classes.quotaSizeContainer}>
+                  <Grid container>
+                    <Grid item xs={10}>
                       <InputBoxWrapper
                         type="number"
                         id="quota_size"
@@ -398,20 +398,22 @@ const AddBucket = ({
                         required
                         min="1"
                       />
-                    </div>
-                    <div className={classes.sizeFactorContainer}>
-                      <SelectWrapper
-                        label="&nbsp;"
-                        id="quota_unit"
-                        name="quota_unit"
-                        value={quotaUnit}
-                        onChange={(e: SelectChangeEvent<string>) => {
-                          addBucketQuotaUnit(e.target.value as string);
-                        }}
-                        options={factorForDropdown()}
-                      />
-                    </div>
-                  </div>
+                    </Grid>
+                    <Grid item xs={2}>
+                      <div style={{ width: 100 }}>
+                        <SelectWrapper
+                          label=""
+                          id="quota_unit"
+                          name="quota_unit"
+                          value={quotaUnit}
+                          onChange={(e: SelectChangeEvent<string>) => {
+                            addBucketQuotaUnit(e.target.value as string);
+                          }}
+                          options={factorForDropdown()}
+                        />
+                      </div>
+                    </Grid>
+                  </Grid>
                 </Grid>
               </React.Fragment>
             )}

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx
@@ -56,17 +56,19 @@ const styles = (theme: Theme) =>
 const SelectStyled = withStyles((theme: Theme) =>
   createStyles({
     root: {
+      height: 38,
       lineHeight: 1,
       "label + &": {
         marginTop: theme.spacing(3),
       },
     },
     input: {
+      height: 38,
       position: "relative",
       color: "#07193E",
       fontSize: 13,
       fontWeight: 600,
-      padding: "10px 20px 10px 10px",
+      padding: "8px 20px 10px 10px",
       border: "#e5e5e5 1px solid",
       borderRadius: 4,
       display: "flex",