Merge branch 'nicolasdular/adjust-signup-design' into 'master'

Adjust sign up page design

See merge request gitlab-org/gitlab!23891

app/assets/stylesheets/pages/experimental_separate_sign_up.scss

@@ -3,33 +3,8 @@
     background-color: $gray-light;
   }
 
-  .gitlab-logo {
-    width: 80px;
-    height: 80px;
-  }
-
   .signup-box-container {
-    max-width: 900px;
-
-    &.navless-container {
-      padding: 35px $gl-padding;
-      // overriding .devise-layout-html.navless-container to support the sticky footer
-      // without having a header on size xs
-      @include media-breakpoint-down(xs) {
-        padding: 65px $gl-padding; // height of footer
-        padding-top: $gl-padding;
-      }
-    }
-  }
-
-  .signup-heading h2 {
-    font-weight: $gl-font-weight-bold;
-    padding: 0 $gl-padding;
-    font-size: $gl-font-size-28;
-
-    @include media-breakpoint-down(md) {
-      font-size: $gl-font-size-large;
-    }
+    max-width: 960px;
   }
 
   .signup-box {

app/views/devise/registrations/new.html.haml

 - page_title "Sign up"
 - if experiment_enabled?(:signup_flow)
-  = render 'devise/shared/experimental_separate_sign_up_flow_box'
+  .row
+    .col-lg-7
+      %h1.mb-3.font-weight-bold.text-6.mt-0
+        = _("Speed up your DevOps<br>with GitLab").html_safe
+      %p.text-3
+        = _("GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security.")
+    .col-lg-5.order-12
+      .text-center.mb-3
+        %h2.font-weight-bold.gl-font-size-20= _('Register for GitLab')
+      = render 'devise/shared/experimental_separate_sign_up_flow_box'
+      = render 'devise/shared/sign_in_link'
 - else
   = render 'devise/shared/signup_box'
-
-= render 'devise/shared/sign_in_link'
+  = render 'devise/shared/sign_in_link'

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

-- content_for(:page_title, _('Register for GitLab'))
 - max_first_name_length = max_last_name_length = 127
 - max_username_length = 255
 .signup-box.p-3.mb-2

app/views/layouts/devise_experimental_separate_sign_up_flow.html.haml

 !!! 5
 %html.devise-layout-html.navless{ class: system_message_class }
   = render "layouts/head"
-  %body.ui-indigo.signup-page.application.navless{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'signup_page' } }
-    = header_message
+  %body.ui-indigo.signup-page{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'signup_page' } }
+    = render "layouts/header/logo_with_title"
     = render "layouts/init_client_detection_flags"
     .page-wrap
-      .container.signup-box-container.navless-container.mt-0
+      .container.signup-box-container.navless-container
         = render "layouts/broadcast"
         .content
           = render "layouts/flash"
-          .row.mb-6
-            .col-sm-8.offset-sm-2.col-md-6.offset-md-3.new-session-forms-container
-              = render_if_exists 'layouts/devise_help_text'
-              .text-center.signup-heading.mb-3
-                = image_tag(image_url('logo.svg'), class: 'gitlab-logo', alt: 'GitLab Logo')
-                - if content_for?(:page_title)
-                  %h2= yield :page_title
-              = yield
+          = yield
       %hr.footer-fixed
       .footer-container
         .container

locale/gitlab.pot

@@ -9156,6 +9156,9 @@ msgstr ""
 msgid "GitLab for Slack"
 msgstr ""
 
+msgid "GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security."
+msgstr ""
+
 msgid "GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later."
 msgstr ""
 
@@ -18059,6 +18062,9 @@ msgstr ""
 msgid "Specify the following URL during the Runner setup:"
 msgstr ""
 
+msgid "Speed up your DevOps<br>with GitLab"
+msgstr ""
+
 msgid "Squash commit message"
 msgstr ""