Add latest changes from gitlab-org/gitlab@master

1 files changed, 44 insertions, 40 deletions

diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
index 8490ffd33cd..de59210ff19 100644
--- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
@@ -65,29 +65,29 @@ export default {
 
 <template>
   <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
-    <div class="card card-slim gl-mt-5 gl-mb-0 gl-bg-gray-10">
-      <div class="card-header gl-px-5 gl-py-4 gl-bg-white">
-        <div
-          class="card-title gl-relative gl-display-flex gl-flex-wrap gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
-        >
+    <div class="gl-new-card">
+      <div class="gl-new-card-header">
+        <div class="gl-new-card-title-wrapper">
           <gl-link
             class="anchor gl-absolute gl-text-decoration-none"
             href="#related-merge-requests"
             aria-labelledby="related-merge-requests"
           />
-          <h3 id="related-merge-requests" class="gl-font-base gl-m-0">
+          <h3 id="related-merge-requests" class="gl-new-card-title">
             {{ __('Related merge requests') }}
           </h3>
-          <template v-if="totalCount">
-            <gl-icon name="merge-request" class="gl-ml-3 gl-mr-2 gl-text-gray-500" />
-            <span data-testid="count" class="gl-text-gray-500">{{ totalCount }}</span>
-          </template>
-          <p
-            v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
-            class="gl-font-sm gl-font-weight-normal gl-flex-basis-full gl-mb-0 gl-text-gray-500"
-          >
-            {{ closingMergeRequestsText }}
-          </p>
+          <div class="gl-display-inline-flex gl-align-items-center gl-m-0">
+            <template v-if="totalCount">
+              <gl-icon name="merge-request" class="gl-ml-3 gl-mr-2 gl-text-gray-500" />
+              <span data-testid="count" class="gl-text-gray-500">{{ totalCount }}</span>
+            </template>
+            <p
+              v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
+              class="gl-font-sm gl-font-weight-normal gl-flex-basis-full gl-mb-0 gl-text-gray-500"
+            >
+              {{ closingMergeRequestsText }}
+            </p>
+          </div>
         </div>
       </div>
       <gl-loading-icon
@@ -96,30 +96,34 @@ export default {
         label="Fetching related merge requests"
         class="gl-py-4"
       />
-      <ul v-else class="content-list related-items-list gl-px-4! gl-py-3!">
-        <li
-          v-for="mr in mergeRequests"
-          :key="mr.id"
-          class="list-item gl-m-0! gl-p-0! gl-border-b-0!"
-        >
-          <related-issuable-item
-            :id-key="mr.id"
-            :display-reference="mr.reference"
-            :title="mr.title"
-            :milestone="mr.milestone"
-            :assignees="getAssignees(mr)"
-            :created-at="mr.created_at"
-            :closed-at="mr.closed_at"
-            :merged-at="mr.merged_at"
-            :path="mr.web_url"
-            :state="mr.state"
-            :is-merge-request="true"
-            :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
-            path-id-separator="!"
-            class="gl-mx-n2"
-          />
-        </li>
-      </ul>
+      <div class="gl-new-card-body">
+        <div class="gl-new-card-content">
+          <ul class="content-list related-items-list">
+            <li
+              v-for="mr in mergeRequests"
+              :key="mr.id"
+              class="list-item gl-m-0! gl-p-0! gl-border-b-0!"
+            >
+              <related-issuable-item
+                :id-key="mr.id"
+                :display-reference="mr.reference"
+                :title="mr.title"
+                :milestone="mr.milestone"
+                :assignees="getAssignees(mr)"
+                :created-at="mr.created_at"
+                :closed-at="mr.closed_at"
+                :merged-at="mr.merged_at"
+                :path="mr.web_url"
+                :state="mr.state"
+                :is-merge-request="true"
+                :pipeline-status="mr.head_pipeline && mr.head_pipeline.detailed_status"
+                path-id-separator="!"
+                class="gl-mx-n2"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>