Merge pull request #749 from poanetwork/742-redesign-top-menu

Redesign top menu nav links
6 years ago · 3a2c6f93ed
parent e4d219f555 b2baa64010
commit 3a2c6f93ed
26 changed files with 148 additions and 75 deletions
--- a/apps/block_scout_web/assets/css/_elements.scss
+++ b/apps/block_scout_web/assets/css/_elements.scss
@ -3,3 +3,13 @@ hr {
  border-style: solid;
  border-color: $gray-300 transparent transparent transparent;
 }
+
+svg {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@ -8,17 +8,17 @@
 }

 .navbar-brand {
-  margin-left: 10px;
+  margin-left: 0;
 }

 .navbar-logo {
-  height: 36px;
+  height: 1.5em;
 }

@include media-breakpoint-up(md) {
  .navbar-expand-lg .navbar-nav .nav-link {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
  }
 }

@ -26,10 +26,29 @@
  font-size: 14px;
 }

-.navbar .nav-link {
+.navbar-dark .navbar-nav .nav-link {
  color: $white;
 }

+.navbar-nav .nav-link {
+  display: flex;
+  align-items: center;
+}
+
+.nav-link-icon {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: -2px;
+  height: 1em;
+  width: 1em;
+  margin-right: 0.5em;
+
+  path {
+    fill: $secondary;
+  }
+}
+
 .navbar .form-control {
  background: transparent;
  width: auto;
@ -70,10 +89,10 @@

 .input-group-append {
  margin-left: 0px;
-}

-.fa-search {
-  color: $white;
+  path {
+    fill: $secondary;
+  }
 }

 .topnav-nav-link {
@ -84,32 +103,26 @@
    content: "";
    position: absolute;
    display: block;
-    bottom: 0;
+    bottom: -10px;
    left: 50%;
-    width: 100%;
+    width: 75%;
    height: 0.2rem;
-    background-color: $white;
+    background-color: $secondary;
+    border-radius: 4px 4px 0 0;
    opacity: 0;
-    transform: translateX(-50%) translateY(-0.5rem);
-    transition: all 0.3s ease;
+    transform: translateX(-50%);
+    transition: all 0.2s ease;
  }

  &:hover {
-    color: $white;
-
-    &:before {
-      transform: translateX(-50%) translateY(-0.25rem);
+    &:before{
      opacity: 1;
    }
  }
+}

-  &:active {
-
-    &:before {
-      transition: all 0.1s ease-out;
-      transform: translateX(-50%) translateY(-0.5rem);
-    }
-  }
+.dropdown-toggle {
+  padding-right: 0 !important;
 }

 .dropdown-menu {
@ -120,7 +133,7 @@
  padding: 10px 20px;

  &:hover {
-    background-color: $secondary;
+    background-color: $tertiary;
    color: $white;
  }
 }
--- a/apps/block_scout_web/assets/css/theme/_base_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss
@ -30,8 +30,8 @@ $grays: map-merge((
 ), $grays);

 $blue:    #4786ff !default;
-$indigo:  #5b33a1 !default;
-$purple: #997fdc !default;
+$indigo:  #5b389f !default;
+$purple:  #997fdc !default;
 $pink:    #e83e8c !default;
 $red:     #c74d39 !default;
 $orange:  #ef9a60 !default;
@ -58,7 +58,7 @@ $colors: map-merge((
 ), $colors);

 $primary:       $indigo !default;
-$secondary:     $teal !default;
+$secondary:     #7dd79f !default;
 $tertiary:      $purple !default;
 $success:       $green !default;
 $info:          $cyan !default;
--- a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss
@ -1,3 +1,3 @@
-$primary:       #1b1b3a;
-$secondary:     #40ed9e;
-$tertiary:      #40ed9e;
+$primary:       #1b1b39;
+$secondary:     #4beba0;
+$tertiary:      #4beba0;
--- a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss
@ -1,3 +1,3 @@
-$primary:       #12455b;
-$secondary:     #4786cb;
+$primary:       #16465b;
+$secondary:     #5ab3ff;
 $tertiary:      #77a4c5;
--- a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss
@ -1,3 +1,3 @@
-$primary: #1BACA4;
-$secondary: #6435c9;
-$tertiary: #6435c9;
+$primary: #28aca4;
+$secondary: #89edda;
+$tertiary: $purple;
--- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss
@ -1,3 +1,3 @@
 $primary:       $indigo;
-$secondary:     $teal;
+$secondary:     #7dd79f;
 $tertiary:      $purple;
--- a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss
@ -1,3 +1,3 @@
-$primary:  #24a7fb;
-$secondary: #f4c500;
+$primary:  #2fa8f8;
+$secondary: #a2daff;
 $tertiary:  #006aa7;
--- a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss
@ -1,3 +1,3 @@
-$primary:       #539387;
-$secondary:     #77a4c5;
+$primary:       #559387;
+$secondary:     #add7cf;
 $tertiary:      #38533d;
--- a/apps/block_scout_web/assets/static/images/icons/accounts.svg
+++ b/apps/block_scout_web/assets/static/images/icons/accounts.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15 16H1a1 1 0 0 1-1-1v-4a3 3 0 0 1 3-3h1V3a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v5h1a3 3 0 0 1 3 3v4a1 1 0 0 1-1 1zM10 4a2 2 0 1 0-4 0v3a2 2 0 1 0 4 0V4zm4 8c0-1.105-1.075-2-2.4-2h-.379c-.549.61-1.336 1-2.221 1H7c-.885 0-1.672-.39-2.221-1H4.4c-1.325 0-2.4.895-2.4 2v2h12v-2z"/>
+</svg>
--- a/apps/block_scout_web/assets/static/images/icons/api.svg
+++ b/apps/block_scout_web/assets/static/images/icons/api.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15 9h-1.277c-.347.595-.985 1-1.723 1a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2h9.277c.347-.595.985-1 1.723-1 .738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2zm0-6H5.723C5.376 3.595 4.738 4 4 4a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2h1.277C2.624.405 3.262 0 4 0c.738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2zM1 13h1.277c.347-.595.985-1 1.723-1 .738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2H5.723c-.347.595-.985 1-1.723 1a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2z"/>
+</svg>
--- a/apps/block_scout_web/assets/static/images/icons/blocks.svg
+++ b/apps/block_scout_web/assets/static/images/icons/blocks.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg" width="14" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M14 11c0 .026-.013.049-.015.074.004.382-.159.757-.481.962l-5.897 3.743-.004.002-.099.063a.983.983 0 0 1-.299.115c-.01.002-.019.009-.03.011-.013.002-.027.001-.04.003-.046.006-.087.027-.135.027-.048 0-.089-.021-.135-.027-.013-.002-.027-.001-.04-.003-.011-.002-.02-.009-.03-.011a.983.983 0 0 1-.299-.115l-.099-.063-.004-.002-5.897-3.743c-.322-.205-.485-.58-.481-.962C.013 11.049 0 11.026 0 11V5a.98.98 0 0 1 .085-.398c.066-.256.184-.494.411-.638L6.393.221l.004-.002.114-.073c.022-.013.046-.013.068-.025A.924.924 0 0 1 6.825.03.86.86 0 0 1 7 .017a.86.86 0 0 1 .175.013c.087.017.166.05.246.091.022.012.046.012.068.025l.114.073.004.002 5.897 3.743c.227.144.345.382.411.638A.98.98 0 0 1 14 5v6zm-6 2.01l4-2.539V6.99L8 9.529v3.481zm-6-2.539l4 2.539V9.529L2 6.99v3.481zm5-8.116L2.834 5 7 7.645 11.166 5 7 2.355z"/>
+</svg>
--- a/apps/block_scout_web/assets/static/images/icons/network.svg
+++ b/apps/block_scout_web/assets/static/images/icons/network.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm5.906-7h-1.951c-.098 1.559-.408 2.985-.888 4.131A5.996 5.996 0 0 0 13.906 9zM8 14.013c.988 0 1.803-2.171 1.961-5.013H6.039c.158 2.842.973 5.013 1.961 5.013zm-3.067-.882c-.48-1.146-.79-2.572-.888-4.131H2.094a5.996 5.996 0 0 0 2.839 4.131zM2.094 7h1.951c.098-1.559.408-2.985.888-4.131A5.996 5.996 0 0 0 2.094 7zM8 1.987c-.988 0-1.803 2.171-1.961 5.013h3.922C9.803 4.158 8.988 1.987 8 1.987zm3.067.882c.48 1.146.79 2.572.888 4.131h1.951a5.996 5.996 0 0 0-2.839-4.131z"/>
+</svg>
--- a/apps/block_scout_web/assets/static/images/icons/search.svg
+++ b/apps/block_scout_web/assets/static/images/icons/search.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" width="16" height="17">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"/>
+</svg>
--- a/apps/block_scout_web/assets/static/images/icons/test-network.svg
+++ b/apps/block_scout_web/assets/static/images/icons/test-network.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#89EDDA" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2zm2 5H9v4a1 1 0 0 1-2 0V7H6a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
+</svg>
--- a/apps/block_scout_web/assets/static/images/icons/transactions.svg
+++ b/apps/block_scout_web/assets/static/images/icons/transactions.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg" width="16" height="14">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15 8H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zm0-6H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zM3 14H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm4 10h8a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z"/>
+</svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15 16H1a1 1 0 0 1-1-1v-4a3 3 0 0 1 3-3h1V3a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v5h1a3 3 0 0 1 3 3v4a1 1 0 0 1-1 1zM10 4a2 2 0 1 0-4 0v3a2 2 0 1 0 4 0V4zm4 8c0-1.105-1.075-2-2.4-2h-.379c-.549.61-1.336 1-2.221 1H7c-.885 0-1.672-.39-2.221-1H4.4c-1.325 0-2.4.895-2.4 2v2h12v-2z"/>
+</svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15 9h-1.277c-.347.595-.985 1-1.723 1a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2h9.277c.347-.595.985-1 1.723-1 .738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2zm0-6H5.723C5.376 3.595 4.738 4 4 4a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2h1.277C2.624.405 3.262 0 4 0c.738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2zM1 13h1.277c.347-.595.985-1 1.723-1 .738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2H5.723c-.347.595-.985 1-1.723 1a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2z"/>
+</svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex
@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24">
-    <path fill="#5d6165" fill-rule="evenodd" d="M21.998 17.936c0 .006-.004.011-.004.017.009.185-.013.374-.105.547a.892.892 0 0 1-.816.485c-.019.002-.036.011-.055.011l-9.467 4.887a1.11 1.11 0 0 1-.519.111A.113.113 0 0 1 11 24c-.011 0-.021-.006-.032-.006-.052 0-.104-.009-.156-.014-.018-.004-.038-.001-.056-.005a.984.984 0 0 1-.308-.092l-9.425-4.888c-.008 0-.015.005-.023.005-.03 0-.055-.013-.084-.015a.895.895 0 0 1-.805-.485 1.038 1.038 0 0 1-.105-.547c-.002-.01-.006-.019-.006-.03v-.046c.001-.031-.005-.061 0-.092V6.188c-.005-.031.001-.061 0-.092v-.019l.002-.013c0-.043.004-.086.01-.128a.788.788 0 0 1 .114-.459.98.98 0 0 1 .407-.336.928.928 0 0 1 .18-.079c.038-.01.074-.017.112-.024.053-.01.103-.03.157-.034L10.448.117c.156-.081.323-.103.49-.105C10.96.011 10.978 0 11 0s.04.011.062.012c.167.002.334.024.489.104l9.537 4.902c.179.021.343.09.483.199a.613.613 0 0 1 .058.042c.042.037.08.073.116.116.042.044.095.078.129.131.072.111.098.23.109.349A.826.826 0 0 1 22 6.16v11.652c.005.031-.001.062 0 .093v.018l-.002.013zM2 16.159l1.633-1.025c.44-.276 1.002-.112 1.256.366s.103 1.09-.337 1.366l-1.565.983L10 21.486v-8.645l-1.633 1.025c-.44.276-1.002.112-1.256-.366s-.103-1.09.337-1.366l1.573-.988L2 7.522v8.637zM12 2.492V4a1 1 0 0 1-2 0V2.503L3.226 6 10 9.497V8a1 1 0 0 1 2 0v1.508L18.825 6 12 2.492zm8 5.05l-7.017 3.606 1.569.986c.44.276.591.888.337 1.366-.254.478-.816.642-1.256.366L12 12.841v8.656l7.037-3.633-1.589-.998c-.44-.276-.591-.888-.337-1.366.254-.478.816-.642 1.256-.366L20 16.159V7.542z"/>
+<svg viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg" width="14" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M14 11c0 .026-.013.049-.015.074.004.382-.159.757-.481.962l-5.897 3.743-.004.002-.099.063a.983.983 0 0 1-.299.115c-.01.002-.019.009-.03.011-.013.002-.027.001-.04.003-.046.006-.087.027-.135.027-.048 0-.089-.021-.135-.027-.013-.002-.027-.001-.04-.003-.011-.002-.02-.009-.03-.011a.983.983 0 0 1-.299-.115l-.099-.063-.004-.002-5.897-3.743c-.322-.205-.485-.58-.481-.962C.013 11.049 0 11.026 0 11V5a.98.98 0 0 1 .085-.398c.066-.256.184-.494.411-.638L6.393.221l.004-.002.114-.073c.022-.013.046-.013.068-.025A.924.924 0 0 1 6.825.03.86.86 0 0 1 7 .017a.86.86 0 0 1 .175.013c.087.017.166.05.246.091.022.012.046.012.068.025l.114.073.004.002 5.897 3.743c.227.144.345.382.411.638A.98.98 0 0 1 14 5v6zm-6 2.01l4-2.539V6.99L8 9.529v3.481zm-6-2.539l4 2.539V9.529L2 6.99v3.481zm5-8.116L2.834 5 7 7.645 11.166 5 7 2.355z"/>
 </svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_network_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_network_icon.html.eex
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm5.906-7h-1.951c-.098 1.559-.408 2.985-.888 4.131A5.996 5.996 0 0 0 13.906 9zM8 14.013c.988 0 1.803-2.171 1.961-5.013H6.039c.158 2.842.973 5.013 1.961 5.013zm-3.067-.882c-.48-1.146-.79-2.572-.888-4.131H2.094a5.996 5.996 0 0 0 2.839 4.131zM2.094 7h1.951c.098-1.559.408-2.985.888-4.131A5.996 5.996 0 0 0 2.094 7zM8 1.987c-.988 0-1.803 2.171-1.961 5.013h3.922C9.803 4.158 8.988 1.987 8 1.987zm3.067.882c.48 1.146.79 2.572.888 4.131h1.951a5.996 5.996 0 0 0-2.839-4.131z"/>
+</svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_search_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_search_icon.html.eex
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" width="16" height="17">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"/>
+</svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_test_network_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_test_network_icon.html.eex
@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path fill="#89EDDA" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2zm2 5H9v4a1 1 0 0 1-2 0V7H6a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
+</svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex
@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-    <path fill="#BAC4CB" fill-rule="evenodd" d="M23 19H12.427l3.284 3.284a1.01 1.01 0 0 1-1.427 1.427l-4.995-4.995A1.01 1.01 0 0 1 8.994 18c0-.259.098-.519.295-.716l4.995-4.995a1.01 1.01 0 0 1 1.427 1.427L12.427 17H23a1 1 0 0 1 0 2zM14.711 6.716l-4.995 4.995a1.01 1.01 0 0 1-1.427-1.427L11.573 7H1a1 1 0 0 1 0-2h10.573L8.289 1.716A1.01 1.01 0 0 1 9.716.289l4.995 4.995c.197.197.295.457.295.716 0 .259-.098.519-.295.716z"/>
+<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg" width="16" height="14">
+    <path fill="#7DD79F" fill-rule="evenodd" d="M15 8H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zm0-6H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zM3 14H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm4 10h8a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z"/>
 </svg>
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
@ -10,21 +10,33 @@
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <%= link to: block_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+            <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_block_icon.html" %>
+            </span>
            <%= gettext("Blocks") %>
          <% end %>
        </li>
        <li class="nav-item">
          <%= link to: transaction_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+            <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_transaction_icon.html" %>
+            </span>
            <%= gettext("Transactions") %>
          <% end %>
        </li>
        <li class="nav-item">
          <%= link to: address_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+            <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_accounts_icon.html" %>
+            </span>
            <%= gettext("Accounts") %>
          <% end %>
        </li>
        <li class="nav-item">
          <%= link to: api_docs_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+            <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_api_icon.html" %>
+            </span>
            <%= gettext("API") %>
          <% end %>
        </li>
@ -33,7 +45,9 @@
        <div class="input-group">
          <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": gettext("Search"), "data-test": "search_input" %>
          <div class="input-group-append">
-            <button class="input-group-text" id="search-icon"><i class="fas fa-search"></i></button>
+            <button class="input-group-text" id="search-icon">
+              <%= render BlockScoutWeb.IconsView, "_search_icon.html" %>
+            </button>
          </div>
        </div>
        <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit"><%= gettext "Search" %></button>
@ -41,7 +55,15 @@
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <%= gettext("Mainnet") %>
+            <!-- ICON FOR MAINNET -->
+            <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_network_icon.html" %>
+            </span>
+            <!-- ICON FOR TESTNET -->
+            <!-- <span class="nav-link-icon">
+              <%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
+            </span> -->
+            <%= gettext("POA Core") %>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="https://sokol.blockscout.com/"><%= gettext("POA Sokol") %></a>
--- a/apps/block_scout_web/priv/gettext/default.pot
+++ b/apps/block_scout_web/priv/gettext/default.pot
@ -8,7 +8,7 @@ msgstr ""

 #: lib/block_scout_web/templates/block/index.html.eex:10
 #: lib/block_scout_web/templates/chain/show.html.eex:56
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:13
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
 msgid "Blocks"
 msgstr ""

@ -54,7 +54,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:26
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:36
 #: lib/block_scout_web/templates/chain/show.html.eex:73
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:18
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:24
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:46
 #: lib/block_scout_web/templates/transaction/index.html.eex:56
 msgid "Transactions"
@ -336,7 +336,7 @@ msgstr ""
 msgid "Internal Transactions"
 msgstr ""

-#: lib/block_scout_web/templates/layout/_topnav.html.eex:34
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
 msgid "Search by address, transaction hash, or block number"
 msgstr ""

@ -571,17 +571,13 @@ msgid "Contract Creation"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:44
-msgid "Mainnet"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:48
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:66
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:70
 msgid "POA Core"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:47
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:69
 msgid "POA Sokol"
 msgstr ""

@ -861,7 +857,7 @@ msgid "Total Supply"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:28
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:40
 msgid "API"
 msgstr ""

@ -1185,8 +1181,8 @@ msgid "Reset"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:34
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:39
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:53
 msgid "Search"
 msgstr ""

@ -1253,7 +1249,7 @@ msgid "Verify & publish"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:23
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:32
 msgid "Accounts"
 msgstr ""

--- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@ -20,7 +20,7 @@ msgstr "Block"

 #: lib/block_scout_web/templates/block/index.html.eex:10
 #: lib/block_scout_web/templates/chain/show.html.eex:56
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:13
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
 msgid "Blocks"
 msgstr "Blocks"

@ -66,7 +66,7 @@ msgstr "BlockScout"
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:26
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:36
 #: lib/block_scout_web/templates/chain/show.html.eex:73
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:18
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:24
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:46
 #: lib/block_scout_web/templates/transaction/index.html.eex:56
 msgid "Transactions"
@ -348,7 +348,7 @@ msgstr ""
 msgid "Internal Transactions"
 msgstr ""

-#: lib/block_scout_web/templates/layout/_topnav.html.eex:34
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
 msgid "Search by address, transaction hash, or block number"
 msgstr ""

@ -583,17 +583,13 @@ msgid "Contract Creation"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:44
-msgid "Mainnet"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:48
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:66
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:70
 msgid "POA Core"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:47
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:69
 msgid "POA Sokol"
 msgstr ""

@ -873,7 +869,7 @@ msgid "Total Supply"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:28
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:40
 msgid "API"
 msgstr ""

@ -1197,8 +1193,8 @@ msgid "Reset"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:34
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:39
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:53
 msgid "Search"
 msgstr ""

@ -1265,7 +1261,7 @@ msgid "Verify & publish"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:23
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:32
 msgid "Accounts"
 msgstr ""