mobile burger fixes

theme/components/Drawer.ts

+import type { drawerAnatomy as parts } from '@chakra-ui/anatomy';
+import type { SystemStyleFunction, PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+
+const baseStyleOverlay: SystemStyleObject = {
+  bg: 'blackAlpha.800',
+  zIndex: 'overlay',
+};
+
+const baseStyleDialog: SystemStyleFunction = (props) => {
+  const { isFullHeight } = props;
+
+  return {
+    ...(isFullHeight && { height: '100vh' }),
+    zIndex: 'modal',
+    maxH: '100vh',
+    bg: mode('white', 'gray.900')(props),
+    color: 'inherit',
+    boxShadow: mode('lg', 'dark-lg')(props),
+  };
+};
+
+const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
+  overlay: baseStyleOverlay,
+  dialog: baseStyleDialog(props),
+});
+
+const Drawer = {
+  baseStyle,
+};
+
+export default Drawer;

theme/components/index.ts

 import Button from './Button';
 import Checkbox from './Checkbox';
+import Drawer from './Drawer';
 import Form from './Form';
 import Heading from './Heading';
 import Input from './Input';
@@ -18,6 +19,7 @@ import Tooltip from './Tooltip';
 const components = {
   Button,
   Checkbox,
+  Drawer,
   Heading,
   Input,
   Form,

ui/blocks/header/Burger.tsx

@@ -16,6 +16,10 @@ const Burger = () => {
     setNetworkMenuVisibility((flag) => !flag);
   }, []);
 
+  const handleNetworkLogoClick = React.useCallback(() => {
+    setNetworkMenuVisibility(false);
+  }, []);
+
   return (
     <>
       <Box padding={ 2 } onClick={ onOpen }>
@@ -31,11 +35,11 @@ const Burger = () => {
         placement="left"
         onClose={ onClose }
       >
-        <DrawerOverlay bgColor="blackAlpha.800"/>
+        <DrawerOverlay/>
         <DrawerContent maxWidth="260px">
           <DrawerBody p={ 6 }>
             <Flex alignItems="center" justifyContent="space-between">
-              <NetworkLogo/>
+              <NetworkLogo onClick={ handleNetworkLogoClick }/>
               <NetworkMenuButton
                 isCollapsed
                 isMobile

ui/blocks/navigation/NavLink.tsx

@@ -52,7 +52,7 @@ const NavLink = ({ text, pathname, icon, isCollapsed, isActive }: Props) => {
         >
           <HStack spacing={ 3 }>
             <Icon as={ icon } boxSize="30px"/>
-            { !isCollapsed && <Text variant="inherit">{ text }</Text> }
+            { !isCollapsed && <Text variant="inherit" fontSize="sm" lineHeight="20px">{ text }</Text> }
           </HStack>
         </Tooltip>
       </Link>

ui/blocks/networkMenu/NetworkLogo.tsx

@@ -6,9 +6,10 @@ import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 interface Props {
   isCollapsed?: boolean;
+  onClick?: () => void;
 }
 
-const NetworkLogo = ({ isCollapsed }: Props) => {
+const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
   const logoColor = useColorModeValue('blue.600', 'white');
 
   return (
@@ -16,6 +17,7 @@ const NetworkLogo = ({ isCollapsed }: Props) => {
       width={ isCollapsed ? '0' : '113px' }
       display="inline-flex"
       overflow="hidden"
+      onClick={ onClick }
       { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
     >
       <Icon

ui/blocks/networkMenu/NetworkMenuButton.tsx

@@ -13,6 +13,8 @@ interface Props {
 
 const NetworkMenuButton = ({ isCollapsed, isMobile, isActive, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const defaultIconColor = useColorModeValue('gray.600', 'gray.400');
+  const bgColorMobile = useColorModeValue('blue.50', 'gray.800');
+  const iconColorMobile = useColorModeValue('blue.700', 'blue.50');
 
   return (
     <Button
@@ -23,7 +25,7 @@ const NetworkMenuButton = ({ isCollapsed, isMobile, isActive, onClick }: Props,
       ref={ ref }
       h="36px"
       borderRadius="base"
-      backgroundColor={ isMobile && isActive ? 'blue.50' : 'none' }
+      backgroundColor={ isMobile && isActive ? bgColorMobile : 'none' }
       onClick={ onClick }
     >
       <Icon
@@ -31,7 +33,7 @@ const NetworkMenuButton = ({ isCollapsed, isMobile, isActive, onClick }: Props,
         width="36px"
         height="36px"
         padding="10px"
-        color={ isMobile && isActive ? 'blue.700' : defaultIconColor }
+        color={ isMobile && isActive ? iconColorMobile : defaultIconColor }
         _hover={{ color: isMobile ? undefined : 'blue.400' }}
         marginLeft={ isCollapsed ? '0px' : '7px' }
         cursor="pointer"

ui/blocks/networkMenu/NetworkMenuContentMobile.tsx

@@ -35,6 +35,7 @@ const NetworkMenuContentMobile = () => {
               { ...network }
               isActive={ network.name === selectedNetwork?.name }
               routeName={ routeName }
+              isMobile
             />
           ))
         }

ui/blocks/networkMenu/NetworkMenuLink.tsx

@@ -12,10 +12,11 @@ import useColors from './useColors';
 
 interface Props extends Network {
   isActive: boolean;
+  isMobile?: boolean;
   routeName: string;
 }
 
-const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAccountSupported }: Props) => {
+const NetworkMenuLink = ({ name, type, subType, icon, isActive, isMobile, routeName, isAccountSupported }: Props) => {
   const isAccount = isAccountRoute(routeName);
   const localPath = (() => {
     if (isAccount && isAccountSupported) {
@@ -51,8 +52,8 @@ const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAcc
       <NextLink href={ href } passHref>
         <Flex
           as="a"
-          px={ 4 }
-          py={ 3 }
+          px={ isMobile ? 3 : 4 }
+          py={ 2 }
           alignItems="center"
           cursor="pointer"
           pointerEvents={ isActive ? 'none' : 'initial' }
@@ -66,6 +67,8 @@ const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAcc
             marginLeft={ 3 }
             fontWeight="500"
             color="inherit"
+            fontSize={ isMobile ? 'sm' : 'md' }
+            lineHeight={ isMobile ? '20px' : '24px' }
           >
             { name }
           </Text>