Refactor icon link component

apps/explorer_web/assets/css/app.scss

@@ -67,6 +67,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/card";
 @import "components/tile";
 @import "components/dashboard-banner";
+@import "components/icon-link";
 
 
 :export {

apps/explorer_web/assets/css/components/_card.scss

@@ -1,5 +1,3 @@
-$card-link-size: 2rem;
-
 .card {
   border-color: transparent;
   box-shadow: 0 5px 40px -5px rgba($black, 0.25);
@@ -19,31 +17,3 @@ $card-link-size: 2rem;
   line-height: 2.2rem;
   margin-bottom: 1rem;
 }
-
-.card-links {
-  position: absolute;
-  right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-right: 1rem;
-
-  & > a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $card-link-size;
-    height: $card-link-size;
-    margin: 0 .25rem;
-    color: $text-muted;
-    background-color: $gray-200;
-    border-radius: 50%;
-    transition: all 0.1s ease;
-
-    &:hover {
-      background-color: $gray-600;
-      color: $primary;
-      text-decoration: none;
-    }
-  }
-}

apps/explorer_web/assets/css/components/_footer.scss

@@ -23,35 +23,13 @@ $footer-text-color: rgba($white, 0.7);
   position: relative;
 }
 
-.footer .social-links {
+.footer .icon-links {
   position: absolute;
   right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
 
   @media (max-width: 768px) {
     position: static;
     justify-content: center;
     margin-bottom: 5px;
   }
-
-  & > a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $social-link-size;
-    height: $social-link-size;
-    margin: 0 $footer-padding;
-    color: $footer-text-color;
-    background-color: rgba($white, 0.25);
-    border-radius: 50%;
-    transition: all 0.1s ease;
-
-    &:hover {
-      background-color: $white;
-      color: $primary;
-      text-decoration: none;
-    }
-  }
 }

apps/explorer_web/assets/css/components/_icon-link.scss

@@ -0,0 +1,37 @@
+.icon-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin: 0 .25rem;
+    color: $text-muted;
+    background-color: $gray-200;
+    border-radius: 50%;
+    transition: all 0.1s ease;
+
+    &:hover {
+      background-color: $primary;
+      color: $white;
+      text-decoration: none;
+    }
+  }
+
+  &.icon-links-primary {
+
+    .icon-link {
+      color: $footer-text-color;
+      background-color: rgba($white, 0.25);
+
+      &:hover {
+        background-color: $white;
+        color: $primary;
+      }
+    }
+  }
+}

apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex

@@ -13,14 +13,14 @@
     <div class="col-md-6">
       <div class="card">
         <div class="card-body">
-          <div class="card-links">
+          <div class="icon-links float-right">
-            <a href="" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>">
+            <a href="" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>">
               <i class="fas fa-clone"></i>
             </a>
-            <a href="" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("QR Code") %>">
+            <a href="" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("QR Code") %>">
               <i class="fas fa-qrcode"></i>
             </a>
-            <a href="" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
+            <a href="" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
               <i class="fas fa-info"></i>
             </a>
           </div>
@@ -49,8 +49,8 @@
     <div class="col-md-3">
       <div class="card">
         <div class="card-body">
-          <div class="card-links">
+          <div class="icon-links float-right">
-            <a href="" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
+            <a href="" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("List") %>">
               <i class="fas fa-list"></i>
             </a>
           </div>

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">
+    <div class="icon-links icon-links-primary">
-      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" data-toggle="tooltip" data-placement="top" title="<%= gettext("Facebook") %>">
+      <a href="https://www.facebook.com/PoaNetwork/" target="_blank" class="icon-link" 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="<%= gettext("Instagram") %>">
+      <a href="https://www.instagram.com/PoaNetwork/" target="_blank" class="icon-link" 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="<%= gettext("Twitter") %>">
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" class="icon-link" 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="<%= gettext("Telegram") %>">
+      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Telegram") %>">
         <i class="fab fa-telegram-plane"></i>
       </a>
     </div>