(add) become candidate modal

apps/block_scout_web/assets/css/_mixins.scss

@@ -75,7 +75,7 @@
     cursor: pointer;
     display: flex;
     height: 36px;
-    justify-content: space-between;
+    justify-content: center;
     padding: 0 15px;
     transition: all 0.25s;
     width: fit-content;
@@ -95,6 +95,10 @@
     path {
         fill: $text-color;
     }
+
+    &.full-width {
+        width: 100%;
+    }
 }
 
 @mixin btn-line($bg-color: #fff, $text-color: $secondary) {
@@ -105,7 +109,7 @@
     cursor: pointer;
     display: flex;
     height: 36px;
-    justify-content: space-between;
+    justify-content: center;
     padding: 0 15px;
     transition: all 0.25s;
     width: fit-content;
@@ -125,4 +129,8 @@
     path {
         fill: $text-color;
     }
+
+    &.full-width {
+        width: 100%;
+    }
 }

apps/block_scout_web/assets/css/app.scss

@@ -101,6 +101,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/progress_from_to";
 @import "components/stakes_empty_content";
 @import "components/stakes_btn_remove_pool";
+@import "components/modal";
+@import "components/form";
 
 :export {
   primary: $primary;

apps/block_scout_web/assets/css/components/_form.scss

@@ -0,0 +1,32 @@
+$form-control-border-color: #e2e5ec !default;
+
+.form-control {
+    border-color: $form-control-border-color;
+    border-radius: 0;
+    font-size: 14px;
+
+    &.n-b-r {
+        border-right: none;
+    }
+}
+
+.form-p {
+    color: #a3a9b5;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.5;
+
+    .text-dark {
+        color: #333;
+    }
+}
+
+.input-group-prepend.last {
+    .input-group-text {
+        background: none;
+        border-color: $form-control-border-color;
+        border-left: none;
+        color: #a3a9b5;
+        font-size: 14px;
+    }
+}

apps/block_scout_web/assets/css/components/_modal.scss

@@ -0,0 +1,63 @@
+$modal-overlay-color: rgba($secondary, 0.9) !default;
+$modal-horizontal-padding: 30px !default;
+$modal-vertical-padding: 25px !default;
+$modal-border-radius: 10px !default;
+
+.modal-backdrop {
+    background-color: $modal-overlay-color;
+
+    &.show {
+        opacity: 1;
+    }
+}
+
+.modal-header {
+    border-bottom: none;
+    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
+
+    .close.close-modal {
+        margin: -70px -70px 0 0;
+        opacity: 1;
+    }
+}
+
+.modal-body {
+    padding: 0 #{ $modal-horizontal-padding } #{ $modal-vertical-padding };
+}
+
+.modal-title {
+    color: #333;
+    font-size: 18px;
+    font-weight: normal;
+    text-align: left;
+}
+
+.modal-content {
+    border-radius: $modal-border-radius;
+}
+
+.modal-bottom-disclaimer {
+    background-color: #f6f7f9;
+    border-bottom-left-radius: $modal-border-radius;
+    border-bottom-right-radius: $modal-border-radius;
+    color: #a3a9b5;
+    display: flex;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.67;
+    padding: #{ $modal-vertical-padding } #{ $modal-horizontal-padding };
+    text-align: left;
+
+    .modal-bottom-disclaimer-graphic {
+        flex-shrink: 0;
+        padding-right: 15px;
+    }
+
+    .modal-bottom-disclaimer-text {
+        flex-grow: 1;
+    }
+}
+
+.modal-become-candidate {
+    width: 280px;
+}

apps/block_scout_web/assets/css/components/_stakes.scss

@@ -37,7 +37,7 @@ $stakes-banned-background: #fff3f7!default;
             }
         }
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(sm) {
             grid-column-start: auto !important;
             grid-row-start: auto !important;
         }
@@ -131,7 +131,7 @@ $stakes-banned-background: #fff3f7!default;
         justify-self: end;
     }
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(sm) {
         grid-column-start: auto !important;
         grid-row-start: auto !important;
         justify-self: center;

apps/block_scout_web/assets/js/app.js

@@ -51,4 +51,5 @@ import './lib/token_transfers_toggle'
 import './lib/transaction_input_dropdown'
 import './lib/async_listing_load'
 import './lib/tooltip'
+import './lib/modals'
 import './lib/try_api'

apps/block_scout_web/assets/js/lib/modals.js

@@ -0,0 +1,7 @@
+import $ from 'jquery'
+
+$(function () {
+  $('.js-become-candidate').on('click', function () {
+    $('#becomeCandidateModal').modal()
+  })
+})

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_become_candidate.html.eex

@@ -0,0 +1,37 @@
+<div class="modal fade" id="becomeCandidateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <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>
+        <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-body">
+            <form>
+                <div class="input-group form-group">
+                    <input type="text" class="form-control n-b-r" placeholder="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">
+                </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>
+            </form>
+      </div>
+      <div class="modal-bottom-disclaimer">
+        <div class="modal-bottom-disclaimer-graphic">
+            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16">
+                <path fill="#333" fill-rule="evenodd" d="M9 16H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v9h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+            </svg>
+        </div>
+        <div class="modal-bottom-disclaimer-text">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod temp incididunt ut labore et dolore magna. Sed do eiusmod temp incididunt ut.</div>
+      </div>
+    </div>
+  </div>
+</div>

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_top.html.eex

@@ -13,3 +13,4 @@
     </div>
   </div>
 </div>
+<%= render BlockScoutWeb.StakesView, "_stakes_modal_become_candidate.html" %>