remove unnecessary code & enhance gray color over the app

src/layouts/app/HeaderMenuDrawer.tsx

@@ -5,6 +5,7 @@ import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
 import { useState } from "react";
 import { useAppSelector } from "redux/hooks";
+import { componentBackground, darkComponentBackground } from "ThemeConstants";
 import useHeaderMenu from "./hooks/useHeaderMenu";
 
 const {useBreakpoint} = Grid;
@@ -31,7 +32,6 @@ export default function HeaderMenuDrawer() {
   });
 
   const actionButtonStyle: React.CSSProperties = {
-    color: themeName === "dark" ? "white" : "#1f2937",
     height: 32, // isMobile ? 44 : 40,
     minWidth: 32, //isMobile ? 44 : "auto",
     width: 32, //isMobile ? 44 : "auto",
@@ -40,6 +40,7 @@ export default function HeaderMenuDrawer() {
     alignItems: "center",
     justifyContent: "center",
     gap: isMobile ? 0 : 8,
+    backgroundColor: "none",
   };
 
   return (
@@ -52,7 +53,7 @@ export default function HeaderMenuDrawer() {
           zIndex: 999,
           [isRTL ? "left" : "right"]: 0,
           top: "30%",
-          backgroundColor: themeName === "dark" ? "#111827" : "#FFF",
+          backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
           [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
           [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
           border: