updated buttons styles, Cluster types pages, Dashed typography, fixed…

… breadcrumb white space wrap
softwareone-platform · Dec 5, 2024 · 09b272b · 09b272b
1 parent b693501
commit 09b272b
Show file tree

Hide file tree

Showing 20 changed files with 89 additions and 64 deletions.
diff --git a/ngui/ui/src/components/Button/Button.tsx b/ngui/ui/src/components/Button/Button.tsx
@@ -21,7 +21,7 @@ const Button = forwardRef(
       dashedBorder = false,
       size = "small",
       variant = "outlined",
-      uppercase = true,
+      uppercase = false,
       disabled = false,
       color = "info",
       type = "button",

diff --git a/ngui/ui/src/components/ButtonLoader/ButtonLoader.tsx b/ngui/ui/src/components/ButtonLoader/ButtonLoader.tsx
@@ -22,7 +22,6 @@ const ButtonLoader = ({
   href,
   isLoading = false,
   color = "info",
-  uppercase = true,
   tooltip,
   ...rest
 }) => {
@@ -49,7 +48,6 @@ const ButtonLoader = ({
       <Button
         dataTestId={dataTestId}
         dataProductTourId={dataProductTourId}
-        uppercase={uppercase}
         messageId={messageId}
         startIcon={startIcon}
         color={color}

diff --git a/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx b/ngui/ui/src/components/ClusterTypes/ClusterTypes.tsx
@@ -41,7 +41,7 @@ const ClusterTypes = ({ clusterTypes, onUpdatePriority, isLoading = false }) =>
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
       <Grid direction="row" container spacing={3}>
-        <Grid item xs={12} className={"KuBoxShadowRoot"}>
+        <Grid item xs={12} className={"MTPBoxShadowRoot"}>
           <Box>
             <Box marginBottom={MPT_SPACING_2}>
               <ExplanationMessage />

diff --git a/ngui/ui/src/components/ClusterTypesTable/ClusterTypesTable.tsx b/ngui/ui/src/components/ClusterTypesTable/ClusterTypesTable.tsx
@@ -146,7 +146,7 @@ const ClusterTypesTable = ({ clusterTypes, onUpdatePriority, isLoading = false }
               key: "add",
               icon: <AddOutlinedIcon fontSize="small" />,
               messageId: "add",
-              color: "success",
+              color: "primary",
               variant: "contained",
               type: "button",
               link: CLUSTER_TYPE_CREATE,

diff --git a/ngui/ui/src/components/DashedTypography/DashedTypography.styles.ts b/ngui/ui/src/components/DashedTypography/DashedTypography.styles.ts
@@ -1,11 +1,26 @@
 import { makeStyles } from "tss-react/mui";
+import { MPT_BOX_SHADOW_THIN, MPT_SPACING_2 } from "../../utils/layouts";
 
 const useStyles = makeStyles()(() => ({
   dashed: {
     display: "inline",
     borderBottom: "1px dashed",
     width: "fit-content"
   },
+  chip: {
+    display: "inline",
+    border: `1px solid rgba(0, 0, 0, 0)`,
+    padding: `5px ${MPT_SPACING_2}`,
+    borderRadius: MPT_SPACING_2,
+    boxShadow: MPT_BOX_SHADOW_THIN,
+    background: "none",
+    width: "fit-content",
+    transition: "background, border ease-in-out 0.2s",
+    "&:hover": {
+      background: "white",
+      borderColor: "rgba(0, 0, 0, 0.2)"
+    }
+  },
   cursorPointer: {
     "&:hover": {
       cursor: "pointer"

diff --git a/ngui/ui/src/components/DashedTypography/DashedTypography.tsx b/ngui/ui/src/components/DashedTypography/DashedTypography.tsx
@@ -7,12 +7,13 @@ const DashedTypography = ({
   disablePointerOnHover = false,
   hasRightMargin = false,
   dataTestId,
+  chipMode = false,
   ...rest
 }) => {
   const { classes, cx } = useStyles();
 
   const typographyClasses = cx(
-    classes.dashed,
+    chipMode ? classes.chip : classes.dashed,
     disablePointerOnHover ? "" : classes.cursorPointer,
     hasRightMargin ? classes.right : "",
     className

diff --git a/ngui/ui/src/components/LinearSelector/LinearSelector.tsx b/ngui/ui/src/components/LinearSelector/LinearSelector.tsx
@@ -21,6 +21,7 @@ import Popover from "components/Popover";
 import { isEmpty as isEmptyArray } from "utils/arrays";
 import { LINEAR_SELECTOR_ITEMS_TYPES } from "utils/constants";
 import { isEmpty as isEmptyObject } from "utils/objects";
+import { MPT_SPACING_2 } from "../../utils/layouts";
 import useStyles from "./LinearSelector.styles";
 
 const NONE = "none";
@@ -31,7 +32,7 @@ const ItemLabel = ({ name, handleChange, dataTestId, displayedName, endAdornment
   const { classes } = useStyles();
 
   return (
-    <DashedTypography onClick={handleChange} component="span" dataTestId={dataTestId} className={classes.label}>
+    <DashedTypography onClick={handleChange} component="span" dataTestId={dataTestId} className={classes.label} chipMode>
       {displayedName || <FormattedMessage id={name} />}
       {endAdornment}
     </DashedTypography>
@@ -210,7 +211,7 @@ const PickedItem = ({ name, dataTestId = name, value, type, onDelete, displayedN
   const getChipLabel = () => {
     const nameDisplayed = displayedName || <FormattedMessage id={name} />;
     const valueDisplayed = displayedValue || value;
-    const typographyVariant = "subtitle2";
+    const typographyVariant = "subtitle";
 
     return [LINEAR_SELECTOR_ITEMS_TYPES.POPOVER, LINEAR_SELECTOR_ITEMS_TYPES.MULTISELECT_POPOVER].includes(type) ? (
       <KeyValueLabel
@@ -236,7 +237,7 @@ const PickedItem = ({ name, dataTestId = name, value, type, onDelete, displayedN
         chip: `chip_${dataTestId}`,
         deleteIcon: `btn_${dataTestId}_close`
       }}
-      color="info"
+      color="primary"
       size="medium"
       variant="outlined"
       onDelete={onDelete}
@@ -370,7 +371,7 @@ const LinearSelector = ({ value, label, items, onClear, onClearAll, onChange, on
           {valuesArray.length > 1 && onClearAll ? (
             <Button
               dataTestId="btn_clear"
-              dashedBorder
+              style={{ fontSize: "15px", borderRadius: MPT_SPACING_2, paddingTop: "2px", paddingBottom: "2px" }}
               startIcon={<DeleteOutlinedIcon />}
               onClick={onClearAll}
               messageId="clearFilters"

diff --git a/ngui/ui/src/components/RangePicker/RangePicker.tsx b/ngui/ui/src/components/RangePicker/RangePicker.tsx
@@ -101,7 +101,7 @@ const RangePicker = ({
           dataTestId="text_selected_dates"
           style={{ minWidth: "180px" }}
         >
-          {dateAsText}
+          <span style={{ fontSize: "15px" }}>{dateAsText}</span>
         </OutlinedDiv>
       }
       menu={popoverContent}

diff --git a/ngui/ui/src/components/Resources/Resources.tsx b/ngui/ui/src/components/Resources/Resources.tsx
@@ -254,7 +254,7 @@ const Resources = ({
           <Grid xs={12} item>
             <ExpensesSummaryContainer requestParams={requestParams} />
           </Grid>
-          <Grid xs={12} item className={"KuBoxShadowRoot"}>
+          <Grid xs={12} item className={"MTPBoxShadowRoot"}>
             <Box>{typeof renderContent === "function" ? renderContent() : null}</Box>
           </Grid>
         </Grid>

diff --git a/ngui/ui/src/components/Table/components/TableActions/TableActions.styles.ts b/ngui/ui/src/components/Table/components/TableActions/TableActions.styles.ts
@@ -16,26 +16,17 @@ const useStyles = makeStyles()((theme) => ({
       }
     },
     ".MuiOutlinedInput-root": {
-      borderRadius: 0,
-      paddingRight: 0,
-      "> :first-child": {
-        marginLeft: "-10px"
-      },
-      "> :nth-last-child(2)": {
-        marginRight: "-10px"
-      }
+      boxShadow: " inset 0 0 5px rgba(0, 0, 0, 0.2)"
     },
-    ".MuiBadge-root > svg": {
+    ".MuiOutlinedInput-root svg": {
       fill: "black"
     },
-    ".MuiOutlinedInput-notchedOutline": {
-      borderTop: "none",
-      borderLeft: "none",
-      borderRight: "none"
+    ".MuiBadge-root > svg": {
+      fill: "black"
     },
+    ".MuiOutlinedInput-notchedOutline": {},
     ".MuiInputBase-input": {
-      fontSize: "14px",
-      borderTop: "none"
+      fontSize: "14px"
     },
     [theme.breakpoints.down("md")]: {
       paddingBottom: theme.spacing(1)

diff --git a/ngui/ui/src/components/forms/ConfirmVerificationCodeForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/ConfirmVerificationCodeForm/FormElements/FormButtons.tsx
@@ -4,7 +4,6 @@ import FormButtonsWrapper from "components/FormButtonsWrapper";
 const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
-      uppercase
       fullWidth
       variant="contained"
       color="lightBlue"

diff --git a/ngui/ui/src/components/forms/CreateClusterTypeForm/CreateClusterTypeForm.tsx b/ngui/ui/src/components/forms/CreateClusterTypeForm/CreateClusterTypeForm.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@mui/material";
+import Grid from "@mui/material/Grid";
 import Link from "@mui/material/Link";
 import { useForm, FormProvider } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
@@ -7,7 +8,7 @@ import ActionBar from "components/ActionBar";
 import InlineSeverityAlert from "components/InlineSeverityAlert";
 import PageContentWrapper from "components/PageContentWrapper";
 import { CLUSTER_TYPES, DOCS_HYSTAX_CLUSTERS, RESOURCES } from "urls";
-import { SPACING_1 } from "utils/layouts";
+import { MPT_SPACING_3 } from "utils/layouts";
 import { FormButtons, NameField, TagKeyField } from "./FormElements";
 import { CreateClusterTypeFormProps, FormValues } from "./types";
 import { getDefaultValues } from "./utils";
@@ -36,26 +37,32 @@ const CreateClusterTypeForm = ({ onSubmit, onCancel, isSubmitLoading = false }:
     <>
       <ActionBar data={actionBarDefinition} />
       <PageContentWrapper>
-        <Box sx={{ width: { md: "50%" }, mb: SPACING_1 }}>
-          <FormProvider {...methods}>
-            <form onSubmit={handleSubmit(onSubmit)} noValidate>
-              <NameField />
-              <TagKeyField />
-              <FormButtons onCancel={onCancel} isLoading={isSubmitLoading} />
-            </form>
-          </FormProvider>
-        </Box>
-        <InlineSeverityAlert
-          messageId="createClusterTypeDescription"
-          messageValues={{
-            strong: (chunks) => <strong>{chunks}</strong>,
-            link: (chunks) => (
-              <Link data-test-id="link_read_more" href={DOCS_HYSTAX_CLUSTERS} target="_blank" rel="noopener">
-                {chunks}
-              </Link>
-            )
-          }}
-        />
+        <Grid direction="row" container spacing={3}>
+          <Grid item xs={12} className={"MTPBoxShadowRoot"}>
+            <Box>
+              <Box sx={{ width: { md: "50%" }, mb: MPT_SPACING_3 }}>
+                <FormProvider {...methods}>
+                  <form onSubmit={handleSubmit(onSubmit)} noValidate>
+                    <NameField />
+                    <TagKeyField />
+                    <FormButtons onCancel={onCancel} isLoading={isSubmitLoading} />
+                  </form>
+                </FormProvider>
+              </Box>
+              <InlineSeverityAlert
+                messageId="createClusterTypeDescription"
+                messageValues={{
+                  strong: (chunks) => <strong>{chunks}</strong>,
+                  link: (chunks) => (
+                    <Link data-test-id="link_read_more" href={DOCS_HYSTAX_CLUSTERS} target="_blank" rel="noopener">
+                      {chunks}
+                    </Link>
+                  )
+                }}
+              />
+            </Box>
+          </Grid>
+        </Grid>
       </PageContentWrapper>
     </>
   );

diff --git a/ngui/ui/src/components/forms/CreateNewPasswordForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/CreateNewPasswordForm/FormElements/FormButtons.tsx
@@ -4,7 +4,6 @@ import FormButtonsWrapper from "components/FormButtonsWrapper";
 const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
-      uppercase
       fullWidth
       variant="contained"
       color="lightBlue"

diff --git a/ngui/ui/src/components/forms/LoginForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/LoginForm/FormElements/FormButtons.tsx
@@ -5,7 +5,6 @@ const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
       dataTestId="btn_login"
-      uppercase
       variant="contained"
       color="primary"
       isLoading={isLoading}

diff --git a/ngui/ui/src/components/forms/LoginForm/LoginForm.tsx b/ngui/ui/src/components/forms/LoginForm/LoginForm.tsx
@@ -4,8 +4,8 @@ import Typography from "@mui/material/Typography";
 import { FormProvider, useForm } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
 import { Link as RouterLink } from "react-router-dom";
-import { REGISTER, PASSWORD_RECOVERY } from "urls";
-import { getQueryParams, getSearch } from "utils/network";
+import { PASSWORD_RECOVERY } from "urls";
+import { getQueryParams } from "utils/network";
 import { EmailField, FormButtons, PasswordField } from "./FormElements";
 import { FormValues, LoginFormProps } from "./types";
 import { getDefaultValues } from "./utils";
@@ -21,7 +21,7 @@ const LoginForm = ({ onSubmit, isLoading = false, isInvited = false }: LoginForm
 
   const { handleSubmit } = methods;
 
-  const search = getSearch();
+  // const search = getSearch();
 
   return (
     <FormProvider {...methods}>
@@ -35,11 +35,11 @@ const LoginForm = ({ onSubmit, isLoading = false, isInvited = false }: LoginForm
               <FormattedMessage id="forgotPassword" />
             </Link>
           </Typography>
-          <Typography>
-            <Link data-test-id="link_sign_up" color="primary" to={`${REGISTER}${search}`} component={RouterLink}>
-              <FormattedMessage id="noAccountSignUp" />
-            </Link>
-          </Typography>
+          {/* <Typography> */}
+          {/*  <Link data-test-id="link_sign_up" color="primary" to={`${REGISTER}${search}`} component={RouterLink}> */}
+          {/*    <FormattedMessage id="noAccountSignUp" /> */}
+          {/*  </Link> */}
+          {/* </Typography> */}
         </Box>
       </form>
     </FormProvider>

diff --git a/ngui/ui/src/components/forms/RegistrationForm/RegistrationForm.tsx b/ngui/ui/src/components/forms/RegistrationForm/RegistrationForm.tsx
@@ -38,7 +38,6 @@ const RegistrationForm = ({ onSubmit, isLoading = false, isInvited = false }: Re
         </Typography>
         <Box className={classes.registerButtonWrapper}>
           <ButtonLoader
-            uppercase
             dataTestId="btn_register"
             variant="contained"
             color="primary"

diff --git a/ngui/ui/src/components/forms/SendVerificationCodeForm/FormElements/FormButtons.tsx b/ngui/ui/src/components/forms/SendVerificationCodeForm/FormElements/FormButtons.tsx
@@ -4,7 +4,6 @@ import FormButtonsWrapper from "components/FormButtonsWrapper";
 const FormButtons = ({ isLoading = false }) => (
   <FormButtonsWrapper mt={3} mb={2}>
     <ButtonLoader
-      uppercase
       fullWidth
       variant="contained"
       color="primary"

diff --git a/ngui/ui/src/pages/ResourcesPerspectives/ResourcesPerspectives.tsx b/ngui/ui/src/pages/ResourcesPerspectives/ResourcesPerspectives.tsx
@@ -16,7 +16,7 @@ const ResourcesPerspectives = () => (
     <ActionBar data={actionBarDefinition} />
     <PageContentWrapper>
       <Grid direction="row" container spacing={3}>
-        <Grid item xs={12} className={"KuBoxShadowRoot"}>
+        <Grid item xs={12} className={"MTPBoxShadowRoot"}>
           <Box>
             <ResourcesPerspectivesComponent />
           </Box>

diff --git a/ngui/ui/src/theme.ts b/ngui/ui/src/theme.ts
@@ -385,6 +385,8 @@ const getThemeConfig = (settings = {}) => {
           {
             props: { variant: "contained", color: "lightYellow" },
             style: ({ theme }) => ({
+              padding: `6px ${MPT_SPACING_2}`,
+              borderRadius: MPT_SPACING_1,
               color: theme.palette.lightYellow.contrastText,
               "&:hover": {
                 backgroundColor: lighten(theme.palette.lightYellow.main, 0.08)
@@ -406,13 +408,26 @@ const getThemeConfig = (settings = {}) => {
               color: theme.palette.text.primary
             })
           }
-        ]
+        ],
+        styleOverrides: {
+          root: {
+            padding: `6px ${MPT_SPACING_2}`,
+            borderRadius: MPT_SPACING_1
+          }
+        }
       },
       MuiButtonGroup: {
         defaultProps: {
           color: "info"
         }
       },
+      MuiBreadcrumbs: {
+        styleOverrides: {
+          li: {
+            whiteSpace: "nowrap"
+          }
+        }
+      },
       MuiCardHeader: {
         styleOverrides: {
           content: {
@@ -456,7 +471,7 @@ const getThemeConfig = (settings = {}) => {
             flexDirection: "column",
             minHeight: "100vh"
           },
-          ".KuBoxShadowRoot": {
+          ".MTPBoxShadowRoot": {
             "> .MuiBox-root": {
               boxShadow: MPT_BOX_SHADOW,
               background: "#FFFFFF",

diff --git a/ngui/ui/src/utils/layouts.ts b/ngui/ui/src/utils/layouts.ts
@@ -9,13 +9,15 @@ export const SPACING_6 = 6;
 
 export const MPT_BRAND_PRIMARY = "#472AFF";
 export const MPT_BRAND_GRAY_1 = "#E0E5E8";
+export const MPT_BRAND_GRAY_2 = "rgba(107,113,128,0.2)";
 export const MPT_SPACING_1 = "8px";
 export const MPT_SPACING_2 = "16px";
 export const MPT_SPACING_3 = "24px";
 export const MPT_SPACING_4 = "32px";
 export const MPT_SPACING_5 = "40px";
 export const MPT_SPACING_6 = "48px";
 export const MPT_BOX_SHADOW = `0 1px ${MPT_SPACING_1} #6b718057`;
+export const MPT_BOX_SHADOW_THIN = `0 1px 3px ${MPT_BRAND_GRAY_2}`;
 
 export const scrolledToBottom = (target) => target.scrollTop + target.clientHeight >= target.scrollHeight;