(fix) dashboard graph / values styles

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

@@ -8,14 +8,17 @@ $dashboard-line-color-price: $primary !default;
 $dashboard-line-color-market: $secondary !default;
 $dashboard-stats-item-label-color: #fff !default;
 $dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
+$dashboard-banner-chart-legend-label-color: #fff !default;
+$dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !default;
 $dashboard-stats-item-border-color: $primary !default;
 $dashboard-banner-network-stats-static-image: false !default;
 $dashboard-banner-network-stats-static-image-height: 150px !default;
+$dashboard-banner-network-plain-container-height: 205px;
 
 .dashboard-banner-container {
   @include gradient-container();
 
-  padding: 48px 0 0 0;
+  padding: 0;
   position: relative;
 
   &::after {
@@ -23,10 +26,10 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
     bottom: 0;
     content: "";
     display: block;
+    height: $dashboard-banner-network-plain-container-height;
     left: 70%;
     position: absolute;
     right: 0;
-    top: 3rem;
 
     @include media-breakpoint-down(sm) {
       display: none;
@@ -48,36 +51,15 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
   }
 }
 
-.dashboard-banner-network-plain-container {
-  align-items: center;
-  background-color: $dashboard-banner-network-plain-container-background-color;
-  border-top-left-radius: 10px;
-  display: flex;
-  height: 205px;
-  justify-content: center;
-  margin: 0 0 0 60px;
-  max-width: 100%;
-  padding: 30px 0 30px 30px;
-  width: 750px;
-
-  @include media-breakpoint-down(md) {
-    align-items: flex-start;
-    flex-direction: column;
-    margin-left: 30px;
-  }
-
-  @include media-breakpoint-down(sm) {
-    border-top-right-radius: 10px;
-    margin: 0;
-    padding: 15px 0 15px 15px;
-  }
+.dashboard-banner-network-graph {
+  flex-grow: 1;
+  padding: 15px 0 0 0;
 }
 
 .dashboard-banner-chart {
   flex-grow: 1;
-  height: 170px;
-  margin: 0 50px 0 0;
-  max-width: 500px;
+  margin: 0 0 40px 0;
+  max-width: 350px;
   position: relative;
 
   @include media-breakpoint-down(md) {
@@ -87,24 +69,22 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
   }
 
   > canvas {
-    height: 170px;
+    // height: 100px;
     max-height: 100%;
     max-width: 100%;
-    width: 460px;
+    width: 100%;
   }
 }
 
 .dashboard-banner-chart-legend {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-
-  @include media-breakpoint-down(md) {
-    flex-direction: row;
-  }
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding-bottom: 12px;
 
   .dashboard-banner-chart-legend-item {
-    padding-top: 10px;
+    padding-bottom: 3px;
+    padding-left: 12px;
+    padding-top: 3px;
     position: relative;
 
     @include media-breakpoint-down(md) {
@@ -115,20 +95,11 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
     &::before {
       border-radius: 2px;
       content: "";
-      height: 4px;
+      height: 100%;
       left: 0;
       position: absolute;
-      top: -4px;
-      width: 20px;
-    }
-
-    &:nth-child(1) {
-      margin-bottom: 30px;
-
-      @include media-breakpoint-down(md) {
-        margin-bottom: 0;
-        margin-right: 30px;
-      }
+      top: 0;
+      width: 4px;
     }
 
     &:nth-child(1)::before {
@@ -141,7 +112,7 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
   }
 
   .dashboard-banner-chart-legend-label {
-    color: $text-muted;
+    color: $dashboard-banner-chart-legend-label-color;
     display: block;
     font-size: 12px;
     font-weight: 600;
@@ -154,7 +125,7 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
   }
 
   .dashboard-banner-chart-legend-value {
-    color: #333;
+    color: $dashboard-banner-chart-legend-value-color;
     display: block;
     font-size: 12px;
     font-weight: normal;
@@ -162,6 +133,31 @@ $dashboard-banner-network-stats-static-image-height: 150px !default;
   }
 }
 
+.dashboard-banner-network-plain-container {
+  align-items: center;
+  background-color: $dashboard-banner-network-plain-container-background-color;
+  border-top-left-radius: 10px;
+  display: flex;
+  height: $dashboard-banner-network-plain-container-height;
+  justify-content: center;
+  margin: 0 0 0 30px;
+  max-width: 100%;
+  padding: 30px 0 30px 30px;
+  width: 750px;
+
+  @include media-breakpoint-down(md) {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-left: 30px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    border-top-right-radius: 10px;
+    margin: 0;
+    padding: 15px 0 15px 15px;
+  }
+}
+
 .dashboard-banner-network-stats {
   column-gap: 100px;
   display: grid;

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

@@ -4,7 +4,7 @@
       <!-- Graph and legend -->
       <div class="dashboard-banner-network-graph">
         <!-- Graph -->
-        <div class="dashboard-banner-chart" style="display: none">
+        <div class="dashboard-banner-chart">
           <div data-chart-loading-message class="tile tile-muted text-center mt-5">
             <span class="loading-spinner-small mr-2">
               <span class="loading-spinner-block-1"></span>