updated menudropdown styles

Neo-Zenith · Jan 20, 2024 · 2fb9138 · 2fb9138
1 parent ae30ac4
commit 2fb9138
Showing 2 changed files with 12 additions and 14 deletions.
diff --git 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
@@ -8,7 +8,7 @@
 
 body {
 	font-family: Arial, sans-serif;
-	background-color: #160c28;
+	background-color: var(--color-primary);
 	color: #efcb68;
 	margin: 0;
 }