From 889186e510f115ceed504f1fcf07e75c78c7e125 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 26 Mar 2021 11:15:58 -0700
Subject: [PATCH] fix: Close appearance menu when selecting a theme fix:
 Position disclosure correctly when menu has submenu fix: More reliably close
 context menus

---
 app/components/ContextMenu/MenuItem.js | 21 ++++++++++++++++++++-
 app/components/ContextMenu/Template.js |  3 ++-
 app/menus/AccountMenu.js               | 10 +++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/components/ContextMenu/MenuItem.js b/app/components/ContextMenu/MenuItem.js
index c46e25f2..a1330d2f 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 (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
+      hide={hide}
       {...rest}
     >
       {(props) => (
-        <MenuAnchor as={onClick ? "button" : as} {...props}>
+        <MenuAnchor
+          {...props}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+        >
           {selected !== undefined && (
             <>
               {selected ? <CheckmarkIcon /> : <Spacer />}
diff --git a/app/components/ContextMenu/Template.js b/app/components/ContextMenu/Template.js
index d1ab6b70..697dabc5 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 319192a0..9085fd6a 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 (
     <>
       <Modal