Refactor out LogoutButton and match style of other header buttons

packages/gui/src/components/app/AppStatusHeader.tsx

@@ -1,18 +1,17 @@
-import { Color, Flex, useMode, Mode, useDarkMode, useAuth, Tooltip } from '@chia-network/core';
+import { Color, Flex, useMode, Mode, useDarkMode } from '@chia-network/core';
 import { WalletConnections, WalletStatus, WalletReceiveAddressField } from '@chia-network/wallets';
 import { Trans } from '@lingui/macro';
-import { Logout as LogoutIcon } from '@mui/icons-material';
-import { Box, ButtonGroup, Button, Popover, PopoverProps, IconButton } from '@mui/material';
+import { Box, ButtonGroup, Button, Popover, PopoverProps } from '@mui/material';
 import { useTheme, styled, alpha } from '@mui/material/styles';
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import Connections from '../fullNode/FullNodeConnections';
 import FullNodeStateIndicator from '../fullNode/FullNodeStateIndicator';
 import NotificationsDropdown from '../notification/NotificationsDropdown';
 import WalletConnectDropdown from '../walletConnect/WalletConnectDropdown';
 
 import AppTestnetIndicator from './AppTestnetIndicator';
+import LogoutButton from './LogoutButton';
 
 const StyledPopover = styled((props: PopoverProps) => <Popover {...props} />)(({ theme }) => ({
   '& .MuiPopover-paper': {
@@ -47,6 +46,9 @@ export default function AppStatusHeader() {
   const theme = useTheme();
   const { isDarkMode } = useDarkMode();
   const borderColor = (theme.palette as any).border[isDarkMode ? 'dark' : 'main'];
+  const ButtonGroupStyle = {
+    minHeight: '42px',
+  };
   const ButtonStyle = {
     paddingTop: '3px',
     paddingBottom: 0,
@@ -91,8 +93,6 @@ export default function AppStatusHeader() {
   };
 
   const [mode] = useMode();
-  const navigate = useNavigate();
-  const { logOut } = useAuth();
 
   const [anchorElFN, setAnchorElFN] = useState<HTMLButtonElement | null>(null);
   const [anchorElW, setAnchorElW] = useState<HTMLButtonElement | null>(null);
@@ -113,18 +113,12 @@ export default function AppStatusHeader() {
     setAnchorElW(null);
   };
 
-  async function handleLogout() {
-    await logOut();
-
-    navigate('/');
-  }
-
   return (
     <Flex flexGrow={1} gap={2} flexWrap="wrap" alignItems="center">
       <AppTestnetIndicator />
       <WalletReceiveAddressField variant="outlined" size="small" fullWidth isDarkMode={isDarkMode} />
       <Flex flexGrow={1} gap={2} alignItems="center" justifyContent="space-between">
-        <ButtonGroup variant="outlined" color="secondary" size="small">
+        <ButtonGroup variant="outlined" color="secondary" size="small" sx={ButtonGroupStyle}>
           {mode === Mode.FARMING && (
             <>
               <Button onClick={handleClickFN} aria-describedby="fullnode-connections" sx={ButtonStyle}>
@@ -179,11 +173,7 @@ export default function AppStatusHeader() {
         <Flex gap={0.5} alignItems="center">
           <WalletConnectDropdown />
           <NotificationsDropdown />
-          <Tooltip title={<Trans>Log Out</Trans>}>
-            <IconButton onClick={handleLogout} data-testid="AppStatusHeader-log-out">
-              <LogoutIcon />
-            </IconButton>
-          </Tooltip>
+          <LogoutButton />
         </Flex>
       </Flex>
     </Flex>

packages/gui/src/components/app/AppTestnetIndicator.tsx

@@ -53,6 +53,7 @@ export default function AppTestnetIndicator() {
         sx={{
           ...BorderStyle,
           backgroundColor: theme.palette.background.default,
+          minHeight: '42px',
           '&:hover': { backgroundColor: theme.palette.background.default, border: `1px solid ${borderColor}` },
         }}
         disableRipple

packages/gui/src/components/app/LogoutButton.tsx

@@ -0,0 +1,38 @@
+import { Tooltip, useAuth } from '@chia-network/core';
+import { Trans } from '@lingui/macro';
+import { Logout as LogoutIcon } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function LogoutButton() {
+  const navigate = useNavigate();
+  const { logOut } = useAuth();
+  const ButtonStyle = {
+    minWidth: 0,
+    width: '40px',
+    minHeight: '40px',
+    borderRadius: '8px',
+  };
+
+  const handleLogout = useCallback(async () => {
+    await logOut();
+
+    navigate('/');
+  }, [logOut, navigate]);
+
+  return (
+    <Tooltip title={<Trans>Log Out</Trans>}>
+      <Button
+        variant="text"
+        onClick={handleLogout}
+        color="secondary"
+        size="small"
+        data-testid="AppStatusHeader-log-out"
+        sx={ButtonStyle}
+      >
+        <LogoutIcon color="info" />
+      </Button>
+    </Tooltip>
+  );
+}

packages/gui/src/components/notification/NotificationsDropdown.tsx

@@ -10,9 +10,10 @@ import NotificationsMenu from './NotificationsMenu';
 
 const buttonStyle = (theme) => ({
   minWidth: 0,
-  borderRadius: 2,
+  borderRadius: '8px',
   borderColor: theme.palette.mode === 'dark' ? 'border.dark' : 'border.main',
-  height: '42px',
+  width: '40px',
+  minHeight: '40px',
   '&:hover': {
     borderColor: theme.palette.mode === 'dark' ? 'border.dark' : 'border.main',
   },

packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx

@@ -13,8 +13,9 @@ export default function WalletConnectDropdown() {
 
   const ButtonStyle = {
     minWidth: 0,
-    height: '42px',
-    borderRadius: 2,
+    width: '40px',
+    minHeight: '40px',
+    borderRadius: '8px',
   };
 
   const color = enabled && !isLoading && pairs.get().length > 0 ? 'primary' : 'info';