From 72c4ec2f4a9388eb996ebbde7c4218ceb08399cd Mon Sep 17 00:00:00 2001
From: Dave Bauman <dbauman@expediagroup.com>
Date: Tue, 19 Apr 2022 22:03:42 -0400
Subject: [PATCH] fix: Fix misaligned icon in the icon button menu

---
 .../icon-button-menu/icon-button-menu.tsx     | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/icon-button-menu/icon-button-menu.tsx b/packages/frontend/src/components/icon-button-menu/icon-button-menu.tsx
index 83710becd..496c8cbbf 100644
--- a/packages/frontend/src/components/icon-button-menu/icon-button-menu.tsx
+++ b/packages/frontend/src/components/icon-button-menu/icon-button-menu.tsx
@@ -31,24 +31,18 @@ interface Props {
 
 const TooltipIcon = forwardRef(
   ({ bg, color, children, fontSize, icon, label, size, tooltip, variant, ...props }, ref) => {
-    if (bg !== undefined) {
-      return (
-        <Box ref={ref} {...props}>
-          <Tooltip label={tooltip} aria-label={label}>
-            <IconButton bg={bg} color={color} fontSize={fontSize} size={size} variant={variant} aria-label={label}>
-              {children}
-            </IconButton>
-          </Tooltip>
-        </Box>
-      );
-    }
-
     return (
       <Box ref={ref} {...props}>
         <Tooltip label={tooltip} aria-label={label}>
-          <IconButton color={color} fontSize={fontSize} size={size} variant={variant} aria-label={label}>
-            {children}
-          </IconButton>
+          <IconButton
+            icon={<Icon as={icon} aria-label={label} />}
+            color={color}
+            fontSize={fontSize}
+            size={size}
+            variant={variant}
+            aria-label={label}
+            bg={bg}
+          />
         </Tooltip>
       </Box>
     );
@@ -78,9 +72,7 @@ export const IconButtonMenu = ({
         size={size}
         tooltip={tooltip}
         variant={variant}
-      >
-        <Icon as={icon} aria-label={ariaLabel} />
-      </MenuButton>
+      />
       <MenuList zIndex="10">{children}</MenuList>
     </Menu>
   );