From b4324e10874ce35ab21217e73871796b62617984 Mon Sep 17 00:00:00 2001
From: Scott de Jonge <sdejonge@gitlab.com>
Date: Wed, 31 Jul 2024 08:02:06 +0000
Subject: [PATCH] Use icon semantic design token value for subtle icons
---
.../components/review_app_link.vue | 2 +-
app/views/users/_profile_sidebar.html.haml | 22 +++++++++----------
.../environment_header_spec.js.snap | 2 +-
3 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
index 1af00c3509340..ed4bf17ec50d0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -43,6 +43,6 @@ export default {
data-track-action="open_review_app"
data-track-label="review_app"
>
- {{ display.text }} <gl-icon class="gl-fill-gray-500" name="external-link" />
+ {{ display.text }} <gl-icon variant="subtle" name="external-link" />
</gl-button>
</template>
diff --git a/app/views/users/_profile_sidebar.html.haml b/app/views/users/_profile_sidebar.html.haml
index 43f2f91572004..cbee8a5d2318d 100644
--- a/app/views/users/_profile_sidebar.html.haml
+++ b/app/views/users/_profile_sidebar.html.haml
@@ -30,21 +30,21 @@
%h2.gl-font-base.gl-mb-2.gl-mt-4= s_('UserProfile|Info')
- if work_information(@user).present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('work', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('work', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
%span
= work_information(@user, with_schema_markup: true)
- if @user.location.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('location', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('location', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
%span{ itemprop: 'addressLocality' }
= @user.location
- if user_local_time.present?
.gl-display-flex.gl-gap-2.gl-mb-2{ data: { testid: 'user-local-time' } }
- = sprite_icon('clock', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('clock', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
%span
= user_local_time
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('calendar', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('calendar', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
%span= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
- if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || @user.mastodon.present? || @user.discord.present?
@@ -52,29 +52,29 @@
%h2.gl-font-base.gl-mb-2.gl-mt-4= s_('UserProfile|Contact')
- if @user.website_url.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('earth', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('earth', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
- if display_public_email?(@user)
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('mail', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('mail', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900', itemprop: 'email'
- if @user.skype.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('skype', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('skype', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900', title: "Skype"
- if @user.linkedin.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('linkedin', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('linkedin', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to linkedin_name(@user), linkedin_url(@user), class: 'gl-text-gray-900', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
- if @user.twitter.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('x', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('x', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900', title: _("X (formerly Twitter)"), target: '_blank', rel: 'noopener noreferrer nofollow'
- if @user.mastodon.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('mastodon', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('mastodon', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
- if @user.discord.present?
.gl-display-flex.gl-gap-2.gl-mb-2
- = sprite_icon('discord', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
+ = sprite_icon('discord', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
= link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
diff --git a/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap b/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
index bca8337c76050..9ed947018e26e 100644
--- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
+++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
@@ -90,7 +90,7 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
View app
<svg
aria-hidden="true"
- class="gl-fill-current gl-fill-gray-500 gl-icon s16"
+ class="gl-fill-icon-subtle gl-icon s16"
data-testid="external-link-icon"
role="img"
>
--
GitLab