From 122d9d8f568ecfd82e9a58158bbb467da7997f5c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 12:07:36 -0400
Subject: [PATCH 1/5] Removed toast bounce animation and added a pulse effect
 to monitor status dot

---
 Client/src/Pages/Monitors/Details/index.jsx | 30 +++++++++++++++++++--
 Client/src/Utils/toastUtils.jsx             |  3 ++-
 Client/src/index.css                        | 11 ++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index b636444bd..4c0807ecb 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/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?:\/\//, "") || "..."}
diff --git a/Client/src/Utils/toastUtils.jsx b/Client/src/Utils/toastUtils.jsx
index 0f272a74e..ff3f341f8 100644
--- a/Client/src/Utils/toastUtils.jsx
+++ b/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,
   };
 
diff --git a/Client/src/index.css b/Client/src/index.css
index 1c80b4dab..f924671bb 100644
--- a/Client/src/index.css
+++ b/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;

From 35ae18086593a04e6ca64b3e44183eb5a8d21b19 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 12:11:56 -0400
Subject: [PATCH 2/5] Added pulse dot effect to the rest of monitor pages

---
 Client/src/Pages/Monitors/Configure/index.jsx | 32 ++++++++++++++---
 Client/src/Pages/Monitors/Details/index.jsx   |  2 --
 .../src/Pages/PageSpeed/Configure/index.jsx   | 30 ++++++++++++++--
 Client/src/Pages/PageSpeed/Details/index.jsx  | 36 +++++++++++++++----
 4 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 6b809433d..baebca18d 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -5,8 +5,6 @@ import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
