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 @@
- <%= @address %> + <%= @address %> <%= render BlockScoutWeb.CommonComponentsView, "_check_tooltip.html", text: @tooltip %>
\ 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 @@ + \ 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 @@ +<%= render BlockScoutWeb.StakesView, "_stakes_modal_validator_info.html" %> <%= render BlockScoutWeb.CommonComponentsView, "_pagination.html"