Dashboard projects blank stateprojects-blank-state

7 files changed, 56 insertions, 82 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index d28cda6d62d..540718197e0 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -20,9 +20,12 @@
 
 .blank-state-icon {
   padding-bottom: 20px;
+  color: $gray-darkest;
+  font-size: 56px;
 
-  path {
-    fill: $gray-darkest;
+  path,
+  polygon {
+    fill: currentColor;
   }
 }
 
@@ -37,6 +40,10 @@
   margin-top: 0;
   margin-bottom: $gl-padding;
   font-size: 15px;
+
+  > strong {
+    font-weight: 600;
+  }
 }
 
 .blank-state-welcome-title {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index f8aecd0558d..c1e5305644b 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -270,21 +270,6 @@ table {
   }
 }
 
-.dashboard-intro-icon {
-  float: left;
-  text-align: center;
-  font-size: 32px;
-  color: #aaa;
-  width: 60px;
-}
-
-.dashboard-intro-text {
-  display: inline-block;
-  margin-left: -60px;
-  padding-left: 60px;
-  width: 100%;
-}
-
 .btn-sign-in {
   text-shadow: none;
 
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index d54c7cad7be..40c70fa3025 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -1,53 +1,46 @@
 - publicish_project_count = ProjectsFinder.new.execute(current_user).count
-%h3.page-title Welcome to GitLab!
-%p.light Self hosted Git management application.
-%hr
-%div
-  .dashboard-intro-icon
-    %i.fa.fa-bookmark-o
-  .dashboard-intro-text
-    %p.slead
-      You don't have access to any projects right now.
-      %br
-      - if current_user.can_create_project?
-        You can create up to
-        %strong= pluralize(number_with_delimiter(current_user.projects_limit), "project") + "."
-      - else
-        If you are added to a project, it will be displayed here.
-
+.blank-state.blank-state-welcome
+  %h2.blank-state-welcome-title
+    Welcome to GitLab
+  %p.blank-state-text
+    Code, test, and deploy together
+.blank-state
+  .blank-state-icon
+    = navbar_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?
-      .link_holder
-        = link_to new_project_path, class: "btn btn-new" do
-          = icon('plus')
-          New Project
+      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?
-  %hr
-  %div
-    .dashboard-intro-icon
-      %i.fa.fa-users
-    .dashboard-intro-text
-      %p.slead
-        You can create a group for several dependent projects.
-        %br
-        Groups are the best way to manage projects and members.
-      .link_holder
-        = link_to new_group_path, class: "btn btn-new" do
-          %i.fa.fa-plus
-          New Group
+  .blank-state
+    .blank-state-icon
+      = navbar_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
 
 -if publicish_project_count > 0
-  %hr
-  %div
-    .dashboard-intro-icon
-      %i.fa.fa-globe
-    .dashboard-intro-text
-      %p.slead
-        There are
-        %strong= number_with_delimiter(publicish_project_count)
-        public projects on this server.
-        %br
-        Public projects are an easy way to allow everyone to have read-only access.
-      .link_holder
-        = link_to trending_explore_projects_path, class: "btn btn-new" do
-          Browse public projects
+  .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
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 4565e752c1f..4f36a4a1c73 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -5,7 +5,8 @@
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
-= render 'dashboard/projects_head'
+- if @projects.any? || params[:filter_projects]
+  = render 'dashboard/projects_head'
 
 - if @last_push
   = render "events/event_last_push", event: @last_push
diff --git a/app/views/shared/icons/_group.svg b/app/views/shared/icons/_group.svg.erb
index 75cae0d16c8..53635016900 100644
--- a/app/views/shared/icons/_group.svg
+++ b/app/views/shared/icons/_group.svg.erb
@@ -1,9 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
-    <title>Group</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
+<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16">
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group" fill="#303030">
             <path d="M15.6667,10.0105 L10.3337,10.0105 C10.1497,10.0105 9.9997,10.1775 9.9997,10.3845 L9.9997,15.6145 C9.9997,15.8215 10.1497,15.9885 10.3337,15.9885 L15.6667,15.9885 C15.8507,15.9885 15.9997,15.8215 15.9997,15.6145 L15.9997,10.3845 C15.9997,10.1775 15.8507,10.0105 15.6667,10.0105 L15.6667,10.0105 L15.6667,10.0105 Z M11.9997,14.0105 L13.9997,14.0105 L13.9997,12.0105 L11.9997,12.0105 L11.9997,14.0105 L11.9997,14.0105 Z" id="Fill-11"></path>
@@ -15,4 +10,4 @@
             <path d="M11.6667,6.21724894e-15 L4.3337,6.21724894e-15 C4.1497,6.21724894e-15 3.9997,0.167 3.9997,0.374 L3.9997,6.604 C3.9997,6.811 4.1497,6.978 4.3337,6.978 L11.6667,6.978 C11.8507,6.978 11.9997,6.811 11.9997,6.604 L11.9997,0.374 C11.9997,0.167 11.8507,6.21724894e-15 11.6667,6.21724894e-15 L11.6667,6.21724894e-15 L11.6667,6.21724894e-15 Z M5.9997,5 L9.9997,5 L9.9997,2 L5.9997,2 L5.9997,5 L5.9997,5 Z" id="Fill-14"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/app/views/shared/icons/_project.svg b/app/views/shared/icons/_project.svg
deleted file mode 100644
index 1e8b43f8c6b..00000000000
--- a/app/views/shared/icons/_project.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>Page 1</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M6,6 L12,6 L12,5 L6,5 L6,6 Z M6,8 L12,8 L12,7 L6,7 L6,8 Z M6,10 L12,10 L12,9 L6,9 L6,10 Z M6,12 L12,12 L12,11 L6,11 L6,12 Z M4,6 L5,6 L5,5 L4,5 L4,6 Z M4,8 L5,8 L5,7 L4,7 L4,8 Z M4,10 L5,10 L5,9 L4,9 L4,10 Z M4,12 L5,12 L5,11 L4,11 L4,12 Z M13,3 L10,3 L10,4 L6,4 L6,3 L3,3 L3,13 L13,13 L13,3 Z M2,14 L14,14 L14,2 L2,2 L2,14 Z M1,0 C0.448,0 0,0.448 0,1 L0,15 C0,15.552 0.448,16 1,16 L15,16 C15.552,16 16,15.552 16,15 L16,1 C16,0.448 15.552,0 15,0 L1,0 Z" fill="#7F7E7E"></path>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/app/views/shared/icons/_project.svg.erb b/app/views/shared/icons/_project.svg.erb
new file mode 100644
index 00000000000..2f60bb7245e
--- /dev/null
+++ b/app/views/shared/icons/_project.svg.erb
@@ -0,0 +1,3 @@
+<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16">
+  <path d="M6,6 L12,6 L12,5 L6,5 L6,6 Z M6,8 L12,8 L12,7 L6,7 L6,8 Z M6,10 L12,10 L12,9 L6,9 L6,10 Z M6,12 L12,12 L12,11 L6,11 L6,12 Z M4,6 L5,6 L5,5 L4,5 L4,6 Z M4,8 L5,8 L5,7 L4,7 L4,8 Z M4,10 L5,10 L5,9 L4,9 L4,10 Z M4,12 L5,12 L5,11 L4,11 L4,12 Z M13,3 L10,3 L10,4 L6,4 L6,3 L3,3 L3,13 L13,13 L13,3 Z M2,14 L14,14 L14,2 L2,2 L2,14 Z M1,0 C0.448,0 0,0.448 0,1 L0,15 C0,15.552 0.448,16 1,16 L15,16 C15.552,16 16,15.552 16,15 L16,1 C16,0.448 15.552,0 15,0 L1,0 Z" fill="#7F7E7E" fill-rule="evenodd"></path>
+</svg>