Blocked module

app/partials/us-detail.jade

@@ -18,7 +18,8 @@ block content
                 div.blocked-warning
                     span.icon.icon-warning
                     p.blocked Blocked!
-                    p
+                    p We need Pilar to make a prototype out of this or we are not sure what to show at this part.
+                    a.button.button-red.button-block(href="", title="Unblock US") Unblock
                 div.user-story-tags
                     - for(var y = 0; y < 6; y++)
                         include views/components/tag

app/styles/components/buttons.scss

@@ -59,6 +59,15 @@
     }
 }
 
+a.button-block {
+    background: $white;
+    color: $red;
+    &:hover {
+        background: $red-light;
+        color: $white;
+    }
+}
+
 .button-bulk {
     @extend %button;
     background: $green-taiga;

app/styles/dependencies/typography.scss

@@ -196,8 +196,8 @@ a:visited {
     content: 'z';
 }
 .icon-graph:before {
-    content: "B";
+    content: 'B';
 }
 .icon-warning:before {
-    content: "C";
+    content: 'C';
 }

app/styles/layout/us-detail.scss

@@ -7,6 +7,7 @@
         top: 0;
     }
 }
+
 .us-story-main-data {
     margin-bottom: 2rem;
     .us-title {
@@ -22,6 +23,34 @@
             color: $grayer;
         }
     }
+    .blocked-warning {
+        background: $red;
+        color: $white;
+        margin-bottom: 1rem;
+        padding: 1rem;
+        position: relative;
+        .icon {
+            @extend %xxlarge;
+            display: inline;
+            left: 1rem;
+            position: absolute;
+            top: 1rem;
+        }
+        .blocked {
+            @extend %xlarge;
+            margin-bottom: .3em;
+        }
+        p {
+            margin-bottom: 0;
+            margin-left: 4rem;
+            margin-right: 10rem;
+        }
+        .button-block {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+        }
+    }
 }
 
 .us-content {