Merge branch 'issue-box-redesign' into 'master'

Issue box redesign

I complained before about the issue box looks. This is a proposed redesign.

The background of the issue is slightly lighter than the comments, so there is a clear distinction.

To make sure the issue then doesn't disappear, the shadow is slightly strongly (but still barely noticeable, to keep it flat).

The left top corner is round to highlight the status 'label', as it were a real label.

See merge request !1125

1 files changed, 23 insertions, 14 deletions

diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index 0679690c05f..0486955d6e1 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -8,43 +8,51 @@
  */
 
 .issue-box {
-  color: #666;
+  color: #555;
   margin:20px 0;
-  background: #FFF;
-  border: 1px solid #EEE;
-  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+  background: #f9f9f9;
+  border-top-left-radius: 5px;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
 
   &.issue-box-closed {
-    border-color: $border_danger;
     .state {
+      background-color: #F3CECE;
+      border-color: $border_danger;
+    }
+    .state-label {
       background-color: $bg_danger;
       color: #FFF;
-      border-color: $border_danger;
     }
   }
 
   &.issue-box-merged {
-    border-color: $border_primary;
     .state {
+      background-color: #B7CEE7;
+      border-color: $border_primary;
+    }
+    .state-label {
       background-color: $bg_primary;
       color: #FFF;
-      border-color: $border_primary;
     }
   }
 
   &.issue-box-open {
-    border-color: $border_success;
     .state {
-      border-color: $border_success;
+      background-color: #D6F1D7;
+      border-color: $bg_success;
+    }
+    .state-label {
       background-color: $bg_success;
       color: #FFF;
     }
   }
 
   &.issue-box-expired {
-    border-color: #cea61b;
     .state {
+      background-color: #EEE9B3;
       border-color: #faebcc;
+    }
+    .state-label {
       background: #cea61b;
       color: #FFF;
     }
@@ -55,8 +63,7 @@
   }
 
   .state {
-    border-bottom: 1px solid #DDD;
-    padding: 10px 15px;
+    background-color: #f9f9f9;
   }
 
   .title {
@@ -104,12 +111,14 @@
     font-size: 14px;
     float: left;
     font-weight: bold;
+    padding: 10px 15px;
+    border-top-left-radius: 5px;
   }
 
   .creator {
     float: right;
+    padding: 10px 15px;
     a {
-      color: #FFF;
       text-decoration: underline;
     }
   }