Fixed inconsistences in create tenant modal (#349)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>

portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx

@@ -35,20 +35,20 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 const styles = (theme: Theme) =>
   createStyles({
     errorBlock: {
-      color: "red"
+      color: "red",
     },
     minTableHeader: {
       color: "#393939",
       "& tr": {
         "& th": {
-          fontWeight: "bold"
-        }
-      }
+          fontWeight: "bold",
+        },
+      },
     },
     buttonContainer: {
-      textAlign: "right"
+      textAlign: "right",
     },
-    ...modalBasic
+    ...modalBasic,
   });
 
 interface IEnableBucketEncryptionProps {
@@ -108,12 +108,7 @@ class EnableBucketEncryption extends React.Component<
 
   render() {
     const { classes, open } = this.props;
-    const {
-      loading,
-      encryptionError,
-      kmsKeyID,
-      encryptionType
-    } = this.state;
+    const { loading, encryptionError, kmsKeyID, encryptionType } = this.state;
 
     return (
       <ModalWrapper
@@ -148,7 +143,7 @@ class EnableBucketEncryption extends React.Component<
               <Grid item xs={12}>
                 <SelectWrapper
                   onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                    this.setState({ encryptionType: e.target.value as string});
+                    this.setState({ encryptionType: e.target.value as string });
                   }}
                   id="select-encryption-type"
                   name="select-encryption-type"
@@ -162,7 +157,7 @@ class EnableBucketEncryption extends React.Component<
                     {
                       label: "SSE-KMS",
                       value: "sse-kms",
-                    }
+                    },
                   ]}
                 />
               </Grid>

portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx

