Merge branch '45797-welcome-screen-ee' into 'master'

Fix welcome screen formatting for new external users

See merge request gitlab-org/gitlab!16667

app/assets/stylesheets/framework/blank.scss

@@ -14,13 +14,12 @@
 .blank-state-row {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .blank-state-welcome {
   text-align: center;
-  padding: 20px 0 40px;
+  padding: $gl-padding 0 ($gl-padding * 2);
 
   .blank-state-welcome-title {
     font-size: 24px;
@@ -32,23 +31,9 @@
 }
 
 .blank-state-link {
-  display: block;
   color: $gl-text-color;
-  flex: 0 0 100%;
   margin-bottom: 15px;
 
-  @include media-breakpoint-up(sm) {
-    flex: 0 0 49%;
-
-    &:nth-child(odd) {
-      margin-right: 5px;
-    }
-
-    &:nth-child(even) {
-      margin-left: 5px;
-    }
-  }
-
   &:hover {
     background-color: $gray-light;
     text-decoration: none;
@@ -63,15 +48,25 @@
 }
 
 .blank-state {
-  padding: 20px;
+  display: flex;
+  align-items: center;
+  padding: 20px 50px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  min-height: 240px;
+  margin-bottom: $gl-padding;
+  width: calc(50% - #{$gl-padding-8});
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
+
+    .column-small & {
+      width: 100%;
+    }
 
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 50px 30px;
   }
 }
 
@@ -90,7 +85,7 @@
   }
 
   .blank-state-body {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       text-align: center;
       margin-top: 20px;
     }
@@ -121,9 +116,3 @@
     }
   }
 }
-
-@include media-breakpoint-down(xs) {
-  .blank-state-icon svg {
-    width: 315px;
-  }
-}

app/views/dashboard/projects/_blank_state_admin_welcome.html.haml

 .blank-state-row
-  = link_to new_project_path, class: "blank-state-link" do
-    .blank-state
+  - if has_start_trial?
+    = render_if_exists "dashboard/projects/blank_state_ee_trial"
+
+  = link_to new_project_path, class: "blank-state blank-state-link" do
+    .blank-state-icon
+      = image_tag("illustrations/welcome/add_new_project")
+    .blank-state-body
+      %h3.blank-state-title
+        Create a project
+      %p.blank-state-text
+        Projects are where you store your code, access issues, wiki and other features of GitLab.
+
+  - if current_user.can_create_group?
+    = link_to new_group_path, class: "blank-state blank-state-link" do
       .blank-state-icon
-        = custom_icon("add_new_project", size: 50)
+        = image_tag("illustrations/welcome/add_new_group")
       .blank-state-body
         %h3.blank-state-title
-          Create a project
+          Create a group
         %p.blank-state-text
-          Projects are where you store your code, access issues, wiki and other features of GitLab.
+          Groups are a great way to organize projects and people.
 
-  - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_group", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Create a group
-          %p.blank-state-text
-            Groups are a great way to organize projects and people.
-
-    = link_to new_admin_user_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_user", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Add people
-          %p.blank-state-text
-            Add your team members and others to GitLab.
-
-  = link_to admin_root_path, class: "blank-state-link" do
-    .blank-state
+    = link_to new_admin_user_path, class: "blank-state blank-state-link" do
       .blank-state-icon
-        = custom_icon("configure_server", size: 50)
+        = image_tag("illustrations/welcome/add_new_user")
       .blank-state-body
         %h3.blank-state-title
-          Configure GitLab
+          Add people
         %p.blank-state-text
-          Make adjustments to how your GitLab instance is set up.
+          Add your team members and others to GitLab.
+
+  = link_to admin_root_path, class: "blank-state blank-state-link" do
+    .blank-state-icon
+      = image_tag("illustrations/welcome/configure_server")
+    .blank-state-body
+      %h3.blank-state-title
+        Configure GitLab
+      %p.blank-state-text
+        Make adjustments to how your GitLab instance is set up.

app/views/dashboard/projects/_blank_state_welcome.html.haml

@@ -2,19 +2,18 @@
 
 .blank-state-row
   - if current_user.can_create_project?
