Simplify 8chain block info

frontend/src/app/components/eight-blocks/eight-blocks.component.html

@@ -15,13 +15,8 @@
           (txClickEvent)="onTxClick($event)"
         ></app-block-overview-graph>
         <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
-          <h1>{{ blockInfo[i].height }}</h1>
+          <h1 class="height">{{ blockInfo[i].height }}</h1>
-          <p class="hash">{{ blockInfo[i].id.slice(0, 32) }}<br>{{ blockInfo[i].id.slice(32) }}</p>
+          <h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
-          <h2>{{ blockInfo[i].timeString }}</h2>
-          <h2>{{ blockInfo[i].tx_count }} transactions</h2>
-          <h2>{{ blockInfo[i].extras.medianFee | feeRounding }} sat/vB</h2>
-          <h2>{{ blockInfo[i].size | bytes: 2 : 'B' : 'MB' : true }}</h2>
-          <h2>Mined by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
         </div>
       </div>
     </div>

frontend/src/app/components/eight-blocks/eight-blocks.component.scss

@@ -21,22 +21,28 @@
 
     .info {
       position: absolute;
-      left: 5%;
+      left: 8%;
-      top: 5%;
+      top: 8%;
-      right: 5%;
+      right: 8%;
-      bottom: 5%;
+      bottom: 8%;
-      height: 90%;
+      height: 84%;
-      width: 90%;
+      width: 84%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-family:'Inter';
+      font-weight: 700;
       font-size: calc(var(--block-width) * 0.03);
       text-shadow: 0 0 calc(var(--block-width) * 0.05) black;
 
       h1 {
-        font-size: 3em;
+        font-size: 6em;
         line-height: 1;
         margin-bottom: calc(var(--block-width) * 0.03);
       }
       h2 {
-        font-size: 1.5em;
+        font-size: 1.8em;
         line-height: 1;
         margin-bottom: calc(var(--block-width) * 0.03);
       }
@@ -44,10 +50,17 @@
       .hash {
         font-family: monospace;
         word-wrap: break-word;
-        font-size: 1.2em;
+        font-size: 1.4em;
         line-height: 1;
         margin-bottom: calc(var(--block-width) * 0.03);
       }
+
+      .mined-by {
+        position: absolute;
+        bottom: 0;
+        margin: auto;
+        text-align: center;
+      }
     }
   }
 

frontend/src/styles.scss

@@ -1171,3 +1171,10 @@ app-global-footer {
   line-height: 0.5;
   border-radius: 0.2rem;
 }
+
+@font-face {
+  font-family: "Inter";
+  src: url("/resources/Inter-Bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+}