Merge branch 'jivl-fix-export-issues-modal' into 'master'

Fix export issues modal

Closes #6319

See merge request gitlab-org/gitlab-ee!6014

app/assets/stylesheets/framework/variables.scss

@@ -806,6 +806,7 @@ $border-color-settings: #e1e1e1;
 Modals
 */
 $modal-body-height: 134px;
+$modal-border-color: #e9ecef;
 
 /*
 Prometheus

app/assets/stylesheets/pages/issues.scss

@@ -161,6 +161,35 @@ ul.related-merge-requests > li {
 }
 
 .issues-export-modal {
+  .modal-header {
+    justify-content: flex-start;
+
+    .export-svg-container {
+      flex-grow: 1;
+
+      > svg {
+        float: right;
+      }
+    }
+  }
+
+  .modal-body {
+    padding: 0;
+
+    .export-modal-subheader {
+      justify-content: flex-start;
+      align-items: center;
+      border-bottom: 1px solid $modal-border-color;
+      padding: 14px;
+    }
+
+    .export-modal-text {
+      padding: 24px 16px;
+      line-height: 1.5;
+      min-height: $modal-body-height;
+    }
+  }
+
   .export-svg-container {
     height: 56px;
     padding: 10px 10px 0;

ee/app/views/projects/issues/export_issues/_csv_download.html.haml

@@ -3,17 +3,17 @@
     .modal-dialog
       .modal-content
         .modal-header
-          %a.close{ href: '#', 'data-dismiss' => 'modal' } ×
-          .export-svg-container.float-right
-            = render 'projects/issues/export_issues/export_issues_list.svg'
           %h3
             Export issues
-        .modal-header
-          = icon('check', { class: 'export-checkmark' })
-          %strong
-            #{pluralize(issuables_count_for_state(:issues, params[:state]), 'issue')} selected
+          .export-svg-container
+            = render 'projects/issues/export_issues/export_issues_list.svg'
+          %a.close{ href: '#', 'data-dismiss' => 'modal' } ×
         .modal-body
-          %div
+          .export-modal-subheader
+            = icon('check', { class: 'export-checkmark' })
+            %strong.prepend-left-10
+              #{pluralize(issuables_count_for_state(:issues, params[:state]), 'issue')} selected
+          .export-modal-text
             The CSV export will be created in the background. Once finished, it will be sent to
             %strong= @current_user.notification_email
             in an attachment.