(add) home blocks style

apps/block_scout_web/assets/css/_typography.scss

@@ -1,3 +1,5 @@
+$common-link-color: $primary !default;
+
 body {
   font-family: $font-family-sans-serif;
   font-size: 12px;
@@ -20,10 +22,10 @@ h3 {
 }
 
 h4 {
+  color: $gray-600;
   font-size: 16px;
-  line-height: 24px;
   font-weight: 300;
-  color: $gray-600;
+  line-height: 24px;
   margin-top: 4px;
 
   &.underline {
@@ -44,12 +46,12 @@ p {
 }
 
 a {
+  color: $common-link-color;
   text-decoration: none;
-  color: $tertiary;
 
   &:hover,
   &:focus {
-    color: darken($tertiary, 20%);
+    color: darken($common-link-color, 20%);
     text-decoration: underline;
   }
 

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

@@ -1,25 +1,28 @@
+$button-primary-color: $primary !default;
+$button-secondary-color: $secondary !default;
+
 .button {
+  border-radius: 2px;
   border: none;
+  cursor: pointer;
   display: inline-block;
+  line-height: 1.2;
+  padding: 10px 16px;
   text-align: center;
   text-decoration: none;
-  white-space:  nowrap;
-  padding: 8px 10px;
-  border-radius: 2px;
-  cursor: pointer;
-  -webkit-transition: all 0.25s;
   transition: all 0.25s;
+  white-space:  nowrap;
 
   &-primary {
-    background-color: $primary;
-    color: $white;
-    border: 1px solid $primary;
+    background-color: $button-primary-color;
+    border: 1px solid $button-primary-color;
+    color: #fff;
 
     &:hover,
     &:focus {
-      color: $white;
-      background-color: darken($primary, 10%);
-      border-color: darken($primary, 10%);
+      background-color: darken($button-primary-color, 10%);
+      border-color: darken($button-primary-color, 10%);
+      color: #fff;
       text-decoration: none;
     }
 
@@ -31,18 +34,18 @@
   }
 
   &-secondary {
-    border: 1px solid $tertiary;
-    color: $tertiary;
-    background-color: $white;
+    background-color: #fff;
+    border: 1px solid $button-secondary-color;
+    color: $button-secondary-color;
     font-weight: 400;
 
     &:hover,
     &:focus {
-      background-color: darken($tertiary, 10%);
-      border-color: darken($tertiary, 10%);
-      color: $white;
-      text-decoration: none;
+      background-color: darken($button-secondary-color, 10%);
+      border-color: darken($button-secondary-color, 10%);
+      color: #fff;
       outline: none !important;
+      text-decoration: none;
     }
   }
 
@@ -75,7 +78,7 @@
   }
 
   &-disabled,
-  &:disabled, {
+  &:disabled {
     background-color: $gray-300;
     color: $gray-500;
     text-decoration: none;

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

@@ -1,7 +1,7 @@
 .card {
+    border-radius: 10px;
     border: none;
-  box-shadow: 0 5px 40px -5px rgba($black, 0.25);
-  border-radius: 0;
+    box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
     margin-bottom: 3rem;
 
     &-primary {
@@ -10,7 +10,7 @@
 }
 
 .card-header {
-  background-color: $white;
+    background-color: #fff;
 
     &-tabs {
         margin: (-$card-spacer-y) (-$card-spacer-x);
@@ -18,12 +18,15 @@
 }
 
 .card-title {
+    color: #333;
+    font-size: 18px;
+    font-weight: normal;
     line-height: 2.2rem;
     margin-bottom: 2rem;
 }
 
 .card-body {
-  padding: 2.25rem 1.25rem;
+    padding: 30px;
 }
 
 .card-server-response-body {
@@ -34,5 +37,7 @@
 .card-chain-blocks {
     height: auto;
 
-  @include media-breakpoint-down(md) { height: 595px; }
+    @include media-breakpoint-down(md) {
+        height: 595px;
+    }
 }

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

@@ -1,11 +1,17 @@
+$tile-type-block-border-color: $primary !default;
+
 .tile {
-  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid $border-color;
+  box-shadow: 0 1px 5px rgba($black, 0.15);
   color: $text-muted;
+  font-size: 12px;
   line-height: 1.4rem;
-  border: 1px solid $border-color;
-  border-radius: 2px;
   padding: 1rem;
-  box-shadow: 0 1px 5px rgba($black, 0.15);
+
+  &.n-p {
+    padding: 0;
+  }
 
   & + & {
     margin-top: 1rem;
@@ -18,10 +24,10 @@
   &-type {
 
     &-block {
-      border-left: 4px solid $indigo;
+      border-left: 4px solid $tile-type-block-border-color;
 
       .tile-label {
-        color: $indigo;
+        color: $tile-type-block-border-color;
       }
     }
 
@@ -91,10 +97,10 @@
       }
 
       &-short-name {
-        overflow: hidden;
         max-width: 45%;
-        vertical-align: middle;
+        overflow: hidden;
         text-overflow: ellipsis;
+        vertical-align: middle;
       }
     }
 
@@ -129,12 +135,12 @@
     }
 
     &-api-documentation {
-      border-left: 4px solid $primary;
       background-color: transparent;
-      width: 100%;
-      text-align: left;
-      padding: 15px;
+      border-left: 4px solid $primary;
       cursor: pointer;
+      padding: 15px;
+      text-align: left;
+      width: 100%;
 
       .tile-label {
         color: $primary;
@@ -144,18 +150,18 @@
 
   &-status {
     &--error--reason {
-      border-top: 2px solid lighten($danger, 10%);
-      border-right: 2px solid lighten($danger, 10%);
       border-bottom: 2px solid lighten($danger, 10%);
+      border-right: 2px solid lighten($danger, 10%);
+      border-top: 2px solid lighten($danger, 10%);
 
       .tile-status-label {
         color: $danger;
       }
     }
     &--awaiting-internal-transactions {
-      border-top: 2px solid lighten($warning, 10%);
-      border-right: 2px solid lighten($warning, 10%);
       border-bottom: 2px solid lighten($warning, 10%);
+      border-right: 2px solid lighten($warning, 10%);
+      border-top: 2px solid lighten($warning, 10%);
 
       .tile-status-label {
         color: $warning;
@@ -165,32 +171,50 @@
 }
 
 .tile-title {
+  color: #333;
   font-size: 12px;
-  font-weight: 600;
-  color: $gray-700;
-  margin-bottom: 0;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 12px;
+  padding: 1rem 1rem 0 1rem;
 
   &-hash {
     font-weight: 300;
   }
 
   &-lg {
-    font-size: 16px;
     color: $body-color;
+    font-size: 16px;
+  }
 }
+
+.tile-bottom-contents {
+  background-color: #f6f7f9;
+  font-size: 12px;
+  line-height: 1.2;
+  padding: 0.8rem 1rem;
+}
+
+.tile-transactions {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin-bottom: 10px;
+  text-align: left;
 }
 
 .tile-badge {
+  line-height: 1.25rem;
   margin-bottom: 0.1rem;
   padding: 0;
-  width: 2.5rem;
-  line-height: 1.25rem;
   text-align: center;
+  width: 2.5rem;
 }
 
 .tile-muted {
-  border-left: 1px solid $border-color;
   background-color: $gray-100;
+  border-left: 1px solid $border-color;
   box-shadow: none;
 }
 
@@ -209,6 +233,6 @@
 }
 
 .tile-image {
-  max-width: 140px;
   max-height: 140px;
+  max-width: 140px;
 }

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

@@ -3,3 +3,4 @@ $secondary:     #7dd79f;
 $tertiary:      #997fdc;
 
 $header-links-color-active: #333;
+$button-secondary-color: $primary;

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

@@ -8,3 +8,5 @@ $dashboard-banner-gradient-end: #1e4168;
 
 $dashboard-line-color-price: $secondary;
 $dashboard-line-color-market: $primary;
+
+$tile-type-block-border-color: $secondary !default;

apps/block_scout_web/lib/block_scout_web/templates/chain/_block.html.eex

@@ -1,30 +1,32 @@
 <div class="col-lg-3 fade-up-blocks-chain" data-selector="chain-block" data-block-number="<%= @block.number %>">
-  <div class="tile tile-type-block d-flex flex-column">
+  <div class="tile tile-type-block n-p d-flex flex-column">
     <%= link(
           @block,
           class: "tile-title",
           to: block_path(BlockScoutWeb.Endpoint, :show, @block),
           "data-selector": "block-number"
         ) %>
-    <div>
+    <div class="tile-bottom-contents">
+      <div class="tile-transactions">
         <span class="mr-2"> <%= gettext("%{count} Transactions", count: Enum.count(@block.transactions)) %> </span>
         <span class="text-nowrap" data-from-now="<%= @block.timestamp %>"> </span>
       </div>
-    <span class="text-truncate">
+      <div class="text-truncate">
         <%= gettext "Miner" %>
 
         <%= render BlockScoutWeb.AddressView,
           "_link.html",
           address: @block.miner,
           contract: false %>
-    </span>
+      </div>
 
       <%= if BlockScoutWeb.BlockView.show_reward?(@block.rewards) do %>
-      <span class="text-truncate">
+        <div class="text-truncate">
           <%= gettext "Reward" %>
 
           <%= BlockScoutWeb.BlockView.combined_rewards_value(@block) %>
-      </span>
+        </div>
       <% end %>
     </div>
   </div>
+</div>

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -71,7 +71,7 @@
 <section class="container">
   <div class="card card-chain-blocks">
     <div class="card-body">
-      <%= link(gettext("View All Blocks →"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
+      <%= link(gettext("View All Blocks"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
       <h2 class="card-title"><%= gettext "Blocks" %></h2>
       <div class="row" data-selector="chain-block-list" data-url="<%= chain_blocks_path(@conn, :chain_blocks) %>">
         <button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;">
@@ -92,7 +92,7 @@
 
   <div class="card card-chain-transactions">
     <div class="card-body">
-      <%= link(gettext("View All Transactions →"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
+      <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "button button-secondary button-xsmall float-right") %>
       <h2 class="card-title"><%= gettext "Transactions" %></h2>
       <div data-selector="channel-batching-message" style="display: none;">
         <div data-selector="reload-button" class="alert alert-info">