UX form field label style (#1428)

Author: prakashsvmx

portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx

@@ -64,6 +64,9 @@ const styles = (theme: Theme) =>
       },
       "& div:first-child": {
         marginBottom: 0,
+        "@media (max-width: 600px)": {
+          marginTop: "7px",
+        },
       },
     },
     ...spacingUtils,

portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx

@@ -22,6 +22,7 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import {
+  formFieldStyles,
   modalStyleUtils,
   spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
@@ -37,14 +38,14 @@ const styles = (theme: Theme) =>
   createStyles({
     codeMirrorContainer: {
       marginBottom: 20,
-      paddingLeft: 15,
       "& label": {
         marginBottom: ".5rem",
       },
       "& label + div": {
         display: "none",
       },
     },
+    ...formFieldStyles,
     ...modalStyleUtils,
     ...spacingUtils,
   });

portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx

@@ -22,6 +22,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { CopyIcon } from "../../../../icons";
+import { fieldBasic } from "../FormComponents/common/styleLibrary";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -50,8 +51,8 @@ const styles = (theme: Theme) =>
       },
     },
     inputLabel: {
+      ...fieldBasic.inputLabel,
       fontSize: ".8rem",
-      fontWeight: 600,
     },
   });
 

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

@@ -61,10 +61,11 @@ const styles = (theme: Theme) => {
       marginBottom: 7,
     },
     inputLabel: {
+      ...fieldBasic.inputLabel,
       margin: 0,
       alignItems: "flex-start",
       paddingTop: "20px",
-      minWidth: 170,
+      minWidth: 162,
     },
   });
 };

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

@@ -50,6 +50,10 @@ interface ICodeWrapper {
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
+    inputLabel: {
+      ...fieldBasic.inputLabel,
+      fontWeight: "normal",
+    },
   });
 
 const langHighlight: Record<string, any> = {

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

@@ -64,6 +64,16 @@ const styles = (theme: Theme) =>
       },
     },
     ...fileInputStyles,
+    inputLabel: {
+      ...fieldBasic.inputLabel,
+      fontWeight: "normal",
+    },
+    textBoxContainer: {
+      ...fieldBasic.textBoxContainer,
+      maxWidth: "100%",
+      border: "1px solid #eaeaea",
+      paddingLeft: "15px",
+    },
   });
 
 const FileSelector = ({

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

@@ -82,6 +82,10 @@ const styles = (theme: Theme) =>
         top: 5,
       },
     },
+    inputLabel: {
+      ...fieldBasic.inputLabel,
+      fontWeight: "normal",
+    },
   });
 
 const inputStyles = makeStyles((theme: Theme) =>

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

@@ -51,6 +51,18 @@ const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...tooltipHelper,
+    inputLabel: {
+      ...fieldBasic.inputLabel,
+      "& span": {
+        fontWeight: "normal",
+      },
+    },
+    fieldContainer: {
+      display: "flex",
+      "@media (max-width: 600px)": {
+        flexFlow: "column",
+      },
+    },
   });
 
 const SelectStyled = withStyles((theme: Theme) =>

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -23,11 +23,12 @@ const inputLabelBase = {
   color: "#07193E",
   textAlign: "left" as const,
   overflow: "hidden",
+  alignItems: "center",
+  display: "flex",
   "& span": {
     display: "flex",
     alignItems: "center",
   },
-  display: "flex",
 };
 
 export const fieldBasic: any = {
@@ -46,6 +47,9 @@ export const fieldBasic: any = {
     position: "relative" as const,
     display: "flex" as const,
     flexWrap: "wrap",
+    "@media (max-width: 600px)": {
+      flexFlow: "column",
+    },
   },
   tooltipContainer: {
     marginLeft: 5,

portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx

@@ -197,12 +197,21 @@ const EditConfiguration = ({
                 paddingTop: "15px ",
                 textAlign: "right" as const,
                 maxHeight: "60px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
               }}
             >
               <Button
                 type="button"
                 variant="outlined"
                 color="secondary"
+                sx={{
+                  padding: {
+                    xs: "3px", //avoid wrapping on smaller screens
+                    md: "20px",
+                  },
+                }}
                 onClick={() => {
                   setResetConfigurationOpen(true);
                 }}