Merge branch '46879-import-project-alignment' into 'master'

Resolve "BS4: Import project page is missing margins and wells"

Closes #46879

See merge request gitlab-org/gitlab-ce!19215

app/views/projects/_import_project_pane.html.haml

 - active_tab = local_assigns.fetch(:active_tab, 'blank')
 - f = local_assigns.fetch(:f)
 
-.project-import.row
-  .col-lg-12
-    .form-group.import-btn-container.clearfix
-      = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
-        Import project from
-      .import-buttons
-        - if gitlab_project_import_enabled?
-          .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
-            = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
-              = icon('gitlab', text: 'GitLab export')
-        %div
-          - if github_import_enabled?
-            = link_to new_import_github_path, class: 'btn js-import-github' do
-              = icon('github', text: 'GitHub')
-        %div
-          - if bitbucket_import_enabled?
-            = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
-              = icon('bitbucket', text: 'Bitbucket')
-            - unless bitbucket_import_configured?
-              = render 'bitbucket_import_modal'
-        %div
-          - if gitlab_import_enabled?
-            = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
-              = icon('gitlab', text: 'GitLab.com')
-            - unless gitlab_import_configured?
-              = render 'gitlab_import_modal'
-        %div
-          - if google_code_import_enabled?
-            = link_to new_import_google_code_path, class: 'btn import_google_code' do
-              = icon('google', text: 'Google Code')
-        %div
-          - if fogbugz_import_enabled?
-            = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
-              = icon('bug', text: 'Fogbugz')
-        %div
-          - if gitea_import_enabled?
-            = link_to new_import_gitea_path, class: 'btn import_gitea' do
-              = custom_icon('go_logo')
-              Gitea
-        %div
-          - if git_import_enabled?
-            %button.btn.js-toggle-button.js-import-git-toggle-button{ type: "button", data: { toggle_open_class: 'active' } }
-              = icon('git', text: 'Repo by URL')
-  .col-lg-12
-    .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
-      %hr
-        = render "shared/import_form", f: f
-        = render 'new_project_fields', f: f, project_name_id: "import-url-name"
+.project-import
+  .form-group.import-btn-container.clearfix
+    = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
+      Import project from
+    .import-buttons
+      - if gitlab_project_import_enabled?
+        .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
+          = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
+            = icon('gitlab', text: 'GitLab export')
+      %div
+        - if github_import_enabled?
+          = link_to new_import_github_path, class: 'btn js-import-github' do
+            = icon('github', text: 'GitHub')
+      %div
+        - if bitbucket_import_enabled?
+          = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
+            = icon('bitbucket', text: 'Bitbucket')
+          - unless bitbucket_import_configured?
+            = render 'bitbucket_import_modal'
+      %div
+        - if gitlab_import_enabled?
+          = link_to status_import_gitlab_path, class: "btn import_gitlab #{'how_to_import_link' unless gitlab_import_configured?}" do
+            = icon('gitlab', text: 'GitLab.com')
+          - unless gitlab_import_configured?
+            = render 'gitlab_import_modal'
+      %div
+        - if google_code_import_enabled?
+          = link_to new_import_google_code_path, class: 'btn import_google_code' do
+            = icon('google', text: 'Google Code')
+      %div
+        - if fogbugz_import_enabled?
+          = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
+            = icon('bug', text: 'Fogbugz')
+      %div
+        - if gitea_import_enabled?
+          = link_to new_import_gitea_path, class: 'btn import_gitea' do
+            = custom_icon('go_logo')
+            Gitea
+      %div
+        - if git_import_enabled?
+          %button.btn.js-toggle-button.js-import-git-toggle-button{ type: "button", data: { toggle_open_class: 'active' } }
+            = icon('git', text: 'Repo by URL')
+  .js-toggle-content.toggle-import-form{ class: ('hide' if active_tab != 'import') }
+    %hr
+      = render "shared/import_form", f: f
+      = render 'new_project_fields', f: f, project_name_id: "import-url-name"

app/views/projects/_new_project_fields.html.haml

@@ -35,11 +35,10 @@
     %span (optional)
   = f.text_area :description, placeholder: 'Description format',  class: "form-control", rows: 3, maxlength: 250
 
-.form-group.visibility-level-setting
-  = f.label :visibility_level, class: 'label-light' do
-    Visibility Level
-    = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
-  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
+= f.label :visibility_level, class: 'label-light' do
+  Visibility Level
+  = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
+= render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
 
 = f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
 = link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'

app/views/shared/_import_form.html.haml

 - ci_cd_only = local_assigns.fetch(:ci_cd_only, false)
 
-.form-group.row.import-url-data
+.form-group.import-url-data
   = f.label :import_url, class: 'label-light' do
     %span
       = _('Git repository URL')
 
   = f.text_field :import_url, autocomplete: 'off', class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git', required: true
 
-  .card.prepend-top-20
-    %ul
-      %li
-        = _('The repository must be accessible over <code>http://</code>, <code>https://</code> or <code>git://</code>.').html_safe
-      %li
-        = _('If your HTTP repository is not publicly accessible, add authentication information to the URL: <code>https://username:password@gitlab.company.com/group/project.git</code>.').html_safe
-      %li
-        = import_will_timeout_message(ci_cd_only)
-      %li
-        = import_svn_message(ci_cd_only)
+  .info-well.prepend-top-20
+    .well-segment
+      %ul
+        %li
+          = _('The repository must be accessible over <code>http://</code>, <code>https://</code> or <code>git://</code>.').html_safe
+        %li
+          = _('If your HTTP repository is not publicly accessible, add authentication information to the URL: <code>https://username:password@gitlab.company.com/group/project.git</code>.').html_safe
+        %li
+          = import_will_timeout_message(ci_cd_only)
+        %li
+          = import_svn_message(ci_cd_only)

app/views/shared/_visibility_level.html.haml

 - with_label = local_assigns.fetch(:with_label, true)
 
-.form-group.row.visibility-level-setting
+.form-group.visibility-level-setting
   - if with_label
     = f.label :visibility_level, class: 'col-form-label col-sm-2' do
       Visibility Level