From 19704e15ba42f8506eac34b7723f395f69fd9978 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 14 Jan 2022 21:02:35 -0800
Subject: [PATCH] fix: Pin icons different colored, closes #2939

---
 app/components/ContextMenu/MenuItem.tsx | 8 ++++++--
 app/components/MenuIconWrapper.ts       | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
index 16f44dca4..89538ed61 100644
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -16,7 +16,7 @@ type Props = {
   as?: string | React.ComponentType<any>;
   hide?: () => void;
   level?: number;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
 };
 
 const MenuItem = ({
@@ -73,7 +73,11 @@ const MenuItem = ({
               &nbsp;
             </>
           )}
-          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+          {icon && (
+            <MenuIconWrapper>
+              {React.cloneElement(icon, { color: "currentColor" })}
+            </MenuIconWrapper>
+          )}
           {children}
         </MenuAnchor>
       )}
diff --git a/app/components/MenuIconWrapper.ts b/app/components/MenuIconWrapper.ts
index a67cfb839..761cf833a 100644
--- a/app/components/MenuIconWrapper.ts
+++ b/app/components/MenuIconWrapper.ts
@@ -5,6 +5,7 @@ const MenuIconWrapper = styled.span`
   height: 24px;
   margin-right: 6px;
   margin-left: -4px;
+  color: ${({ theme }) => theme.textSecondary};
 `;
 
 export default MenuIconWrapper;