Add modal window for scanning address QR code

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

@@ -12,7 +12,9 @@
     margin: 0 .25rem;
     color: $text-muted;
     background-color: $gray-200;
+    border: none;
     border-radius: 50%;
+    cursor: pointer;
     transition: all 0.1s ease;
 
     &:hover {

apps/explorer_web/assets/css/components/_qr-code.scss

@@ -3,5 +3,4 @@
   margin-right: auto;
   margin-left: auto;
   width: 100%;
-  max-width: 60px;
 }

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

@@ -14,15 +14,17 @@
       <div class="card">
         <div class="card-body">
           <div class="icon-links float-right">
-            <a href="" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>">
+            <button type="button" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Address") %>">
               <i class="fas fa-clone"></i>
-            </a>
-            <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" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
+            </button>
+            <span data-toggle="modal" data-target="#qrModal">
+              <button type="button" class="icon-link"  data-toggle="tooltip" data-placement="top" title="<%= gettext("QR Code") %>">
+                <i class="fas fa-qrcode"></i>
+              </button>
+            </span>
+            <button type="button" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Info") %>">
               <i class="fas fa-info"></i>
-            </a>
+            </button>
           </div>
           <h1 class="card-title"><%= address_title(@address) %> Details </h1>
           <h3 class="" data-test="address_detail_hash"><%= @address %></h3>
@@ -63,3 +65,24 @@
     </div>
   </div>
 </section>
+
+
+<!-- Modal -->
+<div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="qrModalLabel">QR Code</h2>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <img src="data:image/png;base64, <%= qr_code(@address) %>" class="qr-code" alt="qr_code" title="<%= @address %>" />
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>