From 2fb913818809372abe319ac16d1ecf735357a31c Mon Sep 17 00:00:00 2001
From: Neo-Zenith <juin.lee@outlook.com>
Date: Sat, 20 Jan 2024 20:30:15 +0800
Subject: [PATCH] updated menudropdown styles

---
 .../components/MenuDropdown/MenuDropdown.jsx  | 24 +++++++++----------
 client/src/index.css                          |  2 +-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/src/components/MenuDropdown/MenuDropdown.jsx b/client/src/components/MenuDropdown/MenuDropdown.jsx
index 26f4fe6..554ce27 100644
--- a/client/src/components/MenuDropdown/MenuDropdown.jsx
+++ b/client/src/components/MenuDropdown/MenuDropdown.jsx
@@ -1,10 +1,11 @@
 import * as React from "react";
-import { styled, alpha } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { Typography } from "@mui/material";
+import { darken } from "@mui/material/styles";
 
 const StyledMenu = styled((props) => (
     <Menu
@@ -24,10 +25,8 @@ const StyledMenu = styled((props) => (
         borderRadius: 6,
         marginTop: theme.spacing(1),
         minWidth: 180,
-        color:
-            theme.palette.mode === "light"
-                ? "rgb(55, 65, 81)"
-                : theme.palette.grey[300],
+        backgroundColor: "var(--color-secondary)",
+        color: "var(--color-accent)",
         boxShadow:
             "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
         "& .MuiMenu-list": {
@@ -36,14 +35,7 @@ const StyledMenu = styled((props) => (
         "& .MuiMenuItem-root": {
             "& .MuiSvgIcon-root": {
                 fontSize: 18,
-                color: theme.palette.text.secondary,
-                marginRight: theme.spacing(1.5),
-            },
-            "&:active": {
-                backgroundColor: alpha(
-                    theme.palette.primary.main,
-                    theme.palette.action.selectedOpacity
-                ),
+                marginRight: "1.5rem",
             },
         },
     },
@@ -63,6 +55,12 @@ export default function MenuDropdown({ title, items, replaceTitle }) {
     return (
         <>
             <Button
+                sx={{
+                    backgroundColor: "var(--color-secondary)",
+                    "&:hover": {
+                        backgroundColor: darken("#0C7489", 0.1), // Adjust the factor (0.1) as needed
+                    },
+                }}
                 id="output-window-further-action-btn"
                 aria-controls={open ? "menu" : undefined}
                 aria-haspopup="true"
diff --git a/client/src/index.css b/client/src/index.css
index f96dc9a..9838e1f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -8,7 +8,7 @@
 
 body {
 	font-family: Arial, sans-serif;
-	background-color: #160c28;
+	background-color: var(--color-primary);
 	color: #efcb68;
 	margin: 0;
 }