From e72f8fbea7fdc026ddbfa1cf58a158d9afaefb64 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Wed, 3 Apr 2019 16:58:26 -0300
Subject: [PATCH] (add) validator info modal

---
 apps/block_scout_web/assets/css/app.scss      |  1 +
 .../assets/css/components/_modal.scss         |  3 ++-
 .../css/components/_modal_validator_info.scss | 19 +++++++++++++++++++
 apps/block_scout_web/assets/js/lib/modals.js  |  4 ++++
 .../templates/stakes/_stakes_address.html.eex |  2 +-
 .../_stakes_modal_become_candidate.html.eex   |  6 +++---
 .../_stakes_modal_validator_info.html.eex     | 17 +++++++++++++++++
 .../templates/stakes/_stakes_table.html.eex   |  1 +
 8 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 apps/block_scout_web/assets/css/components/_modal_validator_info.scss
 create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index e7202646d2..832f8ff8f4 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@@ -102,6 +102,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/stakes_empty_content";
 @import "components/stakes_btn_remove_pool";
 @import "components/modal";
+@import "components/modal_validator_info";
 @import "components/form";
 
 :export {
diff --git a/apps/block_scout_web/assets/css/components/_modal.scss b/apps/block_scout_web/assets/css/components/_modal.scss
index cba1a7f36a..edab72a79e 100644
--- a/apps/block_scout_web/assets/css/components/_modal.scss
+++ b/apps/block_scout_web/assets/css/components/_modal.scss
@@ -2,6 +2,7 @@ $modal-overlay-color: rgba($secondary, 0.9) !default;
 $modal-horizontal-padding: 30px !default;
 $modal-vertical-padding: 25px !default;
 $modal-border-radius: 10px !default;
+$modal-gray-background: #f6f7f9 !default;
 
 .modal-backdrop {
     background-color: $modal-overlay-color;
@@ -37,7 +38,7 @@ $modal-border-radius: 10px !default;
 }
 
 .modal-bottom-disclaimer {
-    background-color: #f6f7f9;
+    background-color: $modal-gray-background;
     border-bottom-left-radius: $modal-border-radius;
     border-bottom-right-radius: $modal-border-radius;
     color: #a3a9b5;
diff --git a/apps/block_scout_web/assets/css/components/_modal_validator_info.scss b/apps/block_scout_web/assets/css/components/_modal_validator_info.scss
new file mode 100644
index 0000000000..699d002657
--- /dev/null
+++ b/apps/block_scout_web/assets/css/components/_modal_validator_info.scss
@@ -0,0 +1,19 @@
+.modal-validator-info {
+    max-width: 100%;
+    width: 660px;
+}
+
+.modal-validator-info-content {
+    background-color: $modal-gray-background;
+    border-bottom-left-radius: $modal-border-radius;
+    border-bottom-right-radius: $modal-border-radius;
+    color: #a3a9b5;
+    column-gap: 60px;
+    display: grid;
+    font-size: 12px;
+    font-weight: normal;
+    grid-template-columns: 1fr 1fr 1fr;
+    line-height: 1.67;
+    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
+    row-gap: 30px;
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/js/lib/modals.js b/apps/block_scout_web/assets/js/lib/modals.js
index c8e746f0e5..97bca88929 100644
--- a/apps/block_scout_web/assets/js/lib/modals.js
+++ b/apps/block_scout_web/assets/js/lib/modals.js
@@ -4,4 +4,8 @@ $(function () {
   $('.js-become-candidate').on('click', function () {
     $('#becomeCandidateModal').modal()
   })
+
+  $('.js-validator-info-modal').on('click', function () {
+    $('#validatorInfoModal').modal()
+  })
 })
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex
index 731b699f10..2a2a4a21d6 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_address.html.eex
@@ -1,4 +1,4 @@
 <div class="stakes-address-container">
-    <span class="stakes-address"><%= @address %></span>
+    <span class="stakes-address js-validator-info-modal"><%= @address %></span>
     <%= render BlockScoutWeb.CommonComponentsView, "_check_tooltip.html", text: @tooltip %>
 </div>
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex
index b5d58ea019..66c0f6f944 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex
@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-dialog-centered modal-become-candidate" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title">Become Candidate</h5>
+        <h5 class="modal-title"><%= gettext("Become Candidate") %></h5>
         <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                 <path fill="#F6F7F9" fill-rule="evenodd" d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"/>
@@ -12,13 +12,13 @@
       <div class="modal-body">
             <form>
                 <div class="input-group form-group">
-                    <input type="text" class="form-control n-b-r" placeholder="Amount">
+                    <input type="text" class="form-control n-b-r" placeholder='<%= gettext("Amount") %>'>
                     <div class="input-group-prepend last">
                       <div class="input-group-text">POA20</div>
                     </div>
                 </div>
                 <div class="form-group">
-                    <input type="text" class="form-control" placeholder="Your Mining Address">
+                    <input type="text" class="form-control" placeholder='<%= gettext("Your Mining Address") %>'>
                 </div>
                 <p class="form-p">Minimum possible stake: <span class="text-dark">100 POA20</span></p>
                 <div class="form-button"><%= render BlockScoutWeb.CommonComponentsView, "_btn_add_full.html", text: gettext("Become Candidate"), extra_class: "full-width" %></div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex
new file mode 100644
index 0000000000..8a534f7905
--- /dev/null
+++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_validator_info.html.eex
@@ -0,0 +1,17 @@
+<div class="modal fade" id="validatorInfoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-validator-info" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">0x18Bea833D503341C529a788c82909337e552a44e</h5>
+        <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+                <path fill="#F6F7F9" fill-rule="evenodd" d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"/>
+            </svg>
+        </button>
+      </div>
+      <div class="modal-validator-info-content">
+       dfsfgdfs
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex
index d87d446fde..fe84eae270 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_table.html.eex
@@ -79,6 +79,7 @@
         </tbody>
     </table>
 </div>
+<%= render BlockScoutWeb.StakesView, "_stakes_modal_validator_info.html" %>
 <%=
     render BlockScoutWeb.CommonComponentsView,
     "_pagination.html"