Convert registration projects CSS to utility

ee/app/views/registrations/projects/new.html.haml

@@ -3,18 +3,18 @@
 
 - if !already_showed_trial_activation? && (in_trial_during_signup_flow? || in_trial_onboarding_flow?)
   .row
-    .d-flex.flex-column.align-items-center.w-100.gl-mt-3
+    .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-mt-3
       = render 'registrations/trial_is_activated_banner'
 .row.gl-flex-grow-1
-  .d-flex.flex-column.align-items-center.w-100.p-3
-    .new-project.d-flex.flex-column.align-items-center.pt-5
+  .gl-display-flex.gl-align-items-center.gl-flex-direction-column.gl-w-full.gl-p-5
+    .new-project.gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-pt-7
       - unless in_trial_onboarding_flow?
         #progress-bar
-      %h2.center= _('Create/import your first project')
+      %h2.gl-text-center= _('Create/import your first project')
       %p
-        .center= html_escape(_('This project will live in your group %{strong_open}%{namespace}%{strong_close}. A project is where you house your files (repository), plan your work (issues), publish your documentation (wiki), and so much more.')) % { namespace: html_escape(@project.namespace.name), strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
+        .gl-text-center= html_escape(_('This project will live in your group %{strong_open}%{namespace}%{strong_close}. A project is where you house your files (repository), plan your work (issues), publish your documentation (wiki), and so much more.')) % { namespace: html_escape(@project.namespace.name), strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
 
-      .js-toggle-container.w-100
+      .js-toggle-container.gl-w-full
         %ul.nav.nav-tabs.nav-links.gitlab-tabs{ role: 'tablist' }
           %li.nav-item{ role: 'presentation' }
             %a#blank-project-tab.nav-link.active{ href: '#blank-project-pane', data: { toggle: 'tab', track_label: 'blank_project', track_event: 'click_tab', track_value: '' }, role: 'tab' }
@@ -23,32 +23,32 @@
             %a#import-project-tab.nav-link{ href: '#import-project-pane', data: { toggle: 'tab', track_label: 'import_project', track_event: 'click_tab', track_value: '' }, role: 'tab' }
               %span= s_('ProjectsNew|Import')
 
-        .tab-content.gitlab-tab-content.bg-white
+        .tab-content.gitlab-tab-content.gl-bg-white
           #blank-project-pane.tab-pane.js-toggle-container.active{ role: 'tabpanel' }
             = form_for @project, url: users_sign_up_projects_path(trial_onboarding_flow: params[:trial_onboarding_flow]), html: { class: 'new_project' } do |f|
               = form_errors(@project)
               = f.hidden_field :namespace_id, value: @project.namespace_id
               #blank-project-name.row
                 .form-group.project-name.col-sm-12
-                  = f.label :name, class: 'label-bold' do
+                  = f.label :name, class: 'gl-font-weight-bold' do
                     %span= _('Project name')
                   = f.text_field :name, class: 'form-control', autofocus: true, data: { track_label: 'blank_project', track_event: 'activate_form_input', track_property: 'project_name', track_value: '' }
                   .form-text.text-muted= _('You can always edit this later')
                 .form-group.col-sm-12
-                  = f.label :path, class: 'label-bold' do
+                  = f.label :path, class: 'gl-font-weight-bold' do
                     %span= _('Project URL')
-                  .input-group.flex-nowrap
-                    .input-group-prepend.flex-shrink-0.has-tooltip{ title: "#{group_url(@project.namespace)}/" }
+                  .input-group.gl-flex-nowrap
+                    .input-group-prepend.gl-flex-shrink-0.has-tooltip{ title: "#{group_url(@project.namespace)}/" }
                       .input-group-text
                         #{group_url(@project.namespace)}/
                     = f.text_field :path, class: 'form-control', required: true
 
-              = f.label :visibility_level, class: 'label-bold' do
+              = f.label :visibility_level, class: 'gl-font-weight-bold' do
                 = s_('ProjectsNew|Visibility Level')
                 = link_to sprite_icon('question-o'), 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 gl-button btn-success w-100', data: { track_label: 'blank_project', track_event: 'click_button', track_property: 'create_project', track_value: '' }
+              = f.submit _('Create project'), class: 'btn gl-button btn-success btn-block', data: { track_label: 'blank_project', track_event: 'click_button', track_property: 'create_project', track_value: '' }
 
           #import-project-pane.tab-pane.import-project-pane.js-toggle-container{ role: 'tabpanel' }
             - if import_sources_enabled?