Small restyle of issue and merge request pages

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

8 files changed, 68 insertions, 37 deletions

diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 6d3b4b1e73a..2447ee21898 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -22,6 +22,10 @@ $brand-info:     $gl-info;
 $brand-warning:  $gl-warning;
 $brand-danger:   $gl-danger;
 
+$border-radius-base:        3px !default;
+$border-radius-large:       5px !default;
+$border-radius-small:       2px !default;
+
 
 //== Scaffolding
 //
diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss
index abf4657dd58..27a4c4db8c8 100644
--- a/app/assets/stylesheets/generic/blocks.scss
+++ b/app/assets/stylesheets/generic/blocks.scss
@@ -27,6 +27,11 @@
   border-bottom: 1px solid #e7e9ed;
   color: $gl-gray;
 
+  &.middle-block {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   &.second-block {
     margin-top: -1px;
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index 869e586839b..b1fb87a6830 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -5,10 +5,13 @@
  */
 
 .issue-box {
+  @include border-radius(3px);
+
   display: inline-block;
-  padding: 4px 13px;
+  padding: 10px $gl-padding;
   font-weight: normal;
-  margin-right: 5px;
+  margin-right: 10px;
+  font-size: $gl-font-size;
 
   &.issue-box-closed {
     background-color: $gl-danger;
@@ -21,7 +24,7 @@
   }
 
   &.issue-box-open {
-    background-color: $gl-success;
+    background-color: #019875;
     color: #FFF;
   }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 2d32d82e107..afcbc2d9976 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -56,3 +56,22 @@
     text-align: left;
   }
 }
+
+.issuable-details {
+  .page-title {
+    margin-top: -15px;
+    padding: 10px 0;
+    margin-bottom: 0;
+    color: $gl-gray;
+    font-size: 16px;
+
+    .author {
+      color: $gl-gray;
+    }
+
+    .issue-id {
+      font-size: 19px;
+      color: $gl-text-color;
+    }
+  }
+}
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index e7b14e7582c..6ed472f2d98 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -1,15 +1,16 @@
 - page_title "#{@issue.title} (##{@issue.iid})", "Issues"
 .issue
   .issue-details.issuable-details
-    %h4.page-title
+    .page-title
       .issue-box{ class: issue_box_class(@issue) }
         - if @issue.closed?
           Closed
         - else
           Open
-      Issue ##{@issue.iid}
-      %small.creator
-        · created by #{link_to_member(@project, @issue.author)}
+      %span.issue-id Issue ##{@issue.iid}
+      %span.creator
+        · created by #{link_to_member(@project, @issue.author, size: 24)}
+        ·
         = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
         - if @issue.updated_at != @issue.created_at
           %span
@@ -32,18 +33,17 @@
             = icon('pencil-square-o')
             Edit
 
-    %hr
-    %h2.issue-title
-      = gfm escape_once(@issue.title)
-    %div
-      - if @issue.description.present?
-        .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
-          .wiki
-            = preserve do
-              = markdown(@issue.description)
-          %textarea.hidden.js-task-list-field
-            = @issue.description
+    .gray-content-block.middle-block
+      %h2.issue-title
+        = gfm escape_once(@issue.title)
+      %div
+        - if @issue.description.present?
+          .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
+            .wiki
+              = preserve do
+                = markdown(@issue.description)
+            %textarea.hidden.js-task-list-field
+              = @issue.description
 
-    %hr
-  .issue-discussion
+  .issue-discussion.prepend-top-default
     = render 'projects/issues/discussion'
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index ec1838eb489..516e5e3ffc0 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -5,10 +5,8 @@
 .merge-request{'data-url' => merge_request_path(@merge_request)}
   .merge-request-details.issuable-details
     = render "projects/merge_requests/show/mr_title"
-    %hr
     = render "projects/merge_requests/show/mr_box"
-    %hr
-    .append-bottom-20.mr-source-target
+    .append-bottom-20.mr-source-target.prepend-top-default
       - if @merge_request.open?
         .pull-right
           - if @merge_request.source_branch_exists?
diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml
index e3cd4346872..b4f62a75890 100644
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@@ -1,11 +1,12 @@
-%h2.issue-title
-  = gfm escape_once(@merge_request.title)
+.gray-content-block.middle-block
+  %h2.issue-title
+    = gfm escape_once(@merge_request.title)
 
-%div
-  - if @merge_request.description.present?
-    .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''}
-      .wiki
-        = preserve do
-          = markdown(@merge_request.description)
-      %textarea.hidden.js-task-list-field
-        = @merge_request.description
+  %div
+    - if @merge_request.description.present?
+      .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''}
+        .wiki
+          = preserve do
+            = markdown(@merge_request.description)
+        %textarea.hidden.js-task-list-field
+          = @merge_request.description
diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml
index 9a1eb36fc88..2bf9cd597a4 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,10 +1,11 @@
-%h4.page-title
+.page-title
   .issue-box{ class: issue_box_class(@merge_request) }
     = @merge_request.state_human_name
-  Merge Request ##{@merge_request.iid}
-  %small.creator
+  %span.issue-id Merge Request ##{@merge_request.iid}
+  %span.creator
+    ·
+    created by #{link_to_member(@project, @merge_request.author, size: 24)}
     ·
-    created by #{link_to_member(@project, @merge_request.author)}
     = time_ago_with_tooltip(@merge_request.created_at)
     - if @merge_request.updated_at != @merge_request.created_at
       %span