Merge branch 'jswain_first_mile_layout' into 'master'

Add layout for "first mile" [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!62965

app/assets/stylesheets/framework/header.scss

@@ -555,7 +555,8 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   visibility: visible;
 }
 
-.with-performance-bar .navbar-gitlab {
+.with-performance-bar .navbar-gitlab,
+.with-performance-bar .fixed-top {
   top: $performance-bar-height;
 }
 
@@ -563,7 +564,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   justify-content: center;
   height: $header-height;
   background: $white;
-  border-bottom: 1px solid $white-normal;
+  border-bottom: 1px solid $gray-100;
 
   .tanuki-logo,
   .brand-header-logo {

app/assets/stylesheets/framework/system_messages.scss

@@ -60,7 +60,8 @@
   // System Header
   &.with-performance-bar {
     // main navigation
-    header.navbar-gitlab {
+    header.navbar-gitlab,
+    .fixed-top {
       top: $performance-bar-height + $system-header-height;
     }
 

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

@@ -542,7 +542,7 @@ label.label-bold {
   justify-content: center;
   height: 40px;
   background: #fff;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #dbdbdb;
 }
 .navbar-empty .tanuki-logo,
 .navbar-empty .brand-header-logo {

app/assets/stylesheets/utilities.scss

@@ -85,6 +85,10 @@
   padding-bottom: $gl-spacing-scale-8;
 }
 
+.gl-pt-11 {
+  padding-top: $gl-spacing-scale-11;
+}
+
 .gl-transition-property-stroke-opacity {
   transition-property: stroke-opacity;
 }

app/controllers/registrations/experience_levels_controller.rb

@@ -2,7 +2,7 @@
 
 module Registrations
   class ExperienceLevelsController < ApplicationController
-    layout 'signup_onboarding'
+    layout 'minimal'
 
     before_action :ensure_namespace_path_param
 

app/controllers/registrations/welcome_controller.rb

@@ -2,7 +2,7 @@
 
 module Registrations
   class WelcomeController < ApplicationController
-    layout 'welcome'
+    layout 'minimal'
     skip_before_action :authenticate_user!, :required_signup_info, :check_two_factor_requirement, only: [:show, :update]
     before_action :require_current_user
 

app/views/layouts/minimal.html.haml

+- page_classes = page_class.push(@html_class).flatten.compact
+
+!!! 5
+%html{ lang: I18n.locale, class: page_classes }
+  = render "layouts/head"
+  %body{ data: body_data }
+    = header_message
+    = render 'peek/bar'
+    = render "layouts/header/empty"
+    .layout-page
+      .content-wrapper.content-wrapper-margin.gl-pt-11
+        .alert-wrapper.gl-force-block-formatting-context
+          = render "layouts/broadcast"
+        .limit-container-width{ class: container_class }
+          %main#content-body.content
+            = yield
+    = footer_message

app/views/layouts/welcome.html.haml

-!!! 5
-%html.subscriptions-layout-html{ lang: 'en' }
-  = render 'layouts/head'
-  %body.ui-indigo.gl-display-flex.vh-100
-    = render "layouts/header/logo_with_title"
-    = render "layouts/broadcast"
-    .container.gl-display-flex.gl-flex-grow-1
-      = yield

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

+- @html_class = "subscriptions-layout-html"
 - page_title _('Your profile')
 - add_page_specific_style 'page_bundles/signup'
 - gitlab_experience_text = _('To personalize your GitLab experience, we\'d like to know a bit more about you')
 
 .row.gl-flex-grow-1
-  .d-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-p-5
-    .edit-profile.login-page.d-flex.flex-column.gl-align-items-center.pt-lg-3
+  .d-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-px-5.gl-pb-5
+    .edit-profile.login-page.d-flex.flex-column.gl-align-items-center
       = render_if_exists "registrations/welcome/progress_bar"
       %h2.gl-text-center= html_escape(_('Welcome to GitLab,%{br_tag}%{name}!')) % { name: html_escape(current_user.first_name), br_tag: '<br/>'.html_safe }
       - if Gitlab.com?

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

@@ -542,7 +542,7 @@ label.label-bold {
   justify-content: center;
   height: 40px;
   background: #fff;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #dbdbdb;
 }
 .navbar-empty .tanuki-logo,
 .navbar-empty .brand-header-logo {

ee/app/controllers/registrations/groups_controller.rb

@@ -4,7 +4,7 @@ module Registrations
   class GroupsController < ApplicationController
     include ::Gitlab::Utils::StrongMemoize
 
-    layout 'checkout'
+    layout 'minimal'
 
     before_action :check_signup_onboarding_enabled
     before_action :authorize_create_group!, only: :new

ee/app/controllers/registrations/projects_controller.rb

@@ -3,7 +3,7 @@
 module Registrations
   class ProjectsController < ApplicationController
     include LearnGitlabHelper
-    layout 'checkout'
+    layout 'minimal'
 
     LEARN_GITLAB_TEMPLATE = 'learn_gitlab.tar.gz'
     LEARN_GITLAB_ULTIMATE_TEMPLATE = 'learn_gitlab_ultimate_trial.tar.gz'

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

+- @html_class = "subscriptions-layout-html"
 - page_title _('Your GitLab group')
 - form_params = { trial_onboarding_flow: params[:trial_onboarding_flow], glm_source: params[:glm_source], glm_content: params[:glm_content] }
 
 .row.gl-flex-grow-1
-  .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-p-5.gl-bg-gray-10
-    .edit-group.gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-pt-7
+  .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-px-5.gl-pb-5
+    .edit-group.gl-display-flex.gl-flex-direction-column.gl-align-items-center
       - unless in_trial_onboarding_flow?
         #progress-bar
       %h2.center= _('Create your group')

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

+- @html_class = "subscriptions-layout-html"
 - page_title _('Your first project')
 - visibility_level = selected_visibility_level(@project, params.dig(:project, :visibility_level))
 
@@ -6,8 +7,8 @@
     .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
-  .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
+  .gl-display-flex.gl-align-items-center.gl-flex-direction-column.gl-w-full.gl-px-5.gl-pb-5
+    .new-project.gl-display-flex.gl-flex-direction-column.gl-align-items-center
       - unless in_trial_onboarding_flow?
         #progress-bar
       %h2.gl-text-center= _('Create/import your first project')

spec/controllers/registrations/experience_levels_controller_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe Registrations::ExperienceLevelsController do
       end
 
       it { is_expected.to have_gitlab_http_status(:ok) }
-      it { is_expected.to render_template('layouts/signup_onboarding') }
+      it { is_expected.to render_template('layouts/minimal') }
       it { is_expected.to render_template(:show) }
     end
   end