From d4d4acf432cb9a1c7fbdd4b681d857107a4dde50 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Tue, 19 Jun 2018 14:54:47 -0400
Subject: [PATCH 01/22] Header WIP

---
 apps/explorer_web/assets/css/app.scss         |  2 +
 .../assets/css/components/navbar.scss         | 25 ++++++
 .../templates/layout/_footer.html.eex         | 21 +++++
 .../templates/layout/_ribbon.html.eex         | 35 +-------
 .../templates/layout/_topnav.html.eex         | 79 +++++++++++++++++--
 .../templates/layout/app.html.eex             |  3 +-
 6 files changed, 123 insertions(+), 42 deletions(-)
 create mode 100644 apps/explorer_web/assets/css/components/navbar.scss

diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss
index aadecd432b..bd13a7af17 100644
--- a/apps/explorer_web/assets/css/app.scss
+++ b/apps/explorer_web/assets/css/app.scss
@@ -37,6 +37,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/transitions";
 @import "node_modules/bootstrap/scss/tables";
 @import "node_modules/bootstrap/scss/nav";
+@import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/card";
 @import "node_modules/bootstrap/scss/forms";
 
@@ -63,6 +64,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/button";
 @import "components/table";
 @import "components/qr-code";
+@import "components/navbar";
 
 :export {
   primary: $primary;
diff --git a/apps/explorer_web/assets/css/components/navbar.scss b/apps/explorer_web/assets/css/components/navbar.scss
new file mode 100644
index 0000000000..069f644e74
--- /dev/null
+++ b/apps/explorer_web/assets/css/components/navbar.scss
@@ -0,0 +1,25 @@
+.navbar-logo {
+  height: 36px;
+}
+
+@media (min-width: 992px) {
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-left: 1.75rem;
+    padding-right: 1.75rem;
+  }
+}
+
+.navbar .form-control {
+  background: transparent;
+  width: 40%;
+  font-size: 11px;
+
+}
+
+.navbar .input-group-text {
+  background: none;
+}
+
+.fa-search {
+  color: $white;
+}
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index ab78ce870f..4f1e1937db 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -1,3 +1,24 @@
 <footer class="footer">
   <%= gettext "Copyright %{year} POA", year: 2018 %>
+
+  <a href="https://www.facebook.com/PoaNetwork/" target="_blank">
+    <div class="theme__ribbon--social-icons">
+      <i class="fab fa-facebook-f"></i>
+    </div>
+  </a>
+  <a href="https://www.instagram.com/PoaNetwork/" target="_blank">
+    <div class="theme__ribbon--social-icons">
+      <i class="fab fa-instagram"></i>
+    </div>
+  </a>
+  <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
+    <div class="theme__ribbon--social-icons">
+      <i class="fab fa-twitter"></i>
+    </div>
+  </a>
+  <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
+    <div class="theme__ribbon--social-icons">
+      <i class="fab fa-telegram-plane"></i>
+    </div>
+  </a>
 </footer>
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex
index 15b8bc8677..8f6f0c6182 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex
@@ -1,29 +1,8 @@
 <div class="theme__ribbon">
     <div class="front ribbon">
-      <%= link to: chain_path(@conn, :show), "data-test": "header_logo" do %>
-        <img class="theme__ribbon--logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />
-      <% end %>
+      
       <div class="theme__ribbon--social" align="right">
-        <a href="https://www.facebook.com/PoaNetwork/" target="_blank">
-          <div class="theme__ribbon--social-icons">
-            <i class="fab fa-facebook-f"></i>
-          </div>
-        </a>
-        <a href="https://www.instagram.com/PoaNetwork/" target="_blank">
-          <div class="theme__ribbon--social-icons">
-            <i class="fab fa-instagram"></i>
-          </div>
-        </a>
-        <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-          <div class="theme__ribbon--social-icons">
-            <i class="fab fa-twitter"></i>
-          </div>
-        </a>
-        <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-          <div class="theme__ribbon--social-icons">
-            <i class="fab fa-telegram-plane"></i>
-          </div>
-        </a>
+
         <div class="theme__ribbon--social-icons u-padding-none">
           <i class="theme__ribbon--social-divider"></i>
         </div>
@@ -39,15 +18,7 @@
         <img class="theme__ribbon--logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />
       <% end %>
       <div class="flex">
-      <div class="dropdown">
-        <button class="switch-network dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Switch Network
-        </button>
-        <div class="dropdown-menu switch-network-menu" aria-labelledby="dropdownMenuButton">
-          <a class="dropdown-item switch-network-item" href="https://explorer-core.poanetwork/">POA Core</a>
-          <a class="dropdown-item switch-network-item" href="https://explorer-sokol.poanetwork/">POA Sokol</a>
-        </div>
-      </div>
+
 
       <div class="header__cell header__cell--social" align="right">
         <button class="rotatecardback">
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
index be4fc7b416..d25e2497fb 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
@@ -1,3 +1,63 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-primary">
+  <div class="container">
+    <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
+      <img class="navbar-logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />
+    <% end %>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <%= link to: block_path(@conn, :index, Gettext.get_locale), class: "nav-link topnav-nav-link" do %>
+            <%= gettext("Blocks") %>
+          <% end %>
+        </li>
+        <li class="nav-item">
+          <%= link to: transaction_path(@conn, :index, Gettext.get_locale), class: "nav-link topnav-nav-link" do %>
+            <%= gettext("Transactions") %>
+          <% end %>
+        </li>
+        <li class="nav-item">
+          <%= link to: transaction_path(@conn, :index, Gettext.get_locale), class: "nav-link topnav-nav-link" do %>
+            <%= gettext("Smart Contracts") %>
+          <% end %>
+            <!-- Does not go to where it should go please commented out before pushing to master  -->
+        </li>
+        <li class="nav-item">
+          <%= link to: transaction_path(@conn, :index, Gettext.get_locale), class: "nav-link topnav-nav-link" do %>
+            <%= gettext("Tokens") %>
+          <% end %>
+          <!-- Does not go to where it should go please commented out before pushing to master  -->
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <div class="input-group">
+          <div class="input-group-prepend">
+            <span class="input-group-text" id="search-icon"><i class="fas fa-search"></i></span>
+          </div>
+          <input class="form-control mr-sm-2 ml-auto" type="search" placeholder="Height, Hash, Address or Transactions" aria-describedby="search-icon" aria-label="Search">
+        </div>
+        <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit">Search</button>
+      </form>
+      <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">
+            Mainnet
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="https://explorer-sokol.poanetwork/">POA Sokol</a>
+            <a class="dropdown-item" href="https://explorer-core.poanetwork/">POA Core</a>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+
+
+<!--
 <header class="header">
   <div class="header__row header__row--search">
     <div class="header__cell header__cell--search">
@@ -7,7 +67,6 @@
       <% end %>
     </div>
   </div>
-
   <nav class="header__row header__row--topnav">
     <ul class="nav">
       <li class="nav-item">
@@ -15,12 +74,7 @@
           <i class="fas fa-home fa-2x text-muted"></i>
         <% end %>
       </li>
-      <li calss="nav-item">
-        <%= link to: block_path(@conn, :index, Gettext.get_locale), class: "nav-link topnav-nav-link" do %>
-          <img src="<%= static_path(@conn, "/images/block.svg") %>" />
-          <%= gettext("Blocks") %>
-        <% end %>
-      </li>
+
       <li calss="nav-item dropdown">
         <a class="topnav-nav-link nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <img src="<%= static_path(@conn, "/images/transaction.svg") %>" />
@@ -33,4 +87,13 @@
       </li>
     </ul>
   </nav>
-</header>
+  <div class="dropdown">
+    <button class="switch-network dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Switch Network
+    </button>
+    <div class="dropdown-menu switch-network-menu" aria-labelledby="dropdownMenuButton">
+      <a class="dropdown-item switch-network-item" href="https://explorer-core.poanetwork/">POA Core</a>
+      <a class="dropdown-item switch-network-item" href="https://explorer-sokol.poanetwork/">POA Sokol</a>
+    </div>
+  </div>
+</header> -->
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
index 1aae0daff9..c37487151a 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
@@ -14,7 +14,7 @@
       <%= render ExplorerWeb.LayoutView, "_sidebar.html", assigns %>
       <!-- Page Content Holder -->
       <div id="content">
-        <div class="content-header">
+        <div>
           <nav>
             <button type="button" id="sidebarCollapse" class="navbar-btn">
                 <span></span>
@@ -22,7 +22,6 @@
                 <span></span>
             </button>
           </nav>
-          <%= render ExplorerWeb.LayoutView, "_ribbon.html", assigns %>
           <%= render ExplorerWeb.LayoutView, "_topnav.html", assigns %>
         </div>
         <div class="content-container">

From 735c5fff81d6fe67c81bb3cb7bb081a4923404d7 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Tue, 19 Jun 2018 16:43:03 -0400
Subject: [PATCH 02/22] [WIP] Style header and footer elements

---
 .../assets/css/components/_footer.scss        | 44 ++++++++++++++++---
 .../assets/css/components/navbar.scss         | 12 ++---
 .../templates/layout/_footer.html.eex         | 42 +++++++++---------
 3 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss
index 8b6878a608..52f452796e 100644
--- a/apps/explorer_web/assets/css/components/_footer.scss
+++ b/apps/explorer_web/assets/css/components/_footer.scss
@@ -1,16 +1,50 @@
+$footer-height: 50px;
+$footer-padding: 1rem;
+$social-link-size: 2rem;
+$social-link-padding: $footer-padding / 2;
+$footer-text-color: rgba($white, 0.7);
+
 .footer {
+  position: relative;
   font-size: 12px;
   display: block;
   bottom: 0;
-  background: $gray-100;
-  color:$gray-600;
+  background: $primary;
+  color: $footer-text-color;
   text-align: center;
-  margin-top: 15px;
-  padding: 14px;
-  height: 50px;
+  margin-top: $footer-padding;
+  padding: $footer-padding;
+  height: $footer-height;
 
 
   @media (max-width: 768px) {
     width: 100%;
   }
 }
