left column fixes

icons/logo.svg

-<svg width="143" height="26" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.513 1a1 1 0 0 0-1-1H6.068a1 1 0 0 0-1 1v3.417a1 1 0 0 1-1 1H1.49a1 1 0 0 0-1 1V25a1 1 0 0 0 1 1h3.445a1 1 0 0 0 1-1V6.417a1 1 0 0 1 1-1h2.578a1 1 0 0 0 1-1V1Zm10.926 0a1 1 0 0 0-1-1h-3.445a1 1 0 0 0-1 1v3.417a1 1 0 0 0 1 1h2.389a1 1 0 0 1 1 1V25a1 1 0 0 0 1 1h3.444a1 1 0 0 0 1-1V6.417a1 1 0 0 0-1-1H22.44a1 1 0 0 1-1-1V1Zm-5.52 10.369a1 1 0 0 0-1-1h-3.445a1 1 0 0 0-1 1v8.524a1 1 0 0 0 1 1h3.445a1 1 0 0 0 1-1v-8.524Z"/><path d="M35.113 5.893h6.228c2.638 0 4.065 1.434 4.065 3.498.02.645-.15 1.28-.486 1.825a3.12 3.12 0 0 1-1.395 1.221v.067a3.548 3.548 0 0 1 1.842 1.364c.453.652.687 1.44.666 2.242 0 2.308-1.544 4.122-4.346 4.122h-6.574V5.893Zm6.27 5.827c.996 0 1.71-.761 1.71-1.92 0-1.158-.714-1.92-1.71-1.92h-3.95v3.84h3.95Zm.282 6.54c1.19 0 2.054-.94 2.054-2.306 0-1.367-.865-2.285-2.054-2.285h-4.232v4.592h4.232ZM48.93 7.599h-1.303V5.436h3.59v14.786h-2.293L48.931 7.6Zm4.409 7.324c0-3.248 2.317-5.644 5.517-5.644s5.535 2.374 5.535 5.644-2.313 5.623-5.535 5.623-5.517-2.375-5.517-5.623Zm4.911 3.495h1.236c1.406 0 2.638-1.546 2.638-3.495 0-1.948-1.236-3.52-2.638-3.52H58.25c-1.405 0-2.638 1.6-2.638 3.52s1.233 3.495 2.638 3.495Zm7.63-3.518c0-3.314 2.21-5.621 5.388-5.621 2.552 0 4.562 1.366 4.887 4.16h-2.227c-.217-1.412-1.19-2.039-2.184-2.039h-1.082c-1.384 0-2.508 1.568-2.508 3.52s1.124 3.54 2.508 3.54h1.082a2.163 2.163 0 0 0 1.494-.597c.409-.386.662-.916.711-1.487h2.227c-.308 2.755-2.335 4.189-4.942 4.189-3.17-.02-5.353-2.349-5.353-5.664Zm12.348-9.464h2.27v8.156h1.647l3.07-4.01h2.595l-3.784 4.951 3.957 5.69h-2.725l-3.308-4.704h-1.452v4.703h-2.27V5.436ZM89.02 17.029h2.185c.108.94.67 1.546 1.853 1.546h1.43c1.017 0 1.493-.538 1.493-1.255 0-.717-.39-1.142-1.32-1.28l-2.403-.32c-2.032-.246-2.94-1.5-2.94-3.136 0-2.15 1.544-3.315 4.303-3.315 2.64 0 4.24 1.098 4.324 3.54h-2.184c-.108-.92-.475-1.569-1.6-1.569h-1.3c-.973 0-1.428.538-1.428 1.232 0 .695.433 1.165 1.363 1.3l2.425.32c1.968.246 2.876 1.343 2.876 3.046 0 2.195-1.406 3.404-4.52 3.404-3.012.004-4.473-1.184-4.556-3.513ZM99.524 14.9c0-3.314 2.205-5.621 5.387-5.621 2.552 0 4.563 1.366 4.887 4.16h-2.227c-.216-1.412-1.189-2.039-2.184-2.039h-1.081c-1.387 0-2.512 1.568-2.512 3.52s1.125 3.54 2.512 3.54h1.081a2.165 2.165 0 0 0 1.495-.597 2.32 2.32 0 0 0 .711-1.487h2.227c-.309 2.755-2.336 4.189-4.943 4.189-3.166-.02-5.353-2.349-5.353-5.664Zm11.738.023c0-3.248 2.314-5.644 5.514-5.644 3.201 0 5.539 2.374 5.539 5.644s-2.314 5.623-5.539 5.623c-3.225 0-5.514-2.375-5.514-5.623Zm4.909 3.495h1.236c1.405 0 2.641-1.546 2.641-3.495 0-1.948-1.236-3.52-2.641-3.52h-1.236c-1.406 0-2.638 1.6-2.638 3.52s1.239 3.495 2.644 3.495h-.006Zm8.029-2.128V9.595h2.27v6.295c0 1.545.757 2.464 1.752 2.464h1.235c1.06 0 2.011-1.008 2.011-2.464V9.595h2.274v10.64h-2.209V18.78c-.618 1.098-1.708 1.77-3.373 1.77-2.49-.003-3.96-1.504-3.96-4.26Zm13.32 1.456v-6.08h-1.99v-2.07h1.99V6.612h2.292v2.982h2.681v2.061h-2.681v5.42c0 .695.216 1.031.951 1.031h1.817v2.128h-2.472c-1.662-.003-2.588-.899-2.588-2.49Z"/></svg>
+<svg viewBox="0 0 143 26" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.513 1a1 1 0 0 0-1-1H6.068a1 1 0 0 0-1 1v3.417a1 1 0 0 1-1 1H1.49a1 1 0 0 0-1 1V25a1 1 0 0 0 1 1h3.445a1 1 0 0 0 1-1V6.417a1 1 0 0 1 1-1h2.578a1 1 0 0 0 1-1V1Zm10.926 0a1 1 0 0 0-1-1h-3.445a1 1 0 0 0-1 1v3.417a1 1 0 0 0 1 1h2.389a1 1 0 0 1 1 1V25a1 1 0 0 0 1 1h3.444a1 1 0 0 0 1-1V6.417a1 1 0 0 0-1-1H22.44a1 1 0 0 1-1-1V1Zm-5.52 10.369a1 1 0 0 0-1-1h-3.445a1 1 0 0 0-1 1v8.524a1 1 0 0 0 1 1h3.445a1 1 0 0 0 1-1v-8.524Z"/><path d="M35.113 5.893h6.228c2.638 0 4.065 1.434 4.065 3.498.02.645-.15 1.28-.486 1.825a3.12 3.12 0 0 1-1.395 1.221v.067a3.548 3.548 0 0 1 1.842 1.364c.453.652.687 1.44.666 2.242 0 2.308-1.544 4.122-4.346 4.122h-6.574V5.893Zm6.27 5.827c.996 0 1.71-.761 1.71-1.92 0-1.158-.714-1.92-1.71-1.92h-3.95v3.84h3.95Zm.282 6.54c1.19 0 2.054-.94 2.054-2.306 0-1.367-.865-2.285-2.054-2.285h-4.232v4.592h4.232ZM48.93 7.599h-1.303V5.436h3.59v14.786h-2.293L48.931 7.6Zm4.409 7.324c0-3.248 2.317-5.644 5.517-5.644s5.535 2.374 5.535 5.644-2.313 5.623-5.535 5.623-5.517-2.375-5.517-5.623Zm4.911 3.495h1.236c1.406 0 2.638-1.546 2.638-3.495 0-1.948-1.236-3.52-2.638-3.52H58.25c-1.405 0-2.638 1.6-2.638 3.52s1.233 3.495 2.638 3.495Zm7.63-3.518c0-3.314 2.21-5.621 5.388-5.621 2.552 0 4.562 1.366 4.887 4.16h-2.227c-.217-1.412-1.19-2.039-2.184-2.039h-1.082c-1.384 0-2.508 1.568-2.508 3.52s1.124 3.54 2.508 3.54h1.082a2.163 2.163 0 0 0 1.494-.597c.409-.386.662-.916.711-1.487h2.227c-.308 2.755-2.335 4.189-4.942 4.189-3.17-.02-5.353-2.349-5.353-5.664Zm12.348-9.464h2.27v8.156h1.647l3.07-4.01h2.595l-3.784 4.951 3.957 5.69h-2.725l-3.308-4.704h-1.452v4.703h-2.27V5.436ZM89.02 17.029h2.185c.108.94.67 1.546 1.853 1.546h1.43c1.017 0 1.493-.538 1.493-1.255 0-.717-.39-1.142-1.32-1.28l-2.403-.32c-2.032-.246-2.94-1.5-2.94-3.136 0-2.15 1.544-3.315 4.303-3.315 2.64 0 4.24 1.098 4.324 3.54h-2.184c-.108-.92-.475-1.569-1.6-1.569h-1.3c-.973 0-1.428.538-1.428 1.232 0 .695.433 1.165 1.363 1.3l2.425.32c1.968.246 2.876 1.343 2.876 3.046 0 2.195-1.406 3.404-4.52 3.404-3.012.004-4.473-1.184-4.556-3.513ZM99.524 14.9c0-3.314 2.205-5.621 5.387-5.621 2.552 0 4.563 1.366 4.887 4.16h-2.227c-.216-1.412-1.189-2.039-2.184-2.039h-1.081c-1.387 0-2.512 1.568-2.512 3.52s1.125 3.54 2.512 3.54h1.081a2.165 2.165 0 0 0 1.495-.597 2.32 2.32 0 0 0 .711-1.487h2.227c-.309 2.755-2.336 4.189-4.943 4.189-3.166-.02-5.353-2.349-5.353-5.664Zm11.738.023c0-3.248 2.314-5.644 5.514-5.644 3.201 0 5.539 2.374 5.539 5.644s-2.314 5.623-5.539 5.623c-3.225 0-5.514-2.375-5.514-5.623Zm4.909 3.495h1.236c1.405 0 2.641-1.546 2.641-3.495 0-1.948-1.236-3.52-2.641-3.52h-1.236c-1.406 0-2.638 1.6-2.638 3.52s1.239 3.495 2.644 3.495h-.006Zm8.029-2.128V9.595h2.27v6.295c0 1.545.757 2.464 1.752 2.464h1.235c1.06 0 2.011-1.008 2.011-2.464V9.595h2.274v10.64h-2.209V18.78c-.618 1.098-1.708 1.77-3.373 1.77-2.49-.003-3.96-1.504-3.96-4.26Zm13.32 1.456v-6.08h-1.99v-2.07h1.99V6.612h2.292v2.982h2.681v2.061h-2.681v5.42c0 .695.216 1.031.951 1.031h1.817v2.128h-2.472c-1.662-.003-2.588-.899-2.588-2.49Z"/></svg>
\ No newline at end of file

