Adjust global notifications styling on text (#2757)

- Make bold string before semi colon
- Adjust the height of notification whether it will be 1 or 2 lines
- Add additional condition for when ellipsis will be shown depending on
what type of notification will be displayed

@zcolah I can't update the
https://docs.google.com/spreadsheets/d/1SWff7pdgzsJsmSyIRnTz8fKRuA6KudB_1SDGUe6mOos/edit?gid=0#gid=0
I would like to add the response getting from an API like the Bad
Request response with multiple semi colon where I encountered it.


![image](https://github.com/zesty-io/manager-ui/assets/44116036/fd339f3f-8069-4305-90df-dddb7f62782f)

![image](https://github.com/zesty-io/manager-ui/assets/44116036/4226fb72-4548-4451-bbcb-be088398ce2d)

![image](https://github.com/zesty-io/manager-ui/assets/44116036/2206f50b-5580-41f6-aa5c-9c8d3416c53c)

![image](https://github.com/zesty-io/manager-ui/assets/44116036/e331423b-0bce-44d4-a6f4-b34396391b6e)

src/shell/components/global-notifications/GlobalNotifications.js

@@ -213,55 +213,92 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => {
     closeSnackbar(id);
   }, [id, closeSnackbar]);
 
-  return (
-    <SnackbarContent ref={ref}>
-      <Alert
-        data-cy="toast"
-        key={id}
-        variant="filled"
-        severity={props.severity}
-        icon={props.icon}
-        action={
-          <Stack direction="row">
-            <IconButton onClick={handleDismiss}>
-              <CloseIcon sx={{ width: 20, height: 20, color: "white" }} />
-            </IconButton>
-          </Stack>
-        }
-        sx={{
-          width: 540,
-          height: props.heading ? "auto" : 44,
-        }}
-      >
-        <Stack>
-          <Typography
-            variant="body2"
-            noWrap={props.severity === "success"}
-            sx={{
-              maxWidth: "540px",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              fontWeight: props.heading ? 700 : "normal",
-            }}
-          >
-            {props.heading ? props.heading : props.message}
+  const parseStrToBold = (str, isHeading = false) => {
+    const styles = {
+      variant: "body2",
+      fontWeight: 700,
+      component: "span",
+    };
+    if (str.indexOf(":") !== -1) {
+      return (
+        <>
+          <Typography {...styles}>
+            {str.substring(0, str.indexOf(":") + 1)}
           </Typography>
+          {str.substring(str.indexOf(":") + 1)}
+        </>
+      );
+    } else if (str.indexOf(":") === -1 && isHeading)
+      return <Typography {...styles}>{str}</Typography>;
+    else if (str.indexOf(":") === -1 && [undefined, ""].includes(props.heading))
+      return <Typography {...styles}>{str}</Typography>;
+    else return str;
+  };
 
-          {props.heading && (
+  const typograpySX = {
+    maxWidth: "540px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    // this will only show 1 or 2 lines to prevent exceeding on the expected height
+    // depending what type of notification will be displayed.
+    display: props.severity === "success" ? "block" : "-webkit-box",
+    "-webkit-line-clamp": props.heading && props.message ? "1" : "2",
+    "-webkit-box-orient": "vertical",
+  };
+
+  return (
+    <SnackbarContent ref={ref}>
+      {typeof props.message === "object" ? (
+        ""
+      ) : (
+        <Alert
+          data-cy="toast"
+          key={id}
+          variant="filled"
+          severity={props.severity}
+          icon={props.icon}
+          action={
+            <Stack direction="row">
+              <IconButton onClick={handleDismiss}>
+                <CloseIcon sx={{ width: 20, height: 20, color: "white" }} />
+              </IconButton>
+            </Stack>
+          }
+          sx={{
+            width: 540,
+            padding:
+              !(props.heading && props.message) || props.severity === "success"
+                ? "4px 8px"
+                : "0px 8px",
+          }}
+        >
+          <Stack>
             <Typography
               variant="body2"
               noWrap={props.severity === "success"}
               sx={{
-                maxWidth: "540px",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+                ...typograpySX,
               }}
             >
-              {props.message}
+              {props.heading
+                ? props.heading && parseStrToBold(props.heading, true)
+                : props.message && parseStrToBold(props.message)}
             </Typography>
-          )}
-        </Stack>
-      </Alert>
+
+            {props.heading && (
+              <Typography
+                variant="body2"
+                noWrap={props.severity === "success"}
+                sx={{
+                  ...typograpySX,
+                }}
+              >
+                {parseStrToBold(props.message)}
+              </Typography>
+            )}
+          </Stack>
+        </Alert>
+      )}
     </SnackbarContent>
   );
 });