beautified Help page

Author: anserwaseem

src/common/HelpCard.tsx

@@ -2,12 +2,23 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
 import Typography from "@mui/material/Typography";
+import { homeBackgroundColor } from "../consts/Colors";
 import { HelpCardProps } from "./props/HelpCardProps";
 
 export const HelpCard = (props: HelpCardProps) => {
   return (
-    <Card>
-      <CardContent>
+    <Card
+      sx={{
+        backgroundColor: homeBackgroundColor,
+      }}
+    >
+      <CardContent
+        sx={{
+          borderRadius: "50px !important",
+          borderBottom: "11px solid #e0e0e0",
+          backgroundColor: "white",
+        }}
+      >
         <Typography variant="body2" color="text.secondary" fontSize="1rem">
           {props.description}
         </Typography>

src/pages/Help.tsx

@@ -9,6 +9,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { HelpHeaders } from "../enums/HelpHeaders";
 import { HelpDetails } from "../enums/HelpDetails";
 import { HelpCard } from "../common/HelpCard";
+import { homeBackgroundColor } from "../consts/Colors";
 
 const videoSrc =
   "https://github.com/anserwaseem/automadeasy-videos/raw/main/help/";
@@ -31,6 +32,20 @@ export const Help = () => {
           key={header}
           expanded={expanded === header}
           onChange={handleChange(header)}
+          sx={{
+            backgroundColor: homeBackgroundColor,
+            boxShadow: "0px 0px 10px 0px rgba(0.5,0,0,0.1)",
+            borderRadius: "50px !important",
+            borderBottom: "11px solid #e0e0e0",
+            marginTop: "0.25rem",
+            "&.MuiAccordion-root:before": {
+              backgroundColor: "white",
+            },
+            "&.MuiPaper-root .MuiCard-root": {
+              borderRadius: "50px !important",
+              borderBottom: "11px solid #e0e0e0",
+            },
+          }}
         >
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}