From b59d4e861c5e7e9d9113afbadeef6528be321a79 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 31 Mar 2016 10:56:22 -0500
Subject: Change reply button to text field

---
 app/assets/stylesheets/pages/note_form.scss | 18 ++++++++++++++++--
 app/helpers/notes_helper.rb                 |  8 +++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index a909776b437..9aec2c60e15 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -5,6 +5,11 @@
   @extend .btn-primary;
   margin: 10px $gl-padding;
 }
+
+.comment-btn {
+  @extend .btn-create;
+}
+
 .diff-file .diff-content {
   tr.line_holder:hover > td .line_note_link {
     opacity: 1.0;
@@ -118,8 +123,8 @@
   }
 
   .discussion-reply-holder {
-    background: $background-color;
-    border-top: 1px solid $border-color;
+    background-color: $white-light;
+    padding: 10px 16px;
   }
 }
 
@@ -183,3 +188,12 @@
     float: left;
   }
 }
+
+.note-reply-field {
+  background-color: $background-color;
+
+  &:focus {
+    box-shadow: none;
+    border-color: $border-color;
+  }
+}
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 698f90cb27a..3363001fcdb 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -69,10 +69,8 @@ module NotesHelper
       line_type:     line_type
     }
 
-    button_tag class: 'btn btn-nr reply-btn js-discussion-reply-button',
-               data: data, title: 'Add a reply' do
-      link_text = icon('comment')
-      link_text << ' Reply'
-    end
+    text_field_tag 'reply-field', nil, placeholder: 'Reply...',
+                    class: 'form-control note-reply-field js-discussion-reply-button',
+                    data: data
   end
 end
-- 
cgit v1.2.1


From c80c1da7802c372607f5a025ef2f3e25202734c3 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 31 Mar 2016 12:13:25 -0500
Subject: Move diff colors to variables

---
 app/assets/stylesheets/framework/variables.scss    | 12 +++++++++++-
 .../stylesheets/highlight/solarized_light.scss     |  4 ++--
 app/assets/stylesheets/highlight/white.scss        | 22 +++++++++++-----------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8d3ad934a50..9f231429653 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -108,6 +108,8 @@ $red-light: #e52c5a;
 $red-normal: #d22852;
 $red-dark: darken($red-normal, 5%);
 
+$black-transparent: rgba(0, 0, 0, 0.3);
+
 $border-white-light: #f1f2f4;
 $border-white-normal: #d6dae2;
 $border-white-dark: #c6cacf;
@@ -158,7 +160,15 @@ $gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
  */
 $added: #63c363;
 $deleted: #f77;
-
+$line-added: #ebfdf0;
+$line-added-dark: #a6f3a6;
+$line-removed: #ffecec;
+$line-removed-dark: #f8cbcb;
+$line-number-old: #fdd;
+$line-number-old-border: #f1c0c0;
+$line-number-new: #dbffdb;
+$line-number-new-border: #c1e9c1;
+$match-line: #fafafa;
 /*
  * Fonts
  */
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index b90c95c62d1..c482a1258f7 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: rgba(0, 0, 0, 0.3);
+    color: $black-transparent;
   }
 
   // Code itself
@@ -30,7 +30,7 @@
     }
 
     .line_content.match {
-      color: rgba(0, 0, 0, 0.3);
+      color: $black-transparent;
       background: rgba(255, 255, 255, 0.4);
     }
   }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 8c1b0cd84ec..80918970a75 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: rgba(0, 0, 0, 0.3);
+    color: $black-transparent;
   }
 
   // Code itself
