Merge branch '2501-ce-port-update-welcome-page' into 'master'

CE port of updated welcome page

See merge request !12662

app/assets/stylesheets/framework/blank.scss

+.blank-state-parent-container {
+  display: flex;
+
+  .section-container {
+    display: flex;
+    flex: 1;
+    padding: 10px;
+  }
+
+  .section-body {
+    width: 100%;
+    height: 100%;
+    padding-bottom: 25px;
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+
+    &.section-ee-trial {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
 .blank-state-welcome {
   text-align: center;
-  border-bottom: 1px solid $border-color;
 
   .blank-state-text {
     margin-bottom: 0;
@@ -10,6 +33,10 @@
 .blank-state {
   padding-top: 20px;
   padding-bottom: 20px;
+}
+
+.blank-state.ee-trial {
+  padding: 20px;
   text-align: center;
 }
 
@@ -20,20 +47,24 @@
 
 .blank-state-icon {
   padding-bottom: 20px;
-  color: $gray-darkest;
   font-size: 56px;
 
-  path,
-  polygon {
-    fill: currentColor;
+  svg {
+    display: block;
+    margin: auto;
+  }
+}
+
+@media (min-width: $screen-sm-max) {
+  .section-welcome .blank-state-icon svg {
+    width: 130%;
   }
 }
 
 .blank-state-title {
   margin-top: 0;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   font-size: 18px;
-  font-weight: normal;
 }
 
 .blank-state-text {
@@ -49,3 +80,24 @@
 .blank-state-welcome-title {
   font-size: 24px;
 }
+
+@media (max-width: $screen-md-min) {
+  .blank-state-parent-container {
+    &,
+    .section-container {
+      display: block;
+    }
+  }
+
+  .blank-state {
+    text-align: center;
+  }
+
+  .blank-state-icon {
+    padding-bottom: 0;
+  }
+
+  .blank-state-body {
+    margin-top: 15px;
+  }
+}

app/assets/stylesheets/pages/profile.scss

@@ -286,8 +286,7 @@ table.u2f-registrations {
 }
 
 .user-callout {
-  margin: 0 auto;
-  max-width: $screen-lg-min;
+  margin: 20px -5px 0;
 
   .bordered-box {
     border: 1px solid $blue-300;

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

+.row.blank-state.clearfix
+  .col-md-1.col-md-offset-3.blank-state-icon
+    = custom_icon("add_new_user", size: 50)
+  .col-md-5.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
+
+.row.blank-state.clearfix
+  .col-md-1.col-md-offset-3.blank-state-icon
+    = custom_icon("configure_server", size: 50)
+  .col-md-5.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?
+  .row.blank-state.clearfix
+    .col-md-1.col-md-offset-3.blank-state-icon
+      = custom_icon("add_new_group", size: 50)
+    .col-md-5.blank-state-body
+      %h3.blank-state-title
+        Create a group
+      %p.blank-state-text
+        Groups are a great way to organise projects and people.
+      = link_to new_group_path, class: "btn btn-new" do
+        New group

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.blank-state.clearfix
+    .col-md-1.col-md-offset-3.blank-state-icon
+      = custom_icon("add_new_group", size: 50)
+    .col-md-5.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
+
+.row.blank-state.clearfix
+  .col-md-1.col-md-offset-3.blank-state-icon
+    = custom_icon("add_new_project", size: 50)
+  .col-md-5.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 public_project_count > 0
+  .row.blank-state.clearfix
+    .col-md-1.col-md-offset-3.blank-state-icon
+      = custom_icon("globe", size: 50)
+    .col-md-5.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

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

-- publicish_project_count = ProjectsFinder.new(current_user: current_user).execute.count
-.blank-state.blank-state-welcome
+.row.blank-state-parent-container
+  .section-container
+    .container.section-body.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
+      .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.can_create_group?
-  .blank-state
-    .blank-state-icon
-      = custom_icon("group", size: 50)
-    %h3.blank-state-title
-      You can 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("project", size: 50)
-  %h3.blank-state-title
-    You don't have access to any projects right now
-  %p.blank-state-text
-    - if current_user.can_create_project?
-      You can create up to
-      %strong= number_with_delimiter(current_user.projects_limit)
-      = succeed "." do
-        = "project".pluralize(current_user.projects_limit)
+      - if current_user.admin?
+        = render "blank_state_admin_welcome"
       - 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 publicish_project_count > 0
-  .blank-state
-    .blank-state-icon
-      = icon("globe")
-    %h3.blank-state-title
-      There are
-      = number_with_delimiter(publicish_project_count)
-      public projects on this server.
-    %p.blank-state-text
-      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
+        = render "blank_state_welcome"

app/views/shared/icons/_add_new_group.svg

+<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="#000" fill-opacity=".03" d="M2.12 42C2.04 43 2 44 2 45c0 20.43 16.57 37 37 37s37-16.57 37-37c0-1-.04-2-.12-3C74.35 61.03 58.42 76 39 76S3.65 61.03 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="M59.65 32.65H60l-2-2.42-2 2.4-2-2.4-2 2.4-2-2.4-2 2.4-2-2.4-2 2.42h.77C45.57 34.6 46 36.75 46 39c0 2.84-.7 5.5-1.92 7.86 1.97 2.28 4.83 3.64 7.92 3.64 5.8 0 10.5-4.74 10.5-10.6 0-2.8-1.08-5.36-2.85-7.25zM43.18 29.6c2.4-2.1 5.52-3.3 8.82-3.3 7.46 0 13.5 6.1 13.5 13.6S59.46 53.5 52 53.5c-3.68 0-7.1-1.5-9.6-4.04C39.3 53.44 34.44 56 29 56c-9.4 0-17-7.6-17-17s7.6-17 17-17c3.22 0 6.23.9 8.8 2.45 2.13 1.3 3.97 3.05 5.38 5.16zM17 34c-.65 1.54-1 3.23-1 5 0 7.18 5.82 13 13 13s13-5.82 13-13c0-1.77-.35-3.46-1-5h-9c-.53 0-1.04-.2-1.4-.6L29 31.84l-1.6 1.58c-.36.4-.87.6-1.4.6h-9zm21.38-4c-2.4-2.5-5.76-4-9.38-4-3.62 0-6.98 1.5-9.38 4h5.55l2.42-2.4c.74-.8 2-.8 2.8 0l2.4 2.4h5.54z"/>
+    <path fill="#6B4FBB" d="M47.6 42.32c-.66 0-1.2-.54-1.2-1.2 0-.68.54-1.22 1.2-1.22.66 0 1.2.54 1.2 1.2 0 .68-.54 1.22-1.2 1.22zm8.8 0c-.66 0-1.2-.54-1.2-1.2 0-.68.54-1.22 1.2-1.22.66 0 1.2.54 1.2 1.2 0 .68-.54 1.22-1.2 1.22zM25 44h8c0 2.2-1.8 4-4 4s-4-1.8-4-4zm-1.5-1c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
+  </g>
+</svg>

app/views/shared/icons/_add_new_project.svg

+<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

app/views/shared/icons/_add_new_user.svg

+<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="#000" fill-opacity=".03" d="M2.12 42C2.04 43 2 44 2 45c0 20.43 16.57 37 37 37s37-16.57 37-37c0-1-.04-2-.12-3C74.35 61.03 58.42 76 39 76S3.65 61.03 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" d="M44 31l-2.5-3-2.5 3-2.5-3-2.5 3-2.5-3-2.5 3h-2.72c2.65-4.2 7.36-7 12.72-7s10.07 2.8 12.72 7H49l-2.5-3-2.5 3z"/>
+    <path fill="#E1DBF2" fill-rule="nonzero" d="M39 57c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.6 17-17 17zm0-4c7.18 0 13-5.82 13-13s-5.82-13-13-13-13 5.82-13 13 5.82 13 13 13z"/>
+    <path fill="#6B4FBB" d="M35 45h8c0 2.2-1.8 4-4 4s-4-1.8-4-4zm-1.5-2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
+  </g>
+</svg>

app/views/shared/icons/_configure_server.svg

+<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="#000" fill-opacity=".03" d="M2.12 42C2.04 43 2 44 2 45c0 20.43 16.57 37 37 37s37-16.57 37-37c0-1-.04-2-.12-3C74.35 61.03 58.42 76 39 76S3.65 61.03 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="M24.92 35.15c-1.72-1.4-1.98-3.9-.6-5.63l1.26-1.55c1.4-1.72 3.9-2 5.63-.6l.7.56c.7-.4 1.4-.73 2.1-1V26c0-2.2 1.8-4 4-4h2c2.2 0 4 1.8 4 4v.92c.8.28 1.5.62 2.1 1l.7-.55c1.7-1.4 4.3-1.12 5.7.6l1.3 1.55c1.4 1.72 1.2 4.23-.6 5.63l-.7.6c.3.74.4 1.5.5 2.3l.9.2c2.2.5 3.5 2.64 3 4.8L56.4 45c-.5 2.15-2.64 3.5-4.8 3l-.88-.2c-.44.63-.92 1.24-1.46 1.8l.4.82c.9 1.98.1 4.38-1.9 5.35l-1.8.87c-2 .97-4.37.15-5.34-1.84l-.46-.85c-.34.03-.74.05-1.13.05-.4 0-.8-.02-1.2-.05l-.4.85c-.95 2-3.34 2.8-5.33 1.84l-1.8-.87c-1.97-.97-2.8-3.37-1.83-5.35l.4-.8c-.54-.58-1.02-1.2-1.46-1.83l-.8.2c-2.2.5-4.3-.9-4.8-3l-.4-2c-.5-2.2.85-4.3 3-4.8l.9-.2c.1-.8.3-1.6.5-2.3l-.7-.6zm4.95.77c-.53 1.2-.83 2.47-.87 3.8-.02.9-.66 1.68-1.55 1.9l-2.32.53.45 1.94 2.3-.6c.9-.2 1.8.2 2.23 1 .7 1.1 1.5 2.2 2.5 3 .7.6.9 1.6.5 2.4l-1 2.1 1.8.9 1.1-2.1c.4-.8 1.3-1.3 2.2-1.1.7.1 1.3.2 2 .2s1.3-.1 2-.2c.9-.2 1.8.3 2.2 1.1l1 2.1 1.8-.9-1.2-2c-.4-.8-.2-1.8.5-2.4 1-.85 1.84-1.88 2.45-3.05.4-.82 1.33-1.24 2.2-1.04l2.33.54.45-1.95-2.32-.54c-.9-.2-1.52-.97-1.54-1.88-.03-1.4-.33-2.6-.86-3.8-.4-.9-.2-1.8.5-2.4l1.9-1.5-1.3-1.6-1.8 1.5c-.8.5-1.8.6-2.5 0-1.1-.8-2.3-1.4-3.5-1.7-.9-.2-1.5-1-1.5-1.9V26h-2v2.38c0 .9-.6 1.7-1.5 1.93-1.3.4-2.5 1-3.5 1.7-.8.6-1.8.6-2.5 0l-1.9-1.5-1.26 1.6 1.8 1.5c.7.6.94 1.6.6 2.4z"/>
+    <path fill="#FC6D26" fill-rule="nonzero" d="M39 46c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/>
+  </g>
+</svg>

app/views/shared/icons/_globe.svg

+<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="#E1DBF2" d="M30.24 27.823A14.98 14.98 0 0 0 24 40c0 2.549.636 4.949 1.757 7.051-.297-2.684.644-4.026 2.823-4.026 3.707 0 2.462 5.365 4.473 5.761 2.01.396 4.175.396 4.267 3.29.04 1.257-.265 2.157-.917 2.7a15.095 15.095 0 0 0 8.555-1.006c.035-1.91.303-4.941 2.21-5.61 2.373-.833-.55-1.431.734-3.368 1.17-1.762-3.297-5.2 0-4.832 3.477.388 5.044-.816 6.024-1.456a14.903 14.903 0 0 0-1.373-4.94c-.873.4-2.19.465-3.702-.538-.757-.502-1.084-3.944-2.107-3.944-3.823 0-4.065 3.17-5.994 3.944-1.076.431-4.193 3.773-5.614 3.596-1.126-.14-1.071-4.417-2.45-5.166-1.359-.738-2.174-1.948-2.447-3.633zM39 59c-10.493 0-19-8.507-19-19s8.507-19 19-19 19 8.507 19 19-8.507 19-19 19z"/></g></svg>
\ No newline at end of file

changelogs/unreleased/2501-ce-port-update-welcome-page.yml

+---
+title: Update welcome page UX for new users
+merge_request: 12662
+author: