updated stats card UI

Author: MandeepPaul

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;