Refactored Alert component

Client/src/Components/Alert/index.css

@@ -0,0 +1,9 @@
+.alert {
+  margin: 0;
+  width: fit-content;
+  padding: var(--env-var-spacing-1-plus);
+  font-size: var(--env-var-font-size-medium);
+}
+.alert .MuiStack-root {
+  max-width: 85%;
+}

Client/src/Components/Alert/index.jsx

@@ -0,0 +1,40 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import "./index.css";
+
+const icons = {
+  info: <InfoOutlinedIcon />,
+  error: <ErrorOutlineOutlinedIcon />,
+  warning: <WarningAmberOutlinedIcon />,
+};
+
+const Alert = ({ variant, title, body }) => {
+  const theme = useTheme();
+  const { bg, border, color } = theme.alert[variant];
+  const icon = icons[variant];
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="flex-start"
+      className="alert row-stack"
+      gap={theme.gap.ml}
+      sx={{
+        backgroundColor: bg,
+        border: `solid 1px ${border}`,
+        borderRadius: `${theme.shape.borderRadius}px`,
+      }}
+    >
+      {icon && <Box sx={{ color: color }}>{icon}</Box>}
+      <Stack direction="column" gap="2px" sx={{ flex: 1, color: color }}>
+        {title && <Box sx={{ fontWeight: "700" }}>{title}</Box>}
+        {body && <Box sx={{ fontWeight: "400" }}>{body}</Box>}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Alert;

Client/src/Components/TabPanels/Account/PasswordPanel.jsx

@@ -1,14 +1,11 @@
 import TabPanel from "@mui/lab/TabPanel";
 import React, { useState } from "react";
-// import AnnouncementsDualButtonWithIcon from "../../Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
-import AnnouncementsDualButtonWithIcon from "../../Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
 import { useTheme } from "@emotion/react";
 import { Box, Divider, Stack, Typography } from "@mui/material";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
 import ButtonSpinner from "../../ButtonSpinner";
 import PasswordTextField from "../../TextFields/Password/PasswordTextField";
 import { editPasswordValidation } from "../../../Validation/validation";
+import Alert from "../../Alert";
 
 /**
  * PasswordPanel component manages the form for editing password.
@@ -96,13 +93,9 @@ const PasswordPanel = () => {
         spellCheck="false"
       >
         <div className="edit-password-form__wrapper">
-          <AnnouncementsDualButtonWithIcon
-            icon={
-              <InfoOutlinedIcon
-                style={{ fill: theme.palette.secondary.main }}
-              />
-            }
-            subject="SSO login"
+          <Alert
+            variant="info"
+            title="SSO login"
             body="Since you logged in via SSO, you cannot reset or modify your password."
           />
         </div>
@@ -181,8 +174,8 @@ const PasswordPanel = () => {
         <div className="edit-password-form__wrapper">
           <Stack></Stack>
           <Box sx={{ flex: 1 }}>
-            <AnnouncementsDualButtonWithIcon
-              icon={<WarningAmberOutlinedIcon style={{ fill: "#f79009" }} />}
+            <Alert
+              variant="warning"
               body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
             />
           </Box>

Client/src/Pages/Account/index.css

@@ -42,9 +42,9 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
-.edit-password-form__wrapper .MuiStack-root:not(.row-stack),
-.edit-organization-form__wrapper .MuiStack-root:not(.row-stack) {
+.edit-profile-form__wrapper>.MuiStack-root:not(.row-stack),
+.edit-password-form__wrapper>.MuiStack-root:not(.row-stack),
+.edit-organization-form__wrapper>.MuiStack-root:not(.row-stack) {
   flex-direction: column;
   gap: 8px;
   margin-right: 10px;

Client/src/Pages/Demo/Demo.jsx

@@ -15,6 +15,7 @@ import {
   Tabs,
   Typography,
   Stack,
+  Box,
 } from "@mui/material";
 import { ColoredLabel, StatusLabel } from "../../Components/Label/";
 import Avatar from "../../Components/Avatar/";
@@ -29,7 +30,7 @@ import AddIcon from "@mui/icons-material/Add";
 import Divider from "@mui/material/Divider";
 import UploadIcon from "@mui/icons-material/Upload";
 import SendIcon from "@mui/icons-material/Send";
-import ImageIcon from '@mui/icons-material/Image';
+import ImageIcon from "@mui/icons-material/Image";
 
 // Redux
 import { useSelector } from "react-redux";
@@ -38,6 +39,7 @@ import { getMonitors } from "../../Features/Monitors/monitorsSlice";
 import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
 import ImageField from "../../Components/TextFields/Image";
 import ProgressUpload from "../../Components/ProgressBars";
+import Alert from "../../Components/Alert";
 
 const cols = [
   {
@@ -423,7 +425,30 @@ const Demo = () => {
       </Stack>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
       <Stack justifyContent="center" alignItems="center">
-        <ProgressUpload icon={<ImageIcon />} label="image.jpg" size="2 MB"/>
+        <ProgressUpload icon={<ImageIcon />} label="image.jpg" size="2 MB" />
+      </Stack>
+      <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <Stack justifyContent="center" alignItems="center">
+        <Box width="500px">
+          <Alert
+            variant="info"
+            title="SSO login"
+            body="Since you logged in via SSO, you cannot reset or modify your password."
+          />
+        </Box>
+        <Box width="500px" mt="5px">
+          <Alert
+            variant="warning"
+            body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
+          />
+        </Box>
+        <Box width="500px" mt="5px">
+          <Alert
+            variant="error"
+            title="Error"
+            body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+          />
+        </Box>
       </Stack>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
     </div>

Client/src/Utils/Theme.js

@@ -88,14 +88,32 @@ const theme = createTheme({
   },
   content: {
     pX: "80px",
-    pY: "40px"
+    pY: "40px",
   },
   gap: {
     small: "8px",
     medium: "12px",
+    ml: "16px",
     large: "24px",
-    xl: "40px"
-  }
+    xl: "40px",
+  },
+  alert: {
+    info: {
+      color: secondaryMain,
+      bg: otherColorsWhite,
+      border: "#d0d5dd",
+    },
+    error: {
+      color: "#d92d20",
+      bg: "#fffaef",
+      border: "#f04438",
+    },
+    warning: {
+      color: "#f79009",
+      bg: "#fffaef",
+      border: "#fecf60"
+    },
+  },
 });
 
 export default theme;