From 6b955acf9ee183aaadc312a919761d8e2d11e3b0 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 14 Jul 2024 04:40:27 +0000
Subject: [PATCH] [pizza] fix status icon layout w/ accelerator modal

---
 .../components/tracker/tracker.component.html | 121 +++++++++---------
 .../components/tracker/tracker.component.scss |  11 +-
 2 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html
index 0d9d37f42..e6e5843df 100644
--- a/frontend/src/app/components/tracker/tracker.component.html
+++ b/frontend/src/app/components/tracker/tracker.component.html
@@ -117,68 +117,71 @@
           <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
         </div>
         <span class="explainer">&nbsp;</span>
-      } @else if (showAccelerationSummary) {
-        <ng-container *ngIf="(ETA$ | async) as eta;">
-          <app-accelerate-checkout
-            *ngIf="(da$ | async) as da;"
-            [cashappEnabled]="cashappEligible"
-            [advancedEnabled]="false"
-            [forceMobile]="true"
-            [tx]="tx"
-            [accelerating]="isAcceleration"
-            [miningStats]="miningStats"
-            [eta]="eta"
-            [scrollEvent]="scrollIntoAccelPreview"
-            (unavailable)="eligibleForAcceleration = false"
-            class="h-100 w-100"
-          ></app-accelerate-checkout>
-        </ng-container>
       } @else {
-        @if (tx?.acceleration && !tx.status?.confirmed) {
-          <div class="progress-icon">
-            <fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
-          </div>
-          <span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
-        } @else {
-          @switch (trackerStage) {
-            @case ('waiting') {
-              <div class="progress-icon">
-                <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
-              </div>
-              <span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
-            }
-            @case ('pending') {
-              <div class="progress-icon">
-                <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
-              </div>
-              <span class="explainer" i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
-            }
-            @case ('soon') {
-              <div class="progress-icon">
-                <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
-              </div>
-              <span class="explainer" i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
-            }
-            @case ('next') {
-              <div class="progress-icon">
-                <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
-              </div>
-              <span class="explainer" i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
-            }
-            @case ('confirmed') {
-              <div class="progress-icon">
-                <fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
-              </div>
-              <span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
-            }
-            @case ('replaced') {
-              <div class="progress-icon">
-                <fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon>
-              </div>
-              <span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span>
+        @if (!tx.status?.confirmed && showAccelerationSummary) {
+          <ng-container *ngIf="(ETA$ | async) as eta;">
+            <app-accelerate-checkout
+              *ngIf="(da$ | async) as da;"
+              [cashappEnabled]="cashappEligible"
+              [advancedEnabled]="false"
+              [forceMobile]="true"
+              [tx]="tx"
+              [accelerating]="isAcceleration"
+              [miningStats]="miningStats"
+              [eta]="eta"
+              [scrollEvent]="scrollIntoAccelPreview"
+              (unavailable)="eligibleForAcceleration = false"
+              class="w-100"
+            ></app-accelerate-checkout>
+          </ng-container>
+        }
+        <div class="status-panel d-flex flex-column h-100 w-100 justify-content-center align-items-center" [class.small-status]="!tx.status?.confirmed && showAccelerationSummary">
+          @if (tx?.acceleration && !tx.status?.confirmed) {
+            <div class="progress-icon">
+              <fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
+            </div>
+            <span class="explainer" i18n="tracker.explain.accelerated">Your transaction has been accelerated</span>
+          } @else {
+            @switch (trackerStage) {
+              @case ('waiting') {
+                <div class="progress-icon">
+                  <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
+                </div>
+                <span class="explainer" i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
+              }
+              @case ('pending') {
+                <div class="progress-icon">
+                  <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
+                </div>
+                <span class="explainer" i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
+              }
+              @case ('soon') {
+                <div class="progress-icon">
+                  <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
+                </div>
+                <span class="explainer" i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
+              }
+              @case ('next') {
+                <div class="progress-icon">
+                  <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
+                </div>
+                <span class="explainer" i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
+              }
+              @case ('confirmed') {
+                <div class="progress-icon">
+                  <fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
+                </div>
+                <span class="explainer" i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
+              }
+              @case ('replaced') {
+                <div class="progress-icon">
+                  <fa-icon [icon]="['fas', 'timeline']" [fixedWidth]="true"></fa-icon>
+                </div>
+                <span class="explainer" i18n="tracker.explain.replaced">Your transaction has been replaced by a newer version!</span>
+              }
             }
           }
-        }
+        </div>
       }
     </div>
 
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss
index ffa6208b7..56f0b5f0a 100644
--- a/frontend/src/app/components/tracker/tracker.component.scss
+++ b/frontend/src/app/components/tracker/tracker.component.scss
@@ -166,7 +166,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
 
   .explainer {
     margin: 0 1em;
@@ -178,6 +178,15 @@
   font-size: clamp(30px, 20vw, 150px);
 }
 
+.status-panel {
+  &.small-status {
+    min-height: 180px;
+    .progress-icon {
+      font-size: clamp(20px, 13vw, 100px);
+    }
+  }
+}
+
 .footer-link {
   display: flex;
   flex-direction: row;