Position and style the dashboard banner

apps/explorer_web/assets/css/_typography.scss

@@ -1,6 +1,6 @@
 body {
   font-family: $font-family-sans-serif;
-  font-size: 13px;
+  font-size: 12px;
 }
 
 h1 {

apps/explorer_web/assets/css/app.scss

@@ -65,6 +65,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/animations";
 @import "components/card";
 @import "components/tile";
+@import "components/dashboard-banner";
 
 
 :export {

apps/explorer_web/assets/css/components/_dashboard-banner.scss

@@ -0,0 +1,76 @@
+.dashboard-banner {
+  display: grid;
+  grid-template-rows: 2rem auto;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas:
+    "chart ."
+    "chart stats"
+    "legend stats";
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+  background-color: $white;
+  box-shadow: 0 5px 40px -5px rgba($black, 0.25);
+}
+
+.dashboard-banner-chart {
+  grid-area: chart;
+  // 15px padding matches the Bootstarp conatiner padding.
+  padding: 1rem 1rem 1rem 15px;
+  max-height: 100px;
+  box-shadow: -15px 0 40px -5px rgba($black, 0.25);
+}
+
+.dashboard-banner-chart-legend {
+  grid-area: legend;
+  display: flex;
+  // 15px padding matches the Bootstarp conatiner padding.
+  padding: 1rem 15px;
+
+  &-item {
+    padding-left: 0.5rem;
+    flex-grow: 1;
+
+    &:first-of-type {
+      border-left: 4px solid $secondary;
+    }
+
+    &:last-of-type {
+      border-left: 4px solid $primary;
+    }
+  }
+
+  &-label {
+    display: block;
+    color: $text-muted;
+  }
+
+  &-value {
+    display: block;
+  }
+}
+
+.dashboard-banner-network-stats {
+  grid-area: stats;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  // 15px padding matches the Bootstarp conatiner padding.
+  padding-right: 15px;
+  background-color: $primary;
+  box-shadow: -5px -5px 40px -5px rgba($black, 0.25);
+
+  &-item {
+    padding-left: 1rem;
+    color: $white;
+    border-left: 4px solid rgba($white, 0.6);
+  }
+
+  &-label {
+    display: block;
+  }
+
+  &-value {
+    display: block;
+    font-size: 1.5rem;
+  }
+}

apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex

@@ -44,7 +44,7 @@
             </div>
           </div>
         </div>
-      <%= else %>
+      <% else %>
         <div class="tile tile-type-transaction">
           <div class="row">
             <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">

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

@@ -1,5 +1,54 @@
-<section class="container-fluid">
+<div class="dashboard-banner">
+  <div class="dashboard-banner-chart">
+    <canvas data-chart="marketHistoryChart" data-current_exchange_rate ='<%= @exchange_rate.usd_value %>' data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="400" height="80"></canvas>
+  </div>
+  <div class="dashboard-banner-chart-legend">
+    <div class="dashboard-banner-chart-legend-item">
+      <span class="dashboard-banner-chart-legend-label">
+        Price
+      </span>
+      <span class="dashboard-banner-chart-legend-value">
+        $0.0498 USD
+      </span>
+    </div>
+    <div class="dashboard-banner-chart-legend-item">
+      <span class="dashboard-banner-chart-legend-label">
+        Market cap
+      </span>
+      <span class="dashboard-banner-chart-legend-value">
+        $100,350,800 USD
+      </span>
+    </div>
+  </div>
+  <div class="dashboard-banner-network-stats">
+    <div class="dashboard-banner-network-stats-item">
+      <span class="dashboard-banner-network-stats-label">
+        Block time
+      </span>
+      <span class="dashboard-banner-network-stats-value">
+        69.2105s
+      </span>
+    </div>
+    <div class="dashboard-banner-network-stats-item">
+      <span class="dashboard-banner-network-stats-label">
+        Total transactions
+      </span>
+      <span class="dashboard-banner-network-stats-value">
+        12,106,123
+      </span>
+    </div>
+    <div class="dashboard-banner-network-stats-item">
+      <span class="dashboard-banner-network-stats-label">
+        Wallet addresses
+      </span>
+      <span class="dashboard-banner-network-stats-value">
+        1,400,500
+      </span>
+    </div>
+  </div>
+</div>
 
+<section class="container-fluid">
   <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %>
   <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
 
@@ -31,7 +80,7 @@
 
     <div class="container__graph card">
       <div class="card-body">
-        <canvas data-chart="marketHistoryChart" data-current_exchange_rate ='<%= @exchange_rate.usd_value %>' data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="300" height="100"></canvas>
+
         <div class="d-flex justify-content-sm-around mt-2 text-muted">
           <div>
             <div class="graph__squares graph__squares--price"></div>
@@ -53,7 +102,7 @@
   </div>
 
   <div class="row my-4">
-  
+
 
   </div>
 </section>