Merge pull request #398 from MandeepPaul/fix/379-button-design-in-the…

…-home-page

Fix/379 button design in the home page

frontend/src/scenes/dashboard/Dashboard.jsx

@@ -7,6 +7,8 @@ import CreateActivityButtonList from "./HomePageComponents/CreateActivityButtonL
 import DateDisplay from "./HomePageComponents/DateDisplay/DateDisplay";
 import StatisticCardList from "./HomePageComponents/StatisticCardsList/StatisticCardsList";
 import UserTitle from "./HomePageComponents/UserTitle/UserTitle";
+import BannerSkeleton from "./HomePageComponents/Skeletons/BannerSkeleton";
+import BaseSkeleton from "./HomePageComponents/Skeletons/BaseSkeleton";
 
 const mapMetricName = (guideType) => {
   switch (guideType) {
@@ -51,18 +53,22 @@ const Dashboard = ({ name }) => {
 
   const buttons = [
     {
+      skeletonType: <BaseSkeleton guideType="popup" />,
       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: <BaseSkeleton guideType="helperLink" />,
+      placeholder: "Create a new helper link",
+      onClick: () => navigate("/hint/create"),
+    },
   ];
+
   return (
     <div className={styles.container}>
       <div className={styles.top}>

frontend/src/scenes/dashboard/HomePageComponents/CreateActivityButton/ActivityButtonStyles.js

@@ -1,36 +1,22 @@
-
-  // 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
-        },
+export const activityButtonStyles = {
+  display: "flex",
+  fontWeight: 400,
+  backgroundColor: "var(--gray-50)",
+  width: "100%",
+  border: "1px solid var(--grey-border)",
+  borderRadius: "10px",
+  color: "var(--gray-400)",
+  padding: "1.3rem 3rem",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "box-shadow 0.3s ease",
+  textTransform: "none",
+  "&:hover": {
+    border: "1px solid var(--gray-250)",
+    backgroundColor: "var(--gray-100)",
+    ".childSkeleton": {
+      border: "1px solid var(--blue-300)",
     },
-    icon: { 
-        color: iconColor, 
-        fontSize: '2rem' }
-  };
-
+  },
+};

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

@@ -1,33 +1,25 @@
-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";
+import { activityButtonStyles } from "./ActivityButtonStyles";
 
+const CreateActivityButton = ({
+  placeholder = "",
+  skeletonType,
+  onClick = () => {},
+}) => {
   return (
-    <Button
-      variant="contained"
-      startIcon={icon}
-      onClick={onButtonClick}
-      sx={{
-        ...activityButtonStyles.button
-      }}
-    >
+    <Button variant="text" onClick={onClick} sx={activityButtonStyles}>
+      {skeletonType}
       {placeholder}
     </Button>
   );
 };
 
 CreateActivityButton.propTypes = {
+  skeletonType: PropTypes.node,
   placeholder: PropTypes.string,
-  onButtonClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default CreateActivityButton;

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

@@ -1,19 +1,14 @@
-import React from 'react';
-import CreateActivityButton from '../CreateActivityButton/CreateActivityButton';
-import styles from './CreateActivityButtonList.module.scss'
+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/scenes/dashboard/HomePageComponents/Skeletons/BannerSkeleton.jsx

@@ -0,0 +1,49 @@
+import { Skeleton } from "@mui/material";
+import styles from "./Skeleton.module.scss";
+
+const BannerSkeleton = () => {
+  const skeletonStyles = { bgcolor: "var(--gray-200)", borderRadius: "3.12px" };
+
+  return (
+    <div className={styles.bannerSkeletonContainer}>
+      <Skeleton
+        variant="rounded"
+        width={80}
+        height={10}
+        sx={{ bgcolor: "var(--gray-300", borderRadius: "3.12px" }}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={28}
+        sx={skeletonStyles}
+        animation={false}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={210}
+        height={20}
+        sx={skeletonStyles}
+        animation={false}
+      />
+
+      <Skeleton
+        className="childSkeleton"
+        sx={{
+          position: "absolute",
+          top: 20,
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          bgcolor: "var(--blue-50)",
+        }}
+        variant="rounded"
+        width={260}
+        height={20}
+        animation={false}
+      />
+    </div>
+  );
+};
+
+export default BannerSkeleton;

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

@@ -0,0 +1,37 @@
+import { Skeleton } from "@mui/material";
+import styles from "./Skeleton.module.scss";
+import { baseSkeletonStyles } from "./BaseSkeletonStyles";
+
+const BaseSkeleton = ({ guideType, items = 4 }) => {
+  const skeletonStyles = { bgcolor: "var(--gray-200)", borderRadius: "3.12px" };
+  const guideTypeStyles = baseSkeletonStyles[guideType] || {};
+
+  return (
+    <div className={styles.skeletonContainer}>
+      {[...Array(items)].map((_, index) => (
+        <Skeleton
+          key={index}
+          variant="rounded"
+          width={210}
+          height={18}
+          animation={false}
+          sx={skeletonStyles}
+        />
+      ))}
+
+      <Skeleton
+        className="childSkeleton"
+        variant="rounded"
+        width={guideTypeStyles.width || 100}
+        height={guideTypeStyles.height || 50}
+        animation={false}
+        sx={{
+          ...guideTypeStyles,
+          bgcolor: "var(--blue-50)",
+        }}
+      />
+    </div>
+  );
+};
+
+export default BaseSkeleton;

frontend/src/scenes/dashboard/HomePageComponents/Skeletons/BaseSkeletonStyles.js

@@ -0,0 +1,16 @@
+export const baseSkeletonStyles = {
+  popup: {
+    position: "absolute",
+    top: 25,
+    left: 30,
+    width: 80,
+    height: 35,
+  },
+  helperLink: {
+    position: "absolute",
+    bottom: "1.3rem",
+    right: "1rem",
+    width: 75,
+    height: 60,
+  },
+};

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

@@ -0,0 +1,20 @@
+.skeletonContainer {
+  position: relative;
+  width: 256;
+  height: 152;
+  background-color: white;
+  border-radius: 7.8px;
+  border: 1.23px solid var(--grey-border);
+  padding: 1.3rem 1rem;
+  display: flex;
+  justify-self: center;
+  flex-direction: column;
+  gap: 8px;
+  width: auto;
+  margin-bottom: 24px;
+}
+
+.bannerSkeletonContainer {
+  @extend .skeletonContainer;
+  padding-top: 40px;
+}

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

@@ -1,5 +1,5 @@
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
 import PropTypes from "prop-types";
 import React from "react";
 import styles from "./StatisticCards.module.scss";
@@ -12,7 +12,7 @@ const StatisticCard = ({ metricName, metricValue = 0, changeRate = 0 }) => {
 
   const getRateColor = () => {
     if (changeRate === 0) return "inherit";
-    return changeRate >= 0 ? "green" : "red";
+    return changeRate >= 0 ? "var(--green-400)" : "var(--red-500)";
   };
 
   return (
@@ -22,7 +22,7 @@ const StatisticCard = ({ metricName, metricValue = 0, changeRate = 0 }) => {
       <div className={styles.changeRate}>
         <span style={{ color: getRateColor() }} className={styles.change}>
           {changeRate !== 0 &&
-            (changeRate >= 0 ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />)}
+            (changeRate >= 0 ? <ArrowUpwardRoundedIcon  /> : <ArrowDownwardRoundedIcon />)}
           {getChangeRate()}
         </span>
         &nbsp;vs last month

frontend/src/scenes/dashboard/HomePageComponents/StatisticCards/StatisticCards.module.scss

@@ -2,7 +2,7 @@
 
 .statisticCard {
     border: 1px solid var(--light-gray);
-    border-radius: 12px;
+    border-radius: 10px;
     padding: 24px;
     gap:10px;
     display: flex;
@@ -13,12 +13,14 @@
 
     .metricName {
         font-size: var(--font-header);
-        font-weight: 600;
+        color: var(--gray-350);
+        font-weight: 400;
         line-height: 24px;
         margin-bottom: 13px;
     }
 
     .metricValue {
+        color: var(--gray-500);
         font-size: 36px;
         font-weight: 600;
         line-height: 44px;

frontend/src/styles/variables.css

@@ -33,6 +33,18 @@
   --dark-background: #121212;
   --light-surface: #f5f5f5;
   --dark-surface: #1e1e1e;
+  --gray-50: #fbfbfb;
+  --gray-100: #f8f8f8;
+  --gray-200: #f3f3f3;
+  --gray-250: #c6c6c7;
+  --gray-300: #d9d9d9;
+  --gray-350: #868c98;
+  --gray-400: #73787f;
+  --gray-500: #545454;
+  --blue-50: #e3ebff;
+  --blue-300: #95b3ff;
+  --green-400: #079455;
+  --red-500: #ef4444;
 
   /* Custom label tag component */
   --label-orange-bg: #fff3e0;