Revert "design revision"

This reverts commit b8a21df.

Author: MandeepPaul

frontend/src/scenes/dashboard/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx

@@ -24,7 +24,6 @@ const CreateActivityButton = ({
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        textTransform: "none",
         transition: "box-shadow 0.3s ease",
         "&:hover": {
           border: "1px solid var(--gray-250)",

frontend/src/scenes/dashboard/HomePageComponents/Skeletons/BannerSkeleton.jsx

@@ -11,25 +11,22 @@ const BannerSkeleton = () => {
         sx={{ bgcolor: "var(--gray-300" }}
         animation={false}
       />
-
       <Skeleton
-        variant="rounded"
+        variant="rectangular"
         width={210}
         height={28}
         sx={{ bgcolor: "var(--gray-200)" }}
         animation={false}
       />
-
       <Skeleton
-        variant="rounded"
+        variant="rectangular"
         width={210}
         height={20}
         sx={{ bgcolor: "var(--gray-200)" }}
         animation={false}
       />
 
       <Skeleton
-        className="childSkeleton"
         sx={{
           position: "absolute",
           top: 12,

frontend/src/scenes/dashboard/HomePageComponents/Skeletons/HelperSkeleton.jsx

@@ -0,0 +1,52 @@
+import { Skeleton } from "@mui/material";
+import styles from "./Skeleton.module.scss";
+
+const HelperSkeleton = () => {
+  return (
+    <div className={styles.skeletonContainer}>
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        sx={{
+          position: "absolute",
+          bottom: "1rem",
+          right: "0.8rem",
+          bgcolor: "var(--light-purple)",
+          border: "0.5px solid #e9d5ff",
+        }}
+        variant="rounded"
+        width={100}
+        height={50}
+        animation={false}
+      />
+    </div>
+  );
+};
+
+export default HelperSkeleton;

frontend/src/scenes/dashboard/HomePageComponents/Skeletons/PopUpSkeleton.jsx

@@ -0,0 +1,52 @@
+import { Skeleton } from "@mui/material";
+import styles from "./Skeleton.module.scss";
+
+const PopUpSkeleton = () => {
+  return (
+    <div className={styles.skeletonContainer}>
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        sx={{
+          position: "absolute",
+          top: 20,
+          left: 30,
+          bgcolor: "var(--light-purple)",
+          border: "0.5px solid #e9d5ff",
+        }}
+        variant="rounded"
+        width={100}
+        height={50}
+        animation={false}
+      />
+    </div>
+  );
+};
+
+export default PopUpSkeleton;

frontend/src/scenes/dashboard/HomePageComponents/Skeletons/Skeleton.module.scss

@@ -7,7 +7,7 @@
   display: flex;
   justify-self: center;
   flex-direction: column;
-  gap: 8px;
+  gap: 5px;
   width: auto;
   margin-bottom: 24px;
 }