diff --git a/app/components/ContextMenu/MenuItem.js b/app/components/ContextMenu/MenuItem.js index c46e25f20..a1330d2f7 100644 --- a/app/components/ContextMenu/MenuItem.js +++ b/app/components/ContextMenu/MenuItem.js @@ -13,6 +13,7 @@ type Props = {| href?: string, target?: "_blank", as?: string | React.ComponentType<*>, + hide?: () => void, |}; const MenuItem = ({ @@ -21,16 +22,34 @@ const MenuItem = ({ selected, disabled, as, + hide, ...rest }: Props) => { + const handleClick = React.useCallback( + (ev) => { + if (onClick) { + onClick(ev); + } + if (hide) { + hide(); + } + }, + [hide, onClick] + ); + return ( {(props) => ( - + {selected !== undefined && ( <> {selected ? : } diff --git a/app/components/ContextMenu/Template.js b/app/components/ContextMenu/Template.js index d1ab6b700..697dabc50 100644 --- a/app/components/ContextMenu/Template.js +++ b/app/components/ContextMenu/Template.js @@ -59,7 +59,8 @@ type Props = {| const Disclosure = styled(ExpandedIcon)` transform: rotate(270deg); - justify-self: flex-end; + position: absolute; + right: 8px; `; const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => { diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js index 319192a09..9085fd6a9 100644 --- a/app/menus/AccountMenu.js +++ b/app/menus/AccountMenu.js @@ -19,6 +19,7 @@ import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem"; import Separator from "components/ContextMenu/Separator"; import Flex from "components/Flex"; import Modal from "components/Modal"; +import usePrevious from "hooks/usePrevious"; import useStores from "hooks/useStores"; type Props = {| @@ -74,12 +75,19 @@ function AccountMenu(props: Props) { placement: "bottom-start", modal: true, }); - const { auth } = useStores(); + const { auth, ui } = useStores(); + const previousTheme = usePrevious(ui.theme); const { t } = useTranslation(); const [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState( false ); + React.useEffect(() => { + if (ui.theme !== previousTheme) { + menu.hide(); + } + }, [menu, ui.theme, previousTheme]); + return ( <>