From 92d4caa801cc15dfb4e1f3492817ae3063ae3ebf Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 11 Jul 2024 18:05:41 -0400
Subject: [PATCH] Added create toast function

---
 Client/src/Pages/Demo/Demo.jsx  | 18 +++++++++++++++++-
 Client/src/Utils/Theme.js       |  6 +++---
 Client/src/Utils/toastUtils.jsx | 26 ++++++++++++++++++++++++++
 Client/src/index.css            |  9 +++++++++
 4 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 Client/src/Utils/toastUtils.jsx

diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index c5f83d2a8..6a7a07e11 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -40,6 +40,8 @@ import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
 import ImageField from "../../Components/TextFields/Image";
 import ProgressUpload from "../../Components/ProgressBars";
 import Alert from "../../Components/Alert";
+import { createToast } from "../../Utils/toastUtils";
+import { ToastContainer } from "react-toastify";
 
 const cols = [
   {
@@ -463,7 +465,7 @@ const Demo = () => {
             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}
+            isToast={true}
           />
         </Box>
         <Box width="500px" mt="5px">
@@ -474,8 +476,22 @@ const Demo = () => {
             hasIcon={false}
           />
         </Box>
+        <Box width="500px" mt="5px">
+          <Button
+            level="primary"
+            label="Toast"
+            onClick={() =>
+              createToast({
+                variant: "info",
+                body: "Your password is incorrect.",
+                hasIcon: false,
+              })
+            }
+          />
+        </Box>
       </Stack>
       <Divider sx={{ margin: `${theme.spacing(2)}` }} />
+      <ToastContainer />
     </div>
   );
 };
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 60273cd95..4b345c9de 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -109,9 +109,9 @@ const theme = createTheme({
       border: "#f04438",
     },
     warning: {
-      color: "#f79009",
-      bg: "#fffaef",
-      border: "#fecf60"
+      color: "#DC6803",
+      bg: "#fffcf5",
+      border: "#fec84b"
     },
   },
 });
diff --git a/Client/src/Utils/toastUtils.jsx b/Client/src/Utils/toastUtils.jsx
new file mode 100644
index 000000000..01beaeaea
--- /dev/null
+++ b/Client/src/Utils/toastUtils.jsx
@@ -0,0 +1,26 @@
+import { toast } from "react-toastify";
+import Alert from "../Components/Alert";
+
+export const createToast = ({ variant, title, body, hasIcon, config = {} }) => {
+  const toastConfig = {
+    position: "top-right",
+    autoClose: 3000,
+    hideProgressBar: true,
+    closeButton: false,
+    ...config,
+  };
+
+  toast(
+    ({ closeToast }) => (
+      <Alert
+        variant={variant}
+        title={title}
+        body={body}
+        isToast={true}
+        hasIcon={hasIcon}
+        onClick={closeToast}
+      />
+    ),
+    toastConfig
+  );
+};
diff --git a/Client/src/index.css b/Client/src/index.css
index 4af5f4e84..1ba3b2239 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -124,6 +124,15 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.Toastify [class^="Toastify__toast"] {
+  padding: 0;
+  margin: 0;
+}
+.Toastify__toast{
+  min-height: 0;
+  border-radius: 4px;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;