(add) responsive view - (add) banned row style - (add) several components

apps/block_scout_web/assets/css/_mixins.scss

@@ -23,6 +23,9 @@
 @mixin stats-item() {
     &-item {
         color: #fff;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         padding-left: calc(1rem + 4px);
         padding-right: 1rem;
         position: relative;
@@ -44,6 +47,14 @@
         white-space: nowrap;
     }
 
+    &-label-item {
+        margin-right: 20px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
     &-value {
         display: block;
         font-size: 1.5rem;
@@ -54,6 +65,7 @@
             font-size: 1.25rem;
         }
     }
+
 }
 
 @mixin btn-full($bg-color: $primary, $text-color: #fff) {

apps/block_scout_web/assets/css/app.scss

@@ -100,6 +100,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/tooltip";
 @import "components/progress_from_to";
 @import "components/stakes_empty_content";
+@import "components/stakes_btn_remove_pool";
 
 :export {
   primary: $primary;

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

@@ -21,6 +21,10 @@ $progress-from-to-progress-background: $primary !default;
     font-size: 12px;
     font-weight: normal;
     line-height: 1.2;
+
+    .stakes-tr-banned & {
+        color: $stakes-banned-color;
+    }
 }
 
 .progress-from-to-background {
@@ -29,6 +33,10 @@ $progress-from-to-progress-background: $primary !default;
     height: 4px;
     overflow: hidden;
     position: relative;
+
+    .stakes-tr-banned & {
+        background-color: darken($stakes-banned-background, 5%);
+    }
 }
 
 .progress-from-to-progress {
@@ -38,4 +46,8 @@ $progress-from-to-progress-background: $primary !default;
     max-width: 100%;
     position: absolute;
     top: 0;
+
+    .stakes-tr-banned & {
+        background-color: $stakes-banned-color;
+    }
 }

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

@@ -1,6 +1,8 @@
 $stakes-dashboard-copy-icon-color: $copy-icon-color !default;
 $stakes-address-color: $primary !default;
 $stakes-control-color: $primary !default;
+$stakes-banned-color: #ff7986!default;
+$stakes-banned-background: #fff3f7!default;
 
 .stakes-top {
     @include gradient-container();
@@ -10,20 +12,48 @@ $stakes-control-color: $primary !default;
 }
 
 .stakes-top-stats {
-    @include stats-item();
-
     display: flex;
     justify-content: space-between;
 
+    @include stats-item();
+
     @include media-breakpoint-down(md) {
-        flex-direction: column;
+        column-gap: 30px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        row-gap: 30px;
+    }
+
+    .stakes-top-stats-item {
+        @include media-breakpoint-down(md) {
+            &:nth-child(1),
+            &:nth-child(2),
+            &:nth-child(3) {
+                grid-column-start: 1;
+            }
+            &:nth-child(4) {
+                grid-column-start: 2;
+                grid-row-start: 1;
+            }
+        }
+    }
+
+    @include media-breakpoint-down(sm) {
+        grid-template-columns: 1fr;
     }
 
     .stakes-top-stats-value {
+        align-items: center;
         display: flex;
     }
 
+    .stakes-top-stats-login {
+        color: $primary;
+        margin-right: 8px;
+    }
+
     .copy-icon {
+        margin-left: 20px;
         path {
             fill: $stakes-dashboard-copy-icon-color;
         }
@@ -32,11 +62,16 @@ $stakes-control-color: $primary !default;
 
 .stakes-address-container {
     display: flex;
+    cursor: pointer;
     justify-content: flex-start;
 
     .stakes-address {
         color: $stakes-address-color;
         margin-right: 10px;
+
+        .stakes-tr-banned & {
+            color: $stakes-banned-color;
+        }
     }
 }
 
@@ -69,3 +104,20 @@ $stakes-control-color: $primary !default;
         fill: $stakes-control-color;
     }
 }
+
+.stakes-top-buttons {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    .btn-add-full {
+        margin-bottom: 10px;
+    }
+
+    @include media-breakpoint-down(md) {
+        grid-column-start: 2;
+        grid-row-start: 2;
+        justify-self: end;
+    }
+}

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

@@ -0,0 +1,21 @@
+$stakes-btn-remove-pool-color: $primary !default;
+
+.stakes-btn-remove-pool {
+    align-items: center;
+    color: $stakes-btn-remove-pool-color;
+    cursor: pointer;
+    display: flex;
+    font-size: 12px;
+    font-weight: 600;
+    height: 36px;
+    justify-content: center;
+    text-align: center;
+
+    svg {
+        margin-right: 10px;
+    }
+
+    path {
+        fill: $stakes-btn-remove-pool-color;
+    }
+}

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

@@ -19,6 +19,10 @@ $stakes-table-cell-separation: 25px !default;
     font-weight: bold;
     line-height: 1.2;
     text-align: left;
+
+    &:first-child {
+        min-width: 15px;
+    }
 }
 
 .stakes-table-th-content {
@@ -49,6 +53,11 @@ $stakes-table-cell-separation: 25px !default;
     &:last-child {
         padding-right: 0;
     }
+
+    .stakes-tr-banned & {
+        background-color: $stakes-banned-background;
+        color: $stakes-banned-color;
+    }
 }
 
 .stakes-td-order {
@@ -59,4 +68,8 @@ $stakes-table-cell-separation: 25px !default;
 
 .stakes-td-link-style {
     color: $primary;
+
+    .stakes-tr-banned & {
+        color: $stakes-banned-color;
+    }
 }

apps/block_scout_web/lib/block_scout_web/templates/active_pools/index.html.eex

@@ -1,4 +1,4 @@
-<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
+<%= render BlockScoutWeb.StakesView, "_stakes_top.html", logged_in: true %>
 <section class="container">
   <div class="card">
     <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_full.html.eex

@@ -0,0 +1,6 @@
+<span class="btn-add-full <%= if assigns[:extra_class] do @extra_class end %>">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+        <path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
+    </svg>
+    <span class="btn-add-full-text"><%= @text %></span>
+</span>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_btn_add_line.html.eex

@@ -0,0 +1,6 @@
+<span class="btn-add-line <%= if assigns[:extra_class] do @extra_class end %>">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+        <path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
+    </svg>
+    <span class="btn-add-line-text"><%= @text %></span>
+</span>

apps/block_scout_web/lib/block_scout_web/templates/inactive_pools/index.html.eex

@@ -1,4 +1,4 @@
-<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
+<%= render BlockScoutWeb.StakesView, "_stakes_top.html", logged_in: true %>
 <section class="container">
   <div class="card">
     <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>

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

@@ -0,0 +1,6 @@
+<span class="stakes-btn-remove-pool <%= if assigns[:extra_class] do @extra_class end %>">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+        <path fill-rule="evenodd" d="M13 5h-1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5H1a1 1 0 0 1 0-2h3V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2h3a1 1 0 0 1 0 2zM8 2H6v1h2V2zm2 3H4v7h6V5z"/>
+    </svg>
+    <span class="stakes-btn-remove-pool-text"><%= @text %></span>
+</span>

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

@@ -11,11 +11,6 @@
         <h1 class="stakes-empty-content-title">Lorem Ipsum</h1>
         <p class="stakes-empty-content-text">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do
 eiusmod temp incididunt ut labore et dolore magna.</p>
-        <span class="btn-add-line">
+        <%= render BlockScoutWeb.CommonComponentsView, "_btn_add_line.html", text: gettext("Become Candidate"), extra_class: "js-become-candidate" %>
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
-            <path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
-            </svg>
-            <span class="btn-add-line-text"><%= gettext "Become Candidate" %></span>
-        </span>
     </div>
 </div>

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

@@ -0,0 +1,6 @@
+<div class="stakes-top-stats-item">
+    <span class="stakes-top-stats-label">
+        <%= @title %>
+    </span>
+    <span class="stakes-top-stats-value"><%= @value %></span>
+</div>

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

@@ -0,0 +1,33 @@
+<div class="stakes-top-stats-item stakes-top-stats-item-address">
+    <span class="stakes-top-stats-value">
+        <%= if assigns[:logged_in] do %>
+        <%= @title %>
+        <div class="copy-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+                <path fill-rule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"/>
+            </svg>
+        </div>
+        <%= else %>
+            <span class="stakes-top-stats-login">Login</span> with MetaMask
+        <%= end %>
+    </span>
+    <span class="stakes-top-stats-label">
+        <span class="stakes-top-stats-label-item"><%= gettext "Balance" %>:
+        <%=
+            if assigns[:balance] do
+                @balance
+            else
+                "-"
+            end
+        %> POA20</span>
+        <span class="stakes-top-stats-label-item"><%= gettext "Staked" %>:
+        <%=
+            if assigns[:staked] do
+                @staked
+            else
+                "-"
+            end
+        %> POA20</span>
+        </span>
+    </span>
+</div>

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

@@ -1,49 +1,14 @@
 <div class="stakes-top">
   <div class="container">
     <div class="stakes-top-stats">
-      <!-- Epoch number -->
+      <%= render BlockScoutWeb.StakesView, "_stakes_stats_item.html", title: gettext("Epoch number"), value: "6" %>
-      <div class="stakes-top-stats-item">
+      <%= render BlockScoutWeb.StakesView, "_stakes_stats_item.html", title: gettext("Block number"), value: "348" %>
-        <span class="stakes-top-stats-label">
+      <%= render BlockScoutWeb.StakesView, "_stakes_stats_item.html", title: gettext("Next epoch in"), value: "999 blocks" %>
-          <%= gettext "Epoch number" %>
+      <%= render BlockScoutWeb.StakesView, "_stakes_stats_item_account.html", title: "0x1fddEc96688e0538A316C64dc...", balance: "20", staked: "1000", logged_in: @logged_in %>
-        </span>
-        <span class="stakes-top-stats-value">6</span>
-      </div>
-      <!-- Block number -->
-      <div class="stakes-top-stats-item">
-        <span class="stakes-top-stats-label">
-          <%= gettext "Block number" %>
-        </span>
-        <span class="stakes-top-stats-value">348</span>
-      </div>
-      <!-- Next epoch -->
-      <div class="stakes-top-stats-item">
-        <span class="stakes-top-stats-label">
-          <%= gettext "Next epoch in" %>
-        </span>
-        <span class="stakes-top-stats-value">999 blocks</span>
-      </div>
-      <!-- Address -->
-      <div class="stakes-top-stats-item stakes-top-stats-item-address">
-        <span class="stakes-top-stats-value">0x1fddEc96688e0538A316C64dc...
-          <div class="copy-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-              <path fill-rule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"/>
-            </svg>
-          </div>
-        </span>
-        <span class="stakes-top-stats-label">
-          <span class="stakes-top-stats-label-item"><%= gettext "Balance" %>: 20.08 POA20</span>
-          <span class="stakes-top-stats-label-item"><%= gettext "Staked" %>: 1000 POA20</span>
-        </span>
-      </div>
       <!-- Buttons -->
-      <div>
+      <div class="stakes-top-buttons">
-        <span class="btn-add-full">
+        <%= render BlockScoutWeb.CommonComponentsView, "_btn_add_full.html", text: gettext("Become Candidate"), extra_class: "js-become-candidate" %>
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+        <%= render BlockScoutWeb.StakesView, "_stakes_btn_remove_pool.html", text: gettext("Remove My Pool"), extra_class: "js-remove-pool" %>
-            <path fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
-          </svg>
-            <span class="btn-add-full-text"><%= gettext "Become Candidate" %></span>
-        </span>
       </div>
     </div>
   </div>

apps/block_scout_web/lib/block_scout_web/templates/validators/index.html.eex

@@ -1,4 +1,4 @@
-<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
+<%= render BlockScoutWeb.StakesView, "_stakes_top.html", logged_in: false %>
 <section class="container">
   <div class="card">
     <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>