Use text.color.link for hover color in issuable sidebar controls

Update GlButton class overrides
Update `.right-sidebar a:not(.btn)` hover CSS styles

Changelog: changed

app/assets/javascripts/sidebar/components/assignees/assignees.vue

@@ -56,8 +56,13 @@ export default {
         {{ __('None') }}
         <template v-if="editable">
           -
-          <gl-button variant="link" data-testid="assign-yourself" @click="assignSelf">
-            <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+          <gl-button
+            class="!gl-text-inherit hover:!gl-text-link"
+            variant="link"
+            data-testid="assign-yourself"
+            @click="assignSelf"
+          >
+            {{ __('assign yourself') }}
           </gl-button>
         </template>
       </span>

app/assets/javascripts/sidebar/components/assignees/issuable_assignees.vue

@@ -52,12 +52,11 @@ export default {
         <span class="gl-ml-2">-</span>
         <gl-button
           data-testid="assign-yourself"
-          category="tertiary"
+          class="gl-ml-2 !gl-text-inherit hover:!gl-text-link"
           variant="link"
-          class="gl-ml-2"
           @click="$emit('assign-self')"
         >
-          <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+          {{ __('assign yourself') }}
         </gl-button>
       </template>
     </div>

app/assets/javascripts/sidebar/components/assignees/sidebar_invite_members.vue

@@ -26,6 +26,6 @@ export default {
     trigger-element="anchor"
     :display-text="$options.displayText"
     :trigger-source="triggerSource"
-    classes="gl-block gl-pl-0 hover:gl-no-underline hover:!gl-text-blue-800"
+    classes="gl-block gl-pl-0 hover:gl-no-underline hover:!gl-text-link"
   />
 </template>

app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue

@@ -53,7 +53,7 @@ export default {
     :data-username="user.username"
     :data-cannot-merge="cannotMerge"
     data-placement="left"
-    class="js-user-link gl-inline-block !gl-text-inherit hover:!gl-text-blue-800"
+    class="js-user-link gl-inline-block !gl-text-inherit hover:!gl-text-link"
   >
     <!-- use gl-flex so that slot can be appropriately styled -->
     <span class="gl-flex">

app/assets/javascripts/sidebar/components/reviewers/reviewers.vue

@@ -70,13 +70,12 @@ export default {
         <template v-if="editable">
           -
           <gl-button
-            category="tertiary"
+            class="gl-ml-2 !gl-text-inherit hover:!gl-text-link"
             variant="link"
-            class="gl-ml-2"
             data-testid="assign-yourself"
             @click="assignSelf"
           >
-            <span class="gl-text-subtle hover:gl-text-blue-800">{{ __('assign yourself') }}</span>
+            {{ __('assign yourself') }}
           </gl-button>
         </template>
       </span>

app/assets/javascripts/work_items/components/work_item_assignees.vue

@@ -362,11 +362,14 @@ export default {
         <span>{{ __('None') }}</span>
         <template v-if="currentUser && canUpdate">
           <span>-</span>
-          <gl-button variant="link" data-testid="assign-self" @click.stop="assignToCurrentUser"
-            ><span class="gl-text-subtle hover:gl-text-blue-800">{{
-              __('assign yourself')
-            }}</span></gl-button
+          <gl-button
+            class="!gl-text-inherit hover:!gl-text-link"
+            variant="link"
+            data-testid="assign-self"
+            @click.stop="assignToCurrentUser"
           >
+            {{ __('assign yourself') }}
+          </gl-button>
         </template>
       </div>
     </template>

app/assets/stylesheets/framework/sidebar.scss

@@ -340,7 +340,7 @@
     color: inherit;
 
     &:hover {
-      color: $blue-800;
+      @apply gl-text-link;
     }
   }
 

spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js

@@ -31,7 +31,7 @@ describe('IssuableAssignees', () => {
       'renders "$message" when signedIn is $signedIn and editable is $editable',
       ({ signedIn, editable, message }) => {
         createComponent({ signedIn, editable });
-        expect(findEmptyAssignee().text()).toBe(message);
+        expect(findEmptyAssignee().text().replace(/\s\s+/g, ' ')).toBe(message);
       },
     );
   });