From b453898b1d565f997e285c3f20d01e9942ea827c Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 6 Feb 2024 13:42:23 +0100
Subject: [PATCH] Add glow effect to peg outs in progress

---
 .../recent-pegs-list.component.html                 |  4 ++--
 .../recent-pegs-list.component.scss                 | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
index d562328a5..b8e172eb2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html
@@ -34,7 +34,7 @@
               <td class="timestamp text-left widget">
                 <app-time kind="since" [time]="peg.blocktime"></app-time>
               </td>
-              <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+              <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
             </tr>
@@ -57,7 +57,7 @@
                 &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
                 <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.blocktime"></app-time>)</i></div>
               </td>
-              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
+              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0, 'glow-effect': peg.amount < 0 && peg.bitcoinaddress && !peg.bitcointxid}">
                 <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
               </td>
               <td class="output text-left">
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 92f5bc64f..4bb89d781 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -105,3 +105,16 @@ tr, td, th {
 .debit {
   color: #D81B60;
 }
+
+.glow-effect {
+  animation: color-oscillation 1s ease-in-out infinite alternate;
+}
+
+@keyframes color-oscillation {
+  0% {
+      color: #777983;
+  }
+  100% {
+      color: #D81B60;
+  }
+}