Use minimal layout in trial flow

In an effort to simplify and unify the "first mile", we're using a very
minimal layout.

part of:
https://gitlab.com/gitlab-org/gitlab/-/issues/331003

Changelog: changed

app/assets/stylesheets/startup/startup-signin.scss

@@ -796,9 +796,15 @@ svg {
 .gl-display-flex {
   display: flex;
 }
+.gl-display-block {
+  display: block;
+}
 .gl-align-items-center {
   align-items: center;
 }
+.gl-w-full {
+  width: 100%;
+}
 .gl-p-2 {
   padding: 0.25rem;
 }

app/assets/stylesheets/utilities.scss

@@ -85,10 +85,6 @@
   padding-bottom: $gl-spacing-scale-8;
 }
 
-.gl-pt-11 {
-  padding-top: $gl-spacing-scale-11;
-}
-
 .gl-transition-property-stroke-opacity {
   transition-property: stroke-opacity;
 }
@@ -121,6 +117,20 @@
   }
 }
 
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462
+.gl-md-mt-11 {
+  @media (min-width: $breakpoint-md) {
+    margin-top: $gl-spacing-scale-11;
+  }
+}
+
+// Same as above
+.gl-md-pt-11 {
+  @media (min-width: $breakpoint-md) {
+    padding-top: $gl-spacing-scale-11;
+  }
+}
+
 // This is used to help prevent issues with margin collapsing.
 // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing.
 .gl-force-block-formatting-context::after {
@@ -142,6 +152,13 @@
   }
 }
 
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1463
+.gl-xs-mt-6 {
+  @media (max-width: $breakpoint-sm) {
+    margin-top: $gl-spacing-scale-6;
+  }
+}
+
 // Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1165
 .gl-xs-mb-4 {
   @media (max-width: $breakpoint-sm) {
@@ -156,6 +173,13 @@
   }
 }
 
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1463
+.gl-xs-pt-6 {
+  @media (max-width: $breakpoint-sm) {
+    padding-top: $gl-spacing-scale-6;
+  }
+}
+
 // Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
 .gl-sm-pr-3 {
   @media (min-width: $breakpoint-sm) {

app/views/devise/shared/_signup_box.html.haml

@@ -61,7 +61,7 @@
     - if show_recaptcha_sign_up?
       = recaptcha_tags nonce: content_security_policy_nonce
     .submit-container
-      = f.submit button_text, class: 'btn gl-button btn-confirm', data: { qa_selector: 'new_user_register_button' }
+      = f.submit button_text, class: 'btn gl-button btn-confirm gl-display-block gl-w-full', data: { qa_selector: 'new_user_register_button' }
     = render 'devise/shared/terms_of_service_notice', button_text: button_text
     - if show_omniauth_providers && omniauth_providers_placement == :bottom
       = render 'devise/shared/signup_omniauth_providers'

app/views/layouts/minimal.html.haml

@@ -8,10 +8,11 @@
     = render 'peek/bar'
     = render "layouts/header/empty"
     .layout-page
-      .content-wrapper.content-wrapper-margin.gl-pt-11
+      .content-wrapper.content-wrapper-margin.gl-md-pt-11.gl-xs-pt-6
         .alert-wrapper.gl-force-block-formatting-context
           = render "layouts/broadcast"
         .limit-container-width{ class: container_class }
           %main#content-body.content
+            = render "layouts/flash" unless @hide_flash
             = yield
     = footer_message

app/views/registrations/experience_levels/show.html.haml

 - page_title _('What’s your experience level?')
+- @hide_flash = true
 
 .gl-display-flex.gl-flex-direction-column.gl-align-items-center
   = image_tag 'learn-gitlab-avatar.jpg', width: '90'

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -796,9 +796,15 @@ svg {
 .gl-display-flex {
   display: flex;
 }
+.gl-display-block {
+  display: block;
+}
 .gl-align-items-center {
   align-items: center;
 }
+.gl-w-full {
+  width: 100%;
+}
 .gl-p-2 {
   padding: 0.25rem;
 }

ee/app/controllers/trial_registrations_controller.rb

@@ -3,7 +3,7 @@
 class TrialRegistrationsController < RegistrationsController
   extend ::Gitlab::Utils::Override
 
-  layout 'simple_registration'
+  layout 'minimal'
 
   skip_before_action :require_no_authentication
 

ee/app/controllers/trials_controller.rb

@@ -3,7 +3,7 @@
 class TrialsController < ApplicationController
   include ActionView::Helpers::SanitizeHelper
 
-  layout 'simple_registration'
+  layout 'minimal'
 
   before_action :check_if_gl_com_or_dev
   before_action :authenticate_user!

ee/app/views/trial_registrations/new.html.haml

@@ -4,14 +4,16 @@
   = render "layouts/google_tag_manager_head"
 = render "layouts/google_tag_manager_body"
 
-%h2.center.pt-6.pb-4.gl-mb-0
-  = _('Start a Free Ultimate Trial')
+.row
+  .col-md-6.offset-md-3
+    %h2.gl-text-center.gl-pb-5.gl-my-0
+      = _('Start a Free Ultimate Trial')
 
-.signup-page
-  = render 'devise/shared/signup_box',
-    url: trial_registrations_path,
-    button_text: _('Continue'),
-    show_omniauth_providers: social_signin_enabled?,
-    omniauth_providers_placement: :top
+    .signup-page
+      = render 'devise/shared/signup_box',
+        url: trial_registrations_path,
+        button_text: _('Continue'),
+        show_omniauth_providers: social_signin_enabled?,
+        omniauth_providers_placement: :top
 
-  = render 'devise/shared/sign_in_link'
+      = render 'devise/shared/sign_in_link'

ee/app/views/trials/_skip_trial.html.haml

-.my-5
+.gl-xs-mt-6.gl-md-mt-11
   - if params[:glm_source] == 'gitlab.com'
     = link_to s_('Trials|Go back to GitLab'), dashboard_projects_path, class: 'block center py-2'
     .label

ee/app/views/trials/new.html.haml

 - page_title _('Start your Free Ultimate Trial')
 - glm_params = { glm_source: params[:glm_source], glm_content: params[:glm_content] }
 
-%h3.center.pt-6
-  = _("Start your Free Ultimate Trial")
+.row
+  .col-md-6.offset-md-3
+    %h3.gl-text-center.gl-mt-0
+      = _("Start your Free Ultimate Trial")
 
-%p.center
-  = _('Your GitLab Ultimate trial will last 30 days after which point you can keep your free GitLab account forever. We just need some additional information to activate your trial.')
+    %p.gl-text-center
+      = _('Your GitLab Ultimate trial will last 30 days after which point you can keep your free GitLab account forever. We just need some additional information to activate your trial.')
 
-= render 'errors'
+    = render 'errors'
 
-= form_tag create_lead_trials_path(glm_params), method: :post do |f|
-  - if experiment_enabled?(:remove_known_trial_form_fields) && current_user.first_name.present?
-    = hidden_field_tag :first_name, current_user.first_name
-  - else
-    .form-group
-      = label_tag :first_name, _('First name'), for: :first_name, class: 'col-form-label'
-      = text_field_tag :first_name, params[:first_name] || current_user.first_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'first_name' }
-  - if experiment_enabled?(:remove_known_trial_form_fields) && current_user.last_name.present?
-    = hidden_field_tag :last_name, current_user.last_name
-  - else
-    .form-group
-      = label_tag :last_name, _('Last name'), for: :last_name, class: 'col-form-label'
-      = text_field_tag :last_name, params[:last_name] || current_user.last_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'last_name' }
-  - if experiment_enabled?(:remove_known_trial_form_fields) && current_user.organization.present?
-    = hidden_field_tag :company_name, current_user.organization
-  - else
-    .form-group
-      = label_tag :company_name, _('Company name'), for: :company_name, class: 'col-form-label'
-      = text_field_tag :company_name, params[:company_name] || current_user.organization, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'company_name' }
-  .form-group.gl-select2-html5-required-fix
-    = label_tag :company_size, _('Number of employees'), for: :company_size, class: 'col-form-label'
-    = select_tag :company_size, company_size_options_for_select(params[:company_size]), include_blank: true, class: 'select2', required: true, data: { qa_selector: 'number_of_employees' }
-  .form-group
-    = label_tag :phone_number, _('Telephone number'), for: :phone_number, class: 'col-form-label'
-    = telephone_field_tag :phone_number, params[:phone_number], pattern:  '^(\+)*[0-9-\s]+$', class: 'form-control gl-form-input', required: true, data: { qa_selector: 'telephone_number' }
-    %p.gray-500= _('Allowed characters: +, 0-9, -, and spaces.')
-  .form-group
-    = label_tag :number_of_users, _('How many users will be evaluating the trial?'), for: :number_of_users, class: 'col-form-label'
-    = number_field_tag :number_of_users, params[:number_of_users], class: 'form-control gl-form-input', required: true, min: 1, data: { qa_selector: 'number_of_users' }
-  .form-group.gl-select2-html5-required-fix
-    = label_tag :country, _('Country'), class: 'col-form-label'
-    = select_tag :country, options_for_select([[_('Please select a country'), '']]), class: 'select2 gl-transparent-pixel', required: true, id: 'country_select', data: { countries_end_point: countries_path, selected_option: params[:country], qa_selector: 'country' }
-  = submit_tag _('Continue'), class: 'btn gl-button btn-confirm btn-block', data: { qa_selector: 'continue' }
+    = form_tag create_lead_trials_path(glm_params), method: :post do |f|
+      - if experiment_enabled?(:remove_known_trial_form_fields) && current_user.first_name.present?
+        = hidden_field_tag :first_name, current_user.first_name
+      - else
+        .form-group
+          = label_tag :first_name, _('First name'), for: :first_name, class: 'col-form-label'
+          = text_field_tag :first_name, params[:first_name] || current_user.first_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'first_name' }
+      - if experiment_enabled?(:remove_known_trial_form_fields) && current_user.last_name.present?
+        = hidden_field_tag :last_name, current_user.last_name
+      - else
+        .form-group
+          = label_tag :last_name, _('Last name'), for: :last_name, class: 'col-form-label'
+          = text_field_tag :last_name, params[:last_name] || current_user.last_name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'last_name' }
+      - if experiment_enabled?(:remove_known_trial_form_fields) && current_user.organization.present?
+        = hidden_field_tag :company_name, current_user.organization
+      - else
+        .form-group
+          = label_tag :company_name, _('Company name'), for: :company_name, class: 'col-form-label'
+          = text_field_tag :company_name, params[:company_name] || current_user.organization, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'company_name' }
+      .form-group.gl-select2-html5-required-fix
+        = label_tag :company_size, _('Number of employees'), for: :company_size, class: 'col-form-label'
+        = select_tag :company_size, company_size_options_for_select(params[:company_size]), include_blank: true, class: 'select2', required: true, data: { qa_selector: 'number_of_employees' }
+      .form-group
+        = label_tag :phone_number, _('Telephone number'), for: :phone_number, class: 'col-form-label'
+        = telephone_field_tag :phone_number, params[:phone_number], pattern:  '^(\+)*[0-9-\s]+$', class: 'form-control gl-form-input', required: true, data: { qa_selector: 'telephone_number' }
+        %p.gl-text-gray-500= _('Allowed characters: +, 0-9, -, and spaces.')
+      .form-group
+        = label_tag :number_of_users, _('How many users will be evaluating the trial?'), for: :number_of_users, class: 'col-form-label'
+        = number_field_tag :number_of_users, params[:number_of_users], class: 'form-control gl-form-input', required: true, min: 1, data: { qa_selector: 'number_of_users' }
+      .form-group.gl-select2-html5-required-fix
+        = label_tag :country, _('Country'), class: 'col-form-label'
+        = select_tag :country, options_for_select([[_('Please select a country'), '']]), class: 'select2 gl-transparent-pixel', required: true, id: 'country_select', data: { countries_end_point: countries_path, selected_option: params[:country], qa_selector: 'country' }
+      = submit_tag _('Continue'), class: 'btn gl-button btn-confirm btn-block', data: { qa_selector: 'continue' }
 
