(add) validator info modal

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 {

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;

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;
+}

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()
+  })
 })

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>

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>

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>

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"