@@ -23,36 +23,36 @@
   .line_holder {
     .diff-line-num {
       &.old {
-        background: #fdd;
-        border-color: #f1c0c0;
+        background-color: $line-number-old;
+        border-color: $line-number-old-border;
       }
 
       &.new {
-        background: #dbffdb;
-        border-color: #c1e9c1;
+        background-color: $line-number-new;
+        border-color: $line-number-new-border;
       }
     }
 
     .line_content {
       &.old {
-        background: #ffecec;
+        background: $line-removed;
 
         span.idiff {
-          background-color: #f8cbcb;
+          background-color: $line-removed-dark;
         }
       }
 
       &.new {
-        background: #eaffea;
+        background-color: $line-added;
 
         span.idiff {
-          background-color: #a6f3a6;
+          background-color: $line-added-dark;
         }
       }
 
       &.match {
-        color: rgba(0, 0, 0, 0.3);
-        background: #fafafa;
+        color: $black-transparent;
+        background: $match-line;
       }
     }
   }
-- 
cgit v1.2.1


From de63de18d77624d49b6a9d150f2581be0ac55e00 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 31 Mar 2016 13:37:27 -0500
Subject: Update diff colors and icons

---
 app/assets/stylesheets/framework/variables.scss | 14 ++++++--------
 app/assets/stylesheets/highlight/white.scss     |  4 ++--
 app/assets/stylesheets/pages/notes.scss         | 15 +++++++++++++++
 app/helpers/notes_helper.rb                     |  3 ++-
 app/views/projects/diffs/_file.html.haml        |  2 +-
 app/views/projects/notes/_note.html.haml        |  4 ++--
 spec/features/notes_on_merge_requests_spec.rb   |  2 +-
 7 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9f231429653..49f62c8850a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -160,14 +160,12 @@ $gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
  */
 $added: #63c363;
 $deleted: #f77;
