From e9a67adf4fb0648e5ccb01c2f20a63bbb4ae70f7 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 12 Jan 2024 09:50:33 +0700
Subject: [PATCH] Adding links to FAQ sections from TX page

---
 .../src/app/components/block/block.component.html    |  2 +-
 .../src/app/components/block/block.component.scss    |  5 -----
 .../transaction/transaction.component.html           | 12 ++++++++++--
 frontend/src/styles.scss                             |  4 ++++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index e908d5b24..b34b39c8c 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -59,7 +59,7 @@
                 <td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
               </tr>
               <tr *ngIf="auditAvailable">
-                <td><ng-container i18n="latest-blocks.health">Health</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="what-is-block-health"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></td>
+                <td><ng-container i18n="latest-blocks.health">Health</ng-container>&nbsp;<a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="what-is-block-health"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></td>
                 <td>
                   <span
                     class="health-badge badge"
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index c413b1fce..6deb2cb4b 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -57,11 +57,6 @@
         text-align: left;
       }
     }
-    .info-link {
-      color: rgba(255, 255, 255, 0.4);
-      margin-left: 5px;
-    }
-
     .difference {
       margin-left: 0.5em;
   
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 313d6879c..8ac4cf919 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -299,7 +299,11 @@
                 <td [innerHTML]="'&lrm;' + (tx.weight / 4 | vbytes: 2)"></td>
               </tr>
               <tr *ngIf="adjustedVsize != null">
-                <td i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize</td>
+                <td i18n="transaction.adjusted-vsize|Transaction Adjusted VSize">Adjusted vsize
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-is-adjusted-vsize">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
                 <td [innerHTML]="'&lrm;' + (adjustedVsize | vbytes: 2)"></td>
               </tr>
               <tr>
@@ -321,7 +325,11 @@
                 <td [innerHTML]="'&lrm;' + (tx.locktime | number)"></td>
               </tr>
               <tr *ngIf="sigops != null">
-                <td i18n="transaction.sigops|Transaction Sigops">Sigops</td>
+                <td i18n="transaction.sigops|Transaction Sigops">Sigops
+                  <a class="info-link" [routerLink]="['/docs/faq/' | relativeUrl]" fragment="what-are-sigops">
+                    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon>
+                  </a>
+                </td>
                 <td [innerHTML]="'&lrm;' + (sigops | number)"></td>
               </tr>
               <tr>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index be8cec328..8a4fe3c9a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1191,3 +1191,7 @@ app-global-footer {
   line-height: 0.5;
   border-radius: 0.2rem;
 }
+
+.info-link fa-icon {
+  color: rgba(255, 255, 255, 0.4);
+}