@ammarkhalidfarooq/dashboard-package 0.2.3 → 0.2.5

package/dist/index.cjs.js

@@ -744,6 +744,508 @@ var DisplayCard = function DisplayCard(_ref) {
   });
 };
 
+var CardWrapper = function CardWrapper(_ref) {
+  var title = _ref.title,
+    children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsx(material.Card, {
+    sx: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      height: "100%"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
+      sx: {
+        p: 3
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        variant: "subtitle2",
+        sx: {
+          color: "#000000ff",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          mb: 3,
+          textAlign: "left"
+        },
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        children: children
+      })]
+    })
+  });
+};
+var LandingPagesCard = function LandingPagesCard() {
+  var data = [{
+    page: "/zakat",
+    users: "612 users",
+    cvr: "1.3% CVR",
+    color: "#2E7D32"
+  }, {
+    page: "/ramadan",
+    users: "488 users",
+    cvr: "1.1% CVR",
+    color: "#2E7D32"
+  }, {
+    page: "/donate",
+    users: "421 users",
+    cvr: "0.7% CVR",
+    color: "#ED6C02"
+  }, {
+    page: "/campaigns",
+    users: "380 users",
+    cvr: "0.5% CVR",
+    color: "#ED6C02"
+  }, {
+    page: "/sadaqah",
+    users: "290 users",
+    cvr: "0.9% CVR",
+    color: "#2E7D32"
+  }];
+  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
+    title: "Top Landing Pages",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 500,
+            color: "#333"
+          },
+          children: item.page
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: "flex",
+            gap: 2,
+            alignItems: "center"
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.users
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "body2",
+            sx: {
+              color: item.color,
+              fontWeight: 600,
+              minWidth: "70px",
+              textAlign: "right"
+            },
+            children: item.cvr
+          })]
+        })]
+      }, index);
+    })
+  });
+};
+var KeywordsCard = function KeywordsCard() {
+  var data = [{
+    keyword: "zakat calculator",
+    volume: "320",
+    rank: "#3",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    keyword: "donate to ramadan",
+    volume: "214",
+    rank: "#5",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    keyword: "islamic charity uk",
+    volume: "198",
+    rank: "#11",
+    color: "#FFF3E0",
+    textColor: "#ED6C02"
+  }, {
+    keyword: "madinah fundraising",
+    volume: "176",
+    rank: "#1",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    keyword: "online sadaqah",
+    volume: "142",
+    rank: "#8",
+    color: "#FFF3E0",
+    textColor: "#ED6C02"
+  }];
+  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
+    title: "Top Keywords",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 500,
+            color: "#333"
+          },
+          children: item.keyword
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: "flex",
+            gap: 2,
+            alignItems: "center"
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.volume
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              bgcolor: item.color,
+              color: item.textColor,
+              px: 1,
+              py: 0.2,
+              borderRadius: 1,
+              fontSize: "12px",
+              fontWeight: 600,
+              minWidth: "30px",
+              textAlign: "center"
+            },
+            children: item.rank
+          })]
+        })]
+      }, index);
+    })
+  });
+};
+var GeographyCard = function GeographyCard() {
+  var data = [{
+    code: "GB",
+    country: "United Kingdom",
+    percentage: 60
+  }, {
+    code: "US",
+    country: "United States",
+    percentage: 14
+  }, {
+    code: "AU",
+    country: "Australia",
+    percentage: 8
+  }, {
+    code: "CA",
+    country: "Canada",
+    percentage: 6
+  }, {
+    code: "AE",
+    country: "UAE",
+    percentage: 4
+  }];
+  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
+    title: "Geography Insights",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 600,
+            color: "#606062",
+            minWidth: "25px"
+          },
+          children: item.code
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 500,
+            color: "#333",
+            minWidth: "120px",
+            textAlign: "left"
+          },
+          children: item.country
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+          sx: {
+            flexGrow: 1,
+            mx: 2
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
+            variant: "determinate",
+            value: item.percentage,
+            sx: {
+              height: 6,
+              borderRadius: 3,
+              bgcolor: "#F0F0F0",
+              "& .MuiLinearProgress-bar": {
+                bgcolor: "#3498DB",
+                borderRadius: 3
+              }
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 600,
+            color: "#333",
+            minWidth: "35px",
+            textAlign: "right"
+          },
+          children: [item.percentage, "%"]
+        })]
+      }, index);
+    })
+  });
+};
+var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
+  var data = [{
+    name: "Ramadan Week 3 Appeal",
+    raised: "$1,210 raised",
+    donors: "18 donors",
+    badge: "4.1% CVR",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    name: "Zakat Due Reminder",
+    raised: "$740 raised",
+    donors: "8 donors",
+    badge: "3.2% CVR",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    name: "Last 10 Nights Giving",
+    raised: "$265 raised",
+    donors: "3 donors",
+    badge: "1.8% CVR",
+    color: "#FFF3E0",
+    textColor: "#ED6C02"
+  }];
+  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
+    title: "Top Campaigns - Total Raised",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 600,
+            color: "#333",
+            textAlign: "left"
+          },
+          children: item.name
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.raised
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.donors
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              bgcolor: item.color,
+              color: item.textColor,
+              px: 1,
+              py: 0.2,
+              borderRadius: 1,
+              fontSize: "11px",
+              fontWeight: 600
+            },
+            children: item.badge
+          })]
+        })]
+      }, index);
+    })
+  });
+};
+var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
+  var data = [{
+    name: "Ramadan Week 3 Appeal",
+    ctr: "11.2% CTR",
+    clicks: "480 clicks",
+    badge: "34.8% OR",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    name: "Last 10 Nights Giving",
+    ctr: "9.8% CTR",
+    clicks: "410 clicks",
+    badge: "38.1% OR",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    name: "Zakat Due Reminder",
+    ctr: "6.4% CTR",
+    clicks: "314 clicks",
+    badge: "31.4% OR",
+    color: "#FFF3E0",
+    textColor: "#ED6C02"
+  }];
+  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
+    title: "Top Campaigns - CTR",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 600,
+            color: "#333",
+            textAlign: "left"
+          },
+          children: item.name
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.ctr
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.clicks
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              bgcolor: item.color,
+              color: item.textColor,
+              px: 1,
+              py: 0.2,
+              borderRadius: 1,
+              fontSize: "11px",
+              fontWeight: 600
+            },
+            children: item.badge
+          })]
+        })]
+      }, index);
+    })
+  });
+};
+var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
+  var data = [{
+    name: "Ramadan Week 3 Appeal",
+    cvr: "4.1% CVR",
+    raised: "$1,210 raised",
+    badge: "$2.52 RPC",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    name: "Zakat Due Reminder",
+    cvr: "3.2% CVR",
+    raised: "$740 raised",
+    badge: "$2.36 RPC",
+    color: "#E8F5E9",
+    textColor: "#2E7D32"
+  }, {
+    name: "Last 10 Nights Giving",
+    cvr: "1.8% CVR",
+    raised: "$265 raised",
+    badge: "$0.65 RPC",
+    color: "#FFF3E0",
+    textColor: "#ED6C02"
+  }];
+  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
+    title: "Top Campaigns - Conv. Rate",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 600,
+            color: "#333",
+            textAlign: "left"
+          },
+          children: item.name
+        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.cvr
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: "#606062",
+              fontWeight: 500
+            },
+            children: item.raised
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              bgcolor: item.color,
+              color: item.textColor,
+              px: 1,
+              py: 0.2,
+              borderRadius: 1,
+              fontSize: "11px",
+              fontWeight: 600
+            },
+            children: item.badge
+          })]
+        })]
+      }, index);
+    })
+  });
+};
+
 var OrganicSection = function OrganicSection(_ref) {
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
@@ -770,9 +1272,9 @@ var OrganicSection = function OrganicSection(_ref) {
     categories: categories
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: ["            ", /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    children: [" ", /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
-        display: 'flex',
+        display: "flex",
         gap: 2,
         mb: 5
       },
@@ -839,6 +1341,177 @@ var OrganicSection = function OrganicSection(_ref) {
         type: "donut",
         metric: "Revenue"
       })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 4
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(LandingPagesCard, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(KeywordsCard, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(GeographyCard, {})
+      })]
+    })]
+  });
+};
+
+var EmailSection = function EmailSection() {
+  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  var dailyPerformance = {
+    label: "Clicks & Unique Clicks Trend",
+    series: [{
+      name: "Clicks",
+      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
+    }, {
+      name: "Unique Clicks",
+      data: [800, 950, 700, 1100, 900, 1200, 1300]
+    }],
+    categories: categories
+  };
+  var spendAllocation = {
+    label: "Bounce Rate Trend",
+    data: [20, 25, 30, 35, 40, 45, 50],
+    categories: categories
+  };
+  var roasTrend = {
+    label: "Open Rate Trend",
+    data: [20, 25, 30, 35, 40, 45, 50],
+    categories: categories
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        display: "flex",
+        gap: 2,
+        mb: 2
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "Open Rate",
+        value: "32%",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "Bounce Rate",
+        value: "1.8%",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "Clicks",
+        value: "1,204",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "Unique Clicks",
+        value: "987",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "CTR",
+        value: "4.8%",
+        sx: {
+          flex: 1
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        display: "flex",
+        gap: 2
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "Donations",
+        value: "29",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "CONV.Rate",
+        value: "2.9%",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "RPC",
+        value: "$1.84",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "TOTAL RAISED (EMAIL)",
+        value: "$2,215",
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+        title: "AVG DONATION",
+        value: "$76.4",
+        sx: {
+          flex: 1
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 4
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
+        item: roasTrend,
+        index: 2,
+        md: 4,
+        type: "area",
+        metric: "ROAS",
+        isPrimary: true
+      }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
+        item: dailyPerformance,
+        index: 0,
+        md: 4,
+        type: "bar",
+        metric: "Revenue"
+      }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
+        item: spendAllocation,
+        index: 1,
+        md: 4,
+        type: "area",
+        metric: "Revenue"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 4
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsRaisedCard, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsCTRCard, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsConvRateCard, {})
+      })]
     })]
   });
 };
