fix: Pin icons different colored, closes #2939

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>
       )}

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;