improvement: better popover menu styles

frontend/src/components/MessageOptionsMenu/index.js

@@ -7,7 +7,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import ConfirmationModal from "../ConfirmationModal";
-import { Popover } from "@material-ui/core";
+import { Menu } from "@material-ui/core";
 
 const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
@@ -44,8 +44,9 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 			>
 				{i18n.t("messageOptionsMenu.confirmationModal.message")}
 			</ConfirmationModal>
-			<Popover
+			<Menu
 				anchorEl={anchorEl}
+				getContentAnchorEl={null}
 				anchorOrigin={{
 					vertical: "bottom",
 					horizontal: "right",
@@ -61,7 +62,7 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 					{i18n.t("messageOptionsMenu.delete")}
 				</MenuItem>
 				<MenuItem disabled> {i18n.t("messageOptionsMenu.reply")}</MenuItem>
-			</Popover>
+			</Menu>
 		</>
 	);
 };

frontend/src/components/TicketOptionsMenu/index.js

@@ -39,8 +39,9 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 			<Menu
 				id="menu-appbar"
 				anchorEl={anchorEl}
+				getContentAnchorEl={null}
 				anchorOrigin={{
-					vertical: "top",
+					vertical: "bottom",
 					horizontal: "right",
 				}}
 				keepMounted

frontend/src/components/_layout/index.js

@@ -2,7 +2,6 @@ import React, { useState, useContext, useEffect } from "react";
 import clsx from "clsx";
 
 import {
-	Popover,
 	makeStyles,
 	Drawer,
 	AppBar,
@@ -12,6 +11,7 @@ import {
 	Divider,
 	MenuItem,
 	IconButton,
+	Menu,
 } from "@material-ui/core";
 
 import MenuIcon from "@material-ui/icons/Menu";
@@ -215,9 +215,10 @@ const LoggedInLayout = ({ appTitle, children }) => {
 						>
 							<AccountCircle />
 						</IconButton>
-						<Popover
+						<Menu
 							id="menu-appbar"
 							anchorEl={anchorEl}
+							getContentAnchorEl={null}
 							anchorOrigin={{
 								vertical: "bottom",
 								horizontal: "right",
@@ -235,7 +236,7 @@ const LoggedInLayout = ({ appTitle, children }) => {
 							<MenuItem onClick={handleLogout}>
 								{i18n.t("mainDrawer.appBar.user.logout")}
 							</MenuItem>
-						</Popover>
+						</Menu>
 					</div>
 				</Toolbar>
 			</AppBar>