(add) stakes tabs, titles and placeholder sections

apps/block_scout_web/assets/css/app.scss

@@ -91,6 +91,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/copy_icon";
 @import "components/btn_add_full";
 @import "components/stakes";
+@import "components/check";
 
 :export {
   primary: $primary;

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

@@ -1,8 +1,12 @@
 $card-background-color: #fff !default;
+$card-tab-active: $primary !default;
+$card-default-border-radius: 10px !default;
+$card-horizontal-padding: 30px;
+$card-vertical-padding: 30px;
 
 .card {
     background-color: $card-background-color;
-    border-radius: 10px;
+    border-radius: $card-default-border-radius;
     border: none;
     box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
     margin-bottom: 3rem;
@@ -26,10 +30,30 @@ $card-background-color: #fff !default;
     font-weight: normal;
     line-height: 2.2rem;
     margin-bottom: 2rem;
+
+    .card-title-container & {
+        line-height: 1.2;
+        margin: 0;
+
+        @include media-breakpoint-down(sm) {
+            margin-bottom: 25px;
+        }
+    }
+}
+
+.card-title-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 25px $card-horizontal-padding;
+
+    @include media-breakpoint-down(sm) {
+        flex-direction: column;
+    }
 }
 
 .card-body {
-    padding: 30px;
+    padding: $card-horizontal-padding;
 }
 
 .card-server-response-body {
@@ -44,3 +68,44 @@ $card-background-color: #fff !default;
         height: 595px;
     }
 }
