From 88df2878cb9e9c0dd8d7f6059663f8a9a837b30b Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 13 Apr 2024 12:26:30 +0000
Subject: [PATCH] Add logo to tx tracker page, fix bugs

---
 .../components/tracker/tracker.component.html |  5 +++-
 .../components/tracker/tracker.component.scss | 24 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html
index f2f16d010..8832e1c84 100644
--- a/frontend/src/app/components/tracker/tracker.component.html
+++ b/frontend/src/app/components/tracker/tracker.component.html
@@ -1,6 +1,9 @@
 <div class="mobile-wrapper">
   <div class="mobile-container">
     <div class="panel">
+      <div class="field nav-header">
+          <app-svg-images name="officialMempoolSpace" style="width: 144px; height: 36px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+      </div>
       <div class="field">
         <div class="label" i18n="shared.transaction">Transaction</div>
         <div class="value">
@@ -37,7 +40,7 @@
             }
           }
         </div>
-        @if (tx && !tx.status?.confirmed && mempoolPosition) {
+        @if (tx && !tx.status?.confirmed && mempoolPosition?.block != null) {
           <div class="field">
             <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
             <div class="value">
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss
index 025479cde..4de8e410d 100644
--- a/frontend/src/app/components/tracker/tracker.component.scss
+++ b/frontend/src/app/components/tracker/tracker.component.scss
@@ -8,6 +8,7 @@
 .mobile-container {
   width: 100vw;
   height: 100vh;
+  height: 100svh;
   max-width: 600px;
   max-height: 1000px;
   box-sizing: border-box;
@@ -21,6 +22,29 @@
   }
 }
 
+.heading {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  & > * {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  .heading-label {
+    text-align: center;
+    margin: 0 1em;
+  }
+}
+
+.nav-header {
+  position: relative;
+  box-shadow: 0 -5px 15px #000;
+  z-index: 100;
+}
+
 .blockchain-wrapper {
   position: relative;
   display: flex;