From 49718f289460df56d3c6d4bcc9661bd9ad9e76dc Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 15 Jan 2022 16:21:39 -0800
Subject: [PATCH] fix: Submenus get stuck open, closes #2938

---
 app/actions/definitions/settings.tsx    | 3 ++-
 app/components/ContextMenu/MenuItem.tsx | 1 +
 app/components/ContextMenu/Template.tsx | 9 ++++-----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/actions/definitions/settings.tsx b/app/actions/definitions/settings.tsx
index 432872807..9372b1b0e 100644
--- a/app/actions/definitions/settings.tsx
+++ b/app/actions/definitions/settings.tsx
@@ -36,7 +36,8 @@ export const changeToSystemTheme = createAction({
 });
 
 export const changeTheme = createAction({
-  name: ({ t }) => t("Change theme"),
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Appearance") : t("Change theme"),
   placeholder: ({ t }) => t("Change theme to"),
   icon: () =>
     stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
index 89538ed61..bc707a5d3 100644
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -107,6 +107,7 @@ export const MenuAnchorCSS = css<{ level?: number; disabled?: boolean }>`
   font-size: 16px;
   cursor: default;
   user-select: none;
+  white-space: nowrap;
 
   svg:not(:last-child) {
     margin-right: 4px;
diff --git a/app/components/ContextMenu/Template.tsx b/app/components/ContextMenu/Template.tsx
index 0997f3fd8..9c10a490b 100644
--- a/app/components/ContextMenu/Template.tsx
+++ b/app/components/ContextMenu/Template.tsx
@@ -7,7 +7,7 @@ import {
   MenuButton,
   MenuItem as BaseMenuItem,
 } from "reakit/Menu";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
@@ -46,16 +46,15 @@ const Submenu = React.forwardRef(
     ref: React.LegacyRef<HTMLButtonElement>
   ) => {
     const { t } = useTranslation();
-    const menu = useMenuState({
-      modal: true,
-    });
+    const theme = useTheme();
+    const menu = useMenuState();
 
     return (
       <>
         <MenuButton ref={ref} {...menu} {...rest}>
           {(props) => (
             <MenuAnchor {...props}>
-              {title} <Disclosure color="currentColor" />
+              {title} <Disclosure color={theme.textTertiary} />
             </MenuAnchor>
           )}
         </MenuButton>