Fix svg logos for empty pipeline templates

Changelog: fixed

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue

 <script>
-import { GlButton, GlCard, GlSprintf } from '@gitlab/ui';
+import { GlAvatar, GlButton, GlCard, GlSprintf } from '@gitlab/ui';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
@@ -7,6 +7,7 @@ import { HELLO_WORLD_TEMPLATE_KEY } from '../../constants';
 
 export default {
   components: {
+    GlAvatar,
     GlButton,
     GlCard,
     GlSprintf,
@@ -109,11 +110,12 @@ export default {
           class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-pb-3 gl-pt-3"
         >
           <div class="gl-display-flex gl-flex-direction-row gl-align-items-center">
-            <img
-              width="64"
-              height="64"
+            <gl-avatar
               :src="template.logo"
-              class="gl-mr-6"
+              :size="64"
+              class="gl-mr-6 gl-bg-white dark-mode-override"
+              shape="rect"
+              :alt="template.name"
               data-testid="template-logo"
             />
             <div class="gl-flex-direction-row">

app/assets/stylesheets/page_bundles/pipelines.scss

@@ -62,6 +62,12 @@
   .pipeline-tags .label-container {
     white-space: normal;
   }
+
+  .dark-mode-override {
+    .gl-dark & {
+      background-color: $white;
+    }
+  }
 }
 
 // Mini Pipelines

app/helpers/ci/pipelines_helper.rb

@@ -34,38 +34,38 @@ module Ci
     # and will be cleaned up with https://gitlab.com/gitlab-org/gitlab/-/issues/326299
     def experiment_suggested_ci_templates
       [
-        { name: 'Android', logo: image_path('illustrations/logos/android.svg') },
-        { name: 'Bash', logo: image_path('illustrations/logos/bash.svg') },
-        { name: 'C++', logo: image_path('illustrations/logos/c_plus_plus.svg') },
-        { name: 'Clojure', logo: image_path('illustrations/logos/clojure.svg') },
-        { name: 'Composer', logo: image_path('illustrations/logos/composer.svg') },
-        { name: 'Crystal', logo: image_path('illustrations/logos/crystal.svg') },
-        { name: 'Dart', logo: image_path('illustrations/logos/dart.svg') },
-        { name: 'Django', logo: image_path('illustrations/logos/django.svg') },
-        { name: 'Docker', logo: image_path('illustrations/logos/docker.svg') },
-        { name: 'Elixir', logo: image_path('illustrations/logos/elixir.svg') },
-        { name: 'iOS-Fastlane', logo: image_path('illustrations/logos/fastlane.svg') },
-        { name: 'Flutter', logo: image_path('illustrations/logos/flutter.svg') },
-        { name: 'Go', logo: image_path('illustrations/logos/go_logo.svg') },
-        { name: 'Gradle', logo: image_path('illustrations/logos/gradle.svg') },
-        { name: 'Grails', logo: image_path('illustrations/logos/grails.svg') },
-        { name: 'dotNET', logo: image_path('illustrations/logos/dotnet.svg') },
-        { name: 'Julia', logo: image_path('illustrations/logos/julia.svg') },
-        { name: 'Laravel', logo: image_path('illustrations/logos/laravel.svg') },
-        { name: 'LaTeX', logo: image_path('illustrations/logos/latex.svg') },
-        { name: 'Maven', logo: image_path('illustrations/logos/maven.svg') },
-        { name: 'Mono', logo: image_path('illustrations/logos/mono.svg') },
-        { name: 'Nodejs', logo: image_path('illustrations/logos/node_js.svg') },
-        { name: 'npm', logo: image_path('illustrations/logos/npm.svg') },
-        { name: 'OpenShift', logo: image_path('illustrations/logos/openshift.svg') },
-        { name: 'Packer', logo: image_path('illustrations/logos/packer.svg') },
-        { name: 'PHP', logo: image_path('illustrations/logos/php.svg') },
-        { name: 'Python', logo: image_path('illustrations/logos/python.svg') },
-        { name: 'Ruby', logo: image_path('illustrations/logos/ruby.svg') },
-        { name: 'Rust', logo: image_path('illustrations/logos/rust.svg') },
-        { name: 'Scala', logo: image_path('illustrations/logos/scala.svg') },
-        { name: 'Swift', logo: image_path('illustrations/logos/swift.svg') },
-        { name: 'Terraform', logo: image_path('illustrations/logos/terraform.svg') }
+        { name: 'Android', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/android.svg') },
+        { name: 'Bash', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/bash.svg') },
+        { name: 'C++', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/c_plus_plus.svg') },
+        { name: 'Clojure', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/clojure.svg') },
+        { name: 'Composer', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/composer.svg') },
+        { name: 'Crystal', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/crystal.svg') },
+        { name: 'Dart', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/dart.svg') },
+        { name: 'Django', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/django.svg') },
+        { name: 'Docker', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/docker.svg') },
+        { name: 'Elixir', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/elixir.svg') },
+        { name: 'iOS-Fastlane', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/fastlane.svg') },
+        { name: 'Flutter', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/flutter.svg') },
+        { name: 'Go', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/go_logo.svg') },
+        { name: 'Gradle', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/gradle.svg') },
+        { name: 'Grails', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/grails.svg') },
+        { name: 'dotNET', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/dotnet.svg') },
+        { name: 'Julia', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/julia.svg') },
+        { name: 'Laravel', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/laravel.svg') },
+        { name: 'LaTeX', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/latex.svg') },
+        { name: 'Maven', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/maven.svg') },
+        { name: 'Mono', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/mono.svg') },
+        { name: 'Nodejs', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/node_js.svg') },
+        { name: 'npm', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/npm.svg') },
+        { name: 'OpenShift', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/openshift.svg') },
+        { name: 'Packer', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/packer.svg') },
+        { name: 'PHP', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/php.svg') },
+        { name: 'Python', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/python.svg') },
+        { name: 'Ruby', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/ruby.svg') },
+        { name: 'Rust', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/rust.svg') },
+        { name: 'Scala', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/scala.svg') },
+        { name: 'Swift', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/swift.svg') },
+        { name: 'Terraform', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/terraform.svg') }
       ]
     end