Unbox linked issues

Changelog: changed

app/assets/javascripts/issuable/components/related_issuable_item.vue

@@ -71,6 +71,7 @@ export default {
     :class="{
       'issuable-info-container': !canReorder,
       'card-body': canReorder,
+      'gl-pr-3!': canRemove,
     }"
     class="item-body d-flex align-items-center py-2 px-3"
   >

app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -146,13 +146,13 @@ export default {
 
 <template>
   <div id="related-issues" class="related-issues-block gl-mt-5">
-    <div class="card card-slim gl-overflow-hidden">
+    <div class="gl-overflow-hidden">
       <div
         :class="{ 'panel-empty-heading border-bottom-0': !hasBody }"
-        class="card-header gl-display-flex gl-justify-content-space-between"
+        class="gl-display-flex gl-justify-content-space-between gl-pt-2"
       >
         <h3
-          class="card-title h5 position-relative gl-my-0 gl-display-flex gl-align-items-center gl-h-7"
+          class="related-issues-block-title h4 position-relative gl-my-0 gl-display-flex gl-align-items-center gl-h-7"
         >
           <gl-link
             id="user-content-related-issues"
@@ -174,7 +174,7 @@ export default {
 
           <div class="gl-display-inline-flex">
             <div class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-5">
-              <span class="gl-display-inline-flex gl-align-items-center">
+              <span class="gl-display-inline-flex gl-align-items-center gl-font-base">
                 <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-500" />
                 {{ badgeLabel }}
               </span>
@@ -192,14 +192,14 @@ export default {
         <slot name="header-actions"></slot>
       </div>
       <div
-        class="linked-issues-card-body bg-gray-light"
+        class="linked-issues-card-body"
         :class="{
-          'gl-p-5': isFormVisible || shouldShowTokenBody,
+          'gl-pt-3': isFormVisible || shouldShowTokenBody,
         }"
       >
         <div
           v-if="isFormVisible"
-          class="js-add-related-issues-form-area card-body bordered-box bg-white"
+          class="js-add-related-issues-form-area bordered-box bg-white gl-p-5"
         >
           <add-issuable-form
             :show-categorized-issues="showCategorizedIssues"

app/assets/javascripts/related_issues/components/related_issues_list.vue

@@ -97,7 +97,7 @@ export default {
 
 <template>
   <div :data-link-type="listLinkType">
-    <h4 v-if="heading" class="gl-font-base mt-0">{{ heading }}</h4>
+    <h4 v-if="heading" class="gl-font-base gl-font-weight-bold mt-0">{{ heading }}</h4>
     <div
       class="related-issues-token-body bordered-box bg-white"
       :class="{ 'sortable-container': canReorder }"

app/assets/stylesheets/pages/issuable.scss

@@ -79,9 +79,15 @@
 
   .emoji-block {
     padding: $gl-padding-4 0;
+    margin-top: $gl-padding;
+    border-top: 1px solid $gray-100;
   }
 }
 
+.epic-discussion-separator {
+  margin-top: $gl-padding !important;
+}
+
 .issuable-show-labels {
   .gl-label {
     margin-bottom: 5px;

ee/spec/features/epics/epic_related_epics_spec.rb

@@ -21,7 +21,7 @@ def visit_epic(related_epics: true)
   end
 
   def open_add_epic_form
-    page.within('.related-issues-block .card-title') do
+    page.within('.related-issues-block .related-issues-block-title') do
       page.find('button').click
     end
   end
@@ -45,7 +45,7 @@ def add_epic(epic, relationship)
   describe 'epic body section' do
     it 'user can view related epics section under epic description', :aggregate_failures do
       page.within('#related-issues') do
-        card_title = page.find('.card-title')
+        card_title = page.find('.related-issues-block-title')
         expect(card_title).to have_content('Linked epics')
         expect(card_title).to have_link('', href: '/help/user/group/epics/linked_epics')
         expect(card_title).to have_selector('button')

spec/frontend/issuable/related_issues/components/related_issues_block_spec.js

@@ -52,7 +52,7 @@ describe('RelatedIssuesBlock', () => {
           },
         });
 
-        expect(wrapper.find('.card-title').text()).toContain(titleText);
+        expect(wrapper.find('.related-issues-block-title').text()).toContain(titleText);
         expect(wrapper.find('[data-testid="help-link"]').attributes('aria-label')).toBe(
           helpLinkText,
         );
@@ -81,7 +81,7 @@ describe('RelatedIssuesBlock', () => {
         slots: { 'header-text': headerText },
       });
 
-      expect(wrapper.find('.card-title').html()).toContain(headerText);
+      expect(wrapper.find('.related-issues-block-title').html()).toContain(headerText);
     });
   });