fix network logo in mobile header

ui/snippets/header/HeaderMobile.tsx

@@ -11,10 +11,6 @@ import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
-const LOGO_IMAGE_PROPS = {
-  margin: '0 auto',
-};
-
 type Props = {
   hideSearchBar?: boolean;
   renderSearchBar?: () => React.ReactNode;
@@ -45,13 +41,12 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         bgColor={ bgColor }
         width="100%"
         alignItems="center"
-        justifyContent="space-between"
         transitionProperty="box-shadow"
         transitionDuration="slow"
         boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' }
       >
         <Burger/>
-        <NetworkLogo imageProps={ LOGO_IMAGE_PROPS }/>
+        <NetworkLogo flexGrow={ 1 } ml={ 2 }/>
         <Flex columnGap={ 2 }>
           { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
           { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }

ui/snippets/networkMenu/NetworkLogo.tsx

 import type { StyleProps } from '@chakra-ui/react';
-import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -11,6 +11,7 @@ interface Props {
   isCollapsed?: boolean;
   onClick?: (event: React.SyntheticEvent) => void;
   imageProps?: StyleProps;
+  className?: string;
 }
 
 const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: boolean; isSmall?: boolean; imageProps?: StyleProps }) => {
@@ -43,7 +44,7 @@ const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: bool
   );
 };
 
-const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
+const NetworkLogo = ({ isCollapsed, onClick, imageProps, className }: Props) => {
 
   const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default);
   const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default);
@@ -53,6 +54,7 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
 
   return (
     <Box
+      className={ className }
       as="a"
       href={ route({ pathname: '/' }) }
       width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
@@ -89,4 +91,4 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
   );
 };
 
-export default React.memo(NetworkLogo);
+export default React.memo(chakra(NetworkLogo));