Sprints sidebar emty fixes

app/locales/locale-en.json

@@ -946,8 +946,7 @@
             "LINK_TASKBOARD": "Sprint Taskboard",
             "TITLE_LINK_TASKBOARD": "Go to Taskboard of \"{{name}}\"",
             "NUMBER_SPRINTS": "<br/>sprints",
-            "EMPTY": "YOU HAVE NO SPRINTS CREATED",
-            "ACTION_NEW_SPRINT": "+ New sprint",
+            "EMPTY": "YOU HAVE NO SPRINTS",
             "TITLE_ACTION_NEW_SPRINT": "Add new sprint",
             "TEXT_ACTION_NEW_SPRINT": "You may want to create a new sprint in your project",
             "ACTION_SHOW_CLOSED_SPRINTS": "Show closed sprints",

app/partials/includes/modules/sprints.jade

@@ -1,14 +1,19 @@
 section.sprints
-    header
-        h1(translate="BACKLOG.SPRINTS.TITLE")
-        //-
-            div.summary
-                div.total-sprints
-                    span.number(ng-bind="totalMilestones") --
-                    a.button-green.add-sprint(href="", title="{{ 'BACKLOG.SPRINTS.TITLE_ACTION_NEW_SPRINT' | translate }}",
-                    span.description(translate="BACKLOG.SPRINTS.NUMBER_SPRINTS")
-                                          ng-click="ctrl.addNewSprint()", tg-check-permission="add_milestone")
-                    span.text(translate="BACKLOG.SPRINTS.ACTION_NEW_SPRINT")
+    header.sprint-header
+        h1
+            span.number(
+                ng-bind="totalMilestones"
+                ng-if="totalMilestones"
+            )
+            span(translate="BACKLOG.SPRINTS.TITLE")
+        a.add-sprint(
+            href="" 
+            title="{{ 'BACKLOG.SPRINTS.TITLE_ACTION_NEW_SPRINT' | translate}}"
+            ng-click="ctrl.addNewSprint()"
+            ng-if="totalMilestones"
+            tg-check-permission="add_milestone"
+        )
+            include ../../../svg/add.svg
 
     div.sprints-empty(ng-if="!totalMilestones")
         img(

app/styles/modules/backlog/sprints.scss

@@ -1,17 +1,27 @@
 .sprints {
-    .summary {
-        background: darken($whitish, 10%);
+    .sprint-header {
+        align-content: center;
+        align-items: center;
         display: flex;
         justify-content: space-between;
     }
-    .total-sprints {
-        align-items: flex-start;
-        color: $grayer;
-        display: flex;
+    h1 {
+        margin: 0;
     }
     .add-sprint {
-        margin: 0;
-        padding: .3rem 1.5rem;
+        background: $primary;
+        padding: .25rem .25rem 0;
+        transition: background .2s;
+        &:hover {
+            background: $primary-light;
+        }
+        svg {
+            height: 1.4rem;
+            width: 1.5rem;
+        }
+        path {
+            fill: $whitish;
+        }
     }
     .filter-closed-sprints {
         @extend %small;
@@ -237,7 +247,7 @@
     text-align: center;
     img {
         margin: 1rem 0;
-        width: 60%;
+        width: 50%;
     }
     .title {
         @extend %large;

app/svg/add.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" version="1.1">
+    <path d="m462.1 73.3 0 352.3-352.4 0 0 75.8 352.4 0 0 352.3 75.8 0 0-352.3 352.4 0 0-75.8-352.4 0 0-352.3-75.8 0z"/>
+</svg>