-$line-added: #ebfdf0;
-$line-added-dark: #a6f3a6;
-$line-removed: #ffecec;
-$line-removed-dark: #f8cbcb;
-$line-number-old: #fdd;
-$line-number-old-border: #f1c0c0;
-$line-number-new: #dbffdb;
-$line-number-new-border: #c1e9c1;
+$line-added: #ecfdf0;
+$line-added-dark: #c7f0d2;
+$line-removed: #fbe9eb;
+$line-removed-dark: #fac5cd;
+$line-number-old: #f9d7dc;
+$line-number-new: #ddfbe6;
 $match-line: #fafafa;
 /*
  * Fonts
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 80918970a75..ea9bc98079a 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -24,12 +24,12 @@
     .diff-line-num {
       &.old {
         background-color: $line-number-old;
-        border-color: $line-number-old-border;
+        border-color: $line-removed-dark;
       }
 
       &.new {
         background-color: $line-number-new;
-        border-color: $line-number-new-border;
+        border-color: $line-added-dark;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index aca86457c70..d9dc7820184 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -212,6 +212,21 @@ ul.notes {
     top: 0;
     font-size: 16px;
   }
+
+  .js-note-delete {
+    &:hover {
+      @extend .cgray;
+      &.danger { @extend .cred; }
+    }
+  }
+
+  .js-note-edit {
+    i {
+      &:hover {
+        color: $gl-link-color;
+      }
+    }
+  }
 }
 
 .discussion-toggle-button {
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 3363001fcdb..681df89836d 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -69,7 +69,8 @@ module NotesHelper
       line_type:     line_type
     }
 
-    text_field_tag 'reply-field', nil, placeholder: 'Reply...',
+    text_field_tag 'reply-field', nil,
+                    placeholder: 'Reply...',
                     class: 'form-control note-reply-field js-discussion-reply-button',
                     data: data
   end
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 698ed02ea0e..4d5461afeb7 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -29,7 +29,7 @@
       .file-actions.hidden-xs
         - if blob_text_viewable?(blob)
           = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file" do
-            = icon('comments')
+            = icon('comment')
           \
 
         - if editable_diff?(diff_file)
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index a681d6dece4..5c42423541e 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -17,8 +17,8 @@
               %span.note-role
                 = access
             = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
-              = icon('pencil-square-o')
-            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete' do
+              = icon('pencil')
+            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
               = icon('trash-o')
       .note-body{class: note_editable?(note) ? 'js-task-list-container' : ''}
         .note-text
diff --git a/spec/features/notes_on_merge_requests_spec.rb b/spec/features/notes_on_merge_requests_spec.rb
index 70d0864783d..9b2351c15dc 100644
--- a/spec/features/notes_on_merge_requests_spec.rb
+++ b/spec/features/notes_on_merge_requests_spec.rb
@@ -210,7 +210,7 @@ describe 'Comments', feature: true do
           is_expected.to have_content('Another comment on line 10')
           is_expected.to have_css('.notes_holder')
           is_expected.to have_css('.notes_holder .note', count: 1)
-          is_expected.to have_button('Reply')
+          is_expected.to have_css('.note-reply-field')
         end
       end
     end
-- 
cgit v1.2.1


From 87b3c73ea560d6091a17e7b759864b90911f5f1c Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 31 Mar 2016 16:34:21 -0500
Subject: Update diff_comments tests

---
 features/project/commits/diff_comments.feature | 6 +++---
 features/steps/shared/diff_note.rb             | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/features/project/commits/diff_comments.feature b/features/project/commits/diff_comments.feature
index 2bde4c8a99b..fdaa9e7a473 100644
--- a/features/project/commits/diff_comments.feature
+++ b/features/project/commits/diff_comments.feature
@@ -57,9 +57,9 @@ Feature: Project Commits Diff Comments
     Then I should see two separate previews
 
   @javascript
-  Scenario: I have a reply button in discussions
+  Scenario: I have can reply in discussions
     Given I leave a diff comment like "Typo, please fix"
-    Then I should see a discussion reply button
+    Then I should see a discussion reply text field
 
   @javascript
   Scenario: I can preview with text
@@ -83,7 +83,7 @@ Feature: Project Commits Diff Comments
     Given I preview a diff comment text like "Should fix it :smile:"
     And I submit the diff comment
     Then I should not see the diff comment form
-    And I should see a discussion reply button
+    And I should see a discussion reply text field
 
   @javascript
   Scenario: I can add a comment on a side-by-side commit diff (left side)
diff --git a/features/steps/shared/diff_note.rb b/features/steps/shared/diff_note.rb
index 32c3e99f450..05e5ee151ad 100644
--- a/features/steps/shared/diff_note.rb
+++ b/features/steps/shared/diff_note.rb
@@ -153,9 +153,9 @@ module SharedDiffNote
     end
   end
 
-  step 'I should see a discussion reply button' do
+  step 'I should see a discussion reply text field' do
     page.within(diff_file_selector) do
-      expect(page).to have_button('Reply')
+      expect(page).to have_css('.note-reply-field')
     end
   end
 
-- 
cgit v1.2.1


From 3cfeb3755828871813cd12c771fa7efddf67edb5 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Fri, 1 Apr 2016 13:55:50 -0500
Subject: Merge conflict fixes

---
 app/assets/stylesheets/pages/notes.scss | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index d9dc7820184..93fcb81321a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -194,6 +194,21 @@ ul.notes {
   float: right;
   margin-left: 10px;
   color: $notes-action-color;
+
+  .js-note-delete {
+    &:hover {
+      @extend .cgray;
+      &.danger { @extend .cred; }
+    }
+  }
+
+  .js-note-edit {
+    i {
+      &:hover {
+        color: $gl-link-color;
+      }
+    }
+  }
 }
 
 .note-action-button,
@@ -212,21 +227,6 @@ ul.notes {
     top: 0;
     font-size: 16px;
   }
-
-  .js-note-delete {
-    &:hover {
-      @extend .cgray;
-      &.danger { @extend .cred; }
-    }
-  }
-
-  .js-note-edit {
-    i {
-      &:hover {
-        color: $gl-link-color;
-      }
-    }
-  }
 }
 
 .discussion-toggle-button {
-- 
cgit v1.2.1


From dab4ac54b691f1c832b1fe444859c3183a231411 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Fri, 1 Apr 2016 14:27:39 -0500
Subject: Diff design updates

---
 app/assets/stylesheets/framework/buttons.scss   | 29 ++++++++++++++--
 app/assets/stylesheets/framework/files.scss     |  5 +--
 app/assets/stylesheets/framework/timeline.scss  |  4 ---
 app/assets/stylesheets/framework/variables.scss | 18 +++++++---
 app/assets/stylesheets/highlight/white.scss     |  4 +--
 app/assets/stylesheets/pages/diff.scss          |  8 +++++
 app/assets/stylesheets/pages/note_form.scss     |  6 ----
 app/assets/stylesheets/pages/notes.scss         | 44 ++++++++++---------------
 app/helpers/blob_helper.rb                      |  6 ++--
 app/helpers/commits_helper.rb                   |  2 +-
 app/helpers/notes_helper.rb                     |  8 ++---
 app/views/projects/diffs/_file.html.haml        | 10 +++---
 features/project/commits/diff_comments.feature  |  7 ++--
 features/steps/shared/diff_note.rb              |  4 +--
 spec/features/notes_on_merge_requests_spec.rb   |  2 +-
 15 files changed, 90 insertions(+), 67 deletions(-)

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 657c5f033c7..e8c0172680d 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -7,6 +7,7 @@
   &:focus,
   &:active {
     outline: none;
+    background-color: $btn-active-gray;
     @include box-shadow($gl-btn-active-background);
   }
 }
@@ -27,7 +28,8 @@
     color: $color;
   }
 
-  &:active {
+  &:active,
+  &.active {
     @include box-shadow ($gl-btn-active-background);
 
     background-color: $dark;
@@ -61,7 +63,7 @@
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236);
+  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
 }
 
 .btn {
@@ -218,3 +220,26 @@
     margin-right: 5px;
   }
 }
+
+.btn-text-field {
+  width: 100%;
+  text-align: left;
+  padding: 6px 16px;
+  border-color: $border-color;
+  color: $btn-placeholder-gray;
+  background-color: $background-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    cursor: text;
+    box-shadow: none;
+    border-color: $border-color;
+    color: $btn-placeholder-gray;
+    background-color: $background-color;
+  }
+}
+
+.btn-file-option {
+  background: linear-gradient(180deg, $white-light 25%, $gray-light 100%);
+}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index b15f4e7bd5e..a7958467a14 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -15,12 +15,13 @@
 
   .file-title {
     position: relative;
-    background: $background-color;
+    background-color: $background-color;
     border-bottom: 1px solid $border-color;
     margin: 0;
     text-align: left;
     padding: 10px $gl-padding;
     word-wrap: break-word;
+    border-radius: 3px 3px 0px 0px;
 
     .file-actions {
       float: right;
@@ -49,7 +50,7 @@
       }
     }
 
-    a {
+    a:not(.btn) {
       color: $gl-dark-link-color;
     }
 
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index aa244fe548d..b91f2f6f898 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -14,10 +14,6 @@
       background: $row-hover;
     }
 
-    &:last-child {
-      border-bottom: none;
-    }
-
     .avatar {
       margin-right: 15px;
     }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 49f62c8850a..185137a4012 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -10,10 +10,10 @@ $gutter_inner_width: 258px;
 /*
  * UI elements
  */
