Ensure visibility icons in group/project listings are grey64700-fix-the-color-of-the-visibility-icon-on-project-lists

- 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

4 files changed, 7 insertions, 6 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 9909f437fc8..830385941d8 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/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 }}
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index cff2e274390..1502cf18440 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/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;
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 71bd9320593..221a8fe20af 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/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
diff --git a/changelogs/unreleased/64700-fix-the-color-of-the-visibility-icon-on-project-lists.yml b/changelogs/unreleased/64700-fix-the-color-of-the-visibility-icon-on-project-lists.yml
new file mode 100644
index 00000000000..0d2fbaf01ed
--- /dev/null
+++ b/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