Issue box restyle

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/generic/issue_box.scss

@@ -10,9 +10,61 @@
 .issue-box {
   color: #666;
   margin:20px 0;
-  background: #FAFAFA;
+  background: #FFF;
   border: 1px solid #EEE;
 
+  &.issue-box-closed {
+    border-color: #DA4E49;
+    .state {
+      background-color: #f2dede;
+      border-color: #ebccd1;
+      color: #a94442;
+      .state-label {
+        background: #DA4E49;
+        color: #FFF;
+      }
+    }
+  }
+
+  &.issue-box-merged {
+    border-color: #31708f;
+    .state {
+      background-color: #d9edf7;
+      border-color: #bce8f1;
+      color: #31708f;
+      .state-label {
+        background: #31708f;
+        color: #FFF;
+      }
+    }
+  }
+
+  &.issue-box-open {
+    border-color: #4A4;
+    .state {
+      background-color: #dff0d8;
+      border-color: #d6e9c6;
+      color: #3c763d;
+      .state-label {
+        background: #4A4;
+        color: #FFF;
+      }
+    }
+  }
+
+  &.issue-box-expired {
+    border-color: #cea61b;
+    .state {
+      background-color: #fcf8e3;
+      border-color: #faebcc;
+      color: #8a6d3b;
+      .state-label {
+        background: #cea61b;
+        color: #FFF;
+      }
+    }
+  }
+
   .control-group {
     margin-bottom: 0;
   }
@@ -55,20 +107,5 @@
     text-align: center;
     text-shadow: none;
     margin-right: 20px;
-
-    &.state-label-blue {
-      background: #31708f;
-      color: #FFF;
-    }
-
-    &.state-label-green {
-      background: #4A4;
-      color: #FFF;
-    }
-
-    &.state-label-red {
-      background: #DA4E49;
-      color: #FFF;
-    }
   }
 }

app/helpers/issues_helper.rb

@@ -85,11 +85,15 @@ def milestone_options object
     options_from_collection_for_select(@project.milestones.active, 'id', 'title', object.milestone_id)
   end
 
-  def issue_alert_class(issue)
-    if issue.closed?
-      'alert-danger'
+  def issue_box_class(item)
+    if item.respond_to?(:expired?) && item.expired?
+      'issue-box-expired'
+    elsif item.respond_to?(:merged?) && item.merged?
+      'issue-box-merged'
+    elsif item.closed?
+      'issue-box-closed'
     else
-      'alert-success'
+      'issue-box-open'
     end
   end
 end

app/helpers/merge_requests_helper.rb

@@ -42,14 +42,4 @@ def merge_path_description(merge_request, separator)
       "Branches: #{@merge_request.source_branch} #{separator} #{@merge_request.target_branch}"
     end
   end
-
-  def merge_request_alert_class(merge_request)
-    if merge_request.merged?
-      'alert-info'
-    elsif merge_request.closed?
-      'alert-danger'
-    else
-      'alert-success'
-    end
-  end
 end

app/views/projects/issues/show.html.haml

@@ -29,12 +29,13 @@
       = link_to project_milestone_path(@project, @issue.milestone) do
         = @issue.milestone.title
 
-.issue-box
-  .state{ class: issue_alert_class(@issue) }
-    - if @issue.closed?
-      %span.state-label.state-label-red Closed
-    - else
-      %span.state-label.state-label-green Open
+.issue-box{ class: issue_box_class(@issue) }
+  .state
+    %span.state-label
+      - if @issue.closed?
+        Closed
+      - else
+        Open
 
     %span.creator
       Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}

app/views/projects/merge_requests/show/_mr_box.html.haml

-.issue-box
-  .state{ class: merge_request_alert_class(@merge_request) }
-    - if @merge_request.merged?
-      %span.state-label.state-label-blue
+.issue-box{ class: issue_box_class(@merge_request) }
+  .state
+    %span.state-label
+      - if @merge_request.merged?
         Merged
-    - elsif @merge_request.closed?
-      %span.state-label.state-label-red
+      - elsif @merge_request.closed?
         Closed
-    - else
-      %span.state-label.state-label-green
+      - else
         Open
+
     %span.creator
       Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
 

app/views/projects/milestones/show.html.haml

@@ -22,14 +22,15 @@
     ← To milestones list
 
 
-.issue-box
+.issue-box{ class: issue_box_class(@milestone) }
   .state
-    - if @milestone.closed?
-      %span.state-label.state-label-red Closed
-    - elsif @milestone.expired?
-      %span.state-label.state-label-red Expired
-    - else
-      %span.state-label.state-label-green Open
+    %span.state-label
+      - if @milestone.closed?
+        Closed
+      - elsif @milestone.expired?
+        Expired
+      - else
+        Open
 
   %h4.title
     = gfm escape_once(@milestone.title)