-$border-color:       #efeff1;
+$border-color:       #e5e5e5;
 $focus-border-color: #3aabf0;
 $table-border-color: #eef0f2;
-$background-color:   #faf9f9;
+$background-color:   #fafafa;
 
 /*
  * Text
@@ -81,7 +81,7 @@ $provider-btn-not-active-color: #4688f1;
 
 $white-light: #fff;
 $white-normal: #ededed;
-$white-dark: #ededed;
+$white-dark: #ECECEC;
 
 $gray-light: #faf9f9;
 $gray-normal: #f5f5f5;
@@ -152,8 +152,8 @@ $gl-success: $green-normal;
 $gl-info: $blue-normal;
 $gl-warning: $orange-normal;
 $gl-danger: $red-normal;
-$gl-btn-active-background: rgba(0, 0, 0, 0.12);
-$gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
+$gl-btn-active-background: rgba(0, 0, 0, 0.16);
+$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 
 /*
  * Commit Diff Colors
@@ -167,6 +167,7 @@ $line-removed-dark: #fac5cd;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $match-line: #fafafa;
+$table-border-gray: #f0f0f0;
 /*
  * Fonts
  */
@@ -199,6 +200,13 @@ $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
 $dropdown-toggle-icon-color: #c4c4c4;
 $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 
