From f4c90bbe7e67247cd08ee3d54055bc9bed274ba5 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Mon, 1 Nov 2021 21:25:15 -0700
Subject: [PATCH] Right Alighn Scalar/Unit selector (#1169)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Buckets/BucketDetails/EnableQuota.tsx     | 34 ++++++++++---------
 .../Console/Buckets/ListBuckets/AddBucket.tsx | 34 ++++++++++---------
 .../SelectWrapper/SelectWrapper.tsx           |  4 ++-
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
index d5fc8fac9..7203ac2ab 100644
--- 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
index 9038850fe..9651c479f 100644
--- 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
index d9fbc76f3..e4bb95be2 100644
--- 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",