+
+.footer .social-links {
+  position :absolute;
+  top: 0;
+  right: $footer-padding;
+  height: $footer-height;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  & > a {
+    width: $social-link-size;
+    height: $social-link-size;
+    margin: 0 $social-link-padding;
+    padding: $social-link-padding;
+    text-align: center;
+    color: $footer-text-color;
+    background-color: rgba($white, 0.25);
+    border-radius: 50%;
+    transition: all 0.1s ease;
+
+    &:hover {
+      background-color: $white;
+      color: $primary;
+    }
+  }
+}
diff --git a/apps/explorer_web/assets/css/components/navbar.scss b/apps/explorer_web/assets/css/components/navbar.scss
index 069f644e74..e97b9ff753 100644
--- a/apps/explorer_web/assets/css/components/navbar.scss
+++ b/apps/explorer_web/assets/css/components/navbar.scss
@@ -4,20 +4,22 @@
 
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
   }
 }
 
 .navbar .form-control {
   background: transparent;
-  width: 40%;
-  font-size: 11px;
-
+  width: calc(43ch + #{$input-padding-x * 2});
+  font-size: 12px;
+  border-left: none;
+  color: $white;
 }
 
 .navbar .input-group-text {
   background: none;
+  border-right: none;
 }
 
 .fa-search {
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index 4f1e1937db..d1d3bf28b2 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -1,24 +1,26 @@
 <footer class="footer">
   <%= gettext "Copyright %{year} POA", year: 2018 %>
 
-  <a href="https://www.facebook.com/PoaNetwork/" target="_blank">
-    <div class="theme__ribbon--social-icons">
-      <i class="fab fa-facebook-f"></i>
-    </div>
-  </a>
-  <a href="https://www.instagram.com/PoaNetwork/" target="_blank">
-    <div class="theme__ribbon--social-icons">
-      <i class="fab fa-instagram"></i>
-    </div>
-  </a>
-  <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-    <div class="theme__ribbon--social-icons">
-      <i class="fab fa-twitter"></i>
-    </div>
-  </a>
-  <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-    <div class="theme__ribbon--social-icons">
-      <i class="fab fa-telegram-plane"></i>
-    </div>
-  </a>
+  <div class="social-links">
+    <a href="https://www.facebook.com/PoaNetwork/" target="_blank">
+      <div class="">
+        <i class="fab fa-facebook-f"></i>
+      </div>
+    </a>
+    <a href="https://www.instagram.com/PoaNetwork/" target="_blank">
+      <div class="">
+        <i class="fab fa-instagram"></i>
+      </div>
+    </a>
+    <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
+      <div class="">
+        <i class="fab fa-twitter"></i>
+      </div>
+    </a>
+    <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
+      <div class="">
+        <i class="fab fa-telegram-plane"></i>
+      </div>
+    </a>
+  </div>
 </footer>

From e9f022adaee2abec24d3c41741b82045104adb53 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 09:54:05 -0400
Subject: [PATCH 03/22] Refactor footer elements

---
 .../assets/css/components/_footer.scss        | 19 ++++++++-------
 .../templates/layout/_footer.html.eex         | 24 +++++++------------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss
index 52f452796e..1c8fb21025 100644
--- a/apps/explorer_web/assets/css/components/_footer.scss
+++ b/apps/explorer_web/assets/css/components/_footer.scss
@@ -1,14 +1,14 @@
-$footer-height: 50px;
-$footer-padding: 1rem;
+$footer-height: 4rem;
+$footer-padding: 1em;
 $social-link-size: 2rem;
-$social-link-padding: $footer-padding / 2;
 $footer-text-color: rgba($white, 0.7);
 
 .footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   font-size: 12px;
-  display: block;
-  bottom: 0;
   background: $primary;
   color: $footer-text-color;
   text-align: center;
@@ -23,7 +23,7 @@ $footer-text-color: rgba($white, 0.7);
 }
 
 .footer .social-links {
-  position :absolute;
+  position: absolute;
   top: 0;
   right: $footer-padding;
   height: $footer-height;
@@ -32,11 +32,12 @@ $footer-text-color: rgba($white, 0.7);
   align-items: center;
 
   & > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $social-link-size;
     height: $social-link-size;
-    margin: 0 $social-link-padding;
-    padding: $social-link-padding;
-    text-align: center;
+    margin: 0 $footer-padding;
     color: $footer-text-color;
     background-color: rgba($white, 0.25);
     border-radius: 50%;
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index d1d3bf28b2..438b137139 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -2,25 +2,17 @@
   <%= gettext "Copyright %{year} POA", year: 2018 %>
 
   <div class="social-links">
-    <a href="https://www.facebook.com/PoaNetwork/" target="_blank">
-      <div class="">
-        <i class="fab fa-facebook-f"></i>
-      </div>
+    <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook">
+      <i class="fab fa-facebook-f"></i>
     </a>
-    <a href="https://www.instagram.com/PoaNetwork/" target="_blank">
-      <div class="">
-        <i class="fab fa-instagram"></i>
-      </div>
+    <a href="https://www.instagram.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram">
+      <i class="fab fa-instagram"></i>
     </a>
-    <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-      <div class="">
-        <i class="fab fa-twitter"></i>
-      </div>
+    <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter">
+      <i class="fab fa-twitter"></i>
     </a>
-    <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-      <div class="">
-        <i class="fab fa-telegram-plane"></i>
-      </div>
+    <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Telegram">
+      <i class="fab fa-telegram-plane"></i>
     </a>
   </div>
 </footer>

From bc500c6da927d37f023bd8507e215c3dcefacdd3 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 10:17:51 -0400
Subject: [PATCH 04/22] Fix search bar focus state and sizing

---
 apps/explorer_web/assets/css/components/navbar.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/explorer_web/assets/css/components/navbar.scss b/apps/explorer_web/assets/css/components/navbar.scss
index e97b9ff753..0a3e48d845 100644
--- a/apps/explorer_web/assets/css/components/navbar.scss
+++ b/apps/explorer_web/assets/css/components/navbar.scss
@@ -2,7 +2,7 @@
   height: 36px;
 }
 
-@media (min-width: 992px) {
+@include media-breakpoint-up(md) {
   .navbar-expand-lg .navbar-nav .nav-link {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -11,10 +11,19 @@
 
 .navbar .form-control {
   background: transparent;
-  width: calc(43ch + #{$input-padding-x * 2});
+  width: auto;
   font-size: 12px;
   border-left: none;
   color: $white;
+
+  &:focus {
+    border-color: $input-border-color;
+    box-shadow: none;
+  }
+
+  @include media-breakpoint-up(xl) {
+    width: calc(43ch + #{$input-padding-x * 2});
+  }
 }
 
 .navbar .input-group-text {

From 52fbe5d91bc084a598340b0a543fb7df8899c612 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 11:24:25 -0400
Subject: [PATCH 05/22] [WIP] Add hover and active state styles for navbar
 links

---
 .../assets/css/components/navbar.scss         | 41 +++++++++++++++++++
 .../templates/layout/_topnav.html.eex         |  2 +-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/apps/explorer_web/assets/css/components/navbar.scss b/apps/explorer_web/assets/css/components/navbar.scss
index 0a3e48d845..10f2bb431a 100644
--- a/apps/explorer_web/assets/css/components/navbar.scss
+++ b/apps/explorer_web/assets/css/components/navbar.scss
@@ -9,6 +9,10 @@
   }
 }
 
+.navbar .nav-link {
+  color: $white;
+}
+
 .navbar .form-control {
   background: transparent;
   width: auto;
@@ -34,3 +38,40 @@
 .fa-search {
   color: $white;
 }
+
+.topnav-nav-link {
+  position: relative;
+  color: $white;
+
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    bottom: -0.25rem;
+    left: 50%;
+    width: 0.25rem;
+    height: 0.25rem;
+    background-color: $white;
+    opacity: 0;
+    transform: translateX(-50%);
+    transition: bottom 0.2s ease-in, opacity 0.2s ease, width 0.2s 0.3s ease-in-out;
+  }
+
+  &:hover {
+    color: $white;
+
+    &:before {
+      bottom: 0.25rem;
+      width: 100%;
+      opacity: 1;
+    }
+  }
+
+  &:active {
+
+    &:before {
+      width: 80%;
+      transition: width 0.1s ease;
+    }
+  }
+}
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
index d25e2497fb..e27aae3dba 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-primary">
+<nav class="navbar navbar-expand-lg bg-primary">
   <div class="container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
       <img class="navbar-logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />

From f935066c5c2f1c8a128641b10adca88452c89ce1 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 13:13:48 -0400
Subject: [PATCH 06/22] [WIP] Nav link hover state

---
 apps/explorer_web/assets/css/components/navbar.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/explorer_web/assets/css/components/navbar.scss b/apps/explorer_web/assets/css/components/navbar.scss
index 10f2bb431a..ad300ee2f5 100644
--- a/apps/explorer_web/assets/css/components/navbar.scss
+++ b/apps/explorer_web/assets/css/components/navbar.scss
@@ -54,7 +54,7 @@
     background-color: $white;
     opacity: 0;
     transform: translateX(-50%);
-    transition: bottom 0.2s ease-in, opacity 0.2s ease, width 0.2s 0.3s ease-in-out;
+    transition: bottom 0.2s ease-in, opacity 0.2s ease, width 0.2s 0.3s ease-in-out, height 0.3s 0.1s ease-in-out;
   }
 
   &:hover {
@@ -63,6 +63,7 @@
     &:before {
       bottom: 0.25rem;
       width: 100%;
+      height: 0.1rem;
       opacity: 1;
     }
   }

From f07788145cf9b373cbe8f15b77859513e89a50b1 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Wed, 20 Jun 2018 13:19:33 -0400
Subject: [PATCH 07/22] Refactoring of css/html & removing code

---
 apps/explorer_web/assets/css/_content.scss    |  74 -------
 apps/explorer_web/assets/css/app.scss         |   8 +-
 .../assets/css/components/_chain.scss         |   3 +-
 .../assets/css/components/_footer.scss        |   1 -
 .../assets/css/components/_header.scss        | 122 ------------
 .../components/{navbar.scss => _navbar.scss}  |   0
 .../assets/css/components/_sidebar.scss       | 180 ------------------
 .../assets/css/explorer/_all.scss             |   3 -
 .../assets/css/explorer/_breakpoints.scss     |   5 -
 .../assets/css/explorer/_paper.scss           |   7 -
 .../assets/css/explorer/_size.scss            |  17 --
 .../assets/css/theme/_theme_ribbon.scss       | 145 --------------
 .../templates/layout/_ribbon.html.eex         |  32 ----
 .../templates/layout/_sidebar.html.eex        |  60 ------
 .../templates/layout/app.html.eex             |  32 +---
 15 files changed, 11 insertions(+), 678 deletions(-)
 delete mode 100644 apps/explorer_web/assets/css/_content.scss
 delete mode 100644 apps/explorer_web/assets/css/components/_header.scss
 rename apps/explorer_web/assets/css/components/{navbar.scss => _navbar.scss} (100%)
 delete mode 100644 apps/explorer_web/assets/css/components/_sidebar.scss
 delete mode 100644 apps/explorer_web/assets/css/explorer/_all.scss
 delete mode 100644 apps/explorer_web/assets/css/explorer/_breakpoints.scss
 delete mode 100644 apps/explorer_web/assets/css/explorer/_paper.scss
 delete mode 100644 apps/explorer_web/assets/css/explorer/_size.scss
 delete mode 100644 apps/explorer_web/assets/css/theme/_theme_ribbon.scss
 delete mode 100644 apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex
 delete mode 100644 apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex

diff --git a/apps/explorer_web/assets/css/_content.scss b/apps/explorer_web/assets/css/_content.scss
deleted file mode 100644
index 3bf4a41ac8..0000000000
--- a/apps/explorer_web/assets/css/_content.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.content-wrapper {
-  display: flex;
-  align-items: stretch;
-  min-height: 100vh;
-}
-
-#content {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-container {
-  flex-grow: 1;
-  padding-top: 85px;
-}
-
-.content-header {
-  display: flex;
-  position: fixed;
-  width: 100%;
-  z-index: 1001;
-}
-
-.container {
-
-  &__section {
-    display: block;
-    padding: 0 15px;
-    margin: 0 10px;
-  }
-}
-
-@media (max-width: 768px) {
-
-  #content {
-    height: 100%;
-  }
-}
-
-
-@media (min-width: 768px) {
-
-  .content-header {
-    width: 100%;
-  }
-
-  .content-container {
-    padding-top: 155px;
-  }
-
-  .container {
-
-    &__section {
-      &--partitioned {
-        display: flex;
-        justify-content: space-between;
-        align-items: stretch;
-      }
-    }
-
-    &__subsection {
-      flex: 1;
-
-        &-chain {
-        margin: 10px 5px;
-      }
-    }
-  }
-}
-
-.has-error {
-  color: $red;
-}
diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss
index bd13a7af17..3a0e9d7e1c 100644
--- a/apps/explorer_web/assets/css/app.scss
+++ b/apps/explorer_web/assets/css/app.scss
@@ -1,4 +1,3 @@
-@import "explorer/all";
 
 /* Phoenix flash messages */
 .alert:empty { display: none; }
@@ -29,8 +28,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/utilities/sizing";
 @import "node_modules/bootstrap/scss/utilities/display";
 @import "node_modules/bootstrap/scss/utilities/flex";
+@import "node_modules/bootstrap/scss/utilities/float";
 @import "node_modules/bootstrap/scss/utilities/text";
 @import "node_modules/bootstrap/scss/utilities/background";
+@import "node_modules/bootstrap/scss/utilities/position";
 
 // Bootstrap Components
 @import "node_modules/bootstrap/scss/dropdown";
@@ -42,18 +43,13 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/forms";
 
 //Custom theme
-@import "theme/theme_ribbon";
 @import "theme/fonts";
 
 // Custom SCSS
-@import "content";
-@import "utilities";
 @import "typography";
 @import "tooltip";
 @import "code";
 @import "components/panels";
-@import "components/header";
-@import "components/sidebar";
 @import "components/nav_tabs";
 @import "components/chain";
 @import "components/dot";
diff --git a/apps/explorer_web/assets/css/components/_chain.scss b/apps/explorer_web/assets/css/components/_chain.scss
index ca864a52b6..f42d06171e 100644
--- a/apps/explorer_web/assets/css/components/_chain.scss
+++ b/apps/explorer_web/assets/css/components/_chain.scss
@@ -1,5 +1,4 @@
 .chain {
-  @extend %paper;
   justify-conntent: space-around;
   align-items: flex-start;
   padding: explorer-size(0) 0;
@@ -61,7 +60,7 @@
   }
 }
 
-@media (min-width: $explorer-breakpoint-md) {
+@include media-breakpoint-up(md) {
 
   .container__stats {
     color: $gray-500;
diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss
index 1c8fb21025..c59413e394 100644
--- a/apps/explorer_web/assets/css/components/_footer.scss
+++ b/apps/explorer_web/assets/css/components/_footer.scss
@@ -7,7 +7,6 @@ $footer-text-color: rgba($white, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
   font-size: 12px;
   background: $primary;
   color: $footer-text-color;
diff --git a/apps/explorer_web/assets/css/components/_header.scss b/apps/explorer_web/assets/css/components/_header.scss
deleted file mode 100644
index b9aa40a64c..0000000000
--- a/apps/explorer_web/assets/css/components/_header.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.header {
-  background: $gray-100;
-  box-shadow: 0 2px 2px 0 rgba($gray-900, 0.16),
-              0 0px 2px 0 rgba($gray-900, 0.12);
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-
-  &__row {
-    vertical-align: middle;
-    display: flex;
-
-    &--theme {
-      display: none;
-    }
-
-    &--search {
-      background-color: $secondary;
-      padding: 5px;
-    }
-  }
-
-  &__cell {
-
-     &--links {
-       display: flex;
-       padding: 15px 25px;
-
-       img {
-         height: 20px;
-       }
-
-       i {
-         font-size: 1.55em;
-         color: $gray-500;
-
-       }
-     }
-
-    &--search {
-      font-size: 12px;
-      width: 75%;
-      height: 45px;
-      margin: 3px;
-
-      &-form {
-        position: relative;
-        border: 1px solid darken($secondary, 35%);
-      }
-
-      &-glass {
-        height: 15px;
-        width: 15px;
-        position: absolute;
-        top: 18px;
-        left: 16px;
-        opacity: 0.5;
-        color: darken($secondary, 45%);
-      }
-
-      &-input  {
-        width: 100%;
-        border: none;
-        background-color: transparent;
-        height: 45px;
-        padding-left: 45px;
-
-
-        &[placeholder] {
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-}
-
-input::-webkit-input-placeholder {
-  color: darken($secondary, 75%);
-}
-
-@media (max-width: 768px) {
-  .header {
-    &__row {
-
-      &--topnav {
-        display: none;
-      }
-
-      &--theme {
-        background-color: $primary;
-        padding: 5px;
-      }
-    }
-
-    &__cell {
-
-      &--search {
-        padding-left: 8px;
-        width: 95%;
-        height: 50px;
-        margin: 3px 0px;
-      }
-    }
-  }
-}
-
-.topnav-dropdown {
-  background: $gray-100;
-  width: 85px;
-  border: none;
-  transform: translate3d(48px, 35px, 0px) !important;
-}
-
-.topnav-dropdown-items {
-  padding-left: 12px;
-}
-
-.topnav-nav-link {
-  margin-top: 3px;
-  color: $gray-800;
-}
diff --git a/apps/explorer_web/assets/css/components/navbar.scss b/apps/explorer_web/assets/css/components/_navbar.scss
similarity index 100%
rename from apps/explorer_web/assets/css/components/navbar.scss
rename to apps/explorer_web/assets/css/components/_navbar.scss
diff --git a/apps/explorer_web/assets/css/components/_sidebar.scss b/apps/explorer_web/assets/css/components/_sidebar.scss
deleted file mode 100644
index c07c0d0f48..0000000000
--- a/apps/explorer_web/assets/css/components/_sidebar.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-
-/* ---------------------------------------------------
-    SIDEBAR STYLE
------------------------------------------------------ */
-#sidebar  {
-  width: 200px;
-  background: $navbar-light-color;
-  top: 0px;
-  z-index: 9999;
-  height: 100%;
-  position: fixed;
-
-  .sidebar-header {
-    background-color: $primary;
-    color: $gray-800;
-    height: 66px;
-    padding: 12px 12px 17px;
-    text-align: center;
-    box-shadow:0 2px 2px 0 rgba(38,50,56,.16), 0 0 2px 0 rgba(38,50,56,.12);
-
-    img {
-      width: 65%;
-    }
-  }
-  .social-media {
-    display: flex;
-    width: 100%;
-    position: absolute;
-    bottom: 15px;
-    justify-content: space-evenly;
-
-    a {
-      font-size: 18px;
-      color: $primary;
-    }
-
-  }
-}
-
-#sidebar .menu-items {
-  list-style: none;
-  padding: 0.5em 0;
-  margin: 0;
-
-  div {
-    color: $gray-800;
-    padding: 24px 2px 24px 18px;
-    font-size: 13px;
-    font-weight: normal;
-    background-repeat: no-repeat;
-    background-position: left 20px center;
-    transition: all 0.15s linear;
-    cursor: pointer;
-
-    img {
-      width: 33px;
-      height: 100%;
-      margin-right: 5px;
-    }
-
-    &:hover {
-     background-color: rgba(0, 0, 0, 0.1);
-    }
-
-    &:focus {
-     outline: none;
-    }
-  }
-
-  .fa-sitemap, .fa-home {
-    color: $gray-500;
-  }
-}
-
-#sidebar li {
-  list-style-type: none;
-  padding-left: 5px;
-  line-height: 25px;
-}
-
-a[data-toggle="collapse"] {
-    position: relative;
-}
-
-#sidebar--container {
-  width: 200px;
-  display: none;
-}
-
-#pageSubmenu {
-  margin-bottom: 5px;
-}
-
-/* ---------------------------------------------------
-    CONTENT STYLE
------------------------------------------------------ */
-#sidebarCollapse {
-  display: none;
-}
-
-
-/* ---------------------------------------------------
-    MEDIAQUERIES
------------------------------------------------------ */
-@media (max-width: 768px) {
-    #sidebar--container {
-        display: block;
-        margin-left: -200px;
-        transform: rotateY(90deg);
-        height: 100vh;
-        position: fixed;
-        transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
-
-        ~ #content {
-          position: absolute;
-          left: 0;
-          right: 0;
-          transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
-        }
-      }
-
-    #sidebar--container.active {
-        margin-left: 0;
-        transform: none;
-        outline: none;
-
-        ~ #content {
-          left: 200px;
-          right: -200px;
-        }
-      }
-
-    #sidebar .menu-items div {
-      padding-top: 11px;
-    }
-
-    #sidebarCollapse {
-      display: block;
-      width: 45px;
-      height: 66px;
-      background-image: none;
-      background-color: $primary;
-      border-color: transparent !important;
-      box-shadow: 0 2px 2px 0 rgba(38,50,56,.16), 0 0 2px 0 rgba(38,50,56,.12);
-      outline: none;
-    }
-
-    #sidebarCollapse span {
-        width: 80%;
-        height: 2px;
-        margin: 0 auto;
-        display: block;
-        background: $white;
-        transition: all 0.8s;
-    }
-
-
-    #sidebarCollapse span:first-of-type,
-    #sidebarCollapse span:nth-of-type(2),
-    #sidebarCollapse span:last-of-type {
-        transform: none;
-        opacity: 1;
-        margin: 7px auto;
-    }
-    #sidebarCollapse.active span {
-        transform: none;
-        opacity: 1;
-        margin: 0 auto;
-
-    }
-    #sidebarCollapse.active span:first-of-type {
-        transform: rotate(45deg) translate(2px, 2px);
-    }
-    #sidebarCollapse.active span:nth-of-type(2) {
-        opacity: 0;
-    }
-    #sidebarCollapse.active span:last-of-type {
-        transform: rotate(-45deg) translate(1px, -1px);
-    }
-}
diff --git a/apps/explorer_web/assets/css/explorer/_all.scss b/apps/explorer_web/assets/css/explorer/_all.scss
deleted file mode 100644
index 110085ca79..0000000000
--- a/apps/explorer_web/assets/css/explorer/_all.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "breakpoints";
-@import "size";
-@import "paper";
diff --git a/apps/explorer_web/assets/css/explorer/_breakpoints.scss b/apps/explorer_web/assets/css/explorer/_breakpoints.scss
deleted file mode 100644
index a59d8f5047..0000000000
--- a/apps/explorer_web/assets/css/explorer/_breakpoints.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$explorer-breakpoint-landscape: 480px;
-$explorer-breakpoint-sm: 544px;
-$explorer-breakpoint-md: 768px;
-$explorer-breakpoint-lg: 992px;
-$explorer-breakpoint-xl: 1200px;
diff --git a/apps/explorer_web/assets/css/explorer/_paper.scss b/apps/explorer_web/assets/css/explorer/_paper.scss
deleted file mode 100644
index 5384b4f29d..0000000000
--- a/apps/explorer_web/assets/css/explorer/_paper.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-%paper {
-  margin-bottom: 1rem;
-  border-radius: 5px;
-  background-color: #fff;
-  box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.16),
-              0 0px 2px 0 rgba(0, 0, 0, 0.12);
-}
diff --git a/apps/explorer_web/assets/css/explorer/_size.scss b/apps/explorer_web/assets/css/explorer/_size.scss
deleted file mode 100644
index 56f2255b26..0000000000
--- a/apps/explorer_web/assets/css/explorer/_size.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-$golden-ratio: 1.61803398875;
-
-@function explorer-size($exponent) {
-  $value: $golden-ratio;
-
-  @if $exponent > 0 {
-    @for $i from 1 through $exponent {
-      $value: $value * $golden-ratio;
-    }
-  } @elseif $exponent < 0 {
-    @for $i from 1 through -$exponent {
-      $value: $value / $golden-ratio;
-    }
-  }
-
-  @return 1rem * $value;
-}
diff --git a/apps/explorer_web/assets/css/theme/_theme_ribbon.scss b/apps/explorer_web/assets/css/theme/_theme_ribbon.scss
deleted file mode 100644
index 1b9b792925..0000000000
--- a/apps/explorer_web/assets/css/theme/_theme_ribbon.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-.theme__ribbon {
-  width: 155px;
-  height: 160px;
-  position: absolute;
-  right: 8%;
-  color: white;
-  padding: 10px;
-  z-index: 9999;
-  perspective: 800px;
-  backface-visibility: hidden;
-  outline: 1px solid transparent;
-
-  @media (max-width: 890px) {
-    right: 1%;
-  }
-
-  @media (max-width: 768px) {
-    display: none;
-  }
-
-  &--logo {
-    width: 100%;
-    padding: 35px 15px;
-  }
-
-  &--social {
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    margin-bottom: 2px;
-    justify-content: center;
-    width: 100%;
-
-    &-icons {
-      display: flex;
-      font-size: 15px;
-      padding: 8px;
-      color: lighten($primary, 25%);
-      justify-content: space-between;
-    }
-
-    &-divider {
-      width: 1px;
-      padding: 0px !important;
-      background: lighten($primary, 25%);
-    }
-  }
-}
-
-.flex {
-  display: flex;
-  justify-content: center;
-  position: absolute;
-  bottom: 5px;
-  left: 1px;
-  margin-left: 8px;
-}
-
-
-//Ribbon FLip Syles
-
-.ribbon {
-    width: 100%;
-    height: 100%;
-    transition: all .5s;
-    backface-visibility: hidden;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    outline: 1px solid transparent;
-
-}
-
-.front {
-    z-index: 2;
-    background-color:  $primary;
-    outline: 1px solid transparent;
-    box-shadow: 0 2px 2px 0 rgba(#212529, 0.16),
-                0 0px 2px 0 rgba(#212529, 0.12);
-}
-
-.back {
-    z-index: 1;
-    transform: rotateY(-180deg);
-    background-color:  $primary;
-    outline: 1px solid transparent;
-    box-shadow: 0 2px 2px 0 rgba(#212529, 0.16),
-                0 0px 2px 0 rgba(#212529, 0.12);
-
-    & .switch-network {
-      font-size: 12px;
-      padding: 3px;
-      background-color: lighten($primary, 25%);
-      width: 115px;
-    }
-
-    & .switch-network-menu {
-      width: 115px;
-    }
-
-    & .switch-network-item {
-      padding: 3px 5px;
-    }
-
-    & .back-arrow {
-      position: absolute;
-      bottom: 0;
-      margin: 0px 0px 10px -10px;
-    }
-}
-
-.rotatecard, .rotatecardback{
-  z-index: 3;
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.flipped{
-  z-index: 1;
-  transform: rotateY(180deg);
-  backface-visibility: hidden;
-  outline: 1px solid transparent;
-}
-
-.backflip {
-  z-index: 2;
-  transform: rotateY(0deg);
-  transition: all .5s;
-  outline: 1px solid transparent;
-}
-
-.change-color svg {
-  width: 20px;
-  height: 20px;
-
-path {
-  fill: $primary;
-  }
-}
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex
deleted file mode 100644
index 8f6f0c6182..0000000000
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_ribbon.html.eex
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="theme__ribbon">
-    <div class="front ribbon">
-      
-      <div class="theme__ribbon--social" align="right">
-
-        <div class="theme__ribbon--social-icons u-padding-none">
-          <i class="theme__ribbon--social-divider"></i>
-        </div>
-        <button class="rotatecard header__link">
-          <div class="theme__ribbon--social-icons ">
-            <i class="fa fa-sitemap"></i>
-          </div>
-        </button>
-      </div>
-    </div>
-    <div class="back ribbon">
-      <%= link to: chain_path(@conn, :show) do %>
-        <img class="theme__ribbon--logo" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />
-      <% end %>
-      <div class="flex">
-
-
-      <div class="header__cell header__cell--social" align="right">
-        <button class="rotatecardback">
-          <div class="theme__ribbon--social-icons">
-            <i class="fa fa-arrow-left "></i>
-          </div>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex
deleted file mode 100644
index e8f0f6164f..0000000000
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_sidebar.html.eex
+++ /dev/null
@@ -1,60 +0,0 @@
-<div id="sidebar--container">
-  <nav id="sidebar">
-    <div class="sidebar-header">
-      <%= link to: chain_path(@conn, :show) do %>
-        <img class="" src="<%= static_path(@conn, "/images/poa_logo.svg") %>" />
-      <% end %>
-    </div>
-    <div class="menu-items" role="navigation">
-      <div tabindex="0" class="icon-locate">
-        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
-          <i class="fa fa-sitemap fa-2x u-nudge-right u-nudge-top"></i>
-          <%= gettext("Switch Network ") %>
-          <i class="fa fa-caret-down"></i>
-        </a>
-        <ul class="collapse list-unstyled" id="pageSubmenu">
-          <li><a href="#">Explorer</a></li>
-          <li><a href="#">Sokol (Testnet)</a></li>
-          <li><a href="#">Mainnet</a></li>
-        </ul>
-      </div>
-      <%= link to: block_path(@conn, :index, Gettext.get_locale), class: "header__link" do %>
-        <div tabindex="0" class="icon-locate">
-            <i class="fas fa-home fa-2x u-nudge-right u-nudge-top"></i>
-            <%= gettext("Dashboard") %>
-        </div>
-      <% end %>
-      <%= link to: block_path(@conn, :index, Gettext.get_locale), class: "header__link" do %>
-        <div tabindex="0" class="icon-locate">
-            <img class="" src="<%= static_path(@conn, "/images/block.svg") %>" />
-            <%= gettext("Blocks") %>
-        </div>
-      <% end %>
-      <div tabindex="0" class="icon-locate">
-        <a href="#pageSubmenu-tx" data-toggle="collapse" aria-expanded="false">
-          <img class="" src="<%= static_path(@conn, "/images/transaction.svg") %>" />
-          <%= gettext("Transactions") %>
-          <i class="fa fa-caret-down"></i>
-        </a>
-        <ul class="collapse list-unstyled" id="pageSubmenu-tx">
-          <li><%= link(gettext("Validated"), to: transaction_path(@conn, :index, Gettext.get_locale)) %></li>
-          <li><%= link(gettext("Pending"), to: pending_transaction_path(@conn, :index, Gettext.get_locale)) %></li>
-        </ul>
-      </div>
-    </div>
-    <div class="social-media">
-      <a href="https://www.facebook.com/PoaNetwork/" target="_blank">
-        <i class="fab fa-facebook-f"></i>
-      </a>
-      <a href="https://www.instagram.com/PoaNetwork/" target="_blank">
-        <i class="fab fa-instagram"></i>
-      </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-        <i class="fab fa-twitter"></i>
-      </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank">
-        <i class="fab fa-telegram-plane"></i>
-      </a>
-    </div>
-  </nav>
-</div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
index c37487151a..57c8aac0bc 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
@@ -9,30 +9,14 @@
   </head>
 
   <body>
-    <div class="content-wrapper">
-      <!-- Sidebar Holder -->
-      <%= render ExplorerWeb.LayoutView, "_sidebar.html", assigns %>
-      <!-- Page Content Holder -->
-      <div id="content">
-        <div>
-          <nav>
-            <button type="button" id="sidebarCollapse" class="navbar-btn">
-                <span></span>
-                <span></span>
-                <span></span>
-            </button>
-          </nav>
-          <%= render ExplorerWeb.LayoutView, "_topnav.html", assigns %>
-        </div>
-        <div class="content-container">
-          <main>
-            <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-            <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-            <%= render @view_module, @view_template, assigns %>
-          </main>
-        </div>
-        <%= render ExplorerWeb.LayoutView, "_footer.html", assigns %>
-      </div>
+    <div>
+      <%= render ExplorerWeb.LayoutView, "_topnav.html", assigns %>
+      <main class="mt-3">
+        <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+        <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+        <%= render @view_module, @view_template, assigns %>
+      </main>
+      <%= render ExplorerWeb.LayoutView, "_footer.html", assigns %>
       <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
   </body>
 </html>

From 4ec09da37efb03e29ea34fb4e4c14e9a6535d433 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Wed, 20 Jun 2018 13:20:31 -0400
Subject: [PATCH 08/22] Updated floats to bootstrap utilities

---
 apps/explorer_web/assets/css/_utilities.scss  | 625 ------------------
 .../assets/css/components/_panels.scss        |   1 -
 .../index.html.eex                            |   3 +-
 .../address_transaction/index.html.eex        |   2 +-
 .../templates/chain/_blocks.html.eex          |   2 +-
 .../templates/chain/_transactions.html.eex    |   2 +-
 .../pending_transaction/index.html.eex        |   2 +-
 .../templates/transaction/index.html.eex      |   2 +-
 8 files changed, 7 insertions(+), 632 deletions(-)
 delete mode 100644 apps/explorer_web/assets/css/_utilities.scss

diff --git a/apps/explorer_web/assets/css/_utilities.scss b/apps/explorer_web/assets/css/_utilities.scss
deleted file mode 100644
index 95374c8222..0000000000
--- a/apps/explorer_web/assets/css/_utilities.scss
+++ /dev/null
@@ -1,625 +0,0 @@
-$shove-size: 100px;
-$push-size: 50px;
-$push-size-lg: 75px;
-$push-size-md: 35px;
-$u-push-this: 25px;
-$push-size-sm: 15px;
-$nudge-more-size: 10px;
-$nudge-size: 5px;
-
-
-$padding-lg: 50px;
-$padding-md: 30px;
-$padding-sm: 15px;
-$padding-xs-plus: 10px;
-$padding-xs: 5px;
-
-
-
-// Width ---------------------------------------------------
-
-.u-width {
-  &--half {
-    width: 50%;
-  }
-}
-
-// Margin --------------------------------------------------
-
-.u-shove {
-  margin: $shove-size;
-  @media screen and (max-width: 768px) {margin: $shove-size * 0.5;}
-
-  &-vertical {
-    margin-top: $shove-size;
-    margin-bottom: $shove-size;
-    @media screen and (max-width: 768px) {margin-top: $shove-size * 0.5; margin-bottom: $shove-size * 0.5;}
-  }
-
-  &-top {
-    margin-top: $shove-size !important;
-    @media screen and (max-width: 768px) {margin-top: $shove-size * 0.5;}
-  }
-
-  &-bottom {
-    margin-bottom: $shove-size;
-    @media screen and (max-width: 768px) {margin-bottom: $shove-size * 0.5;}
-  }
-
-  &-left {
-    margin-left: $shove-size;
-    @media screen and (max-width: 768px) {margin-left: $shove-size * 0.5;}
-  }
-
-  &-right {
-    margin-right: $shove-size;
-    @media screen and (max-width: 768px) {margin-right: $shove-size * 0.5;}
-  }
-}
-
-
-.u-push {
-  margin: $push-size;
-  @media screen and (max-width: 768px) {margin: $push-size * 0.5;}
-
-  &-vertical {
-    margin-top: $push-size;
-    margin-bottom: $push-size;
-    @media screen and (max-width: 768px) {margin-top: $push-size * 0.5; margin-bottom: $push-size * 0.5;}
-  }
-  &-top {
-    margin-top: $push-size !important;
-    @media screen and (max-width: 768px) {margin-top: $push-size * 0.5;}
-  }
-
-  &-bottom {
-    margin-bottom: $push-size;
-    @media screen and (max-width: 768px) {margin-bottom: $push-size * 0.5;}
-  }
-
-  &-left {
-    margin-left: $push-size !important;
-    @media screen and (max-width: 768px) {margin-left: $push-size * 0.5;}
-  }
-
-  &-right {
-    margin-right: $push-size;
-    @media screen and (max-width: 768px) {margin-right: $push-size * 0.5;}
-  }
-}
-
-.u-push-md {
-  margin: $push-size-md;
-
-  &-vertical {
-    margin-top: $push-size-md;
-    margin-bottom: $push-size-md;
-  }
-  &-top {
-    margin-top: $push-size-md;
-  }
-
-  &-bottom {
-    margin-bottom: $push-size-md;
-  }
-
-  &-left {
-    margin-left: $push-size-md;
-  }
-
-  &-right {
-    margin-right: $push-size-md;
-  }
-
-}
-
-.u-push-lg {
-  margin: $push-size-lg;
-
-  &-vertical {
-    margin-top: $push-size-lg;
-    margin-bottom: $push-size-lg;
-  }
-  &-top {
-    margin-top: $push-size-lg;
-  }
-
-  &-bottom {
-    margin-bottom: $push-size-lg;
-    @media screen and (max-width: 768px) {margin-bottom: $push-size-lg * 0.5;}
-  }
-
-  &-left {
-    margin-left: $push-size-lg;
-  }
-
-  &-right {
-    margin-right: $push-size-lg;
-  }
-
-}
-
-.u-push-sm {
-  margin: $push-size-sm;
-
-  &-vertical {
-    margin-top: $push-size-sm;
-    margin-bottom: $push-size-sm;
-  }
-  &-top {
-    margin-top: $push-size-sm !important;
-  }
-
-  &-bottom {
-    margin-bottom: $push-size-sm !important;
-  }
-
-  &-left {
-    margin-left: $push-size-sm;
-  }
-
-  &-right {
-    margin-right: $push-size-sm;
-  }
-
-}
-
-.u-nudge {
-  margin: $nudge-size;
-
-  &-vertical {
-    margin-top: $nudge-size;
-    margin-bottom: $nudge-size;
-  }
-  &-top {
-    margin-top: $nudge-size;
-  }
-
-  &-bottom {
-    margin-bottom: $nudge-size;
-  }
-
-  &-left {
-    margin-left: $nudge-size;
-  }
-
-  &-right {
-    margin-right: $nudge-size;
-  }
-}
-
-.u-nudge-more {
-  margin: $nudge-more-size;
-
-  &-vertical {
-    margin-top: $nudge-more-size;
-    margin-bottom: $nudge-more-size;
-  }
-  &-top {
-    margin-top: $nudge-more-size;
-  }
-
-  &-bottom {
-    margin-bottom: $nudge-more-size;
-  }
-
-  &-left {
-    margin-left: $nudge-more-size;
-  }
-
-  &-right {
-    margin-right: $nudge-more-size;
-  }
-}
-
-.u-push-this {
-  margin: $u-push-this;
-
-  &-vertical {
-    margin-top: $u-push-this;
-    margin-bottom: $u-push-this;
-  }
-  &-top {
-    margin-top: $u-push-this;
-  }
-
-  &-bottom {
-    margin-bottom: $u-push-this;
-  }
-
-  &-left {
-    margin-left: $u-push-this;
-  }
-
-  &-right {
-    margin-right: $u-push-this;
-  }
-}
-
-
-.u-flush {
-  margin: 0 !important;
-
-  &-sm {
-      margin: 4px 0 4px 0;
-  }
-
-  &-btm {
-    margin-bottom: 0 !important;
-  }
-
-  &-top {
-    margin-top: 0 !important;
-  }
-}
-
-// Padding --------------------------------------------------
-
-.u-padding {
-
-  &-none {
-    padding: 0px !important;
-  }
-
-  &-no-left {
-    padding-left: 0px !important;
-  }
-
-  &-no-right {
-    padding-right: 0px !important;
-  }
-
-  &-no-bottom {
-    padding-bottom: 0px !important;
-  }
-
-  &-xsmall {
-    padding: $padding-xs;
-
-    &-vertical {
-      padding-top: $padding-xs;
-      padding-bottom: $padding-xs;
-    }
-
-    &-top {
-      padding-top: $padding-xs;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-xs;
-    }
-
-    &-left {
-      padding-left: $padding-xs;
-    }
-
-    &-right {
-      padding-right: $padding-xs;
-    }
-  }
-
-  &-xs-plus {
-    padding: $padding-xs-plus;
-
-    &-vertical {
-      padding-top: $padding-xs-plus;
-      padding-bottom: $padding-xs-plus;
-    }
-
-    &-top {
-      padding-top: $padding-xs-plus;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-xs-plus;
-    }
-
-    &-left {
-      padding-left: $padding-xs-plus;
-    }
-
-    &-right {
-      padding-right: $padding-xs-plus;
-    }
-  }
-
-  &-sm {
-    padding: $padding-sm;
-
-    &-vertical {
-      padding-top: $padding-sm;
-      padding-bottom: $padding-sm;
-    }
-
-    &-top {
-      padding-top: $padding-sm;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-sm;
-    }
-
-    &-left {
-      padding-left: $padding-sm !important;
-    }
-
-    &-right {
-      padding-right: $padding-sm;
-    }
-  }
-
-  &-md {
-    padding: $padding-md;
-
-    &-vertical {
-      padding-top: $padding-md;
-      padding-bottom: $padding-md;
-    }
-
-    &-top {
-      padding-top: $padding-md;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-md;
-    }
-
-    &-left {
-      padding-left: $padding-md;
-    }
-
-    &-right {
-      padding-right: $padding-md;
-    }
-  }
-
-  &-lg {
-    padding: $padding-lg;
-
-    &-vertical {
-      padding-top: $padding-lg;
-      padding-bottom: $padding-lg;
-    }
-
-    &-top {
-      padding-top: $padding-lg;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-lg;
-    }
-
-    &-left {
-      padding-left: $padding-lg;
-    }
-
-    &-right {
-      padding-right: $padding-lg;
-    }
-  }
-}
-
-
-
-// Element Alignment --------------------------------------------
-
-.u-clear {
-  clear: both;
-}
-
-%u-align {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
-
-.u-align {
-  @extend %u-align;
-
-  &--top {
-    align-self: flex-start;
-  }
-
-  &--center {
-    align-self: center;
-  }
-
-  &--bottom {
-    align-self: flex-end;
-  }
-
-  &--stretch {
-    align-self: stretch;
-  }
-
-  &--flex{
-    display: flex;
-  }
-
-  &__vertical {
-    display: flex;
-    flex-flow: column nowrap;
-  }
-
-  &__order-1 {
-    order: 1;
-  }
-
-  &__order-2 {
-    order: 2;
-  }
-
-  &__order-3 {
-    order: 3;
-  }
-
-  &__flex-grow {
-    flex-grow: 1;
-  }
-}
-
-// Border --------------------------------------------------
-
-.u-border {
-  border: 1px solid $primary;
-
-  &-left {
-    border-left: 1px solid lighten($gray-300, 42%);
-  }
-
-  &-right {
-    border-right: 1px solid lighten($gray-300, 42%);
-  }
-
-  &-top {
-    border-top: 1px solid lighten($primary, 40%);
-  }
-
-  &-bottom {
-    border-bottom: 1px solid lighten($primary, 40%);
-
-    &-bold {
-      border-bottom: 2px solid lighten($gray-300, 32%);
-    }
-  }
-
-  &-no-right {
-    border-right: none;
-  }
-
-  &-no-left {
-    border-left: none;
-  }
-
-  &-no-top {
-    border-top: none;
-  }
-
-  &-no-bottom {
-    border-bottom: none !important;
-  }
-
-  &-none {
-    border: none !important;
-  }
-}
-
-// Typography --------------------------------------------------
-
-.u-text {
-  &-center {
-    text-align: center;
-  }
-
-  &-right {
-    text-align: right;
-  }
-
-  &-left {
-    text-align: left;
-
-  }
-}
-
-.u-hide {
-  display: none;
-}
-
-.u-italic {
-  font-style: italic;
-}
-
-.u-underline {
-  text-decoration: underline;
-}
-
-.u-list-style {
-  &--none {
-    list-style-type: none;
-    padding-left: 0;
-
-    &> li {
-      margin-bottom: 1em;
-    }
-  }
-}
-
-.u-white-space-normal {
-  white-space: normal;
-}
-
-// Display -----------------------------------------------
-
-.u-inline {
-  display: inline-block;
-}
-
-.u-block {
-  display: block;
-}
-
-.u-truncate {
-  height: 9em; /*line-height multiplied by the number of lines to show (6)*/
-  line-height: 1.5em;
-  overflow: hidden;
-  position: relative;
-
-  &:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 50%;
-    width: 100%;
-    background: linear-gradient(to bottom, rgba($white, 0), rgba($white, 1) 100%);
-  }
-
-}
-
-// Float -----------------------------------------------
-
-.u-float-left {
-  float: left !important;
-}
-
-.u-float-right {
-  float: right !important;
-}
-
-.u-float-none {
-  float: none;
-}
-
-.u-margin-auto {
-  margin: 0px auto;
-}
-
-
-// Bootstrap Column Extension --------------------------
-// Where Lauren adds some nonsense to slap some utilities
-// together to add bottom margins for mobile columns.
-
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11,
-.col-xs-12 {
-  @media (max-width: 768px) {
-    &--mb1 {
-      margin-bottom: 5px;
-    }
-    &--mb2 {
-      margin-bottom: 15px;
-    }
-    &--mb3 {
-      margin-bottom: 30px;
-    }
-  }
-}
diff --git a/apps/explorer_web/assets/css/components/_panels.scss b/apps/explorer_web/assets/css/components/_panels.scss
index eb30bffa0c..489875b7ee 100644
--- a/apps/explorer_web/assets/css/components/_panels.scss
+++ b/apps/explorer_web/assets/css/components/_panels.scss
@@ -1,5 +1,4 @@
 .panels {
-  @extend %paper;
 
   &__container {
     padding: 20px;
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex
index d03b30fcfb..d70099cd10 100644
--- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex
@@ -37,8 +37,9 @@
         </ul>
       </div>
       <div class="card-body">
+
         <%= if Enum.count(@internal_transactions) > 0 do %>
-          <div class="dropdown u-float-right u-push-sm">
+          <div class="dropdown float-right u-push-sm">
             <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
               id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Filter: <%= format_current_filter(@filter) %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex
index b0cfe77c05..8f9e30e910 100644
--- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex
@@ -38,7 +38,7 @@
       </div>
       <div class="card-body">
         <%= if Enum.count(@transactions) > 0 do %>
-          <div class="dropdown u-float-right u-push-sm">
+          <div class="dropdown float-right u-push-sm">
             <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
                     id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Filter: <%= format_current_filter(@filter) %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex
index 4963d97113..3dc51e3f8d 100644
--- a/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-body">
-    <%= link(gettext("View All"), to: block_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %>
+    <%= link(gettext("View All"), to: block_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Blocks" %></h2>
     <table class="table table-font table-responsive-lg">
       <thead>
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
index 11f8b9306d..3b847bf919 100644
--- a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-body">
-    <%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %>
+    <%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Transactions" %></h2>
     <table class="table table-font table-responsive-lg">
       <thead>
diff --git a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex
index 4e3a36fb2d..22937647aa 100644
--- a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex
@@ -67,7 +67,7 @@
   <%= if @next_page_params do %>
     <%= link(
       gettext("Older"),
-      class: "button button--secondary button--sm u-float-right mt-3",
+      class: "button button--secondary button--sm float-right mt-3",
       to: pending_transaction_path(
         @conn,
         :index,
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
index 507a36ff89..c205f381b2 100644
--- a/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex
@@ -88,7 +88,7 @@
   <%= if @next_page_params do %>
     <%= link(
       gettext("Older"),
-      class: "button button--secondary button--sm u-float-right mt-3",
+      class: "button button--secondary button--sm float-right mt-3",
       to: transaction_path(
         @conn,
         :index,

From 9051ced22790ff3491541357ee6f7ac54781404f Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Wed, 20 Jun 2018 13:20:56 -0400
Subject: [PATCH 09/22] Fixed footer to the bottom

---
 .../lib/explorer_web/templates/layout/_footer.html.eex          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index 438b137139..6e8807a208 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -1,4 +1,4 @@
-<footer class="footer">
+<footer class="footer fixed-bottom">
   <%= gettext "Copyright %{year} POA", year: 2018 %>
 
   <div class="social-links">

From 20caf92740d52be5262d252495012d23c8d4d2fb Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Wed, 20 Jun 2018 13:21:08 -0400
Subject: [PATCH 10/22] Updated font we use to Nunito

---
 apps/explorer_web/assets/css/theme/_fonts.scss         | 2 +-
 apps/explorer_web/assets/css/theme/_poa_variables.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/explorer_web/assets/css/theme/_fonts.scss b/apps/explorer_web/assets/css/theme/_fonts.scss
index 718e155505..8029217558 100644
--- a/apps/explorer_web/assets/css/theme/_fonts.scss
+++ b/apps/explorer_web/assets/css/theme/_fonts.scss
@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+@import url('https://fonts.googleapis.com/css?family=Nunito');
 @import url('https://fonts.googleapis.com/css?family=Roboto');
diff --git a/apps/explorer_web/assets/css/theme/_poa_variables.scss b/apps/explorer_web/assets/css/theme/_poa_variables.scss
index 51ffd7f4f6..6ab58c9d00 100644
--- a/apps/explorer_web/assets/css/theme/_poa_variables.scss
+++ b/apps/explorer_web/assets/css/theme/_poa_variables.scss
@@ -231,8 +231,8 @@ $transition-collapse:         height .35s ease !default;
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-family-monospace:       "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-sans-serif:      Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 

From fbb53f5f14982e5f310fa50e08d5f447267af16c Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 13:29:41 -0400
Subject: [PATCH 11/22] Add and adjust Bootstrap tooltips

---
 apps/explorer_web/assets/css/_tooltip.scss    | 115 ------------------
 apps/explorer_web/assets/css/app.scss         |   1 +
 .../assets/css/components/_footer.scss        |   1 +
 .../assets/css/theme/_poa_variables.scss      |   2 +-
 4 files changed, 3 insertions(+), 116 deletions(-)

diff --git a/apps/explorer_web/assets/css/_tooltip.scss b/apps/explorer_web/assets/css/_tooltip.scss
index 1286ebfcf9..e69de29bb2 100644
--- a/apps/explorer_web/assets/css/_tooltip.scss
+++ b/apps/explorer_web/assets/css/_tooltip.scss
@@ -1,115 +0,0 @@
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: $zindex-tooltip;
-  display: block;
-  margin: $tooltip-margin;
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  font-size: $tooltip-font-size;
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
-
-  &.show { opacity: $tooltip-opacity; }
-
-  .arrow {
-    position: absolute;
-    display: block;
-    width: $tooltip-arrow-width;
-    height: $tooltip-arrow-height;
-
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-}
-
-.bs-tooltip-top {
-  padding: $tooltip-arrow-height 0;
-
-  .arrow {
-    bottom: 0;
-
-    &::before {
-      top: 0;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
-      border-top-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-right {
-  padding: 0 $tooltip-arrow-height;
-
-  .arrow {
-    left: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
-
-    &::before {
-      right: 0;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
-      border-right-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-bottom {
-  padding: $tooltip-arrow-height 0;
-
-  .arrow {
-    top: 0;
-
-    &::before {
-      bottom: 0;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
-      border-bottom-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-left {
-  padding: 0 $tooltip-arrow-height;
-
-  .arrow {
-    right: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
-
-    &::before {
-      left: 0;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
-      border-left-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-auto {
-  &[x-placement^="top"] {
-    @extend .bs-tooltip-top;
-  }
-  &[x-placement^="right"] {
-    @extend .bs-tooltip-right;
-  }
-  &[x-placement^="bottom"] {
-    @extend .bs-tooltip-bottom;
-  }
-  &[x-placement^="left"] {
-    @extend .bs-tooltip-left;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: $tooltip-max-width;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  color: $tooltip-color;
-  text-align: center;
-  background-color: $tooltip-bg;
-  @include border-radius($tooltip-border-radius);
-}
diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss
index 3a0e9d7e1c..c3e083ef79 100644
--- a/apps/explorer_web/assets/css/app.scss
+++ b/apps/explorer_web/assets/css/app.scss
@@ -41,6 +41,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/card";
 @import "node_modules/bootstrap/scss/forms";
+@import "node_modules/bootstrap/scss/tooltip";
 
 //Custom theme
 @import "theme/fonts";
diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss
index c59413e394..92b5a3f30b 100644
--- a/apps/explorer_web/assets/css/components/_footer.scss
+++ b/apps/explorer_web/assets/css/components/_footer.scss
@@ -45,6 +45,7 @@ $footer-text-color: rgba($white, 0.7);
     &:hover {
       background-color: $white;
       color: $primary;
+      text-decoration: none;
     }
   }
 }
diff --git a/apps/explorer_web/assets/css/theme/_poa_variables.scss b/apps/explorer_web/assets/css/theme/_poa_variables.scss
index 6ab58c9d00..552f04a605 100644
--- a/apps/explorer_web/assets/css/theme/_poa_variables.scss
+++ b/apps/explorer_web/assets/css/theme/_poa_variables.scss
@@ -707,7 +707,7 @@ $card-columns-margin:               $card-spacer-y !default;
 
 // Tooltips
 
-$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-font-size:                 ($font-size-sm * 0.875) !default;
 $tooltip-max-width:                 70ch !default;
 $tooltip-color:                     $white !default;
 $tooltip-bg:                        darken($secondary, 25%) !default;

From b9058374c009c6ff4917faa01a2d19826dace444 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Wed, 20 Jun 2018 14:07:32 -0400
Subject: [PATCH 12/22] Removed old code from the header

---
 .../templates/layout/_topnav.html.eex         | 43 -------------------
 1 file changed, 43 deletions(-)

diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
index e27aae3dba..d4d6f560e4 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
@@ -54,46 +54,3 @@
     </div>
   </div>
 </nav>
-
-
-
-<!--
-<header class="header">
-  <div class="header__row header__row--search">
-    <div class="header__cell header__cell--search">
-      <%= form_for @conn, chain_path(@conn, :search, Gettext.get_locale), [class: "header__cell--search-form", method: :get, enforce_utf8: false], fn f -> %>
-        <i class="header__cell--search-glass fa fa-search"></i>
-        <%= search_input f, :q, class: 'header__cell--search-input', placeholder: gettext("Search by address, transaction hash, or block number"), "data-test": "search_input" %>
-      <% end %>
-    </div>
-  </div>
-  <nav class="header__row header__row--topnav">
-    <ul class="nav">
-      <li class="nav-item">
-        <%= link to: chain_path(@conn, :show), class: "nav-link" do %>
-          <i class="fas fa-home fa-2x text-muted"></i>
-        <% end %>
-      </li>
-
-      <li calss="nav-item dropdown">
-        <a class="topnav-nav-link nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <img src="<%= static_path(@conn, "/images/transaction.svg") %>" />
-          <%= gettext("Transactions") %>
-        </a>
-        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-          <%= link(gettext("Validated"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "dropdown-item")  %>
-          <%= link(gettext("Pending"), to: pending_transaction_path(@conn, :index, Gettext.get_locale), class: "dropdown-item") %>
-        </div>
-      </li>
-    </ul>
-  </nav>
-  <div class="dropdown">
-    <button class="switch-network dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      Switch Network
-    </button>
-    <div class="dropdown-menu switch-network-menu" aria-labelledby="dropdownMenuButton">
-      <a class="dropdown-item switch-network-item" href="https://explorer-core.poanetwork/">POA Core</a>
-      <a class="dropdown-item switch-network-item" href="https://explorer-sokol.poanetwork/">POA Sokol</a>
-    </div>
-  </div>
-</header> -->

From 1a559b03a56b551186e0257086a91588b207ad79 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Wed, 20 Jun 2018 15:58:59 -0400
Subject: [PATCH 13/22] Footer and layout changes  WIP

---
 apps/explorer_web/assets/css/_layout.scss     |  3 ++
 apps/explorer_web/assets/css/app.scss         |  2 ++
 .../assets/css/components/_footer.scss        | 11 ++-----
 .../templates/layout/_footer.html.eex         | 32 ++++++++++---------
 .../templates/layout/app.html.eex             |  3 +-
 5 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 apps/explorer_web/assets/css/_layout.scss

diff --git a/apps/explorer_web/assets/css/_layout.scss b/apps/explorer_web/assets/css/_layout.scss
new file mode 100644
index 0000000000..751b93ba90
--- /dev/null
+++ b/apps/explorer_web/assets/css/_layout.scss
@@ -0,0 +1,3 @@
+main {
+  min-height: calc(100vh - 9.9rem);
+}
diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss
index c3e083ef79..3c2eab190e 100644
--- a/apps/explorer_web/assets/css/app.scss
+++ b/apps/explorer_web/assets/css/app.scss
@@ -62,6 +62,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/table";
 @import "components/qr-code";
 @import "components/navbar";
+@import "layout";
+
 
 :export {
   primary: $primary;
diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss
index 92b5a3f30b..f19b410fe8 100644
--- a/apps/explorer_web/assets/css/components/_footer.scss
+++ b/apps/explorer_web/assets/css/components/_footer.scss
@@ -4,16 +4,14 @@ $social-link-size: 2rem;
 $footer-text-color: rgba($white, 0.7);
 
 .footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   font-size: 12px;
   background: $primary;
   color: $footer-text-color;
   text-align: center;
   margin-top: $footer-padding;
   padding: $footer-padding;
-  height: $footer-height;
+  position: relative;
+  line-height: $social-link-size;
 
 
   @media (max-width: 768px) {
@@ -22,10 +20,7 @@ $footer-text-color: rgba($white, 0.7);
 }
 
 .footer .social-links {
-  position: absolute;
-  top: 0;
-  right: $footer-padding;
-  height: $footer-height;
+  float: right;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index 6e8807a208..352759a476 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -1,18 +1,20 @@
-<footer class="footer fixed-bottom">
-  <%= gettext "Copyright %{year} POA", year: 2018 %>
+<footer class="footer">
+  <div class="container">
+    <div class="social-links">
+      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook">
+        <i class="fab fa-facebook-f"></i>
+      </a>
+      <a href="https://www.instagram.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram">
+        <i class="fab fa-instagram"></i>
+      </a>
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter">
+        <i class="fab fa-twitter"></i>
+      </a>
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Telegram">
+        <i class="fab fa-telegram-plane"></i>
+      </a>
+    </div>
+    <%= gettext "Copyright %{year} POA", year: 2018 %>
 
-  <div class="social-links">
-    <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook">
-      <i class="fab fa-facebook-f"></i>
-    </a>
-    <a href="https://www.instagram.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram">
-      <i class="fab fa-instagram"></i>
-    </a>
-    <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter">
-      <i class="fab fa-twitter"></i>
-    </a>
-    <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Telegram">
-      <i class="fab fa-telegram-plane"></i>
-    </a>
   </div>
 </footer>
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
index 57c8aac0bc..5063a07f75 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
@@ -17,6 +17,7 @@
         <%= render @view_module, @view_template, assigns %>
       </main>
       <%= render ExplorerWeb.LayoutView, "_footer.html", assigns %>
-      <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
+    </div>
+    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
   </body>
 </html>

From 49afda0b297c3c9f5eb787d299aebe1c324f5128 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 16:37:38 -0400
Subject: [PATCH 14/22] Add flexbox layout to position the footer

---
 apps/explorer_web/assets/css/_layout.scss              | 10 ++++++++--
 .../lib/explorer_web/templates/layout/app.html.eex     |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/explorer_web/assets/css/_layout.scss b/apps/explorer_web/assets/css/_layout.scss
index 751b93ba90..fe21d3d162 100644
--- a/apps/explorer_web/assets/css/_layout.scss
+++ b/apps/explorer_web/assets/css/_layout.scss
@@ -1,3 +1,9 @@
-main {
-  min-height: calc(100vh - 9.9rem);
+.layout-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
 }
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
index 5063a07f75..4ae2bd1534 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
@@ -9,7 +9,7 @@
   </head>
 
   <body>
-    <div>
+    <div class="layout-container">
       <%= render ExplorerWeb.LayoutView, "_topnav.html", assigns %>
       <main class="mt-3">
         <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>

From 1785be0697fe51a579f18bc0f526abd20508c4ab Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Wed, 20 Jun 2018 16:46:06 -0400
Subject: [PATCH 15/22] Center align footer text

---
 apps/explorer_web/assets/css/components/_footer.scss       | 7 ++++++-
 .../lib/explorer_web/templates/layout/_footer.html.eex     | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss
index f19b410fe8..3b40d5a8ad 100644
--- a/apps/explorer_web/assets/css/components/_footer.scss
+++ b/apps/explorer_web/assets/css/components/_footer.scss
@@ -19,8 +19,13 @@ $footer-text-color: rgba($white, 0.7);
   }
 }
 
+.footer-body {
+  position: relative;
+}
+
 .footer .social-links {
-  float: right;
+  position: absolute;
+  right: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index 352759a476..c8a23413f2 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -1,5 +1,5 @@
 <footer class="footer">
-  <div class="container">
+  <div class="footer-body container">
     <div class="social-links">
       <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook">
         <i class="fab fa-facebook-f"></i>
@@ -14,6 +14,7 @@
         <i class="fab fa-telegram-plane"></i>
       </a>
     </div>
+
     <%= gettext "Copyright %{year} POA", year: 2018 %>
 
   </div>

From 49704ef22a45cc6ae057b3ad13181ebfa9038f8c Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 10:01:25 -0400
Subject: [PATCH 16/22] Fixed search input test

---
 .../lib/explorer_web/templates/layout/_topnav.html.eex      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
index d4d6f560e4..240d58326c 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
@@ -31,15 +31,15 @@
           <!-- Does not go to where it should go please commented out before pushing to master  -->
         </li>
       </ul>
-      <form class="form-inline my-2 my-lg-0">
+      <%= form_for @conn, chain_path(@conn, :search, Gettext.get_locale), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
         <div class="input-group">
           <div class="input-group-prepend">
             <span class="input-group-text" id="search-icon"><i class="fas fa-search"></i></span>
           </div>
-          <input class="form-control mr-sm-2 ml-auto" type="search" placeholder="Height, Hash, Address or Transactions" aria-describedby="search-icon" aria-label="Search">
+          <%= search_input f, :q, class: 'form-control mr-sm-2 ml-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": "Search", "data-test": "search_input" %>
         </div>
         <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit">Search</button>
-      </form>
+      <% end %>
       <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">

From 7fb58060c726879e9ba767a63f011091e289bfe8 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 10:02:05 -0400
Subject: [PATCH 17/22] Internationalization GETTEXT merge

---
 apps/explorer_web/priv/gettext/default.pot               | 2 +-
 apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/explorer_web/priv/gettext/default.pot b/apps/explorer_web/priv/gettext/default.pot
index fbbc557942..68d349370b 100644
--- a/apps/explorer_web/priv/gettext/default.pot
+++ b/apps/explorer_web/priv/gettext/default.pot
@@ -350,7 +350,7 @@ msgstr ""
 msgid "Internal Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_topnav.html.eex:6
+#: lib/explorer_web/templates/layout/_topnav.html.eex:39
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
diff --git a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
index 8f58b7d4c9..51090fb695 100644
--- a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -362,7 +362,7 @@ msgstr ""
 msgid "Internal Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_topnav.html.eex:6
+#: lib/explorer_web/templates/layout/_topnav.html.eex:39
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 

From f9737f063e8fb520e788e7861232a0ca1318e47f Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 10:55:03 -0400
Subject: [PATCH 18/22] Internationalization GETTEXT merge

---
 apps/explorer_web/priv/gettext/default.pot    | 45 +++++++++----------
 .../priv/gettext/en/LC_MESSAGES/default.po    | 45 +++++++++----------
 2 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/apps/explorer_web/priv/gettext/default.pot b/apps/explorer_web/priv/gettext/default.pot
index 68d349370b..ce8fa4829e 100644
--- a/apps/explorer_web/priv/gettext/default.pot
+++ b/apps/explorer_web/priv/gettext/default.pot
@@ -1,4 +1,4 @@
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:84
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:85
 #: lib/explorer_web/templates/address_transaction/index.html.eex:88
 #: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:141
@@ -9,7 +9,7 @@
 msgid "Age"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:83
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:84
 #: lib/explorer_web/templates/address_transaction/index.html.eex:87
 #: lib/explorer_web/templates/block_transaction/index.html.eex:140
 #: lib/explorer_web/templates/chain/show.html.eex:7
@@ -18,12 +18,11 @@ msgid "Block"
 msgstr ""
 
 #: lib/explorer_web/templates/chain/_blocks.html.eex:4
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:30
-#: lib/explorer_web/templates/layout/_topnav.html.eex:21
+#: lib/explorer_web/templates/layout/_topnav.html.eex:13
 msgid "Blocks"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_footer.html.eex:2
+#: lib/explorer_web/templates/layout/_footer.html.eex:18
 msgid "Copyright %{year} POA"
 msgstr ""
 
@@ -57,12 +56,11 @@ msgstr ""
 #: lib/explorer_web/templates/block/index.html.eex:19
 #: lib/explorer_web/templates/block_transaction/index.html.eex:124
 #: lib/explorer_web/templates/chain/_transactions.html.eex:4
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:36
-#: lib/explorer_web/templates/layout/_topnav.html.eex:27
+#: lib/explorer_web/templates/layout/_topnav.html.eex:18
 msgid "Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:87
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:88
 #: lib/explorer_web/templates/address_transaction/index.html.eex:92
 #: lib/explorer_web/templates/block_transaction/index.html.eex:145
 #: lib/explorer_web/templates/chain/_transactions.html.eex:10
@@ -157,8 +155,8 @@ msgstr ""
 msgid "Address"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:66
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:85
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:67
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
 #: lib/explorer_web/templates/address_transaction/index.html.eex:66
 #: lib/explorer_web/templates/address_transaction/index.html.eex:89
 #: lib/explorer_web/templates/block_transaction/index.html.eex:142
@@ -181,8 +179,8 @@ msgstr ""
 msgid "Success"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:54
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:55
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:87
 #: lib/explorer_web/templates/address_transaction/index.html.eex:54
 #: lib/explorer_web/templates/address_transaction/index.html.eex:91
 #: lib/explorer_web/templates/block_transaction/index.html.eex:144
@@ -232,8 +230,6 @@ msgstr ""
 msgid "Showing %{count} Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:41
-#: lib/explorer_web/templates/layout/_topnav.html.eex:31
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/index.html.eex:21
 #: lib/explorer_web/views/transaction_view.ex:18
@@ -325,7 +321,7 @@ msgid "Showing #%{number}"
 msgstr ""
 
 #: lib/explorer_web/templates/address/overview.html.eex:24
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:87
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:88
 #: lib/explorer_web/templates/address_transaction/index.html.eex:92
 #: lib/explorer_web/templates/chain/_transactions.html.eex:10
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
@@ -354,7 +350,7 @@ msgstr ""
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:124
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:125
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:64
 msgid "There are no Internal Transactions"
 msgstr ""
@@ -383,7 +379,7 @@ msgstr ""
 msgid "Wei"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:48
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:49
 #: lib/explorer_web/templates/address_transaction/index.html.eex:48
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
 #: lib/explorer_web/views/address_transaction_view.ex:12
@@ -394,8 +390,6 @@ msgstr ""
 msgid "Fee"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:40
-#: lib/explorer_web/templates/layout/_topnav.html.eex:30
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:14
 #: lib/explorer_web/templates/transaction/index.html.eex:14
 msgid "Validated"
@@ -405,7 +399,7 @@ msgstr ""
 msgid "Block Details"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:82
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:83
 msgid "Parent Tx Hash"
 msgstr ""
 
@@ -460,7 +454,7 @@ msgstr ""
 msgid "TXNs"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_topnav.html.eex:40
+#: lib/explorer_web/templates/layout/_topnav.html.eex:29
 msgid "Tokens"
 msgstr ""
 
@@ -504,7 +498,7 @@ msgstr ""
 msgid "There are no Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:130
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:131
 #: lib/explorer_web/templates/address_transaction/index.html.eex:143
 #: lib/explorer_web/templates/block/index.html.eex:60
 #: lib/explorer_web/templates/block_transaction/index.html.eex:200
@@ -546,7 +540,12 @@ msgid "Newer"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:108
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:109
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:47
 msgid "Contract Creation"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:23
+msgid "Smart Contracts"
+msgstr ""
diff --git a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
index 51090fb695..8e5015467f 100644
--- a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -10,7 +10,7 @@ msgid ""
 msgstr ""
 "Language: en\n"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:84
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:85
 #: lib/explorer_web/templates/address_transaction/index.html.eex:88
 #: lib/explorer_web/templates/block/index.html.eex:18
 #: lib/explorer_web/templates/block_transaction/index.html.eex:141
@@ -21,7 +21,7 @@ msgstr ""
 msgid "Age"
 msgstr "Age"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:83
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:84
 #: lib/explorer_web/templates/address_transaction/index.html.eex:87
 #: lib/explorer_web/templates/block_transaction/index.html.eex:140
 #: lib/explorer_web/templates/chain/show.html.eex:7
@@ -30,12 +30,11 @@ msgid "Block"
 msgstr "Block"
 
 #: lib/explorer_web/templates/chain/_blocks.html.eex:4
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:30
-#: lib/explorer_web/templates/layout/_topnav.html.eex:21
+#: lib/explorer_web/templates/layout/_topnav.html.eex:13
 msgid "Blocks"
 msgstr "Blocks"
 
-#: lib/explorer_web/templates/layout/_footer.html.eex:2
+#: lib/explorer_web/templates/layout/_footer.html.eex:18
 msgid "Copyright %{year} POA"
 msgstr "%{year} POA Network Ltd. All rights reserved"
 
@@ -69,12 +68,11 @@ msgstr "POA Network Explorer"
 #: lib/explorer_web/templates/block/index.html.eex:19
 #: lib/explorer_web/templates/block_transaction/index.html.eex:124
 #: lib/explorer_web/templates/chain/_transactions.html.eex:4
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:36
-#: lib/explorer_web/templates/layout/_topnav.html.eex:27
+#: lib/explorer_web/templates/layout/_topnav.html.eex:18
 msgid "Transactions"
 msgstr "Transactions"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:87
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:88
 #: lib/explorer_web/templates/address_transaction/index.html.eex:92
 #: lib/explorer_web/templates/block_transaction/index.html.eex:145
 #: lib/explorer_web/templates/chain/_transactions.html.eex:10
@@ -169,8 +167,8 @@ msgstr "%{count} transactions in this block"
 msgid "Address"
 msgstr "Address"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:66
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:85
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:67
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
 #: lib/explorer_web/templates/address_transaction/index.html.eex:66
 #: lib/explorer_web/templates/address_transaction/index.html.eex:89
 #: lib/explorer_web/templates/block_transaction/index.html.eex:142
@@ -193,8 +191,8 @@ msgstr "Overview"
 msgid "Success"
 msgstr "Success"
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:54
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:86
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:55
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:87
 #: lib/explorer_web/templates/address_transaction/index.html.eex:54
 #: lib/explorer_web/templates/address_transaction/index.html.eex:91
 #: lib/explorer_web/templates/block_transaction/index.html.eex:144
@@ -244,8 +242,6 @@ msgstr "Showing #%{start_block} to #%{end_block}"
 msgid "Showing %{count} Transactions"
 msgstr "Showing %{count} Transactions"
 
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:41
-#: lib/explorer_web/templates/layout/_topnav.html.eex:31
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:21
 #: lib/explorer_web/templates/transaction/index.html.eex:21
 #: lib/explorer_web/views/transaction_view.ex:18
@@ -337,7 +333,7 @@ msgid "Showing #%{number}"
 msgstr ""
 
 #: lib/explorer_web/templates/address/overview.html.eex:24
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:87
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:88
 #: lib/explorer_web/templates/address_transaction/index.html.eex:92
 #: lib/explorer_web/templates/chain/_transactions.html.eex:10
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:39
@@ -366,7 +362,7 @@ msgstr ""
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:124
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:125
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:64
 msgid "There are no Internal Transactions"
 msgstr ""
@@ -395,7 +391,7 @@ msgstr ""
 msgid "Wei"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:48
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:49
 #: lib/explorer_web/templates/address_transaction/index.html.eex:48
 #: lib/explorer_web/views/address_internal_transaction_view.ex:10
 #: lib/explorer_web/views/address_transaction_view.ex:12
@@ -406,8 +402,6 @@ msgstr ""
 msgid "Fee"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_sidebar.html.eex:40
-#: lib/explorer_web/templates/layout/_topnav.html.eex:30
 #: lib/explorer_web/templates/pending_transaction/index.html.eex:14
 #: lib/explorer_web/templates/transaction/index.html.eex:14
 msgid "Validated"
@@ -417,7 +411,7 @@ msgstr ""
 msgid "Block Details"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:82
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:83
 msgid "Parent Tx Hash"
 msgstr ""
 
@@ -472,7 +466,7 @@ msgstr ""
 msgid "TXNs"
 msgstr ""
 
-#: lib/explorer_web/templates/layout/_topnav.html.eex:40
+#: lib/explorer_web/templates/layout/_topnav.html.eex:29
 msgid "Tokens"
 msgstr ""
 
@@ -516,7 +510,7 @@ msgstr ""
 msgid "There are no Transactions"
 msgstr ""
 
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:130
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:131
 #: lib/explorer_web/templates/address_transaction/index.html.eex:143
 #: lib/explorer_web/templates/block/index.html.eex:60
 #: lib/explorer_web/templates/block_transaction/index.html.eex:200
@@ -558,7 +552,12 @@ msgid "Newer"
 msgstr ""
 
 #, elixir-format
-#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:108
+#: lib/explorer_web/templates/address_internal_transaction/index.html.eex:109
 #: lib/explorer_web/templates/transaction_internal_transaction/index.html.eex:47
 msgid "Contract Creation"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:23
+msgid "Smart Contracts"
+msgstr ""

From 4b0b91f036e814a24980241810fee9f502b2388d Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 13:38:38 -0400
Subject: [PATCH 19/22] Nationalization for switching network links

---
 .../lib/explorer_web/templates/layout/_topnav.html.eex      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
index 240d58326c..8485d69243 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_topnav.html.eex
@@ -43,11 +43,11 @@
       <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">
-            Mainnet
+            <%= gettext("Mainnet") %>
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="https://explorer-sokol.poanetwork/">POA Sokol</a>
-            <a class="dropdown-item" href="https://explorer-core.poanetwork/">POA Core</a>
+            <a class="dropdown-item" href="https://explorer-sokol.poanetwork/"><%= gettext("POA Sokol") %></a>
+            <a class="dropdown-item" href="https://explorer-core.poanetwork/"><%= gettext("POA Core") %></a>
           </div>
         </li>
       </ul>

From b41d7e687540b84770cf0405f5cd78b33eade346 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 13:39:39 -0400
Subject: [PATCH 20/22] gettext merge

---
 apps/explorer_web/priv/gettext/default.pot        | 15 +++++++++++++++
 .../priv/gettext/en/LC_MESSAGES/default.po        | 15 +++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/apps/explorer_web/priv/gettext/default.pot b/apps/explorer_web/priv/gettext/default.pot
index ce8fa4829e..12f19b67ee 100644
--- a/apps/explorer_web/priv/gettext/default.pot
+++ b/apps/explorer_web/priv/gettext/default.pot
@@ -549,3 +549,18 @@ msgstr ""
 #: lib/explorer_web/templates/layout/_topnav.html.eex:23
 msgid "Smart Contracts"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:46
+msgid "Mainnet"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:50
+msgid "POA Core"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:49
+msgid "POA Sokol"
+msgstr ""
diff --git a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
index 8e5015467f..f9ef6ca706 100644
--- a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -561,3 +561,18 @@ msgstr ""
 #: lib/explorer_web/templates/layout/_topnav.html.eex:23
 msgid "Smart Contracts"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:46
+msgid "Mainnet"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:50
+msgid "POA Core"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_topnav.html.eex:49
+msgid "POA Sokol"
+msgstr ""

From a80948e5a9855b5bd770861539fc99ed741b092c Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 13:50:41 -0400
Subject: [PATCH 21/22] Internationalization on social media links

---
 .../lib/explorer_web/templates/layout/_footer.html.eex    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
index c8a23413f2..37938552be 100644
--- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex
@@ -1,16 +1,16 @@
 <footer class="footer">
   <div class="footer-body container">
     <div class="social-links">
-      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Facebook">
+      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Facebook") %>">
         <i class="fab fa-facebook-f"></i>
       </a>
-      <a href="https://www.instagram.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Instagram">
+      <a href="https://www.instagram.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Instagram") %>">
         <i class="fab fa-instagram"></i>
       </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter">
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Twitter") %>">
         <i class="fab fa-twitter"></i>
       </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="Telegram">
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Telegram") %>">
         <i class="fab fa-telegram-plane"></i>
       </a>
     </div>

From 692fc622b231655f01fff9a1a162775f6a2f7029 Mon Sep 17 00:00:00 2001
From: katibest <katibest@gaslight.co>
Date: Thu, 21 Jun 2018 13:51:16 -0400
Subject: [PATCH 22/22] Gettext merge

---
 apps/explorer_web/priv/gettext/default.pot    | 20 +++++++++++++++++++
 .../priv/gettext/en/LC_MESSAGES/default.po    | 20 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/apps/explorer_web/priv/gettext/default.pot b/apps/explorer_web/priv/gettext/default.pot
index 12f19b67ee..38a3b964fc 100644
--- a/apps/explorer_web/priv/gettext/default.pot
+++ b/apps/explorer_web/priv/gettext/default.pot
@@ -564,3 +564,23 @@ msgstr ""
 #: lib/explorer_web/templates/layout/_topnav.html.eex:49
 msgid "POA Sokol"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:4
+msgid "Facebook"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:7
+msgid "Instagram"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:13
+msgid "Telegram"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:10
+msgid "Twitter"
+msgstr ""
diff --git a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
index f9ef6ca706..3f17f49c94 100644
--- a/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/explorer_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -576,3 +576,23 @@ msgstr ""
 #: lib/explorer_web/templates/layout/_topnav.html.eex:49
 msgid "POA Sokol"
 msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:4
+msgid "Facebook"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:7
+msgid "Instagram"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:13
+msgid "Telegram"
+msgstr ""
+
+#, elixir-format
+#: lib/explorer_web/templates/layout/_footer.html.eex:10
+msgid "Twitter"
+msgstr ""