Matched toast notification to existing error notifications.

Client/src/Components/Notifications/index.jsx

@@ -1,10 +0,0 @@
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-const Notification = () => {
-  return <ToastContainer />;
-};
-
-export const notify = (message) => toast(message);
-
-export default Notification;

Client/src/Components/Toast/index.css

@@ -0,0 +1,103 @@
+.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;
+  }
+  

Client/src/Components/Toast/index.jsx

@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
+import "./index.css"; // Import your CSS file for toast styles
+
+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
+  };
+
+  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>
+  );
+};
+
+export default Toast;

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -13,6 +13,7 @@ import AnnouncementUpdateSubscription from "../../Components/Announcements/Annou
 import PlayGroundCharts from "./PlayGround-Charts";
 import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
 import PlayGroundTooltips from "./PlayGround-Tooltips";
+import Toast from "../../Components/Toast";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -52,6 +53,7 @@ function PlayGround() {
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
+      <Toast />
 
       <hr />
       {/* Now, illustration of the Description text fields */}