Add files via upload

src/componants/account-page/accountmenu-section/accountmenu-close-buttons/AccountMenuCloseBtn.jsx

@@ -0,0 +1,25 @@
+import { useDispatch } from "react-redux";
+import { updateGlobalState } from "src/Features/globalSlice";
+import SvgIcon from "../../../Shared/MiniComponents/SvgIcon";
+import s from "./AccountMenuCloseBtn.module.scss";
+
+const AccountMenuCloseBtn = () => {
+  const dispatch = useDispatch();
+
+  function closeMenu() {
+    dispatch(updateGlobalState({ key: "isProfileMenuActive", value: false }));
+    dispatch(updateGlobalState({ key: "isOverlayActive", value: false }));
+  }
+
+  return (
+    <button
+      type="button"
+      className={s.closeBtn}
+      onClick={closeMenu}
+      aria-label="Close menu"
+    >
+      <SvgIcon name="xMark" />
+    </button>
+  );
+};
+export default AccountMenuCloseBtn;

src/componants/account-page/accountmenu-section/accountmenu-close-buttons/AccountMenuCloseBtn.module.scss

@@ -0,0 +1,36 @@
+
+.closeBtn {
+  -webkit-tap-highlight-color: transparent;
+  position: absolute;
+  right: 10px;
+  top: 14px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 4px 5px;
+  border-radius: 3px;
+  outline: dashed 2px transparent;
+  transition: outline-color .2s;
+
+  &:focus {
+    outline-color: var(--orange-degree2);
+  }
+}
+
+.closeBtn:hover>svg {
+  fill: var(--brown);
+}
+
+.closeBtn>svg {
+  fill: var(--black);
+  width: 22px;
+  height: 22px;
+  transition: fill .1s;
+}
+
+// Arabic styles
+[lang=ar] .closeBtn {
+  right: auto;
+  left: 10px;
+}