Update navigation menu styles (#2094)

Fixes #2028

ui/snippets/navigation/mobile/NavLinkGroup.tsx

@@ -31,7 +31,7 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
       <Box
         { ...styleProps.itemProps }
         w="100%"
-        px={ 3 }
+        px={ 2 }
         aria-label={ `${ item.text } link group` }
       >
         <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>

ui/snippets/navigation/mobile/NavigationMobile.tsx

@@ -97,7 +97,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           style={{ x: subX }}
           key="sub"
         >
-          <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
+          <Flex alignItems="center" px={ 2 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
             <IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
             <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
           </Flex>

ui/snippets/navigation/vertical/NavLink.tsx

@@ -46,7 +46,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
       w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
       display="flex"
       position="relative"
-      px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
+      px={ px || { base: 2, lg: isExpanded ? 2 : '15px', xl: isCollapsed ? '15px' : 2 } }
       aria-label={ `${ item.text } link` }
       whiteSpace="nowrap"
       onClick={ onClick }

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -45,7 +45,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
           <Link
             { ...styleProps.itemProps }
             w={{ lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
-            pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
+            pl={{ lg: isExpanded ? 2 : '15px', xl: isCollapsed ? '15px' : 2 }}
             pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
             aria-label={ `${ item.text } link group` }
             position="relative"