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] [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>