Use inline SVG for Docker whale instead of Font Awesome icon

Font Awesome brand icon color was being overridden by dark themes.
Using an inline SVG with explicit fill color ensures the whale is
always Docker blue regardless of theme.

Author: Sebbeben

templates/admin/update_manager/docker_progress.html.twig

@@ -9,27 +9,36 @@
         .docker-whale-container {
             position: relative;
             display: inline-block;
-            width: 80px;
-            height: 60px;
+            width: 90px;
+            height: 70px;
         }
         .docker-whale {
-            font-size: 3rem;
-            color: #0db7ed !important;
+            width: 64px;
+            height: 64px;
             animation: whale-bob 2s ease-in-out infinite;
             display: inline-block;
         }
         .docker-whale.success {
-            color: #198754 !important;
             animation: whale-arrive 0.6s ease-out forwards;
         }
-        .docker-whale.timeout {
-            color: #ffc107;
-            animation: none;
+        .docker-whale.success .docker-whale-svg {
+            fill: #198754;
+        }
+        .docker-whale.timeout .docker-whale-svg {
+            fill: #ffc107;
         }
+        .docker-whale.timeout,
         .docker-whale.failed {
-            color: #dc3545;
             animation: none;
         }
+        .docker-whale.failed .docker-whale-svg {
+            fill: #dc3545;
+        }
+        .docker-whale-svg {
+            fill: #0db7ed;
+            width: 100%;
+            height: 100%;
+        }
         @keyframes whale-bob {
             0%, 100% { transform: translateY(0) rotate(0deg); }
             25% { transform: translateY(-8px) rotate(-2deg); }
@@ -59,9 +68,9 @@
             white-space: nowrap;
             letter-spacing: -2px;
         }
-        .docker-whale.success ~ .whale-waves::before,
-        .docker-whale.timeout ~ .whale-waves::before,
-        .docker-whale.failed ~ .whale-waves::before {
+        .docker-whale.success + .whale-waves::before,
+        .docker-whale.timeout + .whale-waves::before,
+        .docker-whale.failed + .whale-waves::before {
             animation: none;
         }
         @keyframes wave-flow {
@@ -101,7 +110,12 @@
     <div class="text-center mb-4">
         <div class="mb-3">
             <div class="docker-whale-container">
-                <i class="fab fa-docker docker-whale" data-docker-update-progress-target="headerWhale"></i>
+                <div class="docker-whale" data-docker-update-progress-target="headerWhale">
+                    <svg class="docker-whale-svg" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg">
+                        {# Docker Moby whale logo (Font Awesome docker icon path) #}
+                        <path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.4 5.8 116.5 44 161.1 34.1 39.9 85.7 60.2 153.6 60.2 118.6 0 213.3-49 257-183.1 16.8.2 52.9 0 71.4-36.6.5-.9 4.8-10.2 15.7-32.6l5.8-11.8-14.4-9.6z"/>
+                    </svg>
+                </div>
                 <div class="whale-waves"></div>
             </div>
         </div>