Refactored Toast Component into a custom React Toastify component.

Client/src/App.jsx

@@ -15,6 +15,7 @@ import ForgotPassword from "./Pages/ForgotPassword";
 import CheckEmail from "./Pages/CheckEmail";
 import SetNewPassword from "./Pages/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
+import ToastComponent from "./Components/Toast";
 
 function App() {
   return (
@@ -30,6 +31,7 @@ function App() {
         <Route exact path="/register" element={<Register />} />
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/demo" element={<Demo />} />
+        <Route path="/toast" element={<ToastComponent />} />
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />

Client/src/Components/Toast/index.css

@@ -1,103 +1,3 @@
-.toast-container {
-    position: fixed;
-    bottom: 20px; /* Adjust as needed */
-    right: 20px; /* Adjust as needed */
-    z-index: 1000; /* Ensure it's above other content */
-  }
-  
-  .toast {
-    background-color: #ffffff;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    padding: 16px;
-    min-width: 300px; /* Adjust minimum width as needed */
-    max-width: 600px; /* Adjust maximum width as needed */
-    position: relative;
-    animation: slideIn 0.3s ease forwards;
-    overflow: hidden; /* Ensure progress bar stays within bounds */
-    display: flex; /* Use flexbox for layout */
-    align-items: center; /* Center items vertically */
-  }
-  
-  @keyframes slideIn {
-    0% {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0%);
-      opacity: 1;
-    }
-  }
-  
-  .toast .info-icon-frame {
-    position: absolute;
-    top: 15px; /* Adjust top position as needed */
-    left: 20px; /* Adjust left position as needed */
-  }
-
-  .icon {
-    position: absolute;
-    top: 15px; /* Adjust top position as needed */
-    left: 20px; /* Adjust left position as needed */
-  }
-  
-  .toast .toast-content {
-    flex-grow: 1; /* Allow content to expand */
-  }
-  
-  .toast .announcement-content {
-    display: flex;
-    flex-direction: column;
-    margin-left: 10px;
-  }
-  
-  .toast .announcement-content-subject {
-    font-weight: bold;
-    margin-bottom: 8px; /* Space below subject */
-    margin-left: 40px; /* Adjust left margin for more space */
-  }
-  
-  .toast .announcement-content-body {
-    color: #555;
-    white-space: nowrap; /* Prevent text from wrapping */
-    overflow: hidden; /* Hide any overflow */
-    text-overflow: ellipsis; /* Show ellipsis (...) if the text overflows */
-    margin-left: 40px; /* Adjust left margin for more space */
-  }
-  
-  .toast .announcement-content-body-title {
-    display: inline-block;
-    margin-right: 5px; /* Adjust spacing between title and body */
-  }
-  
-  .toast .announcement-content-controllers {
-    margin-top: 12px;
-  }
-  
-  .toast .controllers-button-esc,
-  .toast .controllers-button-primary {
-    cursor: pointer;
-    padding: 8px 16px;
-    margin-left: 23px; /* Adjust left margin for closer proximity */
-  }
-
-  
-  .toast-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 4px;
-    background-color: #29b6f6; /* Adjust color as needed */
-    transition: width 0.1s linear;
-  }
-  
-  .close-button {
-    position: absolute;
-    top: 1px;
-    right: 10px;
-    cursor: pointer;
-    font-size: 35px;
-    color: #aaa;
-  }
-  
+.Toastify__toast-container {
+  width: auto;
+}

Client/src/Components/Toast/index.jsx

@@ -1,63 +1,30 @@
-import { useState, useEffect } from "react";
 import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
-import "./index.css"; // Import your CSS file for toast styles
+import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
+import "react-toastify/dist/ReactToastify.css";
+import { toast, ToastContainer } from "react-toastify";
+import "./index.css";
 
-const Toast = () => {
-  const [showToast, setShowToast] = useState(false);
-  const [progress, setProgress] = useState(100); // Start with full progress
-
-  useEffect(() => {
-    let timer;
-    if (showToast) {
-      timer = setTimeout(() => {
-        setShowToast(false);
-      }, 5000); // 5000 milliseconds = 5 seconds
-
-      // Interval to update progress bar
-      const interval = setInterval(() => {
-        setProgress((prevProgress) => prevProgress - (100 / 5000 * 100)); // Decrease progress based on time
-      }, 100); // Update every 100 milliseconds
-
-      return () => {
-        clearTimeout(timer);
-        clearInterval(interval);
-      };
-    }
-  }, [showToast]);
-
-  const toggleToast = () => {
-    setShowToast(!showToast);
-    setProgress(100); // Reset progress when showing toast
+const ToastComponent = () => {
+  const displayMsg = () => {
+    toast(
+      <AnnouncementsDualButtonWithIcon
+        icon={<ComplexAlert theme="red" />}
+        subject="There was a problem with that action"
+        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor."
+        esc="Dismiss"
+        primary="Learn more"
+        dismiss={() => toast.dismiss()}
+      />,
+      { closeButton: false }
+    );
   };
 
   return (
-    <div className="toast-container">
-      <button onClick={toggleToast}>Show Toast</button>
-      {showToast && (
-        <div className="toast">
-          <span className="close-button" onClick={toggleToast}>&times;</span>
-          <div className="icon">
-            {<ComplexAlert theme="red" />}
-          </div>
-          <div className="toast-content">
-            <div className="announcement-content">
-              <div className="announcement-content-subject">
-                There was a problem with that action
-              </div>
-              <div className="announcement-content-body">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor.
-              </div>
-              <div className="announcement-content-controllers">
-                <div className="controllers-button-esc" onClick={toggleToast}>Dismiss</div>
-                <div className="controllers-button-primary">View changes</div>
-              </div>
-            </div>
-          </div>
-          <div className="toast-progress" style={{ width: `${progress}%` }}></div>
-        </div>
-      )}
+    <div>
+      <button onClick={displayMsg}>Click me</button>
+      <ToastContainer className="Toastify__toast-container" />
     </div>
   );
 };
 
-export default Toast;
+export default ToastComponent;