Empty issues table design

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

@@ -1,4 +1,4 @@
-section.issues-table.basic-table
+section.issues-table.basic-table(ng-class="{empty: !issues.length}")
     div.row.title
         div.level-field(data-fieldname="type") Type
         div.level-field(data-fieldname="severity") Severity
@@ -16,3 +16,9 @@ section.issues-table.basic-table
                 span(tg-bo-bind="issue.subject")
         div.issue-field(tg-listitem-issue-status="issue")
         div.assigned-field(tg-listitem-assignedto="issue")
+
+section.empty.empty-issues(ng-class="{hidden: issues.length}")
+    span.icon.icon-issues
+    span Cool! Your project is out of issues!
+    span Did you find an issue?
+    a(href="", title+"Create a new US", ng-click="ctrl.addNewIssue()") Create a new Issue

app/styles/modules/issues/issues-table.scss

@@ -1,6 +1,27 @@
+.empty-issues {
+    border: 1px dashed $gray-light;
+    color: $gray-light;
+    min-height: 10rem;
+    padding: 5% 0;
+    text-align: center;
+    .icon {
+        @extend %xxlarge;
+        margin-bottom: 2rem;
+    }
+    span {
+        display: block;
+        &:nth-child(2) {
+            margin-bottom: 1rem;
+        }
+    }
+}
+
 .issues-table {
     @include table-flex();
     margin-bottom: 2rem;
+    &.empty {
+        display: none;
+    }
     .row {
         &:hover {
             background: lighten($green-taiga, 60%);