Reorganize landing page for new users

app/assets/stylesheets/framework/blank.scss

@@ -7,17 +7,14 @@
     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-welcome {
   text-align: center;
+  padding: 20px 0 40px;
 
-  &.blank-state-welcome {
   .blank-state-welcome-title {
     font-size: 24px;
   }
@@ -25,11 +22,28 @@
   .blank-state-text {
     margin-bottom: 0;
   }
+}
+
+.blank-state-link {
+  display: block;
+  color: $gl-text-color;
+
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
   }
+}
 
-  .blank-state-icon {
-    padding-bottom: 20px;
+.blank-state {
+  display: flex;
+  align-items: center;
+  padding: 50px 30px;
+  margin-bottom: 30px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
 
+  .blank-state-icon {
     svg {
       display: block;
       margin: auto;
@@ -38,13 +52,10 @@
 
   .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 {
+    padding-left: 20px;
   }
 }

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

-.blank-state
+.row
+  .col-md-6
+    = 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
@@ -6,28 +9,26 @@
             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
+  - if current_user.can_create_group?
+    .col-md-6
+      = link_to admin_root_path, class: "blank-state-link" do
+        .blank-state
           .blank-state-icon
-    = custom_icon("configure_server", size: 50)
+            = custom_icon("add_new_group", size: 50)
           .blank-state-body
             %h3.blank-state-title
-      Configure GitLab
+              Create a group
             %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
+              Groups are a great way to organize projects and people.
 
-- if current_user.can_create_group?
+  .col-md-6
+    = link_to admin_root_path, class: "blank-state-link" do
       .blank-state
         .blank-state-icon
-      = custom_icon("add_new_group", size: 50)
+          = custom_icon("configure_server", size: 50)
         .blank-state-body
           %h3.blank-state-title
-        Create a group
+            Configure GitLab
           %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
+            Make adjustments to how your GitLab instance is set up.

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

 - public_project_count = ProjectsFinder.new(current_user: current_user).execute.count
 
-- if current_user.can_create_group?
+.row
+  .col-md-6
+    - 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_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
           .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
+      .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.
-    - if current_user.can_create_project?
-      = link_to new_project_path, class: "btn btn-new" do
-        New project
 
-- if public_project_count > 0
+  - if current_user.can_create_group?
+    .col-md-6
+      = 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 for several dependent projects.
+            %p.blank-state-text
+              Groups are the best way to manage projects and members.
+
+  .clearfix
+
+  - if public_project_count > 0
+    .col-md-6
+      = link_to trending_explore_projects_path, class: "blank-state-link" do
         .blank-state
           .blank-state-icon
             = custom_icon("globe", size: 50)
@@ -44,5 +55,3 @@
               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

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

 .row.blank-state-parent-container
   .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
     .container.section-body
-      .blank-state.blank-state-welcome
+      .blank-state-welcome
         %h2.blank-state-welcome-title
           Welcome to GitLab
         %p.blank-state-text

changelogs/unreleased/3615-improve-welcome-screen.yml

+---
+title: Reorganize welcome page for new users
+merge_request:
+author:
+type: other