+/*
+* Buttons
+*/
+$btn-active-gray: #ECECEC;
+$btn-placeholder-gray: #C7C7C7;
+$btn-white-active: #848484;
+
 /*
  *  Award emoji
  */
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index ea9bc98079a..d68a28bbfd5 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -6,12 +6,12 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: $black-transparent;
+    color: #8f8f8f;
   }
 
   // Code itself
   pre.code, .diff-line-num {
-    border-color: $border-color;
+    border-color: $table-border-gray;
   }
 
   &, pre.code, .line_holder .line_content {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 97f4485beb8..5a99fffb540 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -2,6 +2,7 @@
 .diff-file {
   border: 1px solid $border-color;
   margin-bottom: $gl-padding;
+  border-radius: 3px;
 
   .diff-header {
     position: relative;
@@ -31,6 +32,7 @@
     overflow-y: hidden;
     background: #fff;
     color: #333;
+    border-radius: 0 0 3px 3px;
 
     .unfold {
       cursor: pointer;
@@ -325,6 +327,12 @@
   float: right;
 }
 
+.diffs {
+  .content-block {
+    border-bottom: none;
+  }
+}
+
 // Mobile
 @media (max-width: 480px) {
   .diff-title {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 9aec2c60e15..a6427f1912e 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -1,11 +1,6 @@
 /**
  * Note Form
  */
-.reply-btn {
-  @extend .btn-primary;
-  margin: 10px $gl-padding;
-}
-
 .comment-btn {
   @extend .btn-create;
 }
@@ -118,7 +113,6 @@
 .discussion-body,
 .diff-file {
   .notes .note {
-    border-color: #ddd;
     padding: 10px 15px;
   }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 93fcb81321a..7295fe51121 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -58,6 +58,7 @@ ul.notes {
   .note {
     display: block;
     position: relative;
+    border-bottom: 1px solid $table-border-gray;
 
     &.is-editting {
       .note-header,
@@ -117,9 +118,6 @@ ul.notes {
       padding-bottom: 3px;
     }
 
-    &:last-child {
-      border-bottom: 1px solid $border-color;
-    }
   }
 }
 
@@ -137,14 +135,14 @@ ul.notes {
   font-family: $regular_font;
 
   td {
-    border: 1px solid #ddd;
+    border: 1px solid $table-border-gray;
     border-left: none;
 
     &.notes_line {
       vertical-align: middle;
       text-align: center;
       padding: 10px 0;
-      background: #fff;
+      background: $background-color;
       color: $text-color;
     }
     &.notes_line2 {
@@ -175,9 +173,6 @@ ul.notes {
     }
   }
 
-  .author_link {
-    font-weight: 600;
-  }
 }
 
 .note-headline-light,
@@ -194,21 +189,6 @@ ul.notes {
   float: right;
   margin-left: 10px;
   color: $notes-action-color;
-
-  .js-note-delete {
-    &:hover {
-      @extend .cgray;
-      &.danger { @extend .cred; }
-    }
-  }
-
-  .js-note-edit {
-    i {
-      &:hover {
-        color: $gl-link-color;
-      }
-    }
-  }
 }
 
 .note-action-button,
@@ -218,14 +198,26 @@ ul.notes {
   line-height: 24px;
 
   .fa {
+    color: $notes-action-color;
     position: relative;
     top: 1px;
     font-size: 17px;
   }
 
-  .fa-trash-o {
-    top: 0;
-    font-size: 16px;
+  &.js-note-delete {
+    i {
+      &:hover {
+        color: $gl-text-red;
+      }
+    }
+  }
+
+  &.js-note-edit {
+    i {
+      &:hover {
+        color: $gl-link-color;
+      }
+    }
   }
 }
 
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 820d69c230b..9e59a295fc4 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -27,9 +27,9 @@ module BlobHelper
                                      link_opts)
 
     if !on_top_of_branch?(project, ref)
-      button_tag "Edit", class: "btn btn-default disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
+      button_tag "Edit", class: "btn disabled has-tooltip btn-file-option", title: "You can only edit files when you are on a branch", data: { container: 'body' }
     elsif can_edit_blob?(blob, project, ref)
-      link_to "Edit", edit_path, class: 'btn'
+      link_to "Edit", edit_path, class: 'btn btn-file-option'
     elsif can?(current_user, :fork_project, project)
       continue_params = {
         to:     edit_path,
@@ -38,7 +38,7 @@ module BlobHelper
       }
       fork_path = namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params)
 
-      link_to "Edit", fork_path, class: 'btn', method: :post
+      link_to "Edit", fork_path, class: 'btn btn-file-option', method: :post
     end
   end
 
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index bde0799f3de..de508036888 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -197,7 +197,7 @@ module CommitsHelper
     link_to(
       namespace_project_blob_path(project.namespace, project,
                                   tree_join(commit_sha, diff.new_path)),
-      class: 'btn view-file js-view-file'
+      class: 'btn view-file js-view-file btn-file-option'
     ) do
       raw('View file @') + content_tag(:span, commit_sha[0..6],
                                        class: 'commit-short-id')
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 681df89836d..d86954c105e 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -69,9 +69,9 @@ module NotesHelper
       line_type:     line_type
     }
 
-    text_field_tag 'reply-field', nil,
-                    placeholder: 'Reply...',
-                    class: 'form-control note-reply-field js-discussion-reply-button',
-                    data: data
+    button_tag class: 'btn btn-text-field js-discussion-reply-button',
+               data: data, title: 'Add a reply' do
+      link_text = 'Reply...'
+    end
   end
 end
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 4d5461afeb7..83a8d7ae9bf 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -3,7 +3,7 @@
     - if diff_file.diff.submodule?
       %span
         = icon('archive fw')
-        %strong
+        %span
           = submodule_link(blob, @commit.id, project.repository)
     - else
       = blob_icon blob.mode, blob.name
@@ -11,13 +11,13 @@
       = link_to "#diff-#{i}" do
         - if diff_file.renamed_file
           - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
-          %strong.filename.old
+          .filename.old
             = old_path
           &rarr;
-          %strong.filename.new
+          .filename.new
             = new_path
         - else
-          %strong
+          %span
             = diff_file.new_path
           - if diff_file.deleted_file
             deleted
@@ -28,7 +28,7 @@
 
       .file-actions.hidden-xs
         - if blob_text_viewable?(blob)
-          = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file" do
+          = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file" do
             = icon('comment')
           \
 
diff --git a/features/project/commits/diff_comments.feature b/features/project/commits/diff_comments.feature
index fdaa9e7a473..1dda2ff8a6d 100644
--- a/features/project/commits/diff_comments.feature
+++ b/features/project/commits/diff_comments.feature
@@ -57,10 +57,9 @@ Feature: Project Commits Diff Comments
     Then I should see two separate previews
 
   @javascript
-  Scenario: I have can reply in discussions
+  Scenario: I have a reply button in discussions
     Given I leave a diff comment like "Typo, please fix"
-    Then I should see a discussion reply text field
-
+    Then I should see a discussion reply button
   @javascript
   Scenario: I can preview with text
     Given I open a diff comment form
@@ -83,7 +82,7 @@ Feature: Project Commits Diff Comments
     Given I preview a diff comment text like "Should fix it :smile:"
     And I submit the diff comment
     Then I should not see the diff comment form
-    And I should see a discussion reply text field
+    And I should see a discussion reply button
 
   @javascript
   Scenario: I can add a comment on a side-by-side commit diff (left side)
diff --git a/features/steps/shared/diff_note.rb b/features/steps/shared/diff_note.rb
index 05e5ee151ad..1448c3f44cc 100644
--- a/features/steps/shared/diff_note.rb
+++ b/features/steps/shared/diff_note.rb
@@ -153,9 +153,9 @@ module SharedDiffNote
     end
   end
 
-  step 'I should see a discussion reply text field' do
+  step 'I should see a discussion reply button' do
     page.within(diff_file_selector) do
-      expect(page).to have_css('.note-reply-field')
+      expect(page).to have_button('Reply...')
     end
   end
 
diff --git a/spec/features/notes_on_merge_requests_spec.rb b/spec/features/notes_on_merge_requests_spec.rb
index 9b2351c15dc..5f855ccc701 100644
--- a/spec/features/notes_on_merge_requests_spec.rb
+++ b/spec/features/notes_on_merge_requests_spec.rb
@@ -210,7 +210,7 @@ describe 'Comments', feature: true do
           is_expected.to have_content('Another comment on line 10')
           is_expected.to have_css('.notes_holder')
           is_expected.to have_css('.notes_holder .note', count: 1)
-          is_expected.to have_css('.note-reply-field')
+          is_expected.to have_button('Reply...')
         end
       end
     end
-- 
cgit v1.2.1


From 04e798a5154b2b2a86288f51081da8495f96bee5 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 6 Apr 2016 15:00:11 -0700
Subject: Remove comment count & icon

---
 app/views/projects/notes/_diff_notes_with_reply.html.haml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/views/projects/notes/_diff_notes_with_reply.html.haml b/app/views/projects/notes/_diff_notes_with_reply.html.haml
index 11f9859a90f..39be072855a 100644
--- a/app/views/projects/notes/_diff_notes_with_reply.html.haml
+++ b/app/views/projects/notes/_diff_notes_with_reply.html.haml
@@ -3,9 +3,6 @@
 - if !defined?(line) || line == note.diff_line
   %tr.notes_holder
     %td.notes_line{ colspan: 2 }
-      %span.discussion-notes-count
-        %i.fa.fa-comment
-        = notes.count
     %td.notes_content
       %ul.notes{ data: { discussion_id: note.discussion_id } }
         = render notes
-- 
cgit v1.2.1


From 6ee2069768279a9f9e03ae20f10b906a807a5eb7 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 6 Apr 2016 18:33:00 -0700
Subject: Fix lint errors

---
 app/assets/stylesheets/framework/files.scss     | 2 +-
 app/assets/stylesheets/framework/variables.scss | 6 +++---
 app/helpers/notes_helper.rb                     | 6 ++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index a7958467a14..789df42fb66 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -21,7 +21,7 @@
     text-align: left;
     padding: 10px $gl-padding;
     word-wrap: break-word;
-    border-radius: 3px 3px 0px 0px;
+    border-radius: 3px 3px 0 0;
 
     .file-actions {
       float: right;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 185137a4012..1ebbd9b0e57 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -81,7 +81,7 @@ $provider-btn-not-active-color: #4688f1;
 
 $white-light: #fff;
 $white-normal: #ededed;
-$white-dark: #ECECEC;
+$white-dark: #ececec;
 
 $gray-light: #faf9f9;
 $gray-normal: #f5f5f5;
@@ -203,8 +203,8 @@ $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 /*
 * Buttons
 */
-$btn-active-gray: #ECECEC;
-$btn-placeholder-gray: #C7C7C7;
+$btn-active-gray: #ececec;
+$btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
 
 /*
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index d86954c105e..95072b5373f 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -69,9 +69,7 @@ module NotesHelper
       line_type:     line_type
     }
 
-    button_tag class: 'btn btn-text-field js-discussion-reply-button',
-               data: data, title: 'Add a reply' do
-      link_text = 'Reply...'
-    end
+    button_tag 'Reply...', class: 'btn btn-text-field js-discussion-reply-button',
+                           data: data, title: 'Add a reply'
   end
 end
-- 
cgit v1.2.1


From d76878b96040c8ae4752600aceb30200fa0049a0 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 7 Apr 2016 12:36:53 -0700
Subject: Diff touch ups

---
 app/assets/stylesheets/highlight/white.scss    | 2 +-
 app/assets/stylesheets/pages/diff.scss         | 5 +++++
 app/assets/stylesheets/pages/note_form.scss    | 9 ---------
 app/views/projects/diffs/_diffs.html.haml      | 2 +-
 features/project/commits/diff_comments.feature | 1 +
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index d68a28bbfd5..28331f59754 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -6,7 +6,7 @@
   }
 
   .diff-line-num, .diff-line-num a {
-    color: #8f8f8f;
+    color: $black-transparent;
   }
 
   // Code itself
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5a99fffb540..d0855f66911 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -11,6 +11,7 @@
     padding: 10px 16px;
     color: #555;
     z-index: 10;
+    border-radius: 3px 3px 0 0;
 
     .diff-title {
       font-family: $monospace_font;
@@ -333,6 +334,10 @@
   }
 }
 
+.files-changed {
+  border-bottom: none;
+}
+
 // Mobile
 @media (max-width: 480px) {
   .diff-title {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index a6427f1912e..4d4d508396d 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -182,12 +182,3 @@
     float: left;
   }
 }
-
-.note-reply-field {
-  background-color: $background-color;
-
-  &:focus {
-    box-shadow: none;
-    border-color: $border-color;
-  }
-}
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 2e1a37aa06d..eaab99973a4 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -3,7 +3,7 @@
 
 - diff_files = safe_diff_files(diffs, diff_refs)
 
-.content-block.oneline-block
+.content-block.oneline-block.files-changed
   .inline-parallel-buttons
     .btn-group
       = inline_diff_btn
diff --git a/features/project/commits/diff_comments.feature b/features/project/commits/diff_comments.feature
index 1dda2ff8a6d..2bde4c8a99b 100644
--- a/features/project/commits/diff_comments.feature
+++ b/features/project/commits/diff_comments.feature
@@ -60,6 +60,7 @@ Feature: Project Commits Diff Comments
   Scenario: I have a reply button in discussions
     Given I leave a diff comment like "Typo, please fix"
     Then I should see a discussion reply button
+
   @javascript
   Scenario: I can preview with text
     Given I open a diff comment form
-- 
cgit v1.2.1


From e65bccfcc3956a13ffc04f0a72226afe97b6b69d Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Thu, 7 Apr 2016 15:32:54 -0700
Subject: Remove comment count & icon from side by side view

---
 app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml b/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
index bb761ed2f94..f8aa5e2fa7d 100644
--- a/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
+++ b/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
@@ -4,9 +4,6 @@
 %tr.notes_holder
   - if note1
     %td.notes_line.old
-      %span.btn.disabled
-        %i.fa.fa-comment
-        = notes_left.count
     %td.notes_content.parallel.old
       %ul.notes{ data: { discussion_id: note1.discussion_id } }
         = render notes_left
@@ -19,9 +16,6 @@
 
   - if note2
     %td.notes_line.new
-      %span.btn.disabled
-        %i.fa.fa-comment
-        = notes_right.count
     %td.notes_content.parallel.new
       %ul.notes{ data: { discussion_id: note2.discussion_id } }
         = render notes_right
-- 
cgit v1.2.1