Update navigation menu styles (#2094)

Fixes #2028
blockscout · Jul 18, 2024 · 4bde57e · 4bde57e
1 parent 0653e13
commit 4bde57e
Show file tree

Hide file tree

Showing 19 changed files with 4 additions and 4 deletions.
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png
diff --git a/ui/snippets/navigation/mobile/NavLinkGroup.tsx b/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 }>

diff --git a/ui/snippets/navigation/mobile/NavigationMobile.tsx b/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>

diff --git a/ui/snippets/navigation/vertical/NavLink.tsx b/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 }

diff --git a/ui/snippets/navigation/vertical/NavLinkGroup.tsx b/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"

diff --git a/...shots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png b/...shots__/NavigationDesktop.pw.tsx_dark-color-mode_auth-xl-screen-dark-mode-1.png
diff --git a/...hots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/...hots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png
diff --git a/...ts__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/...ts__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png
diff --git a/...esktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png b/...esktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png
diff --git a/...__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png b/...__screenshots__/NavigationDesktop.pw.tsx_default_auth-xl-screen-dark-mode-1.png
diff --git a/..._screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/..._screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png
diff --git a/...creenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/...creenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png
diff --git a/...s__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png b/...s__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png
diff --git a/...igationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png b/...igationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png
diff --git a/...on/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png b/...on/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-1.png
diff --git a/...l/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png b/...l/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-1.png