From 91e74e769cd29af1004ce8cd12e26d92c8497820 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Wed, 7 Aug 2024 14:19:59 +0200
Subject: [PATCH] Purple accelerated fee rate everywhere

---
 .../acceleration-timeline-tooltip.component.html          | 8 ++++----
 .../acceleration-timeline-tooltip.component.scss          | 4 ++++
 .../block-overview-tooltip.component.html                 | 2 +-
 .../block-overview-tooltip.component.scss                 | 3 +++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
index 94a8f7967..67f6cb80e 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
@@ -26,9 +26,9 @@
       <tr *ngIf="accelerationInfo.bidBoost >= 0 || accelerationInfo.feeDelta">
         <td class="label" i18n="transaction.out-of-band-fees">Out-of-band fees</td>
         @if (accelerationInfo.status === 'accelerated') {
-          <td style="color: #905cf4;" class="value">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+          <td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
         } @else {
-          <td style="color: #905cf4;" class="value">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
+          <td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
         }
       </tr>
       <tr *ngIf="accelerationInfo.fee && accelerationInfo.weight">
@@ -38,9 +38,9 @@
         } @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') {
           <td class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
           @if (accelerationInfo.status === 'accelerated') {
-            <td class="value"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
           } @else {
-            <td class="value"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
+            <td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
           }
         }
       </tr>
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
index b44318a58..98a42f0e7 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
@@ -32,4 +32,8 @@
     top: -1px;
     margin-right: 3px;
   }
+
+  .oobFees {
+    color: #905cf4;
+  }
 }
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
index 08de1b640..037229398 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
@@ -51,7 +51,7 @@
       <tr *ngIf="hasEffectiveRate && effectiveRate != null">
         <td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
         <td *ngIf="this.acceleration" class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
-        <td class="value">
+        <td class="value" [class.oobFees]="this.acceleration">
           <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
         </td>
       </tr>
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
index 28708506b..0b2c05948 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@@ -27,6 +27,9 @@ th, td {
     width: 70%;
     text-align: end;
   }
+  &.oobFees {
+    color: #905cf4;
+  }
 }
 
 .badge.badge-accelerated {