@@ -942,7 +1615,7 @@ var NewOverview = function NewOverview(_ref) {
   }) : categories;
   var primaryCharts = [{
     label: "Total Revenue",
-    value: totalRevData.length > 0 ? "$".concat(totalRevTotal.toLocaleString()) : typeof (apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue) === 'string' ? apiData.totalRevenue : "$9,200.00",
+    value: totalRevData.length > 0 ? "$".concat(totalRevTotal.toLocaleString()) : typeof (apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue) === "string" ? apiData.totalRevenue : "$9,200.00",
     subValue: "Total Donations: ".concat((apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations) || 215),
     data: totalRevValues,
     categories: totalRevCategories,
@@ -1041,7 +1714,8 @@ var NewOverview = function NewOverview(_ref) {
         sx: {
           fontWeight: "bold",
           color: "primary.main",
-          mb: 4
+          mb: 2,
+          mt: 2
         },
         children: "Overview"
       }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
@@ -1089,9 +1763,9 @@ var NewOverview = function NewOverview(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsxs(React.Suspense, {
       fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
           py: 10
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
@@ -1117,7 +1791,7 @@ var NewOverview = function NewOverview(_ref) {
         sx: {
           p: 2
         },
-        children: "Email Section Content (Coming Soon)"
+        children: /*#__PURE__*/jsxRuntime.jsx(EmailSection, {})
       })]
     })]
   });