@@ -93,12 +93,7 @@ const CommentBoxWrapper = ({
         }`}
       >
         {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={`${error !== "" ? classes.fieldLabelError : ""} ${
-              classes.inputLabel
-            }`}
-          >
+          <InputLabel htmlFor={id} className={classes.inputLabel}>
             <span>
               {label}
               {required ? "*" : ""}

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

@@ -76,6 +76,12 @@ const styles = (theme: Theme) =>
       display: "flex",
       alignItems: "center",
     },
+    fieldBottom: {
+      borderBottom: "#9c9c9c 1px solid",
+    },
+    fileInputField: {
+      margin: "13px 0",
+    },
   });
 
 const FileSelector = ({
@@ -98,7 +104,7 @@ const FileSelector = ({
       <Grid
         item
         xs={12}
-        className={`${classes.fieldContainer} ${
+        className={`${classes.fieldBottom} ${classes.fieldContainer} ${
           error !== "" ? classes.errorInField : ""
         }`}
       >
@@ -137,6 +143,7 @@ const FileSelector = ({
               accept={accept}
               required={required}
               disabled={disabled}
+              className={classes.fileInputField}
             />
 
             {value !== "" && (

portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx

@@ -109,7 +109,6 @@ const inputStyles = makeStyles((theme: Theme) =>
     },
     error: {
       color: "#b53b4b",
-      boxShadow: "inset 0px 0px 1px 1px #b53b4b",
     },
   })
 );
@@ -166,12 +165,7 @@ const InputBoxWrapper = ({
         }`}
       >
         {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={`${error !== "" ? classes.fieldLabelError : ""} ${
-              classes.inputLabel
-            }`}
-          >
+          <InputLabel htmlFor={id} className={classes.inputLabel}>
             <span>
               {label}
               {required ? "*" : ""}

portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx

@@ -30,7 +30,7 @@ const styles = (theme: Theme) =>
       minWidth: 180,
       marginRight: 10,
       "& ul": {
-        padding: 15,
+        padding: "0 15px 0 0",
 
         "& li": {
           listStyle: "lower-roman",

portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx

@@ -100,6 +100,13 @@ const styles = (theme: Theme) =>
       color: "#dc1f2e",
       fontSize: "0.75rem",
     },
+    h3Section: {
+      marginTop: 0,
+    },
+    descriptionText: {
+      fontSize: 13,
+      color: "#777777",
+    },
     ...modalBasic,
   });
 
@@ -949,8 +956,10 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Name Tenant</h3>
-            <span>How would you like to name this new tenant?</span>
+            <h3 className={classes.h3Section}>Name Tenant</h3>
+            <span className={classes.descriptionText}>
+              How would you like to name this new tenant?
+            </span>
           </div>
           <Grid item xs={12}>
             <InputBoxWrapper
@@ -996,7 +1005,7 @@ const AddTenant = ({
           </Grid>
           <Grid item xs={12}>
             <br />
-            <span>
+            <span className={classes.descriptionText}>
               Check 'Advanced Mode' for additional configuration options, such
               as IDP, Disk Encryption, and customized TLS/SSL Certificates.
               <br />
@@ -1032,8 +1041,10 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Configure</h3>
-            <span>Basic configurations for tenant management</span>
+            <h3 className={classes.h3Section}>Configure</h3>
+            <span className={classes.descriptionText}>
+              Basic configurations for tenant management
+            </span>
           </div>
 
           <Grid item xs={12}>
@@ -1115,8 +1126,8 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>IDP</h3>
-            <span>
+            <h3 className={classes.h3Section}>IDP</h3>
+            <span className={classes.descriptionText}>
               Access to the tenant can be controlled via an external Identity
               Manager.
             </span>
@@ -1303,7 +1314,7 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Security</h3>
+            <h3 className={classes.h3Section}>Security</h3>
           </div>
           <Grid item xs={12}>
             <FormSwitchWrapper
@@ -1425,8 +1436,10 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Encryption</h3>
-            <span>How would you like to encrypt the information at rest.</span>
+            <h3 className={classes.h3Section}>Encryption</h3>
+            <span className={classes.descriptionText}>
+              How would you like to encrypt the information at rest.
+            </span>
           </div>
           <Grid item xs={12}>
             <FormSwitchWrapper
@@ -1887,8 +1900,10 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Tenant Size</h3>
-            <span>Please select the desired capacity</span>
+            <h3 className={classes.h3Section}>Tenant Size</h3>
+            <span className={classes.descriptionText}>
+              Please select the desired capacity
+            </span>
           </div>
           <span className={classes.error}>{distribution.error}</span>
           <Grid item xs={12}>
@@ -1927,7 +1942,7 @@ const AddTenant = ({
               </div>
               <div className={classes.sizeFactorContainer}>
                 <SelectWrapper
-                  label=""
+                  label={"Unit"}
                   id="size_factor"
                   name="size_factor"
                   value={sizeFactor}
@@ -1967,7 +1982,7 @@ const AddTenant = ({
                 value={ecParity}
                 options={ecParityChoices}
               />
-              <span>
+              <span className={classes.descriptionText}>
                 Please select the desired parity. This setting will change the
                 max usable capacity in the cluster
               </span>
@@ -2015,8 +2030,10 @@ const AddTenant = ({
       componentRender: (
         <React.Fragment>
           <div className={classes.headerElement}>
-            <h3>Review</h3>
-            <span>Review the details of the new tenant</span>
+            <h3 className={classes.h3Section}>Review</h3>
+            <span className={classes.descriptionText}>
+              Review the details of the new tenant
+            </span>
           </div>
           {addError !== "" && (
             <Grid item xs={12}>

portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx

@@ -33,7 +33,11 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
 import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
 import history from "../../../../history";
 import RefreshIcon from "@material-ui/icons/Refresh";
-import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 
 interface ITenantsList {
@@ -70,18 +74,8 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -248,17 +242,6 @@ const ListTenants = ({ classes }: ITenantsList) => {
       <Grid container>
         <Grid item xs={12} className={classes.container}>
           <Grid item xs={12} className={classes.actionsTray}>
-            <IconButton
-              color="primary"
-              aria-label="Refresh Tenant List"
-              component="span"
-              onClick={() => {
-                setIsLoading(true);
-              }}
-            >
-              <RefreshIcon />
-            </IconButton>
-
             <TextField
               placeholder="Search Tenants"
               className={classes.searchField}
@@ -276,6 +259,16 @@ const ListTenants = ({ classes }: ITenantsList) => {
                 ),
               }}
             />
+            <IconButton
+              color="primary"
+              aria-label="Refresh Tenant List"
+              component="span"
+              onClick={() => {
+                setIsLoading(true);
+              }}
+            >
+              <RefreshIcon />
+            </IconButton>
             <Button
               variant="contained"
               color="primary"