1 files changed, 25 insertions, 22 deletions
diff --git a/app/views/groups/settings/_advanced.html.haml b/app/views/groups/settings/_advanced.html.haml
index d92a6b08b60..45ee6ea6ad7 100644
--- a/app/views/groups/settings/_advanced.html.haml
+++ b/app/views/groups/settings/_advanced.html.haml
@@ -1,29 +1,32 @@
 - remove_form_id = 'js-remove-group-form'
 = render 'groups/settings/export', group: @group
 
-.sub-section
-  %h4.warning-title= s_('GroupSettings|Change group URL')
-  = gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
-    = form_errors(@group)
-    .form-group
-      %p
-        = s_("GroupSettings|Changing a group's URL can have unintended side effects.")
-        = link_to _('Learn more.'), help_page_path('user/group/manage', anchor: 'change-a-groups-path'), target: '_blank', rel: 'noopener noreferrer'
+= 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.warning-title= s_('GroupSettings|Change group URL')
+    %p.gl-new-card-description
+      = s_("GroupSettings|Changing a group's URL can have unintended side effects.")
+      = link_to _('Learn more.'), help_page_path('user/group/manage', anchor: 'change-a-groups-path'), target: '_blank', rel: 'noopener noreferrer'
 
-      .input-group.gl-field-error-anchor
-        .group-root-path.input-group-prepend.has-tooltip{ title: group_path(@group), :'data-placement' => 'bottom' }
-          .input-group-text
-            %span>= root_url
-            - if @group.parent
-              %strong= @group.parent.full_path + '/'
-        = f.hidden_field :parent_id
-        = f.text_field :path, placeholder: 'open-source', class: 'form-control',
-          autofocus: local_assigns[:autofocus] || false, required: true,
-          pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-          title: group_url_error_message,
-          maxlength: ::Namespace::URL_MAX_LENGTH,
-          "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
-    = f.submit s_('GroupSettings|Change group URL'), class: 'btn-danger', pajamas_button: true
+  - c.with_body do
+    = gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
+      = form_errors(@group)
+      .form-group
+        .input-group.gl-field-error-anchor
+          .group-root-path.input-group-prepend.has-tooltip{ title: group_path(@group), :'data-placement' => 'bottom' }
+            .input-group-text
+              %span>= root_url
+              - if @group.parent
+                %strong= @group.parent.full_path + '/'
+          = f.hidden_field :parent_id
+          = f.text_field :path, placeholder: 'open-source', class: 'form-control',
+            autofocus: local_assigns[:autofocus] || false, required: true,
+            pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
+            title: group_url_error_message,
+            maxlength: ::Namespace::URL_MAX_LENGTH,
+            "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
+      = f.submit s_('GroupSettings|Change group URL'), class: 'btn-danger', pajamas_button: true
 
 = render 'groups/settings/transfer', group: @group
 = render 'groups/settings/remove', group: @group, remove_form_id: remove_form_id