@@ -1189,7 +1863,8 @@ var PerformanceSection = function PerformanceSection(_ref) {
         sx: {
           fontWeight: "bold",
           color: "primary.main",
-          mb: 4
+          mb: 2,
+          mt: 2
         },
         children: "Performance"
       })
@@ -1491,7 +2166,8 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
         sx: {
           fontWeight: "bold",
           color: "primary.main",
-          mb: 4
+          mb: 2,
+          mt: 2
         },
         children: "Recurring revenue"
       })
@@ -2103,7 +2779,8 @@ var DonorBehavior = function DonorBehavior() {
         sx: {
           fontWeight: "bold",
           color: "primary.main",
-          mb: 4
+          mb: 2,
+          mt: 2
         },
         children: "Donor Behavior"
       })
@@ -2799,7 +3476,8 @@ var RecurringPlans = function RecurringPlans(_ref) {
         sx: {
           fontWeight: "bold",
           color: "primary.main",
-          mb: 4
+          mb: 2,
+          mt: 2
         },
         children: "Recurring Plans"
       })
@@ -5154,7 +5832,8 @@ var UpdateEmails = function UpdateEmails() {
         sx: {
           fontWeight: "bold",
           color: "primary.main",
-          mb: 4
+          mb: 2,
+          mt: 2
         },
         children: "Update Emails"
       })