Refactored alert component

Client/src/Components/Alert/index.css

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

Client/src/Components/Alert/index.jsx

@@ -1,10 +1,12 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, Stack } from "@mui/material";
+import { Box, IconButton, 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 CloseIcon from "@mui/icons-material/Close";
 import "./index.css";
+import Button from "../Button";
 
 /**
  * Icons mapping for different alert variants.
@@ -25,7 +27,7 @@ const icons = {
  * @returns {JSX.Element}
  */
 
-const Alert = ({ variant, title, body }) => {
+const Alert = ({ variant, title, body, toast, hasIcon = true, onClick }) => {
   const theme = useTheme();
   const { bg, border, color } = theme.alert[variant];
   const icon = icons[variant];
@@ -34,19 +36,63 @@ const Alert = ({ variant, title, body }) => {
     <Stack
       direction="row"
       justifyContent="flex-start"
+      alignItems={hasIcon ? "" : "center"}
       className="alert row-stack"
       gap={theme.gap.ml}
       sx={{
+        padding: hasIcon ? theme.gap.ml : `${theme.gap.small} ${theme.gap.ml}`,
         backgroundColor: bg,
         border: `solid 1px ${border}`,
         borderRadius: `${theme.shape.borderRadius}px`,
       }}
     >
-      {icon && <Box sx={{ color: color }}>{icon}</Box>}
+      {hasIcon && <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>}
+        {hasIcon && toast && (
+          <Button
+            level="tertiary"
+            label="Dismiss"
+            onClick={onClick}
+            sx={{
+              fontWeight: "600",
+              width: "fit-content",
+              mt: theme.gap.small,
+              padding: 0,
+              minWidth: 0,
+              "&:hover": {
+                backgroundColor: "transparent",
+              },
+              "& .MuiTouchRipple-root": {
+                pointerEvents: "none",
+                display: "none",
+              },
+            }}
+          ></Button>
+        )}
       </Stack>
+      {toast && (
+        <IconButton
+          onClick={onClick}
+          sx={{
+            alignSelf: "flex-start",
+            ml: "auto",
+            mr: "-5px",
+            mt: hasIcon ? "-5px" : 0,
+            padding: "5px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <CloseIcon
+            sx={{
+              fontSize: "20px",
+            }}
+          />
+        </IconButton>
+      )}
     </Stack>
   );
 };

Client/src/Pages/Demo/Demo.jsx

@@ -421,11 +421,20 @@ const Demo = () => {
       </Stack>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
       <Stack justifyContent="center" alignItems="center">
-        <ImageField />
+        <ImageField
+          id="test-image-field"
+          onChange={() => console.log("changed")}
+        />
       </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"
+          progress={50}
+          onClick={() => console.log("click")}
+        />
       </Stack>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
       <Stack justifyContent="center" alignItems="center">
@@ -449,6 +458,22 @@ const Demo = () => {
             body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
           />
         </Box>
+        <Box width="500px" mt="5px">
+          <Alert
+            variant="info"
+            title="We've just released a new feature"
+            body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor."
+            toast={true}
+          />
+        </Box>
+        <Box width="500px" mt="5px">
+          <Alert
+            variant="info"
+            body="Your password is incorrect."
+            toast={true}
+            hasIcon={false}
+          />
+        </Box>
       </Stack>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
     </div>