Merge branch '38378-job-log-scroll-up-and-scroll-down-icons-are-inconsistent-2' into 'master'

Animate new scroll-down icon

Closes #38378

See merge request gitlab-org/gitlab!21442

app/assets/javascripts/jobs/svg/scroll_down.svg

-<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
-  <path class="first-triangle" d="M1.048 14.155a.508.508 0 0 0-.32.105c-.091.07-.136.154-.136.25v.71c0 .095.045.178.135.249.09.07.197.105.321.105h10.043c.124 0 .23-.035.321-.105.09-.07.136-.154.136-.25v-.71c0-.095-.045-.178-.136-.249a.508.508 0 0 0-.32-.105"/>
-  <path class="second-triangle" d="M.687 8.027c-.09-.087-.122-.16-.093-.22.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 12.91a.458.458 0 0 1-.136.089h-.37a.626.626 0 0 1-.136-.09"/>
-  <path class="third-triangle" d="M.687 1.027C.597.94.565.867.594.807c.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 5.91A.458.458 0 0 1 6.257 6h-.37a.626.626 0 0 1-.136-.09"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="scroll-arrow" d="M8 10.4142L4.29289 6.70711C3.90237 6.31658 3.90237 5.68342 4.29289 5.2929C4.68342 4.90237 5.31658 4.90237 5.70711 5.2929L7 6.58579L7 1C7 0.447715 7.44772 0 8 0C8.55229 0 9 0.447715 9 1L9 6.58579L10.2929 5.2929C10.6834 4.90237 11.3166 4.90237 11.7071 5.2929C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711L8 10.4142Z"/>
+<path class="scroll-dot" d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z"/>
 </svg>

app/assets/stylesheets/framework/mixins.scss

@@ -271,18 +271,13 @@
   }
 
   .btn-scroll.animate {
-    .first-triangle {
-      animation: blinking-scroll-button 1s ease infinite;
-      animation-delay: 0.3s;
-    }
-
-    .second-triangle {
-      animation: blinking-scroll-button 1s ease infinite;
-      animation-delay: 0.2s;
+    .scroll-arrow {
+      animation: blinking-scroll-button 1.5s ease-in-out infinite;
     }
 
-    .third-triangle {
-      animation: blinking-scroll-button 1s ease infinite;
+    .scroll-dot {
+      animation: blinking-scroll-button 1.5s ease-in-out infinite;
+      animation-delay: 0.3s;
     }
 
     &:disabled {

app/assets/stylesheets/pages/builds.scss

@@ -32,16 +32,12 @@
     opacity: 0.2;
   }
 
-  25% {
-    opacity: 0.5;
-  }
-
   50% {
-    opacity: 0.7;
+    opacity: 1;
   }
 
   100% {
-    opacity: 1;
+    opacity: 0.2;
   }
 }
 

changelogs/unreleased/38378-job-log-scroll-up-and-scroll-down-icons-are-inconsistent-2.yml

+---
+title: Fix CI job's scroll down icon and update animation
+merge_request: 21442
+author:
+type: fix