update ui for dashboard

src/components/LineChartCard/index.tsx

@@ -43,20 +43,20 @@ export default function LineChartCard() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<div
 					style={{
 						display: "flex",
 						alignItems: "center",
-						color: "#202020",
+						color: "#F2F2F2",
 					}}
 				>
 					<Typography
 						variant="h6"
 						align="left"
-						color="#202020"
+						color="#F2F2F2"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
@@ -70,7 +70,7 @@ export default function LineChartCard() {
 						sx={{
 							mt: 2,
 							mb: 2,
-							backgroundColor: "#FFFFFF",
+							backgroundColor: "#202020",
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
@@ -81,7 +81,7 @@ export default function LineChartCard() {
 							border: "1px solid #454545",
 
 							padding: "4px 8px",
-							color: "#FFFFFF",
+							color: "#F2F2F2",
 						}}
 					>
 						<Typography
@@ -90,13 +90,13 @@ export default function LineChartCard() {
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#202020",
+								color: "#F2F2F2",
 								p: "4px",
 							}}
 						>
 							Weekly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#202020" }} />
+						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 					</Box>
 				</div>
 

src/components/OptionsMenu/index.tsx

@@ -77,9 +77,12 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 					[`& .${dividerClasses.root}`]: {
 						margin: "4px -4px",
 					},
+					backgroundColor:"#202020"
 				}}
 			>
-				<MenuItem onClick={handleProfile}>Profile</MenuItem>
+				<MenuItem onClick={handleProfile} >
+					Profile
+				</MenuItem>
 				{/* <MenuItem onClick={handleClose}>My account</MenuItem>
 				<Divider />
 				<MenuItem onClick={handleClose}>Add another account</MenuItem>
@@ -99,7 +102,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 							e.stopPropagation();
 							setLogoutModal(true);
 						}}
-						sx={{color:"red"}}
+						sx={{ color: "red" }}
 					>
 						Logout
 					</ListItemText>

src/components/ResourcePieChart/index.tsx

@@ -32,14 +32,14 @@ export default function ResourcePieChart() {
 				flexGrow: 1,
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F2F2",
+				backgroundColor: "#202020",
 			}}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#202020"
+					color="#F2F2F2"
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
@@ -93,7 +93,7 @@ export default function ResourcePieChart() {
 										borderRadius: "50%",
 									}}
 								/>
-								<Typography variant="body2" color="#202020">
+								<Typography variant="body2" color="#F2F2F2">
 									{entry.title}
 								</Typography>
 							</Stack>

src/components/SessionsChart/index.tsx

@@ -12,7 +12,7 @@ export default function SessionsChart() {
 			sx={{
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F2F2",
+				backgroundColor: "#202020",
 				p: 2,
 			}}
 		>
@@ -20,7 +20,7 @@ export default function SessionsChart() {
 				<Typography
 					variant="h6"
 					align="left"
-					color="#202020"
+					color="#F2F2F2"
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
@@ -36,7 +36,7 @@ export default function SessionsChart() {
 					sx={{
 						mt: 2,
 						mb: 2,
-						backgroundColor: "#FFFFFF",
+						backgroundColor: "#202020",
 						fontSize: "14px",
 						lineHeight: "20px",
 						width: { xs: "100%" },
@@ -55,13 +55,13 @@ export default function SessionsChart() {
 							fontWeight: 500,
 							fontSize: "14px",
 							lineHeight: "24px",
-							color: "#202020",
+							color: "#F2F2F2",
 							p: "4px",
 						}}
 					>
 						Delhi NCR EV Station
 					</Typography>
-					<ArrowDropDownIcon sx={{ color: "#202020" }} />
+					<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 				</Box>
 
 				{/* Grid container for the four boxes */}
@@ -86,8 +86,8 @@ export default function SessionsChart() {
 								height: "84px",
 								borderRadius: "8px",
 								p: "12px 16px",
-								backgroundColor: "#FFFFFF",
+								backgroundColor: "#272727",
-								color: "#202020",
+								color: "#F2F2F2",
 							}}
 						>
 							<Typography

src/components/StatCard/index.tsx

@@ -18,13 +18,13 @@ export default function StatCard({ title, value }: StatCardProps) {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#202020"
+					color="#F2F2F2"
 					gutterBottom
 				>
 					{title}
@@ -32,7 +32,7 @@ export default function StatCard({ title, value }: StatCardProps) {
 				<Typography
 					component="h1"
 					variant="body1"
-					color="#202020"
+					color="#F2F2F2"
 					fontSize={30}
 					fontWeight={700}
 					gutterBottom

src/components/barChartCard/index.tsx

@@ -30,20 +30,20 @@ export default function RoundedBarChart() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<div
 					style={{
 						display: "flex",
 						alignItems: "center",
-						color: "#202020",
+						color: "#F2F2F2",
 					}}
 				>
 					<Typography
 						variant="h6"
 						align="left"
-						color="#202020"
+						color="#F2F2F2"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
@@ -57,7 +57,7 @@ export default function RoundedBarChart() {
 						sx={{
 							mt: 2,
 							mb: 2,
-							backgroundColor: "#FFFFFF",
+							backgroundColor: "#202020",
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
@@ -68,7 +68,7 @@ export default function RoundedBarChart() {
 							border: "1px solid #454545",
 
 							padding: "4px 8px",
-							color: "#202020",
+							color: "#F2F2F2",
 						}}
 					>
 						<Typography
@@ -77,13 +77,13 @@ export default function RoundedBarChart() {
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#202020",
+								color: "#F2F2F2",
 								p: "4px",
 							}}
 						>
 							Monthly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#202020" }} />
+						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 					</Box>
 				</div>
 				<BarChart