Removed toast bounce animation and added a pulse effect to monitor status dot

Client/src/Pages/Monitors/Details/index.jsx

@@ -171,8 +171,34 @@ const DetailsPage = () => {
             ]}
           />
           <Stack gap={theme.gap.large} mt={theme.gap.large}>
-            <Stack direction="row" gap={theme.gap.small}>
-              {monitor?.status ? <GreenCheck /> : <RedCheck />}
+            <Stack direction="row" gap={theme.gap.xs}>
+              <Stack
+                width={theme.gap.large}
+                height={theme.gap.large}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Box
+                  width="14px"
+                  height="14px"
+                  sx={{
+                    position: "relative",
+                    backgroundColor: monitor?.status
+                      ? theme.label.up.dotColor
+                      : theme.label.down.dotColor,
+                    borderRadius: "50%",
+                    "&::before": {
+                      content: `""`,
+                      position: "absolute",
+                      width: "100%",
+                      height: "100%",
+                      backgroundColor: "inherit",
+                      borderRadius: "50%",
+                      animation: "ripple 1.8s ease-out infinite",
+                    },
+                  }}
+                />
+              </Stack>
               <Box>
                 <Typography component="h1" sx={{ lineHeight: 1 }}>
                   {monitor.url?.replace(/^https?:\/\//, "") || "..."}

Client/src/Utils/toastUtils.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { toast } from "react-toastify";
+import { toast, Slide } from "react-toastify";
 import Alert from "../Components/Alert";
 
 /**
@@ -23,6 +23,7 @@ export const createToast = ({
     autoClose: 3000,
     hideProgressBar: true,
     closeButton: false,
+    transition: Slide,
     ...config,
   };
 

Client/src/index.css

@@ -168,6 +168,17 @@ body .MuiSkeleton-root {
   background-color: var(--env-var-color-15);
 }
 
+@keyframes ripple {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2.3);
+  }
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;