From 6127c1d8d2400a477c851cb0452798a3d32e169f Mon Sep 17 00:00:00 2001
From: MandeepPaul <113959405+MandeepPaul@users.noreply.github.com>
Date: Tue, 17 Dec 2024 03:50:06 -0500
Subject: [PATCH 1/4] changed button design on homepage

---
 .../ActivityButtonStyles.js                   | 36 -------------
 .../CreateActivityButton.jsx                  | 43 +++++++++------
 .../CreateActivityButtonList.jsx              | 24 ++++-----
 .../Skeletons/BannerSkeleton.jsx              | 46 ++++++++++++++++
 .../Skeletons/HelperSkeleton.jsx              | 52 +++++++++++++++++++
 .../Skeletons/PopUpSkeleton.jsx               | 52 +++++++++++++++++++
 .../Skeletons/Skeleton.module.scss            | 18 +++++++
 frontend/src/scenes/dashboard/Dashboard.jsx   | 33 ++++++------
 8 files changed, 223 insertions(+), 81 deletions(-)
 delete mode 100644 frontend/src/components/HomePageComponents/CreateActivityButton/ActivityButtonStyles.js
 create mode 100644 frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
 create mode 100644 frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
 create mode 100644 frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
 create mode 100644 frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss

diff --git a/frontend/src/components/HomePageComponents/CreateActivityButton/ActivityButtonStyles.js b/frontend/src/components/HomePageComponents/CreateActivityButton/ActivityButtonStyles.js
deleted file mode 100644
index 627a9181..00000000
--- a/frontend/src/components/HomePageComponents/CreateActivityButton/ActivityButtonStyles.js
+++ /dev/null
@@ -1,36 +0,0 @@
- 
-  // Define color constants
-  const iconColor = '#667085';
-  const hoverColor = 'orange';
-  const textColor = '#344054';
-  const borderColor = '#FFD8C7';
-  const buttonBackgroundColor = '#FFFAFA';
-  
-  export const activityButtonStyles = {
-    
-    button: {
-      backgroundColor: buttonBackgroundColor,
-      color: textColor,
-      border: '1px solid ' + borderColor,
-      fontSize: '16px',
-      fontWeight: 400,
-      lineHeight: '24px',
-      textTransform: 'none',
-      padding: '1.3rem 3rem',
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column',
-      width: 'fit-content',
-      boxShadow: 'none',
-      borderRadius: '10px',
-      gap: '1rem',
-      width: '100%',
-    ':hover': {
-        backgroundColor: hoverColor
-        },
-    },
-    icon: { 
-        color: iconColor, 
-        fontSize: '2rem' }
-  };
-  
\ No newline at end of file
diff --git a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
index 4a1b9dd2..9781852c 100644
--- a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
+++ b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
@@ -1,31 +1,42 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import WbIncandescentOutlinedIcon from '@mui/icons-material/WbIncandescentOutlined';
-import DirectionsBusFilledOutlinedIcon from '@mui/icons-material/DirectionsBusFilledOutlined';
-import { activityButtonStyles } from './ActivityButtonStyles';
-
-const CreateActivityButton = ({ placeholder = '', onButtonClick = () => {} }) => {
-
-  const icon = placeholder === 'Create a welcome tour' 
-    ? <DirectionsBusFilledOutlinedIcon style={activityButtonStyles.icon} /> 
-    : <WbIncandescentOutlinedIcon style={activityButtonStyles.icon} />;
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "@mui/material/Button";
 
+const CreateActivityButton = ({
+  placeholder = "",
+  skeletonType,
+  onClick = () => {},
+}) => {
   return (
     <Button
-      variant="contained"
-      startIcon={icon}
-      onClick={onButtonClick}
+      variant="text"
+      onClick={onClick}
       sx={{
-        ...activityButtonStyles.button
+        display: "flex",
+        backgroundColor: "grey.100",
+        width: "100%",
+        border: "0.5px solid var(--grey-border)",
+        color: "var(--main-text-color)",
+        paddingX: "30px",
+        paddingY: "20px",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "box-shadow 0.3s ease",
+        "&:hover": {
+          border: "0.5px solid #d1d5db",
+          backgroundColor: "grey.200",
+        },
       }}
     >
+      {skeletonType}
       {placeholder}
     </Button>
   );
 };
 
 CreateActivityButton.propTypes = {
+  skeletonType: PropTypes.node,
   placeholder: PropTypes.string,
   onButtonClick: PropTypes.func.isRequired,
 };
diff --git a/frontend/src/components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList.jsx b/frontend/src/components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList.jsx
index c50abb27..b75044dc 100644
--- a/frontend/src/components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList.jsx
+++ b/frontend/src/components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList.jsx
@@ -1,19 +1,15 @@
-import React from 'react';
-import CreateActivityButton from '../CreateActivityButton/CreateActivityButton';
-import styles from './CreateActivityButtonList.module.scss'
+import React from "react";
+import CreateActivityButton from "../CreateActivityButton/CreateActivityButton";
+import styles from "./CreateActivityButtonList.module.scss";
 
 const CreateActivityButtonList = ({ buttons }) => {
-    return (
-        <div className={styles.activityButtons}>
-            {buttons.map((button, index) => (
-                <CreateActivityButton 
-                    key={index}
-                    placeholder={button.placeholder}
-                    onButtonClick={button.onClick}
-                />
-            ))}
-        </div>
-    );
+  return (
+    <div className={styles.activityButtons}>
+      {buttons.map((button, index) => (
+        <CreateActivityButton key={index} {...button} />
+      ))}
+    </div>
+  );
 };
 
 export default CreateActivityButtonList;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
new file mode 100644
index 00000000..59f6c70f
--- /dev/null
+++ b/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
@@ -0,0 +1,46 @@
+import { Skeleton } from "@mui/material";
+import styles from "./Skeleton.module.scss";
+
+const BannerSkeleton = () => {
+  return (
+    <div className={styles.bannerSkeletonContainer}>
+      <Skeleton
+        variant="rounded"
+        width={100}
+        height={15}
+        sx={{ bgcolor: "grey.300" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={25}
+        sx={{ bgcolor: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={20}
+        sx={{ bgcolor: "grey.100" }}
+        animation={false}
+      />
+
+      <Skeleton
+        sx={{
+          position: "absolute",
+          top: 12,
+          left: -10,
+          bgcolor: "var(--light-purple)",
+          border: "1.23px solid #e9d5ff",
+        }}
+        variant="rounded"
+        width={260}
+        height={30}
+        animation={false}
+      />
+    </div>
+  );
+};
+
+export default BannerSkeleton;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
new file mode 100644
index 00000000..5fafe2ef
--- /dev/null
+++ b/frontend/src/components/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: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "grey.100" }}
+        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;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
new file mode 100644
index 00000000..d1529d02
--- /dev/null
+++ b/frontend/src/components/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: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "grey.100" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={30}
+        sx={{ bgcolor: "grey.100" }}
+        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;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss b/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss
new file mode 100644
index 00000000..e28413a5
--- /dev/null
+++ b/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss
@@ -0,0 +1,18 @@
+.skeletonContainer {
+  position: relative;
+  background-color: white;
+  border-radius: 10px;
+  border: 1.23px solid var(--grey-border);
+  padding: 1rem 0.8rem;
+  display: flex;
+  justify-self: center;
+  flex-direction: column;
+  gap: 5px;
+  width: auto;
+  margin-bottom: 24px;
+}
+
+.bannerSkeletonContainer {
+  @extend .skeletonContainer;
+  padding-top: 50px;
+}
diff --git a/frontend/src/scenes/dashboard/Dashboard.jsx b/frontend/src/scenes/dashboard/Dashboard.jsx
index 1b9cfd92..43311a83 100644
--- a/frontend/src/scenes/dashboard/Dashboard.jsx
+++ b/frontend/src/scenes/dashboard/Dashboard.jsx
@@ -5,6 +5,9 @@ import styles from "./Dashboard.module.scss";
 import StatisticCardList from "../../components/HomePageComponents/StatisticCardsList/StatisticCardsList";
 import CreateActivityButtonList from "../../components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList";
 import { useNavigate } from "react-router-dom";
+import PopUpSkeleton from "../../components/HomePageComponents/Skeletons/PopUpSkeleton";
+import BannerSkeleton from "../../components/HomePageComponents/Skeletons/BannerSkeleton";
+import HelperSkeleton from "../../components/HomePageComponents/Skeletons/HelperSkeleton";
 
 const Dashboard = ({ fullName }) => {
   const navigate = useNavigate();
@@ -16,31 +19,31 @@ const Dashboard = ({ fullName }) => {
 
   const buttons = [
     {
+      skeletonType: <PopUpSkeleton />,
       placeholder: "Create a popup",
       onClick: () => navigate("/popup/create"),
     },
     {
-      placeholder: "Add a hint to your app",
-      onClick: () => navigate("/hint/create"),
-    },
-    {
+      skeletonType: <BannerSkeleton />,
       placeholder: "Create a new banner",
       onClick: () => navigate("/banner/create"),
     },
+    {
+      skeletonType: <HelperSkeleton />,
+      placeholder: "Add a hint to your app",
+      onClick: () => navigate("/hint/create"),
+    },
   ];
   return (
-
-      <div className={styles.container}>
-        <div className={styles.top}>
-          <UserTitle fullName={fullName} />
-          <DateDisplay />
-        </div>
-        <div className={styles.text}>
-          Start with a popular onboarding process
-        </div>
-        <CreateActivityButtonList buttons={buttons} />
-        <StatisticCardList metrics={metrics} />
+    <div className={styles.container}>
+      <div className={styles.top}>
+        <UserTitle fullName={fullName} />
+        <DateDisplay />
       </div>
+      <div className={styles.text}>Start with a popular onboarding process</div>
+      <CreateActivityButtonList buttons={buttons} />
+      <StatisticCardList metrics={metrics} />
+    </div>
   );
 };
 

From b95f1420da889d633606cf434677fed1a75c16f2 Mon Sep 17 00:00:00 2001
From: MandeepPaul <113959405+MandeepPaul@users.noreply.github.com>
Date: Tue, 17 Dec 2024 04:05:40 -0500
Subject: [PATCH 2/4] bug fix

---
 .../CreateActivityButton/CreateActivityButton.jsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
index 9781852c..2f69efb0 100644
--- a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
+++ b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
@@ -15,7 +15,7 @@ const CreateActivityButton = ({
         display: "flex",
         backgroundColor: "grey.100",
         width: "100%",
-        border: "0.5px solid var(--grey-border)",
+        border: "1px solid var(--grey-border)",
         color: "var(--main-text-color)",
         paddingX: "30px",
         paddingY: "20px",
@@ -24,7 +24,7 @@ const CreateActivityButton = ({
         justifyContent: "center",
         transition: "box-shadow 0.3s ease",
         "&:hover": {
-          border: "0.5px solid #d1d5db",
+          border: "1px solid #d1d5db",
           backgroundColor: "grey.200",
         },
       }}
@@ -38,7 +38,7 @@ const CreateActivityButton = ({
 CreateActivityButton.propTypes = {
   skeletonType: PropTypes.node,
   placeholder: PropTypes.string,
-  onButtonClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default CreateActivityButton;

From 898a2325d90e59f726c1291f43b07093a58968bf Mon Sep 17 00:00:00 2001
From: MandeepPaul <113959405+MandeepPaul@users.noreply.github.com>
Date: Tue, 17 Dec 2024 04:16:43 -0500
Subject: [PATCH 3/4] Switched to theme colors

---
 .../CreateActivityButton/CreateActivityButton.jsx         | 6 +++---
 .../HomePageComponents/Skeletons/BannerSkeleton.jsx       | 4 ++--
 .../HomePageComponents/Skeletons/HelperSkeleton.jsx       | 8 ++++----
 .../HomePageComponents/Skeletons/PopUpSkeleton.jsx        | 8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
index 2f69efb0..278bb8fc 100644
--- a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
+++ b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
@@ -13,7 +13,7 @@ const CreateActivityButton = ({
       onClick={onClick}
       sx={{
         display: "flex",
-        backgroundColor: "grey.100",
+        backgroundColor: "var(--background-color)",
         width: "100%",
         border: "1px solid var(--grey-border)",
         color: "var(--main-text-color)",
@@ -24,8 +24,8 @@ const CreateActivityButton = ({
         justifyContent: "center",
         transition: "box-shadow 0.3s ease",
         "&:hover": {
-          border: "1px solid #d1d5db",
-          backgroundColor: "grey.200",
+          border: "1px solid var(--light-border-color)",
+          backgroundColor: "var(--light-gray)",
         },
       }}
     >
diff --git a/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
index 59f6c70f..f1ffbc2b 100644
--- a/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
+++ b/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
@@ -15,14 +15,14 @@ const BannerSkeleton = () => {
         variant="rectangular"
         width={210}
         height={25}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={20}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
 
diff --git a/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
index 5fafe2ef..8f53a518 100644
--- a/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
+++ b/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
@@ -8,28 +8,28 @@ const HelperSkeleton = () => {
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
diff --git a/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
index d1529d02..00d2bac0 100644
--- a/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
+++ b/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
@@ -8,28 +8,28 @@ const PopUpSkeleton = () => {
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton
         variant="rectangular"
         width={210}
         height={30}
-        sx={{ bgcolor: "grey.100" }}
+        sx={{ bgcolor: "var(--light-gray)" }}
         animation={false}
       />
       <Skeleton

From b8a21dfeb545b91cb786795f709fc2c96d6ea79e Mon Sep 17 00:00:00 2001
From: MandeepPaul <113959405+MandeepPaul@users.noreply.github.com>
Date: Wed, 18 Dec 2024 07:21:17 -0500
Subject: [PATCH 4/4] design revision

---
 .../CreateActivityButton.jsx                  | 10 ++--
 .../Skeletons/BannerSkeleton.jsx              | 20 +++----
 .../Skeletons/CustomSkeleton.jsx              | 33 ++++++++++++
 .../Skeletons/HelperSkeleton.jsx              | 52 -------------------
 .../Skeletons/PopUpSkeleton.jsx               | 52 -------------------
 .../Skeletons/Skeleton.module.scss            |  2 +-
 frontend/src/scenes/dashboard/Dashboard.jsx   | 25 +++++++--
 frontend/src/styles/variables.css             |  6 +++
 8 files changed, 78 insertions(+), 122 deletions(-)
 create mode 100644 frontend/src/components/HomePageComponents/Skeletons/CustomSkeleton.jsx
 delete mode 100644 frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
 delete mode 100644 frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx

diff --git a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
index 278bb8fc..095b111e 100644
--- a/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
+++ b/frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx
@@ -13,7 +13,7 @@ const CreateActivityButton = ({
       onClick={onClick}
       sx={{
         display: "flex",
-        backgroundColor: "var(--background-color)",
+        backgroundColor: "var(--gray-50)",
         width: "100%",
         border: "1px solid var(--grey-border)",
         color: "var(--main-text-color)",
@@ -22,10 +22,14 @@ const CreateActivityButton = ({
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        textTransform: "none",
         transition: "box-shadow 0.3s ease",
         "&:hover": {
-          border: "1px solid var(--light-border-color)",
-          backgroundColor: "var(--light-gray)",
+          border: "1px solid var(--gray-200)",
+          backgroundColor: "var(--gray-100)",
+          ".childSkeleton": {
+            border: "1px solid var(--blue-300)",
+          },
         },
       }}
     >
diff --git a/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
index f1ffbc2b..25a59ffd 100644
--- a/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
+++ b/frontend/src/components/HomePageComponents/Skeletons/BannerSkeleton.jsx
@@ -6,37 +6,39 @@ const BannerSkeleton = () => {
     <div className={styles.bannerSkeletonContainer}>
       <Skeleton
         variant="rounded"
-        width={100}
-        height={15}
+        width={80}
+        height={10}
         sx={{ bgcolor: "grey.300" }}
         animation={false}
       />
+
       <Skeleton
-        variant="rectangular"
+        variant="rounded"
         width={210}
         height={25}
-        sx={{ bgcolor: "var(--light-gray)" }}
+        sx={{ bgcolor: "var(--gray-250)" }}
         animation={false}
       />
+
       <Skeleton
-        variant="rectangular"
+        variant="rounded"
         width={210}
         height={20}
-        sx={{ bgcolor: "var(--light-gray)" }}
+        sx={{ bgcolor: "var(--gray-250)" }}
         animation={false}
       />
 
       <Skeleton
+        className="childSkeleton"
         sx={{
           position: "absolute",
           top: 12,
           left: -10,
-          bgcolor: "var(--light-purple)",
-          border: "1.23px solid #e9d5ff",
+          bgcolor: "var(--blue-50)",
         }}
         variant="rounded"
         width={260}
-        height={30}
+        height={20}
         animation={false}
       />
     </div>
diff --git a/frontend/src/components/HomePageComponents/Skeletons/CustomSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/CustomSkeleton.jsx
new file mode 100644
index 00000000..7c392ab8
--- /dev/null
+++ b/frontend/src/components/HomePageComponents/Skeletons/CustomSkeleton.jsx
@@ -0,0 +1,33 @@
+import { Skeleton } from "@mui/material";
+import styles from "./Skeleton.module.scss";
+
+const CustomSkeleton = ({ items = 4, frontSkeletonProps = {} }) => {
+  return (
+    <div className={styles.skeletonContainer}>
+      {[...Array(items)].map((_, index) => (
+        <Skeleton
+          key={index}
+          variant="rounded"
+          width={210}
+          height={20}
+          animation={false}
+          sx={{ bgcolor: "var(--gray-250)" }}
+        />
+      ))}
+
+      <Skeleton
+        className="childSkeleton"
+        variant={frontSkeletonProps?.variant || "rounded"}
+        width={100}
+        height={50}
+        animation={false}
+        sx={{
+          ...frontSkeletonProps,
+          bgcolor: "var(--blue-50)",
+        }}
+      />
+    </div>
+  );
+};
+
+export default CustomSkeleton;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
deleted file mode 100644
index 8f53a518..00000000
--- a/frontend/src/components/HomePageComponents/Skeletons/HelperSkeleton.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx b/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
deleted file mode 100644
index 00d2bac0..00000000
--- a/frontend/src/components/HomePageComponents/Skeletons/PopUpSkeleton.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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;
diff --git a/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss b/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss
index e28413a5..68f4d6e5 100644
--- a/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss
+++ b/frontend/src/components/HomePageComponents/Skeletons/Skeleton.module.scss
@@ -7,7 +7,7 @@
   display: flex;
   justify-self: center;
   flex-direction: column;
-  gap: 5px;
+  gap: 8px;
   width: auto;
   margin-bottom: 24px;
 }
diff --git a/frontend/src/scenes/dashboard/Dashboard.jsx b/frontend/src/scenes/dashboard/Dashboard.jsx
index 43311a83..d458ebea 100644
--- a/frontend/src/scenes/dashboard/Dashboard.jsx
+++ b/frontend/src/scenes/dashboard/Dashboard.jsx
@@ -5,9 +5,8 @@ import styles from "./Dashboard.module.scss";
 import StatisticCardList from "../../components/HomePageComponents/StatisticCardsList/StatisticCardsList";
 import CreateActivityButtonList from "../../components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList";
 import { useNavigate } from "react-router-dom";
-import PopUpSkeleton from "../../components/HomePageComponents/Skeletons/PopUpSkeleton";
 import BannerSkeleton from "../../components/HomePageComponents/Skeletons/BannerSkeleton";
-import HelperSkeleton from "../../components/HomePageComponents/Skeletons/HelperSkeleton";
+import CustomSkeleton from "../../components/HomePageComponents/Skeletons/CustomSkeleton";
 
 const Dashboard = ({ fullName }) => {
   const navigate = useNavigate();
@@ -19,7 +18,15 @@ const Dashboard = ({ fullName }) => {
 
   const buttons = [
     {
-      skeletonType: <PopUpSkeleton />,
+      skeletonType: (
+        <CustomSkeleton
+          frontSkeletonProps={{
+            position: "absolute",
+            top: 20,
+            left: 30,
+          }}
+        />
+      ),
       placeholder: "Create a popup",
       onClick: () => navigate("/popup/create"),
     },
@@ -29,8 +36,16 @@ const Dashboard = ({ fullName }) => {
       onClick: () => navigate("/banner/create"),
     },
     {
-      skeletonType: <HelperSkeleton />,
-      placeholder: "Add a hint to your app",
+      skeletonType: (
+        <CustomSkeleton
+          frontSkeletonProps={{
+            position: "absolute",
+            bottom: "1rem",
+            right: "0.8rem",
+          }}
+        />
+      ),
+      placeholder: "Create a new helper link",
       onClick: () => navigate("/hint/create"),
     },
   ];
diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css
index 492c145a..287e6de3 100644
--- a/frontend/src/styles/variables.css
+++ b/frontend/src/styles/variables.css
@@ -27,6 +27,12 @@
     --dark-background: #121212;
     --light-surface: #f5f5f5;
     --dark-surface: #1e1e1e;
+    --gray-50: #fbfbfb;
+    --gray-100: #f8f8f8;
+    --gray-200: #C6C6C7;
+    --gray-250: #F3F3F3;
+    --blue-50: #E2EBFF;
+    --blue-300: #A8C1FF;
   
     /* Custom label tag component */
     --label-orange-bg: #fff3e0;