Empty backlog design

app/fonts/taiga.svg

@@ -41,4 +41,5 @@
 <glyph unicode="&#70;" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
 <glyph unicode="&#71;" d="M402 311c0-5-2-9-5-13l-128-128c-4-4-8-5-13-5-5 0-9 1-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5l256 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
 <glyph unicode="&#72;" d="M128 384l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m128 0l128 0 0-64-128 0z m224 320l-448 0c-18 0-32-14-32-32l0-448c0-18 14-32 32-32l448 0c18 0 32 14 32 32l0 448c0 18-14 32-32 32z m-32-448l-384 0 0 384 384 0z m-192 224l128 0 0-64-128 0z m0 96l128 0 0-64-128 0z"/>
+<glyph unicode="&#73;" d="M320 347c0-2-1-4-3-6-2-2-4-3-6-3-3 0-5 1-7 3-1 2-2 4-2 6 0 9-5 16-16 21-10 4-20 7-30 7-2 0-5 1-6 3-2 1-3 4-3 6 0 2 1 5 3 6 1 2 4 3 6 3 10 0 19-1 28-4 10-3 18-9 25-16 7-7 11-16 11-26z m46 0c0 14-4 27-10 39-7 12-15 21-26 29-10 7-22 13-35 17-13 5-26 7-39 7-13 0-26-2-39-7-13-4-25-10-35-17-11-8-19-17-26-29-6-12-10-25-10-39 0-19 7-36 20-51 2-2 5-5 8-9 4-5 7-8 9-10 25-29 38-57 40-85l66 0c2 28 15 56 40 85 2 2 5 5 9 10 3 4 6 7 8 9 13 15 20 32 20 51z m36 0c0-29-10-55-29-76-9-9-16-18-21-25-6-7-12-16-17-27-6-11-9-21-10-31 9-5 13-13 13-23 0-7-2-14-7-19 5-5 7-11 7-18 0-10-4-18-13-23 3-5 4-9 4-14 0-8-3-15-9-20-6-5-13-7-22-7-4-8-10-15-17-20-8-5-16-7-25-7-9 0-17 2-25 7-7 5-13 12-17 20-9 0-16 2-22 7-6 5-9 12-9 20 0 5 1 9 4 14-9 5-13 13-13 23 0 7 2 13 7 18-5 5-7 12-7 19 0 10 4 18 13 23-1 10-4 20-10 31-5 11-11 20-17 27-5 7-12 16-21 25-19 21-29 47-29 76 0 19 4 37 12 53 9 16 20 30 34 41 14 10 29 19 47 25 17 6 35 9 53 9 18 0 36-3 53-9 18-6 33-15 47-25 14-11 25-25 34-41 8-16 12-34 12-53z"/>
 </font></defs></svg>

app/partials/backlog.jade

@@ -26,6 +26,13 @@ block content
                     span.icon.icon-tag
                     span.text Show Tags
                 include views/components/addnewus
+            section.backlog-table(ng-class="{'empty': !visibleUserstories.lenght}")
+
+                div.empty-container(ng-show="!visibleUserstories.lenght")
+                    span.icon.icon-idea
+                    span Your backlog is empty.
+                    a(href="", title+"Create a new US", ng-click="ctrl.addNewUs('standard')",
+                        tg-check-permission="tg-check-permission", permission="add_us") Create a new User Story
                 include views/modules/backlog-table
         sidebar.menu-secondary.sidebar
             include views/modules/sprints

app/partials/views/modules/backlog-table.jade

@@ -1,4 +1,4 @@
-section.backlog-table-header
+div.backlog-table-header
     div.row.backlog-table-title
         div.user-stories User Stories
         div.status Status
@@ -6,5 +6,5 @@ section.backlog-table-header
             span.header-points Points
             span.icon.icon-arrow-bottom
 
-section.backlog-table-body(tg-backlog-sortable, ng-class="{'show-tags': ctrl.showTags}")
+div.backlog-table-body(tg-backlog-sortable, ng-class="{'show-tags': ctrl.showTags}" )
     include ../components/backlog-row

app/styles/dependencies/colors.scss

@@ -5,7 +5,6 @@ $blackish: #050505;
 $gray: #555;
 $grayer: #444;
 $gray-light: #cdcdcd;
-$very-light-gray: #e3e3e3;
 $whitish: #f5f5f5;
 $very-light-gray: #fcfcfc;
 $white: #fff;

app/styles/dependencies/typography.scss

@@ -227,3 +227,6 @@ a:visited {
 .icon-bulk:before {
     content: 'H';
 }
+.icon-idea:before {
+    content: 'I';
+}

app/styles/layout/backlog.scss

@@ -3,6 +3,28 @@
         float: right;
     }
 }
+.backlog-table {
+    &.empty {
+        border: 1px dashed $gray-light;
+        min-height: 10rem;
+        .backlog-table-header,
+        .backlog-table-body {
+            display: none;
+        }
+        .empty-container {
+            color: $gray-light;
+            padding: 5% 0;
+            text-align: center;
+        }
+        .icon {
+            @extend %xxlarge;
+            margin-bottom: 2rem;
+        }
+        span {
+            display: block;
+        }
+    }
+}
 
 .backlog-menu {
     @include clearfix;