Merge branch 'authenticate-with-github-migration' into 'master'

Authenticate with GitHub: Migrate components

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/180545



Merged-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Approved-by: Florie Guibert <fguibert@gitlab.com>
Approved-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/views/import/github/new.html.haml

@@ -3,27 +3,24 @@
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')
 
-.gl-border-solid.gl-border-default.gl-border-0.gl-border-b-1
-  %h1.gl-text-size-h1.gl-my-0.gl-py-4.gl-flex.gl-items-center.gl-gap-3
-    = sprite_icon('github', size: 24)
-    %span= title
-
-%p.gl-mt-5.gl-mb-0
-  = import_github_authorize_message
-
-- if !has_ci_cd_only_params?
-  .gl-mt-5
-    - if github_import_configured?
-      = render Pajamas::ButtonComponent.new(variant: :confirm,
-        href: status_import_github_path(namespace_id: params[:namespace_id]),
-        icon: 'github') do
-        = title
-    - else
-      = render Pajamas::AlertComponent.new(variant: :info, dismissible: false) do |c|
-        - c.with_body do
-          = import_configure_github_admin_message
-
-  %hr
+= render ::Layouts::PageHeadingComponent.new('') do |c|
+  - c.with_heading do
+    .gl-flex.gl-gap-3.gl-items-center
+      = sprite_icon('github', size: 32)
+      = title
+  - c.with_description do
+    = import_github_authorize_message
+    - if !has_ci_cd_only_params?
+      .gl-mt-5
+        - if github_import_configured?
+          = render Pajamas::ButtonComponent.new(variant: :confirm,
+            href: status_import_github_path(namespace_id: params[:namespace_id]),
+            icon: 'github') do
+            = title
+        - else
+          = render Pajamas::AlertComponent.new(variant: :info, dismissible: false) do |c|
+            - c.with_body do
+              = import_configure_github_admin_message
 
 = form_tag personal_access_token_import_github_path, method: :post, class: 'gl-mt-3' do
   .form-group.gl-form-group
@@ -48,8 +45,8 @@
       - docs_link_tag_pair = tag_pair(docs_link, :link_start, :link_end)
       = safe_format(s_('GithubImport|%{link_start}Learn more%{link_end}.'), docs_link_tag_pair)
 
-  .form-actions.gl-flex.gl-justify-end
+  .gl-mt-5.gl-flex.gl-gap-3
+    = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'js-import-github-pat-authenticate', data: { testid: 'authenticate-button' } }) do
+      = _('Authenticate')
     = render Pajamas::ButtonComponent.new(href: new_project_path) do
       = _('Cancel')
-    = render Pajamas::ButtonComponent.new(variant: :confirm, type: :submit, button_options: { class: 'gl-ml-3 js-import-github-pat-authenticate', data: { testid: 'authenticate-button' } }) do
-      = _('Authenticate')