From adde1a86e4f357fc88bc13c974c78ab1f96f8c13 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 9 Jul 2024 08:57:09 +0000
Subject: [PATCH] [accelerator] fast track chevrons animation

---
 .../acceleration-timeline.component.html      |  8 ++--
 .../acceleration-timeline.component.scss      | 48 +++++++++++++++++--
 2 files changed, 49 insertions(+), 7 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..f2eaad6bd 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -81,13 +81,13 @@
           <div class="node-spacer"></div>
           <div class="interval-spacer"></div>
           <div class="node">
-            <div class="acc-to-confirmed loading right"></div>
+            <div class="acc-to-confirmed right go-faster"></div>
           </div>
           <div class="interval-spacer">
-            <div class="acc-to-confirmed loading"></div>
+            <!-- <div class="acc-to-confirmed go-faster loading"></div> -->
           </div>
           <div class="node" [id]="'confirmed'">
-            <div class="acc-to-confirmed loading left"></div>
+            <div class="acc-to-confirmed left go-faster"></div>
             <div class="shape-border waiting">
               <div class="shape animate"></div>
             </div>
@@ -129,8 +129,8 @@
             <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="connector down loading"></div>
+              <div class="shape accelerating position-relative"></div>
             </div>
             <div class="time" style="margin-top: 3px;">
               <span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></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 8648052f4..f3728ce99 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -52,7 +52,7 @@
 
     .interval, .interval-spacer {
       width: 8em;
-      min-width: 5em;
+      min-width: 8em;
       max-width: 8em;
       height: 32px;
       display: flex;
@@ -112,6 +112,28 @@
       background: var(--tertiary);
       border-radius: 5px;
 
+      &.go-faster {
+        // background:
+        //   linear-gradient(-135deg, var(--tertiary) 34%, transparent 34%),
+        //   linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) 0 5px,
+        //   linear-gradient(-225deg, var(--tertiary) 16%, transparent 16%) 0 -5px,
+        //   linear-gradient(-225deg, var(--mainnet-alt) 66%, transparent 66%),
+        //   var(--tertiary);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A");        background-size: 20px 10px;
+        border-radius: 0;
+
+        &.right {
+          left: calc(50% + 5px);
+          margin-right: calc(-4em + 5px);
+          animation: goFasterRight 1s infinite linear;
+        }
+        &.left {
+          right: calc(50% + 5px);
+          margin-left: calc(-4em + 5px);
+          animation: goFasterLeft 1s infinite linear;
+        }
+      }
+
       &.loading {
         animation: acceleratePulse 1s infinite;
       }
@@ -131,7 +153,12 @@
       left: -5px;
       top: -73px;
       transform: translateX(120%);
-      background: var(--tertiary);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A");      //     linear-gradient(135deg, var(--tertiary) 34%, transparent 34%),
+      //     linear-gradient(315deg, var(--tertiary) 16%, transparent 16%) 5px 0,
+      //     linear-gradient(45deg, var(--tertiary) 16%, transparent 16%) -5px 0,
+      //     linear-gradient(45deg, var(--mainnet-alt) 66%, transparent 66%),
+      //     var(--tertiary);
+      background-size: 10px 20px;
 
       &.down {
         border-top-left-radius: 10px; 
@@ -142,7 +169,7 @@
       }
 
       &.loading {
-        animation: acceleratePulse 1s infinite;
+        animation: goFasterUp 1s infinite linear;
       }
     }
   }
@@ -220,3 +247,18 @@
   50% { background-color: var(--mainnet-alt) }
   100% { background-color: var(--tertiary) }
 }
+
+@keyframes goFasterUp {
+  0% { background-position-y: 0; }
+  100% { background-position-y: -40px; }
+}
+
+@keyframes goFasterLeft {
+  0% { background-position: left 0px bottom 0px }
+  100% { background-position: left 40px bottom 0px; }
+}
+
+@keyframes goFasterRight {
+  0% { background-position: right 0 bottom 0px; }
+  100% { background-position: right -40px bottom 0px; }
+}