From 1710ae0503032319c82facb4e56cdfcb0914de0e Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Fri, 5 Jul 2024 16:30:12 +0900
Subject: [PATCH] Improve step colors in timeline

---
 .../acceleration-timeline.component.html             |  8 ++++----
 .../acceleration-timeline.component.scss             | 12 ++++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
index 6d3591fb9..41722aaca 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -39,10 +39,10 @@
       <div class="node" [id]="'accelerated'">
         <div class="seen-to-acc left" [class.loading]="!tx.acceleration && !tx.status.confirmed"></div>
         <div class="acc-to-confirmed right" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
-        <a class="shape-border" [class.accelerated-selected]="tx.acceleration && !tx.status.confirmed">
+        <a class="shape-border" [class.accelerated-selected]="tx.acceleration && !tx.status.confirmed" [class.waiting]="!tx.acceleration && !tx.status.confirmed ? 'waiting' : ''">
           <div class="shape"></div>
         </a>
-        <div class="status" [style]="!tx.acceleration && !tx.status.confirmed ? 'opacity: 0.5' : ''"><span class="badge badge-accelerated">Accelerated</span></div>
+        <div class="status"><span class="badge" [class]="tx.status.confirmed || tx.acceleration ? 'badge-accelerated' : 'badge-waiting'">Accelerated</span></div>
         <div class="time">
           <app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
         </div>
@@ -52,10 +52,10 @@
       </div>
       <div class="node" [id]="'confirmed'" [class.mined]="tx.status.confirmed">
         <div class="acc-to-confirmed left" [class.loading]="tx.acceleration && !tx.status.confirmed"></div>
-        <a class="shape-border" [class.mined-selected]="tx.status.confirmed">
+        <a class="shape-border" [class.mined-selected]="tx.status.confirmed" [class.waiting]="!tx.status.confirmed ? 'waiting' : ''">
           <div class="shape"></div>
         </a>
-        <div class="status" [style]="!tx.status.confirmed ? 'opacity: 0.5' : ''"><span class="badge badge-success">Mined</span></div>
+        <div class="status"><span class="badge" [class]="tx.status.confirmed ? 'badge-success' : 'badge-waiting'">Mined</span></div>
         <div class="time">
           @if (tx.status.block_time) {
             <app-time kind="since" [time]="tx.status.block_time"></app-time>
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
index d0338ec84..73ca2b270 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -145,6 +145,12 @@
           transition: background-color 300ms, border 300ms;
         }
 
+        &.waiting {
+          .shape {
+            background: var(--grey);
+          }
+        }
+
         &.sent-selected {
           .shape {
             background: var(--primary);
@@ -166,6 +172,12 @@
 
       .status {
         margin-top: -64px;
+
+        .badge.badge-waiting {
+          opacity: 0.5;
+          background-color: var(--grey);
+          color: white;
+        }
         
         .badge.badge-accelerated {
           background-color: var(--tertiary);