Fix alignment / color of some icons

Add changelog
Sync pairing with @jeldergl

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -41,15 +41,6 @@
       width: 20%;
     }
 
-    .fa,
-    svg {
-      color: $cycle-analytics-light-gray;
-
-      &:hover {
-        color: $gl-text-color;
-      }
-    }
-
     .stage-header {
       width: 20.5%;
     }

app/assets/stylesheets/pages/dev_ops_report.scss

@@ -25,6 +25,10 @@ $space-between-cards: 8px;
     margin-left: 8px;
     font-weight: $gl-font-weight-normal;
 
+    .devops-header-icon {
+      vertical-align: px-to-rem(-$gl-spacing-scale-1);
+    }
+
     a {
       font-size: 18px;
       color: $gl-text-color-secondary;

app/views/admin/dev_ops_report/show.html.haml

@@ -19,7 +19,7 @@
           = _('DevOps')
           %br
           = _('Score')
-          = link_to sprite_icon('question-o'), help_page_path('user/admin_area/analytics/dev_ops_report')
+          = link_to sprite_icon('question-o', css_class: 'devops-header-icon'), help_page_path('user/admin_area/analytics/dev_ops_report')
 
       .devops-cards.board-card-container
         - @metric.cards.each do |card|

app/views/projects/cycle_analytics/show.html.haml

@@ -41,22 +41,22 @@
                 %span.stage-name.font-weight-bold
                   {{ s__('ProjectLifecycle|Stage') }}
                 %span.has-tooltip{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o')
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
               %li.median-header
                 %span.stage-name.font-weight-bold
                   {{ __('Median') }}
                 %span.has-tooltip{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o')
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
               %li.event-header.pl-3
                 %span.stage-name.font-weight-bold
                   {{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
                 %span.has-tooltip{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o')
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
               %li.total-time-header.pr-5.text-right
                 %span.stage-name.font-weight-bold
                   {{ __('Time') }}
                 %span.has-tooltip{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
-                  = sprite_icon('question-o')
+                  = sprite_icon('question-o', css_class: 'gl-text-gray-500')
         .stage-panel-body
           %nav.stage-nav
             %ul

changelogs/unreleased/225958-replace-fa-question-circle-icons-with-gitlab-svg-question-icon.yml

+---
+title: Replace fa-question-circle icons with GitLab SVG question-o icon
+merge_request: 41970
+author:
+type: changed