From ca7fa30aa8d365c412a60be40405f6e6385296f0 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Fri, 21 Jan 2022 20:27:56 +0000 Subject: [PATCH] UX form field label style (#1428) --- .../Buckets/BucketDetails/AddReplicationModal.tsx | 3 +++ .../Buckets/BucketDetails/SetAccessPolicy.tsx | 3 ++- .../Common/CredentialsPrompt/CredentialItem.tsx | 3 ++- .../CSVMultiSelector/CSVMultiSelector.tsx | 3 ++- .../CodeMirrorWrapper/CodeMirrorWrapper.tsx | 4 ++++ .../FormComponents/FileSelector/FileSelector.tsx | 10 ++++++++++ .../InputBoxWrapper/InputBoxWrapper.tsx | 4 ++++ .../FormComponents/SelectWrapper/SelectWrapper.tsx | 12 ++++++++++++ .../Common/FormComponents/common/styleLibrary.ts | 6 +++++- .../CustomForms/EditConfiguration.tsx | 9 +++++++++ 10 files changed, 53 insertions(+), 4 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx index 096ecc05c..392fd2439 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx +++ b/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, diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx index 2a015ee13..004bbc769 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx +++ b/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,7 +38,6 @@ const styles = (theme: Theme) => createStyles({ codeMirrorContainer: { marginBottom: 20, - paddingLeft: 15, "& label": { marginBottom: ".5rem", }, @@ -45,6 +45,7 @@ const styles = (theme: Theme) => display: "none", }, }, + ...formFieldStyles, ...modalStyleUtils, ...spacingUtils, }); diff --git a/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx b/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx index c5a43c45d..ef9a5bc9f 100644 --- a/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialItem.tsx +++ b/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, }, }); diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx index 1fd9c6b34..1e1a50c09 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx +++ b/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, }, }); }; diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx index 53d7e37a4..4599761b0 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx +++ b/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 = { diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx index ae0e3f486..8f0249bac 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx +++ b/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 = ({ diff --git a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx index bba8d571c..b96cd8dea 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx +++ b/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) => 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 571e5e4f8..2ad734337 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/SelectWrapper/SelectWrapper.tsx +++ b/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) => diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 63fffc53a..e5c6f14e6 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/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, diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx index 13bea8fa9..9299b78a9 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx +++ b/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", }} >