Ensure visibility icons in group/project listings are grey

- Project listing icons now use the `text-secondary` class
- Group listing icons now use the `text-secondary` class
  - Unnecessary CSS was removed from groups.scss as a result

app/assets/javascripts/groups/components/group_item.vue

@@ -129,7 +129,7 @@ export default {
             <item-stats-value
               :icon-name="visibilityIcon"
               :title="visibilityTooltip"
-              css-class="item-visibility d-inline-flex align-items-center prepend-top-8 append-right-4"
+              css-class="item-visibility d-inline-flex align-items-center prepend-top-8 append-right-4 text-secondary"
             />
             <span v-if="group.permission" class="user-access-role prepend-top-8">
               {{ group.permission }}

app/assets/stylesheets/pages/groups.scss

@@ -412,10 +412,6 @@ table.pipeline-project-metrics tr td {
       font-size: $gl-font-size-large;
     }
 
-    .item-visibility {
-      color: $gl-text-color-secondary;
-    }
-
     @include media-breakpoint-down(md) {
       .title {
         font-size: $gl-font-size;

app/views/shared/projects/_project.html.haml

@@ -37,7 +37,7 @@
                 %span.project-name<
                   = project.name
 
-          %span.metadata-info.visibility-icon.append-right-10.prepend-top-8.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
+          %span.metadata-info.visibility-icon.append-right-10.prepend-top-8.text-secondary.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
             = visibility_level_icon(project.visibility_level, fw: true)
 
           - if explore_projects_tab? && project.repository.license

changelogs/unreleased/64700-fix-the-color-of-the-visibility-icon-on-project-lists.yml

@@ -0,0 +1,5 @@
+---
+title: Ensure visibility icons in group/project listings are grey
+merge_request: 30858
+author:
+type: fixed