+
+.card-tabs {
+    align-items: center;
+    border-top-left-radius: $card-default-border-radius;
+    border-top-right-radius: $card-default-border-radius;
+    border-bottom: 1px solid $base-border-color;
+    display: flex;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    @include media-breakpoint-down(sm) {
+        flex-direction: column;
+    }
+}
+
+.card-tab {
+    background-color: $card-background-color;
+    color: #333;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: normal;
+    height: 70px;
+    line-height: 70px;
+    padding: 0 30px;
+    text-align: center;
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &.active {
+        background-color: $card-tab-active;
+        color: #fff;
+        cursor: default;
+        text-decoration: none;
+    }
+
+    @include media-breakpoint-down(sm) {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,47 @@
+$check-color: $primary !default;
+$check-dimensions: 14px !default;
+
+.check {
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    input[type="checkbox"] {
+        height: 100%;
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+        z-index: 5;
+
+        &:checked + .check-icon::before {
+            background-color: $check-color;
+            content: "";
+            height: 6px;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateX(-50%) translateY(-50%);
+            width: 6px;
+        }
+    }
+
+    .check-icon {
+        border: 1px solid $base-border-color;
+        flex-grow: 0;
+        flex-shrink: 0;
+        height: $check-dimensions;
+        margin: 0 10px 0 0;
+        position: relative;
+        width: $check-dimensions;
+        z-index: 1;
+    }
+
+    .check-text {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 1.2;
+        position: relative;
+        white-space: nowrap;
+        z-index: 1;
+    }
+}

apps/block_scout_web/assets/css/theme/_neutral_variables.scss

@@ -1,25 +1,5 @@
-// ------------------------------- //
-// Neutral Theme 1: Blue Shifted
-// ------------------------------- //
-
-// $primary:       #254F8D;
-// $secondary:     #72B0FB;
-// $tertiary:      #72B0FB;
-
-
-// ------------------------------- //
-// Neutral Theme 2: Black and Blue
-// ------------------------------- //
-
-// $primary:       #34373E;
-// $secondary:     #72B0FB;
-// $tertiary:      #72B0FB;
-
-
-// ------------------------------- //
-// Neutral Theme 3: Purple Shifted
-// ------------------------------- //
-
 $primary:       #262D62;
 $secondary:     #687BF6;
 $tertiary:      #687BF6;
+
+$base-border-color: #e2e5ec !default;

apps/block_scout_web/lib/block_scout_web/controllers/active_pools_controller.ex

@@ -0,0 +1,14 @@
+defmodule BlockScoutWeb.ActivePoolsController do
+  use BlockScoutWeb, :controller
+
+  alias BlockScoutWeb.ActivePoolsView
+
+  def index(conn, params) do
+    []
+    |> handle_render(conn, params)
+  end
+
+  defp handle_render(full_options, conn, _params) do
+    render(conn, "index.html")
+  end
+end

apps/block_scout_web/lib/block_scout_web/controllers/inactive_pools_controller.ex

@@ -0,0 +1,14 @@
+defmodule BlockScoutWeb.InactivePoolsController do
+  use BlockScoutWeb, :controller
+
+  alias BlockScoutWeb.InactivePoolsView
+
+  def index(conn, params) do
+    []
+    |> handle_render(conn, params)
+  end
+
+  defp handle_render(full_options, conn, _params) do
+    render(conn, "index.html")
+  end
+end

apps/block_scout_web/lib/block_scout_web/controllers/validators_controller.ex

@@ -0,0 +1,14 @@
+defmodule BlockScoutWeb.ValidatorsController do
+  use BlockScoutWeb, :controller
+
+  alias BlockScoutWeb.ValidatorsView
+
+  def index(conn, params) do
+    []
+    |> handle_render(conn, params)
+  end
+
+  defp handle_render(full_options, conn, _params) do
+    render(conn, "index.html")
+  end
+end

apps/block_scout_web/lib/block_scout_web/router.ex

@@ -84,7 +84,9 @@ defmodule BlockScoutWeb.Router do
 
     get("/uncles", BlockController, :uncle, as: :uncle)
 
-    resources("/stakes", StakesController, only: [:index])
+    resources("/validators", ValidatorsController, only: [:index])
+    resources("/active_pools", ActivePoolsController, only: [:index])
+    resources("/inactive_pools", InactivePoolsController, only: [:index])
 
     resources("/pending_transactions", PendingTransactionController, only: [:index])
 

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

@@ -0,0 +1,7 @@
+<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
+<section class="container">
+  <div class="card">
+    <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>
+    <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Active Pools" %>
+  </div>
+</section>

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

@@ -0,0 +1,7 @@
+<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
+<section class="container">
+  <div class="card">
+    <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>
+    <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Inactive Pools" %>
+  </div>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -16,13 +16,13 @@
             <%= gettext("Blocks") %>
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarBlocksDropdown">
-            <%= link to: block_path(@conn, :index), class: "dropdown-item" do %>
+            <%= link to: block_path(@conn, :index), class: "dropdown-item #{tab_status("blocks", @conn.request_path)}" do %>
               <%= gettext("Blocks") %>
             <% end %>
-            <%= link to: uncle_path(@conn, :uncle), class: "dropdown-item" do %>
+            <%= link to: uncle_path(@conn, :uncle), class: "dropdown-item #{tab_status("uncles", @conn.request_path)}" do %>
               <%= gettext("Uncles") %>
             <% end %>
-            <%= link to: reorg_path(@conn, :reorg), class: "dropdown-item" do %>
+            <%= link to: reorg_path(@conn, :reorg), class: "dropdown-item #{tab_status("reorgs", @conn.request_path)}" do %>
               <%= gettext("Forked Blocks (Reorgs)") %>
             <% end %>
           </div>
@@ -37,19 +37,19 @@
           <div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
             <%= link(
                   gettext("Validated"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("txs", @conn.request_path)}",
                   to: transaction_path(@conn, :index)
                 ) %>
             <%= link(
                   gettext("Pending"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("pending_transactions", @conn.request_path)}",
                   "data-test": "pending_transactions_link",
                   to: pending_transaction_path(@conn, :index)
                 ) %>
           </div>
         </li>
         <li class="nav-item">
-          <%= link to: address_path(@conn, :index), class: "nav-link topnav-nav-link" do %>
+          <%= link to: address_path(@conn, :index), class: "nav-link topnav-nav-link #{tab_status("accounts", @conn.request_path)}" do %>
             <span class="nav-link-icon">
               <%= render BlockScoutWeb.IconsView, "_accounts_icon.html" %>
             </span>
@@ -66,12 +66,12 @@
           <div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
             <%= link(
                   gettext("GraphQL"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("graphiql", @conn.request_path)}",
                   to: "/graphiql"
                 ) %>
             <%= link(
                   gettext("RPC"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("api_docs", @conn.request_path)}",
                   to: api_docs_path(@conn, :index)
                 ) %>
           </div>
@@ -86,18 +86,18 @@
           <div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
             <%= link(
                   gettext("Validators"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("validators", @conn.request_path)}",
-                  to: stakes_path(@conn, :index)
+                  to: validators_path(@conn, :index)
                 ) %>
             <%= link(
                   gettext("Active Pools"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("active_pools", @conn.request_path)}",
-                  to: stakes_path(@conn, :index)
+                  to: active_pools_path(@conn, :index)
                 ) %>
             <%= link(
                   gettext("Inactive Pools"),
-                  class: "dropdown-item",
+                  class: "dropdown-item #{tab_status("inactive_pools", @conn.request_path)}",
-                  to: stakes_path(@conn, :index)
+                  to: inactive_pools_path(@conn, :index)
                 ) %>
           </div>
         </li>

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

@@ -0,0 +1,23 @@
+<div class="card-tabs">
+    <%=
+    link(
+        gettext("Validators"),
+        class: "card-tab #{tab_status("validators", @conn.request_path)}",
+        to: validators_path(@conn, :index)
+        )
+    %>
+    <%=
+    link(
+        gettext("Active Pools"),
+        class: "card-tab #{tab_status("active_pools", @conn.request_path)}",
+        to: active_pools_path(@conn, :index)
+        )
+    %>
+    <%=
+    link(
+        gettext("Inactive Pools"),
+        class: "card-tab #{tab_status("inactive_pools", @conn.request_path)}",
+        to: inactive_pools_path(@conn, :index)
+        )
+    %>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="card-title-container">
+    <div class="card-title"><%= @title %></div>
+    <div class="check">
+    <input type="checkbox" />
+    <div class="check-icon"></div>
+    <div class="check-text">Show only those I staked into</div>
+    </div>
+</div>

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

@@ -1,8 +0,0 @@
-<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
-<section class="container">
-  <div class="card">
-    <div class="card-body">
-      card body
-    </div>
-  </div>
-</section>

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

@@ -0,0 +1,7 @@
+<%= render BlockScoutWeb.StakesView, "_stakes_top.html" %>
+<section class="container">
+  <div class="card">
+    <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>
+    <%= render BlockScoutWeb.StakesView, "_stakes_title.html", title: "Validators" %>
+  </div>
+</section>

apps/block_scout_web/lib/block_scout_web/views/active_pools_view.ex

@@ -0,0 +1,3 @@
+defmodule BlockScoutWeb.ActivePoolsView do
+  use BlockScoutWeb, :view
+end

apps/block_scout_web/lib/block_scout_web/views/inactive_pools_view.ex

@@ -0,0 +1,3 @@
+defmodule BlockScoutWeb.InactivePoolsView do
+  use BlockScoutWeb, :view
+end

apps/block_scout_web/lib/block_scout_web/views/validators_view.ex

@@ -0,0 +1,3 @@
+defmodule BlockScoutWeb.ValidatorsView do
+  use BlockScoutWeb, :view
+end