diff --git a/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue b/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue
index 9baa91a407278a64ac836e8f405eaea17762d2eb..a1a88438dbb1f2f09c0099d2f498a3811f1e94a2 100644
--- a/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue
+++ b/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue
@@ -64,6 +64,7 @@ export default {
       return {
         text: this.leaveTitle,
         href: this.leavePath,
+        variant: 'danger',
         extraAttrs: {
           'aria-label': this.leaveTitle,
           'data-method': 'delete',
@@ -71,7 +72,7 @@ export default {
           'data-confirm-btn-variant': 'danger',
           'data-testid': `leave-${this.namespaceType}-link`,
           rel: 'nofollow',
-          class: '!gl-text-danger js-leave-link',
+          class: 'js-leave-link',
         },
       };
     },
diff --git a/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js b/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js
index 5665fc312e7f7d5376a113210965b6d0a9459381..8dfa75824ea995cbbc167749da295c385125916f 100644
--- a/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js
+++ b/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js
@@ -44,46 +44,30 @@ describe('moreActionsDropdown', () => {
   const findProjectSettings = () => wrapper.findByTestId('settings-project-link');
 
   describe('copy id', () => {
-    describe('project namespace type', () => {
-      beforeEach(async () => {
+    it.each`
+      isGroup  | id    | expectedTestId       | unexpectedTestId     | expectedText
+      ${false} | ${22} | ${'copy-project-id'} | ${'copy-group-id'}   | ${'Copy project ID: 22'}
+      ${true}  | ${11} | ${'copy-group-id'}   | ${'copy-project-id'} | ${'Copy group ID: 11'}
+    `(
+      'when isGroup is $isGroup',
+      async ({ isGroup, id, expectedTestId, unexpectedTestId, expectedText }) => {
         createComponent({
           provideData: {
-            groupOrProjectId: 22,
+            isGroup,
+            groupOrProjectId: id,
           },
         });
-        await showDropdown();
-      });
 
-      it('has correct test id `copy-project-id`', () => {
-        expect(wrapper.findByTestId('copy-project-id').exists()).toBe(true);
-        expect(wrapper.findByTestId('copy-group-id').exists()).toBe(false);
-      });
-
-      it('renders copy project id with correct id', () => {
-        expect(wrapper.findByTestId('copy-project-id').text()).toBe('Copy project ID: 22');
-      });
-    });
-
-    describe('group namespace type', () => {
-      beforeEach(async () => {
-        createComponent({
-          provideData: {
-            isGroup: true,
-            groupOrProjectId: 11,
-          },
-        });
         await showDropdown();
-      });
 
-      it('has correct test id `copy-group-id`', () => {
-        expect(wrapper.findByTestId('copy-project-id').exists()).toBe(false);
-        expect(wrapper.findByTestId('copy-group-id').exists()).toBe(true);
-      });
+        const element = wrapper.findByTestId(expectedTestId);
+        const nonexistentElement = wrapper.findByTestId(unexpectedTestId);
 
-      it('renders copy group id with correct id', () => {
-        expect(wrapper.findByTestId('copy-group-id').text()).toBe('Copy group ID: 11');
-      });
-    });
+        expect(element.exists()).toBe(true);
+        expect(nonexistentElement.exists()).toBe(false);
+        expect(element.text()).toBe(expectedText);
+      },
+    );
   });
 
   describe('dropdown group', () => {