update gutter for Menu dropdown

.eslintrc.js

@@ -7,7 +7,7 @@ const RESTRICTED_MODULES = {
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
     {
       name: '@chakra-ui/react',
-      importNames: [ 'Popover', 'useToast' ],
+      importNames: [ 'Popover', 'Menu', 'useToast' ],
       message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
     },
     {

ui/pages/Marketplace.tsx

@@ -1,4 +1,4 @@
-import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
+import { Box, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
@@ -14,6 +14,7 @@ import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import { SORT_OPTIONS } from 'ui/marketplace/utils';
+import Menu from 'ui/shared/chakra/Menu';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
 import type { IconName } from 'ui/shared/IconSvg';

ui/shared/AccountActionsMenu/AccountActionsMenu.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
+import { Box, IconButton, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -9,6 +9,7 @@ import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 import MetadataUpdateMenuItem from './items/MetadataUpdateMenuItem';

ui/shared/chakra/Menu.tsx

@@ -0,0 +1,10 @@
+import type { MenuProps } from '@chakra-ui/react';
+// eslint-disable-next-line no-restricted-imports
+import { Menu as MenuBase } from '@chakra-ui/react';
+import React from 'react';
+
+const Menu = (props: MenuProps) => {
+  return <MenuBase gutter={ 4 } { ...props }/>;
+};
+
+export default React.memo(Menu);

ui/shared/chart/ChartWidget.tsx

@@ -4,7 +4,6 @@ import {
   chakra,
   Flex,
   IconButton, Link,
-  Menu,
   MenuButton,
   MenuItem,
   MenuList,
@@ -22,6 +21,7 @@ import type { TimeChartItem } from './types';
 import dayjs from 'lib/date/dayjs';
 import { apos } from 'lib/html-entities';
 import saveAsCSV from 'lib/saveAsCSV';
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 import ChartWidgetGraph from './ChartWidgetGraph';

ui/shared/gas/GasInfoTooltip.tsx

@@ -33,7 +33,6 @@ interface Props {
   placement?: PlacementWithLogical;
 }
 
-const POPOVER_OFFSET: [ number, number ] = [ 0, 10 ];
 const feature = config.features.gasTracker;
 
 const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => {
@@ -50,7 +49,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr
       3 : 2;
 
   return (
-    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen } placement={ placement }>
+    <Popover trigger="hover" isLazy isOpen={ isOpen } placement={ placement }>
       <PopoverTrigger>
         { children }
       </PopoverTrigger>

ui/stats/StatsDropdownMenu.tsx

@@ -1,6 +1,7 @@
-import { Box, Button, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react';
+import { Box, Button, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
+import Menu from 'ui/shared/chakra/Menu';
 import IconSvg from 'ui/shared/IconSvg';
 
 type Props<T extends string> = {