@@ -229,8 +227,34 @@ const Configure = () => {
             gap={theme.gap.large}
             flex={1}
           >
-            <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>
                 {parsedUrl?.host ? (
                   <Typography component="h1" mb={theme.gap.xs} lineHeight={1}>
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 4c0807ecb..cdbacb521 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -7,8 +7,6 @@ import { networkService } from "../../../main";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import PaginationTable from "./PaginationTable";
 import {
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index bc759db17..ad1212e65 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -168,8 +168,34 @@ const PageSpeedConfigure = () => {
             flex={1}
             gap={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"
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 41f5892f2..6bb0270ad 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography } from "@mui/material";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { useDrawingArea } from "@mui/x-charts";
@@ -9,19 +10,16 @@ import {
   formatDuration,
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
+import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
 import Button from "../../../Components/Button";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
-import PropTypes from "prop-types";
-import { logger } from "../../../Utils/Logger";
 
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
@@ -325,8 +323,34 @@ const PageSpeedDetails = () => {
               { name: "details", path: `/pagespeed/${monitorId}` },
             ]}
           />
-          <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"

From 50c23505c37640c561b2c9630565d265b4fb0a1a Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 12:23:52 -0400
Subject: [PATCH 3/5] Refactored status dot to its own component

---
 Client/src/Components/Animated/PulseDot.jsx   | 33 +++++++++++++
 Client/src/Pages/Monitors/Configure/index.jsx | 45 +++++-------------
 Client/src/Pages/Monitors/Details/index.jsx   | 47 ++++++-------------
 .../src/Pages/PageSpeed/Configure/index.jsx   | 39 ++++-----------
 Client/src/Pages/PageSpeed/Details/index.jsx  | 35 ++++----------
 5 files changed, 77 insertions(+), 122 deletions(-)
 create mode 100644 Client/src/Components/Animated/PulseDot.jsx

diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx
new file mode 100644
index 000000000..46ba960f3
--- /dev/null
+++ b/Client/src/Components/Animated/PulseDot.jsx
@@ -0,0 +1,33 @@
+import { Box, Stack } from "@mui/material";
+
+const PulseDot = ({ color }) => {
+  return (
+    <Stack
+      width="26px"
+      height="24px"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Box
+        width="14px"
+        height="14px"
+        sx={{
+          position: "relative",
+          backgroundColor: color,
+          borderRadius: "50%",
+          "&::before": {
+            content: `""`,
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            backgroundColor: "inherit",
+            borderRadius: "50%",
+            animation: "ripple 1.8s ease-out infinite",
+          },
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default PulseDot;
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index baebca18d..bd2a26df0 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -2,22 +2,23 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import Button from "../../../Components/Button";
-import Field from "../../../Components/Inputs/Field";
 import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import { monitorValidation } from "../../../Validation/validation";
-import Select from "../../../Components/Inputs/Select";
 import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
 import {
   updateUptimeMonitor,
   getUptimeMonitorsByUserId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import Button from "../../../Components/Button";
+import Field from "../../../Components/Inputs/Field";
+import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
-import { logger } from "../../../Utils/Logger";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -228,33 +229,13 @@ const Configure = () => {
             flex={1}
           >
             <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>
+              <PulseDot
+                color={
+                  monitor?.status
+                    ? theme.label.up.dotColor
+                    : theme.label.down.dotColor
+                }
+              />
               <Box>
                 {parsedUrl?.host ? (
                   <Typography component="h1" mb={theme.gap.xs} lineHeight={1}>
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index cdbacb521..ddc594602 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -4,18 +4,19 @@ import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { networkService } from "../../../main";
+import { logger } from "../../../Utils/Logger";
+import {
+  formatDuration,
+  formatDurationRounded,
+} from "../../../Utils/timeUtils";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import PaginationTable from "./PaginationTable";
-import {
-  formatDuration,
-  formatDurationRounded,
-} from "../../../Utils/timeUtils";
-import "./index.css";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import { logger } from "../../../Utils/Logger";
+import PulseDot from "../../../Components/Animated/PulseDot";
+import "./index.css";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -170,33 +171,13 @@ const DetailsPage = () => {
           />
           <Stack gap={theme.gap.large} mt={theme.gap.large}>
             <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>
+              <PulseDot
+                color={
+                  monitor?.status
+                    ? theme.label.up.dotColor
+                    : theme.label.down.dotColor
+                }
+              />
               <Box>
                 <Typography component="h1" sx={{ lineHeight: 1 }}>
                   {monitor.url?.replace(/^https?:\/\//, "") || "..."}
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index ad1212e65..83484de7e 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -10,15 +10,14 @@ import {
 } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
-import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import { logger } from "../../../Utils/Logger";
+import PulseDot from "../../../Components/Animated/PulseDot";
 
 import "./index.css";
 
@@ -169,33 +168,13 @@ const PageSpeedConfigure = () => {
             gap={theme.gap.large}
           >
             <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>
+              <PulseDot
+                color={
+                  monitor?.status
+                    ? theme.label.up.dotColor
+                    : theme.label.down.dotColor
+                }
+              />
               <Box>
                 <Typography
                   component="h1"
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 6bb0270ad..2e5cc12a7 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -19,6 +19,7 @@ import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
 
 const StatBox = ({ icon, title, value }) => {
@@ -324,33 +325,13 @@ const PageSpeedDetails = () => {
             ]}
           />
           <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>
+            <PulseDot
+              color={
+                monitor?.status
+                  ? theme.label.up.dotColor
+                  : theme.label.down.dotColor
+              }
+            />
             <Box>
               <Typography
                 component="h1"

From c23899cbc44b4c3c1d49b5515b4db39637b6bd51 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 12:24:56 -0400
Subject: [PATCH 4/5] Added docs and proptypes

---
 Client/src/Components/Animated/PulseDot.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx
index 46ba960f3..4ec04c226 100644
--- a/Client/src/Components/Animated/PulseDot.jsx
+++ b/Client/src/Components/Animated/PulseDot.jsx
@@ -1,5 +1,19 @@
+import PropTypes from "prop-types";
 import { Box, Stack } from "@mui/material";
 
+/**
+ * A component that renders a pulsating dot with a specified color.
+ *
+ * @component
+ * @example
+ * // Example usage:
+ * <PulseDot color="#f00" />
+ *
+ * @param {Object} props
+ * @param {string} props.color - The color of the dot.
+ * @returns {JSX.Element} The PulseDot component.
+ */
+
 const PulseDot = ({ color }) => {
   return (
     <Stack
@@ -30,4 +44,8 @@ const PulseDot = ({ color }) => {
   );
 };
 
+PulseDot.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
 export default PulseDot;

From 0183e135b73b015a08e92506e4e6d510acbd89c5 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 22 Aug 2024 14:21:19 -0400
Subject: [PATCH 5/5] Added white inner circle

---
 Client/src/Components/Animated/PulseDot.jsx | 15 +++++++++++++--
 Client/src/index.css                        |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx
index 4ec04c226..1b196426a 100644
--- a/Client/src/Components/Animated/PulseDot.jsx
+++ b/Client/src/Components/Animated/PulseDot.jsx
@@ -23,8 +23,8 @@ const PulseDot = ({ color }) => {
       justifyContent="center"
     >
       <Box
-        width="14px"
-        height="14px"
+        minWidth="16px"
+        minHeight="16px"
         sx={{
           position: "relative",
           backgroundColor: color,
@@ -38,6 +38,17 @@ const PulseDot = ({ color }) => {
             borderRadius: "50%",
             animation: "ripple 1.8s ease-out infinite",
           },
+          "&::after": {
+            content: `""`,
+            position: "absolute",
+            width: "6px",
+            height: "6px",
+            borderRadius: "50%",
+            backgroundColor: "white",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          },
         }}
       />
     </Stack>
diff --git a/Client/src/index.css b/Client/src/index.css
index f924671bb..d62f4b48f 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -175,7 +175,7 @@ body .MuiSkeleton-root {
   }
   to {
     opacity: 0;
-    transform: scale(2.3);
+    transform: scale(2);
   }
 }