icons/networks.svg

-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="currentColor"/></svg>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="currentColor"/></svg>
\ No newline at end of file

ui/navigation/AccountNavLink.tsx

@@ -22,13 +22,13 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
       <Link
         as="li"
         listStyleType="none"
-        w="220px"
-        px={ 4 }
+        w="180px"
+        px={ 3 }
         py={ 2.5 }
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
         _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="base"
+        borderRadius="md"
       >
         <HStack spacing={ 3 }>
           <Icon as={ icon } boxSize="30px"/>

ui/navigation/AccountNavigation.tsx

@@ -19,7 +19,7 @@ const navItems = [
 
 const AccountNavigation = () => {
   return (
-    <Box as="nav">
+    <Box as="nav" mt={ 12 }>
       <VStack as="ul" spacing="2">
         { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
       </VStack>

ui/navigation/MainNavLink.tsx

-import { ChevronRightIcon } from '@chakra-ui/icons';
 import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
@@ -23,20 +22,17 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
       <Link
         as="li"
         listStyleType="none"
-        w="220px"
-        px={ 4 }
+        w="180px"
+        px={ 3 }
         py={ 2.5 }
         color={ isActive ? colors.text.active : colors.text.default }
         bgColor={ isActive ? colors.bg.active : colors.bg.default }
         _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="base"
+        borderRadius="md"
       >
-        <HStack justifyContent="space-between">
-          <HStack spacing={ 3 }>
-            <Icon as={ icon } boxSize="30px"/>
-            <Text variant="inherit">{ text }</Text>
-          </HStack>
-          <ChevronRightIcon boxSize={ 6 }/>
+        <HStack spacing={ 3 }>
+          <Icon as={ icon } boxSize="30px"/>
+          <Text variant="inherit">{ text }</Text>
         </HStack>
       </Link>
     </NextLink>

ui/navigation/MainNavigation.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import AppsIcon from 'icons/apps.svg';
 import BlocksIcon from 'icons/block.svg';
-import BlockscoutIcon from 'icons/blockscout.svg';
+import GearIcon from 'icons/gear.svg';
 import TokensIcon from 'icons/token.svg';
 import TransactionsIcon from 'icons/transactions.svg';
 
@@ -14,12 +14,12 @@ const navItems = [
   { text: 'Transactions', pathname: '/transactions', icon: TransactionsIcon },
   { text: 'Tokens', pathname: '/tokens', icon: TokensIcon },
   { text: 'Apps', pathname: '/apps', icon: AppsIcon },
-  { text: 'Blockscout', pathname: '/blockscout', icon: BlockscoutIcon },
+  { text: 'Other', pathname: '/other', icon: GearIcon },
 ];
 
 const MainNavigation = () => {
   return (
-    <Box as="nav">
+    <Box as="nav" mt={ 14 }>
       <VStack as="ul" spacing="2">
         { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
       </VStack>

ui/navigation/NavFooter.tsx

@@ -22,6 +22,7 @@ const NavFooter = () => {
       borderTop="1px solid"
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       paddingTop={ 8 }
+      marginTop={ 20 }
       w="100%"
       alignItems="baseline"
       color="gray.500"
@@ -37,10 +38,10 @@ const NavFooter = () => {
           );
         }) }
       </HStack>
-      <Text>
+      <Text variant="secondary">
         Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
       </Text>
-      <Text>Version: <Link color="blue.500">v4.2.1-beta</Link></Text>
+      <Text variant="secondary">Version: <Link>v4.2.1-beta</Link></Text>
     </VStack>
   );
 };

ui/navigation/Navigation.tsx

-import { VStack, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Flex, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import logoIcon from 'icons/logo.svg';
@@ -11,28 +11,28 @@ import NavFooter from './NavFooter';
 
 const Navigation = () => {
   return (
-    <VStack
+    <Flex
+      flexDirection="column"
       alignItems="flex-start"
-      spacing={ 12 }
       borderRight="1px solid"
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      px={ 10 }
+      px={ 6 }
       py={ 12 }
       width="300px"
       { ...getDefaultTransitionProps() }
     >
-      <HStack as="header" justifyContent="space-between" w="100%" px={ 4 } mb={ 2 } h={ 10 } alignItems="center">
+      <HStack as="header" justifyContent="space-between" w="100%" px={ 3 } h={ 10 } alignItems="center">
         <Icon
           as={ logoIcon }
-          width="142px"
-          height="26px"
+          width="113px"
+          height="20px"
           color={ useColorModeValue('blue.600', 'white') }
           { ...getDefaultTransitionProps() }
         />
         <Icon
           as={ networksIcon }
-          width="20px"
-          height="20px"
+          width="16px"
+          height="16px"
           color={ useColorModeValue('gray.500', 'white') }
           { ...getDefaultTransitionProps() }
         />
@@ -40,7 +40,7 @@ const Navigation = () => {
       <MainNavigation/>
       <AccountNavigation/>
       <NavFooter/>
-    </VStack>
+    </Flex>
   );
 };
 

ui/navigation/useColors.ts

@@ -3,13 +3,13 @@ import { useColorModeValue } from '@chakra-ui/react';
 export default function useColors() {
   return {
     text: {
-      'default': useColorModeValue('gray.600', 'gray.300'),
-      active: useColorModeValue('blue.700', 'gray.300'),
+      'default': useColorModeValue('gray.600', 'gray.400'),
+      active: useColorModeValue('blue.700', 'gray.50'),
       hover: 'blue.400',
     },
     bg: {
       'default': 'transparent',
-      active: useColorModeValue('blue.50', 'whiteAlpha.200'),
+      active: useColorModeValue('blue.50', 'gray.800'),
     },
   };
 }

ui/shared/Page/Page.tsx

@@ -13,7 +13,7 @@ const Page = ({ children }: Props) => {
     <HStack
       w="100%"
       minH="100vh"
-      spacing={ 16 }
+      spacing={ 12 }
       alignItems="stretch"
       paddingRight="60px"
     >