-= render 'skip_trial'
+    = render 'skip_trial'

ee/app/views/trials/select.html.haml

@@ -3,32 +3,34 @@
   = render "layouts/google_tag_manager_head"
 = render "layouts/google_tag_manager_body"
 
-%h3.center.pt-6
-  = _('Almost there')
+.row
+  .col-md-6.offset-md-3
+    %h3.gl-text-center.gl-mt-0
+      = _('Almost there')
 
-%p.center
-  = trial_selection_intro_text
+    %p.gl-text-center
+      = trial_selection_intro_text
 
-= render 'errors'
+    = render 'errors'
 
-= form_tag apply_trials_path(glm_params), method: :post do
-  - if show_trial_namespace_select?
-    .form-group.gl-select2-html5-required-fix
-      = label_tag :namespace_id, _('This subscription is for'), for: :namespace_id, class: 'col-form-label'
-      = select_tag :namespace_id, namespace_options_for_select(params[:namespace_id]), class: 'select2', required: true, data: { qa_selector: 'subscription_for' }
-  #group_name.form-group{ class: ("hidden" if show_trial_namespace_select?) }
-    = label_tag :new_group_name, _('New Group Name'), for: :new_group_name, class: 'col-form-label'
-    = text_field_tag :new_group_name, nil, class: 'form-control', required: !show_trial_namespace_select?, data: { qa_selector: 'new_group_name' }
-  - if should_ask_company_question?
-    .form-group
-      = label_tag :trial_entity, _('Is this GitLab trial for your company?')
-      .gl-form-checkbox-group
-        .gl-form-checkbox.form-check.form-check-inline
-          = radio_button_tag :trial_entity, :company, params[:trial_entity]=='company', required: true, class: 'form-check-input'
-          = label_tag :trial_entity_company, _('Yes'), class: 'form-check-label'
-        .gl-form-checkbox.form-check.form-check-inline
-          = radio_button_tag :trial_entity, :individual, params[:trial_entity]=='individual', required: true, class: 'form-check-input', data: { qa_selector: 'trial_individual' }
-          = label_tag :trial_entity_individual, _('No'), class: 'form-check-label'
-  = submit_tag _('Start your free trial'), class: 'gl-button btn btn-confirm btn-block', data: { qa_selector: 'start_your_free_trial' }
+    = form_tag apply_trials_path(glm_params), method: :post do
+      - if show_trial_namespace_select?
+        .form-group.gl-select2-html5-required-fix
+          = label_tag :namespace_id, _('This subscription is for'), for: :namespace_id, class: 'col-form-label'
+          = select_tag :namespace_id, namespace_options_for_select(params[:namespace_id]), class: 'select2', required: true, data: { qa_selector: 'subscription_for' }
+      #group_name.form-group{ class: ("hidden" if show_trial_namespace_select?) }
+        = label_tag :new_group_name, _('New Group Name'), for: :new_group_name, class: 'col-form-label'
+        = text_field_tag :new_group_name, nil, class: 'form-control', required: !show_trial_namespace_select?, data: { qa_selector: 'new_group_name' }
+      - if should_ask_company_question?
+        .form-group
+          = label_tag :trial_entity, _('Is this GitLab trial for your company?')
+          .gl-form-checkbox-group
+            .gl-form-checkbox.form-check.form-check-inline
+              = radio_button_tag :trial_entity, :company, params[:trial_entity]=='company', required: true, class: 'form-check-input'
+              = label_tag :trial_entity_company, _('Yes'), class: 'form-check-label'
+            .gl-form-checkbox.form-check.form-check-inline
+              = radio_button_tag :trial_entity, :individual, params[:trial_entity]=='individual', required: true, class: 'form-check-input', data: { qa_selector: 'trial_individual' }
+              = label_tag :trial_entity_individual, _('No'), class: 'form-check-label'
+      = submit_tag _('Start your free trial'), class: 'gl-button btn btn-confirm btn-block', data: { qa_selector: 'start_your_free_trial' }
 
-= render 'skip_trial'
+    = render 'skip_trial'