Merge pull request #29 from softwareone-platform/features/MPT-4884-au…

…th-pages Features/mpt 4884 auth pages
softwareone-platform · Dec 6, 2024 · 6809f18 · 6809f18
2 parents 7bf6ae6 + efa36e8
commit 6809f18
Show file tree

Hide file tree

Showing 27 changed files with 478 additions and 375 deletions.
diff --git a/ngui/ui/public/background-auth.jpeg b/ngui/ui/public/background-auth.jpeg
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,12 +41,12 @@ 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}>
+            <ClusterTypesTable clusterTypes={clusterTypes} onUpdatePriority={onUpdatePriority} isLoading={isLoading} />
+            <Box marginTop={MPT_SPACING_2}>
               <ExplanationMessage />
             </Box>
-            <ClusterTypesTable clusterTypes={clusterTypes} onUpdatePriority={onUpdatePriority} isLoading={isLoading} />
           </Box>
         </Grid>
       </Grid>

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/Greeter/Greeter.styles.ts b/ngui/ui/src/components/Greeter/Greeter.styles.ts
@@ -70,7 +70,11 @@ const useStyles = makeStyles()((theme) => ({
     backgroundColor: theme.palette.common.white
   },
   rightSideGrid: {
-    backgroundColor: "#333F53"
+    backgroundColor: theme.palette.primary.main,
+    backgroundImage: "url('/background-auth.jpeg')",
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    position: "relative"
   },
   ...getFormAndMapWrapperClasses(theme)
 }));