-    = link_to new_project_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_project", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Create a project
-          %p.blank-state-text
-            Projects are where you store your code, access issues, wiki and other features of GitLab.
+    = link_to new_project_path, class: "blank-state blank-state-link" do
+      .blank-state-icon
+        = image_tag("illustrations/welcome/add_new_project")
+      .blank-state-body
+        %h3.blank-state-title
+          Create a project
+        %p.blank-state-text
+          Projects are where you store your code, access issues, wiki and other features of GitLab.
   - else
     .blank-state
       .blank-state-icon
-        = custom_icon("add_new_project", size: 50)
+        = image_tag("illustrations/welcome/add_new_project")
       .blank-state-body
         %h3.blank-state-title
           Create a project
@@ -22,37 +21,34 @@
           If you are added to a project, it will be displayed here.
 
   - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("add_new_group", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Create a group
-          %p.blank-state-text
-            Groups are the best way to manage projects and members.
+    = link_to new_group_path, class: "blank-state blank-state-link" do
+      .blank-state-icon
+        = image_tag("illustrations/welcome/add_new_group")
+      .blank-state-body
+        %h3.blank-state-title
+          Create a group
+        %p.blank-state-text
+          Groups are the best way to manage projects and members.
 
   - if public_project_count > 0
-    = link_to trending_explore_projects_path, class: "blank-state-link" do
-      .blank-state
-        .blank-state-icon
-          = custom_icon("globe", size: 50)
-        .blank-state-body
-          %h3.blank-state-title
-            Explore public projects
-          %p.blank-state-text
-            There are
-            = number_with_delimiter(public_project_count)
-            public projects on this server.
-            Public projects are an easy way to allow
-            everyone to have read-only access.
-
-  = link_to "https://docs.gitlab.com/", class: "blank-state-link" do
-    .blank-state
+    = link_to trending_explore_projects_path, class: "blank-state blank-state-link" do
       .blank-state-icon
-        = custom_icon("lightbulb", size: 50)
+        = image_tag("illustrations/welcome/globe")
       .blank-state-body
         %h3.blank-state-title
-          Learn more about GitLab
+          Explore public projects
         %p.blank-state-text
-          Take a look at the documentation to discover all of GitLab's capabilities.
+          There are
+          = number_with_delimiter(public_project_count)
+          public projects on this server.
+          Public projects are an easy way to allow
+          everyone to have read-only access.
+
+  = link_to "https://docs.gitlab.com/", class: "blank-state blank-state-link" do
+    .blank-state-icon
+      = image_tag("illustrations/welcome/lightbulb")
+    .blank-state-body
+      %h3.blank-state-title
+        Learn more about GitLab
+      %p.blank-state-text
+        Take a look at the documentation to discover all of GitLab's capabilities.

app/views/dashboard/projects/_zero_authorized_projects.html.haml

-.blank-state-parent-container{ class: ('has-start-trial-container' if has_start_trial?) }
+.blank-state-parent-container
   .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
     .container.section-body
       .row
@@ -7,12 +7,7 @@
             = _('Welcome to GitLab')
           %p.blank-state-text
             = _('Faster releases. Better code. Less pain.')
-        .blank-state-row
-          %div{ class: ('column-large' if has_start_trial?) }
-            - if current_user.admin?
-              = render "blank_state_admin_welcome"
-            - else
-              = render "blank_state_welcome"
-          - if has_start_trial?
-            .column-small
-              = render_if_exists "blank_state_ee_trial"
+        - if current_user.admin?
+          = render "blank_state_admin_welcome"
+        - else
+          = render "blank_state_welcome"

changelogs/unreleased/45797-welcome-screen.yml

+---
+title: Fix formatting welcome screen external users
+merge_request: 16667
+author:
+type: fixed

ee/app/views/dashboard/projects/_blank_state_ee_trial.html.haml

 .blank-state
   .blank-state-icon
-    = custom_icon("ee_trial", size: 50)
+    = image_tag("illustrations/lock_promotion")
   .blank-state-body
     %h3.blank-state-title
       Unlock more features with GitLab Ultimate