Merge branch '3615-improve-welcome-screen' into 'master'

Reorganize landing page for new users

See merge request gitlab-org/gitlab-ce!15191

(cherry picked from commit 6ffb9ffd4ad54fc452f9ae1e97a41f7a83f96a1c)

0a7a9bbd Reorganize landing page for new users
6377821a Add mobile styles
250d606a Update new project icon
f014fce1 Add four blocks to each welcome page
5c909f2b Add new icon; update content
95ab3bf5 Use flexbox instead of bootstrap columns

7 files changed, 169 insertions, 102 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 6bb096fc5bd..10f9e9b70b0 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -7,29 +7,67 @@
     width: 100%;
     height: 100%;
     padding-bottom: 25px;
-    border: 1px solid $border-color;
     border-radius: $border-radius-default;
   }
 }
 
-.blank-state {
-  padding-top: 20px;
-  padding-bottom: 20px;
+.blank-state-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.blank-state-welcome {
   text-align: center;
+  padding: 20px 0 40px;
+
+  .blank-state-welcome-title {
+    font-size: 24px;
+  }
+
+  .blank-state-text {
+    margin-bottom: 0;
+  }
+}
 
-  &.blank-state-welcome {
-    .blank-state-welcome-title {
-      font-size: 24px;
+.blank-state-link {
+  display: block;
+  color: $gl-text-color;
+  flex: 0 0 100%;
+  margin-bottom: 15px;
+
+  @media (min-width: $screen-sm-min) {
+    flex: 0 0 49%;
+
+    &:nth-child(odd) {
+      margin-right: 5px;
     }
 
-    .blank-state-text {
-      margin-bottom: 0;
+    &:nth-child(even) {
+      margin-left: 5px;
     }
   }
 
-  .blank-state-icon {
-    padding-bottom: 20px;
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state {
+  padding: 20px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  @media (min-width: $screen-sm-min) {
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+  }
 
+  .blank-state-icon {
     svg {
       display: block;
       margin: auto;
@@ -38,13 +76,17 @@
 
   .blank-state-title {
     margin-top: 0;
-    margin-bottom: 10px;
     font-size: 18px;
   }
 
-  .blank-state-text {
-    max-width: $container-text-max-width;
-    margin: 0 auto $gl-padding;
-    font-size: 14px;
+  .blank-state-body {
+    @media (max-width: $screen-xs-max) {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      padding-left: 20px;
+    }
   }
 }
diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
index 57544559824..573a4b93d67 100644
--- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
@@ -1,33 +1,41 @@
-.blank-state
-  .blank-state-icon
-    = custom_icon("add_new_user", size: 50)
-  .blank-state-body
-    %h3.blank-state-title
-      Add user
-    %p.blank-state-text
-      Add your team members and others to GitLab.
-    = link_to new_admin_user_path, class: "btn btn-new" do
-      New user
+.blank-state-row
+  = 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.
 
-.blank-state
-  .blank-state-icon
-    = custom_icon("configure_server", size: 50)
-  .blank-state-body
-    %h3.blank-state-title
-      Configure GitLab
-    %p.blank-state-text
-      Make adjustments to how your GitLab instance is set up.
-    = link_to admin_root_path, class: "btn btn-new" do
-      Configure
+  - if current_user.can_create_group?
+    = link_to admin_root_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.
 
-- if current_user.can_create_group?
-  .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_group_path, class: "btn btn-new" do
-        New group
+    = 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
+      .blank-state-icon
+        = custom_icon("configure_server", size: 50)
+      .blank-state-body
+        %h3.blank-state-title
+          Configure GitLab
+        %p.blank-state-text
+          Make adjustments to how your GitLab instance is set up.
diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml
index a93a3415ee1..8d5bddbb288 100644
--- a/app/views/dashboard/projects/_blank_state_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml
@@ -1,48 +1,58 @@
 - public_project_count = ProjectsFinder.new(current_user: current_user).execute.count
 
-- if current_user.can_create_group?
-  .blank-state
-    .blank-state-icon
-      = custom_icon("add_new_group", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Create a group for several dependent projects.
-      %p.blank-state-text
-        Groups are the best way to manage projects and members.
-      = link_to new_group_path, class: "btn btn-new" do
-        New group
+.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.
+  - else
+    .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
+          If you are added to a project, it will be displayed here.
 
-.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
-      - if current_user.can_create_project?
-        You don't have access to any projects right now.
-        You can create up to
-        %strong= number_with_delimiter(current_user.projects_limit)
-        = succeed "." do
-          = "project".pluralize(current_user.projects_limit)
-      - else
-        If you are added to a project, it will be displayed here.
-    - if current_user.can_create_project?
-      = link_to new_project_path, class: "btn btn-new" do
-        New project
+  - 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.
 
-- if public_project_count > 0
-  .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 trending_explore_projects_path, class: "btn btn-new" do
-        Browse projects
+  - 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
+      .blank-state-icon
+        = custom_icon("lightbulb", size: 50)
+      .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.
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index ad3fac6d164..18a82feb189 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -1,12 +1,13 @@
-.row.blank-state-parent-container
+.blank-state-parent-container
   .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
     .container.section-body
-      .blank-state.blank-state-welcome
-        %h2.blank-state-welcome-title
-          Welcome to GitLab
-        %p.blank-state-text
-          Code, test, and deploy together
-      - if current_user.admin?
-        = render "blank_state_admin_welcome"
-      - else
-        = render "blank_state_welcome"
+      .row
+        .blank-state-welcome
+          %h2.blank-state-welcome-title
+            Welcome to GitLab
+          %p.blank-state-text
+            Code, test, and deploy together
+        - if current_user.admin?
+          = render "blank_state_admin_welcome"
+        - else
+          = render "blank_state_welcome"
diff --git a/app/views/shared/icons/_add_new_project.svg b/app/views/shared/icons/_add_new_project.svg
index 3c1e15453df..cf8762944ca 100644
--- a/app/views/shared/icons/_add_new_project.svg
+++ b/app/views/shared/icons/_add_new_project.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76 19.575 76 3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><path fill="#FEE1D3" fill-rule="nonzero" d="M30 24a4 4 0 0 0-4 4v22a4 4 0 0 0 4 4h18a4 4 0 0 0 4-4V28a4 4 0 0 0-4-4H30zm0-4h18a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8H30a8 8 0 0 1-8-8V28a8 8 0 0 1 8-8z"/><path fill="#FC6D26" d="M33 30h8a2 2 0 1 1 0 4h-8a2 2 0 1 1 0-4zm0 7h12a2 2 0 1 1 0 4H33a2 2 0 1 1 0-4zm0 7h12a2 2 0 1 1 0 4H33a2 2 0 1 1 0-4z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76S3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><path fill="#E1DBF2" fill-rule="nonzero" d="M30 24c-2.21 0-4 1.79-4 4v22c0 2.21 1.79 4 4 4h18c2.21 0 4-1.79 4-4V28c0-2.21-1.79-4-4-4H30zm0-4h18c4.418 0 8 3.582 8 8v22c0 4.418-3.582 8-8 8H30c-4.418 0-8-3.582-8-8V28c0-4.418 3.582-8 8-8z"/><path fill="#6B4FBB" d="M33 30h8c1.105 0 2 .895 2 2s-.895 2-2 2h-8c-1.105 0-2-.895-2-2s.895-2 2-2zm0 7h12c1.105 0 2 .895 2 2s-.895 2-2 2H33c-1.105 0-2-.895-2-2s.895-2 2-2zm0 7h12c1.105 0 2 .895 2 2s-.895 2-2 2H33c-1.105 0-2-.895-2-2s.895-2 2-2z"/></g></svg>
diff --git a/app/views/shared/icons/_lightbulb.svg b/app/views/shared/icons/_lightbulb.svg
new file mode 100644
index 00000000000..2fcc4c65f99
--- /dev/null
+++ b/app/views/shared/icons/_lightbulb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76S3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><path fill="#6B4FBB" d="M33 52h12c1.105 0 2 .895 2 2s-.895 2-2 2H33c-1.105 0-2-.895-2-2s.895-2 2-2zm1 5h10c1.105 0 2 .895 2 2s-.895 2-2 2H34c-1.105 0-2-.895-2-2s.895-2 2-2z"/><path fill="#E1DBF2" fill-rule="nonzero" d="M45.542 46.932l.346-2.36c.198-1.348.737-2.623 1.566-3.705 3.025-3.946 4.485-7.29 4.547-9.96C52.153 24.41 46.843 20 39 20c-7.777 0-13 4.374-13 11 0 2.4 1.462 5.73 4.573 9.846.815 1.08 1.343 2.345 1.536 3.683l.353 2.456 13.08-.054zm-17.038.624L28.15 45.1c-.097-.67-.36-1.303-.768-1.842C23.794 38.51 22 34.424 22 31c0-9.39 7.61-15 17-15s17.218 5.614 17 15c-.085 3.64-1.875 7.74-5.37 12.3-.416.54-.685 1.18-.784 1.853l-.346 2.36c-.288 1.958-1.963 3.41-3.942 3.42l-13.08.053c-1.994.008-3.69-1.455-3.974-3.43z"/><path fill="#6B4FBB" d="M41 38.732c-.598-.345-1-.992-1-1.732 0-1.105.895-2 2-2s2 .895 2 2c0 .74-.402 1.387-1 1.732V42c0 .552-.448 1-1 1s-1-.448-1-1v-3.268zm-6 0c-.598-.345-1-.992-1-1.732 0-1.105.895-2 2-2s2 .895 2 2c0 .74-.402 1.387-1 1.732V42c0 .552-.448 1-1 1s-1-.448-1-1v-3.268z"/></g></svg>
diff --git a/changelogs/unreleased/3615-improve-welcome-screen.yml b/changelogs/unreleased/3615-improve-welcome-screen.yml
new file mode 100644
index 00000000000..862efddb162
--- /dev/null
+++ b/changelogs/unreleased/3615-improve-welcome-screen.yml
@@ -0,0 +1,5 @@
+---
+title: Reorganize welcome page for new users
+merge_request:
+author:
+type: other