Fix/379 button design in the home page

frontend/src/components/HomePageComponents/CreateActivityButton/CreateActivityButton.jsx

@@ -1,33 +1,44 @@
-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: "var(--background-color)",
+        width: "100%",
+        border: "1px 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: "1px solid var(--light-border-color)",
+          backgroundColor: "var(--light-gray)",
+        },
       }}
     >
+      {skeletonType}
       {placeholder}
     </Button>
   );
 };
 
 CreateActivityButton.propTypes = {
+  skeletonType: PropTypes.node,
   placeholder: PropTypes.string,
-  onButtonClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default CreateActivityButton;

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;

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: "var(--light-gray)" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={20}
+        sx={{ bgcolor: "var(--light-gray)" }}
+        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;

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: "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/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: "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/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;
+}

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>
   );
 };