From ae5a0312be37168e00f09b1e500640ec3c0c308c Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 12 Jun 2023 12:40:19 -0400
Subject: [PATCH] change audit detail labels

---
 .../src/app/components/block/block.component.html    | 12 ++++++------
 .../src/app/components/block/block.component.scss    |  7 +++++++
 .../blocks-list/blocks-list.component.html           |  9 ++++++---
 .../blocks-list/blocks-list.component.scss           |  1 +
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index e3f4d195c..7d2652829 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -395,17 +395,17 @@
   <table *ngIf="block && blockAudit" class="table table-borderless table-striped audit-details-table">
     <tbody>
       <tr>
-        <td i18n="block.expected-total-fees|Expected total fees in a block">Expected fees</td>
+        <td i18n="block.total-fees|Total fees in a block">Total fees</td>
         <td>
           <app-amount [satoshis]="blockAudit.expectedFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
         </td>
       </tr>
       <tr>
-        <td i18n="block.expected-weight">Expected weight</td>
+        <td i18n="block.weight">Weight</td>
         <td [innerHTML]="'&lrm;' + (blockAudit.expectedWeight | wuBytes: 2)"></td>
       </tr>
       <tr>
-        <td i18n="block.expected_transaction_count">Expected transactions</td>
+        <td i18n="mempool-block.transactions">Transactions</td>
         <td>{{ blockAudit.template?.length || 0 }}</td>
       </tr>
     </tbody>
@@ -416,7 +416,7 @@
   <table *ngIf="block && blockAudit" class="table table-borderless table-striped audit-details-table">
     <tbody>
       <tr>
-        <td i18n="block.actual-total-fees|Actual total fees in a block">Actual fees</td>
+        <td i18n="block.total-fees|Total fees in a block">Total fees</td>
         <td>
           <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
           <span *ngIf="blockAudit.feeDelta" class="difference" [class.positive]="blockAudit.feeDelta <= 0" [class.negative]="blockAudit.feeDelta > 0">
@@ -425,7 +425,7 @@
         </td>
       </tr>
       <tr>
-        <td i18n="block.actual-weight">Actual weight</td>
+        <td i18n="block.weight">Weight</td>
         <td [innerHTML]>
           <span [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></span>
           <span *ngIf="blockAudit.weightDelta" class="difference" [class.positive]="blockAudit.weightDelta <= 0" [class.negative]="blockAudit.weightDelta > 0">
@@ -434,7 +434,7 @@
         </td>
       </tr>
       <tr>
-        <td i18n="block.actual_transaction_count">Actual transactions</td>
+        <td i18n="mempool-block.transactions">Transactions</td>
         <td>
           {{ block.tx_count }}
           <span *ngIf="blockAudit.txDelta" class="difference" [class.positive]="blockAudit.txDelta <= 0" [class.negative]="blockAudit.txDelta > 0">
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 48f094926..08091cb86 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -263,3 +263,10 @@ h1 {
   top: 11px;
   margin-left: 10px;
 }
+
+.audit-details-table {
+  margin-top: 1.25rem;
+  @media (max-width: 767.98px) {
+    margin-top: 0.75rem;
+  }
+}
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index 727ca2782..5197ce3b4 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -18,7 +18,7 @@
         <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
         <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
-        <th *ngIf="auditAvailable && !widget" class="fee-delta text-right" i18n="latest-blocks.vs-expected-fees" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">vs Expected</th>
+        <th *ngIf="auditAvailable && !widget" class="fee-delta" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"></th>
         <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
           i18n-ngbTooltip="dashboard.txs" ngbTooltip="TXs" placement="bottom" #txs [disableTooltip]="!isEllipsisActive(txs)">TXs</th>
         <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
@@ -67,9 +67,9 @@
           <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
             <app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
           </td>
-          <td *ngIf="auditAvailable" class="fee-delta text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
+          <td *ngIf="auditAvailable" class="fee-delta" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <span *ngIf="block.extras.feeDelta" class="difference" [class.positive]="block.extras.feeDelta >= 0" [class.negative]="block.extras.feeDelta < 0">
-              {{ block.extras.feeDelta > 0 ? '+' : '' }}{{ (block.extras.feeDelta * 100) | amountShortener: 2 }}%
+              ({{ block.extras.feeDelta > 0 ? '+' : '' }}{{ (block.extras.feeDelta * 100) | amountShortener: 2 }}%)
             </span>
           </td>
           <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
@@ -108,6 +108,9 @@
             <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
+            <td *ngIf="auditAvailable && !widget" class="fee-delta" [class]="indexingAvailable ? '' : 'legacy'">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
             <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index 39d6b55b0..3d3169a69 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -173,6 +173,7 @@ tr, td, th {
 }
 .fee-delta {
   width: 6%;
+  padding-left: 0;
   @media (max-width: 991px) {
     display: none;
   }