From f756fb4d79d3bb1f6a23da5d9494cd73229a2c33 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 9 Jul 2024 00:02:05 +0900
Subject: [PATCH] Update shape colors

---
 .../acceleration-timeline.component.html      | 10 +--
 .../acceleration-timeline.component.scss      | 77 ++++++++++---------
 2 files changed, 45 insertions(+), 42 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 23462f8f7..15948fdac 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -45,9 +45,9 @@
         <div class="interval-spacer">
           <div class="acc-to-confirmed"></div>
         </div>
-        <div class="node mined" [id]="'confirmed'" >
+        <div class="node selected" [id]="'confirmed'">
           <div class="acc-to-confirmed left" ></div>
-          <div class="shape-border mined-selected">
+          <div class="shape-border">
             <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
@@ -125,11 +125,11 @@
           <div class="interval-spacer">
             <div class="seen-to-acc"></div>
           </div>
-          <div class="node" [id]="'accelerated'">
+          <div class="node accelerated" [id]="'accelerated'">
             <div class="seen-to-acc left"></div>
             <div class="seen-to-acc right"></div>
-            <div  class="shape-border accelerated-selected">
-              <div class="shape accelerating"></div>
+            <div  class="shape-border">
+              <div class="shape"></div>
               <div class="connector down loading"></div>
             </div>
             <div class="time" style="margin-top: 3px;">
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 8648052f4..d9df8ea0e 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -123,28 +123,6 @@
         left: 50%;
       }
     }
-
-    .connector {
-      position: absolute;
-      height: 88px;
-      width: 10px;
-      left: -5px;
-      top: -73px;
-      transform: translateX(120%);
-      background: var(--tertiary);
-
-      &.down {
-        border-top-left-radius: 10px; 
-      }
-
-      &.up {
-        border-top-right-radius: 10px; 
-      }
-
-      &.loading {
-        animation: acceleratePulse 1s infinite;
-      }
-    }
   }
 
   .nodes {
@@ -159,34 +137,59 @@
         margin-bottom: -8px;
         transform: translateY(-50%);
         border-radius: 50%;
-        padding: 2px;
-
+        cursor: pointer;
+        padding: 4px;
+        background: transparent;
+        transition: background-color 300ms, padding 300ms;
+    
         .shape {
+          position: relative;
           width: 100%;
           height: 100%;
           border-radius: 50%;
           background: white;
-          &.accelerating {
-            animation: acceleratePulse 1s infinite;
-          }
+          transition: background-color 300ms, border 300ms;
+          z-index: 1;
         }
-
+    
         &.waiting {
           .shape {
             background: var(--grey);
           }
         }
-
-        &.accelerated-selected {
-          .shape {
-            background: var(--tertiary);
+    
+        .connector {
+          position: absolute;
+          height: 88px;
+          width: 10px;
+          left: -5px;
+          top: -73px;
+          transform: translateX(120%);
+          background: var(--tertiary);
+    
+          &.down {
+            border-top-left-radius: 10px;
+          }
+    
+          &.up {
+            border-top-right-radius: 10px;
+          }
+    
+          &.loading {
+            animation: acceleratePulse 1s infinite;
           }
         }
+      }
+    
+      &.accelerated {
+        .shape-border {
+          animation: acceleratePulse 1s infinite;
+        }
+      }
 
-        &.mined-selected {
-          .shape {
-            background: var(--success);
-          }
+      &.selected {
+        .shape-border {
+          background: var(--mainnet-alt);
         }
       }
 
@@ -198,7 +201,7 @@
           background-color: var(--grey);
           color: white;
         }
-        
+
         .badge.badge-accelerated {
           background-color: var(--tertiary);
           color: white;