diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index e2b0c7fee324f4ad8df21a2c75cf62fa2a0cd7df..ec2095c91f212b3887496e5043cdee95e68c8b7b 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -107,7 +107,7 @@ export default {
<td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
{{ __('Unable to load the diff') }}
<button
- class="btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button"
+ class="gl-button btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button gl-reset-font-size!"
@click="fetchDiff"
>
{{ __('Try again') }}
diff --git a/app/assets/javascripts/notes/components/email_participants_warning.vue b/app/assets/javascripts/notes/components/email_participants_warning.vue
index ecf42fce1d27335a56e8e7fd35cca0befbc94198..1875d48e7b2a8968539aeafe406c1eaa2ff8c8ad 100644
--- a/app/assets/javascripts/notes/components/email_participants_warning.vue
+++ b/app/assets/javascripts/notes/components/email_participants_warning.vue
@@ -58,7 +58,7 @@ export default {
<div class="issuable-note-warning" data-testid="email-participants-warning">
<gl-sprintf :message="message">
<template #andMore>
- <button type="button" class="btn-transparent btn-link" @click="showMoreParticipants">
+ <button type="button" class="gl-button btn-link" @click="showMoreParticipants">
{{ moreLabel }}
</button>
</template>
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index 65b3fd6f8b3a5b48053d2309454b11e1a037ad2f..8cd4477a3bb4a82b769433d535f54d40e2397607 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -72,7 +72,7 @@ export default {
{{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
</gl-button>
{{ __('Last reply by') }}
- <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2">
+ <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button">
{{ lastReply.author.name }}
</a>
<time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" />
diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue
index d48a5acb85c5f7ca88ce77b6eb376e3d799158dc..8396f00810d4328b91a3c86ff9772e49a81bcdab 100644
--- a/app/assets/javascripts/performance_bar/components/add_request.vue
+++ b/app/assets/javascripts/performance_bar/components/add_request.vue
@@ -27,7 +27,7 @@ export default {
<div id="peek-view-add-request" class="view">
<form class="form-inline" @submit.prevent>
<button
- class="btn-blank btn-link bold gl-text-blue-300"
+ class="btn-link bold gl-text-blue-300 gl-button"
type="button"
:title="__(`Add request manually`)"
@click="toggleInput"
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 0f744e858f2b09916735d5c14db28e6b3de22ea9..cce0976f66f125efa25f5844f8d19c1c293cf4e0 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -150,7 +150,7 @@ export default {
<div id="js-peek" :class="env">
<div
v-if="currentRequest"
- class="d-flex container-fluid container-limited justify-content-center"
+ class="d-flex container-fluid container-limited justify-content-center gl-align-items-center"
data-qa-selector="performance_bar"
>
<div id="peek-view-host" class="view">
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index bdd014163a08ca939130794d0fb4474c382f6a4c..3602b5ec4f61229bf44407951d092ede0d9e2654 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -55,7 +55,12 @@ export default {
{{ __('None') }}
<template v-if="editable">
-
- <button type="button" class="btn-link" data-testid="assign-yourself" @click="assignSelf">
+ <button
+ type="button"
+ class="gl-button btn-link gl-reset-color!"
+ data-testid="assign-yourself"
+ @click="assignSelf"
+ >
{{ __('assign yourself') }}
</button>
</template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue
index af4227fa48dc95c6cfe68faf7ea0aed378083bc1..46bda26c327648163d25bf75cfd79dd53fc8eed5 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue
@@ -26,7 +26,7 @@ export default {
};
</script>
<template>
- <button type="button" class="btn-link">
+ <button type="button" class="gl-button btn-link">
<assignee-avatar :user="user" :img-size="24" :issuable-type="issuableType" />
<user-name-with-status
:name="user.name"
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
index 50b1955abccb2d7d8f89c657cc04fd03057d238e..f894ef0c42d639772d21f2f84c941df7670dc913 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
@@ -123,7 +123,7 @@ export default {
:user="user"
:issuable-type="issuableType"
/>
- <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
+ <button v-if="hasMoreThanTwoAssignees" class="btn-link gl-button" type="button">
<span
class="avatar-counter sidebar-avatar-counter gl-display-flex gl-align-items-center gl-pl-3"
>
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 01d29da5486ebd9727ee8f94914bbdbafe661b63..b62604188379ab815ee8e15d2d499460d71bd300 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -120,7 +120,7 @@ export default {
<div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800">
<button
type="button"
- class="btn-link"
+ class="btn-link gl-button gl-reset-color!"
data-qa-selector="more_assignees_link"
@click="toggleShowLess"
>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue
index 6de926e0ff98a1ca4bb2be9e36fd5d4e4ba533f1..2ea7c125a85446f5def51565c3a077a23ec8442d 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue
@@ -17,7 +17,7 @@ export default {
</script>
<template>
- <button type="button" class="btn-link">
+ <button type="button" class="btn-link gl-button">
<reviewer-avatar :user="user" :img-size="24" />
<span class="author"> {{ user.name }} </span>
</button>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
index e09b5d913f76b8b7e2e7bfd2f063f2aec49313b0..9502b2e78b32bdf8ad9f7876f17a2a6ee9c5fabf 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
@@ -95,7 +95,7 @@ export default {
>
<gl-icon v-if="hasNoUsers" name="user" :aria-label="__('None')" />
<collapsed-reviewer v-for="user in collapsedUsers" :key="user.id" :user="user" />
- <button v-if="hasMoreThanTwoReviewers" class="btn-link" type="button">
+ <button v-if="hasMoreThanTwoReviewers" class="btn-link gl-button" type="button">
<span
class="avatar-counter sidebar-avatar-counter gl-display-flex gl-align-items-center gl-pl-3"
>
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index b7159fd68351995b7814d5acc1fa8abb3583d39f..26838682fc874b2936edf80631a79046d0f2f8af 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -17,7 +17,7 @@ const ERROR_HTML = `<div class="nothing-here-block">${spriteIcon(
's16',
)} Could not load diff</div>`;
const COLLAPSED_HTML =
- '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>';
+ '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link gl-button">Click to expand it.</button></div>';
export default class SingleFileDiff {
constructor(file) {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 7ecd7ea277f7d80e498b2f6d53cd8ed04a7bc1f7..f951b663cb746bf685222680c73a460b414ee03e 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -357,25 +357,6 @@
}
}
-.btn-link {
- padding: 0;
- background-color: transparent;
- color: $blue-600;
- font-weight: normal;
- border-radius: 0;
- border-color: transparent;
- border-width: 0;
-
- &:hover,
- &:active,
- &:focus {
- color: $blue-800;
- text-decoration: underline;
- background-color: transparent;
- border-color: transparent;
- }
-}
-
// The .btn-svg class is available for legacy icon buttons to
// preserve a 34px height and have 16x16 icons at the same time.
// Once a button is migrated (to the current 32px height)