1 files changed, 36 insertions, 31 deletions
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index 1e80c1846a4..8eb9f8fc5f1 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -1,33 +1,38 @@
 - group = local_assigns.fetch(:group)
 
-.sub-section
-  %h4= s_('GroupSettings|Export group')
-  %p= _('Export this group with all related data.')
-  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
-    - c.with_body do
-      - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index', anchor: 'migrate-groups-by-direct-transfer-recommended') }
-      - docs_link_end = '</a>'.html_safe
-      = s_('GroupsNew|This feature is deprecated and replaced by group migration by direct transfer. %{docs_link_start}Learn more%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
-  %p
-    - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
-    = export_information.html_safe
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
-    - c.with_body do
-      %p.gl-mb-0
-        %p= _('The following items will be exported:')
-        %ul
-          - group_export_descriptions.each do |description|
-            %li= description
-        %p= _('The following items will NOT be exported:')
-        %ul
-          %li= _('Projects')
-          %li= _('Runner tokens')
-          %li= _('SAML discovery tokens')
-  - if group.export_file_exists?
-    = render Pajamas::ButtonComponent.new(href: download_export_group_path(group), button_options: { rel: 'nofollow', data: { method: :get, qa_selector: 'download_export_link' } }) do
-      = _('Download export')
-    = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'regenerate_export_group_link' } }) do
-      = _('Regenerate export')
-  - else
-    = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'export_group_link' } }) do
-      = _('Export group')
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title= s_('GroupSettings|Export group')
+    %p.gl-new-card-description
+      = _('Export this group with all related data.')
+
+  - c.with_body do
+    = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
+      - c.with_body do
+        - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index', anchor: 'migrate-groups-by-direct-transfer-recommended') }
+        - docs_link_end = '</a>'.html_safe
+        = s_('GroupsNew|This feature is deprecated and replaced by group migration by direct transfer. %{docs_link_start}Learn more%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
+    %p
+      - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
+      = export_information.html_safe
+    = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
+      - c.with_body do
+        %p.gl-mb-0
+          %p= _('The following items will be exported:')
+          %ul
+            - group_export_descriptions.each do |description|
+              %li= description
+          %p= _('The following items will NOT be exported:')
+          %ul
+            %li= _('Projects')
+            %li= _('Runner tokens')
+            %li= _('SAML discovery tokens')
+    - if group.export_file_exists?
+      = render Pajamas::ButtonComponent.new(href: download_export_group_path(group), button_options: { rel: 'nofollow', data: { method: :get, qa_selector: 'download_export_link' } }) do
+        = _('Download export')
+      = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'regenerate_export_group_link' } }) do
+        = _('Regenerate export')
+    - else
+      = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'export_group_link' } }) do
+        = _('Export group')