Merge branch '14400-diff-redesign' into 'master'

Diff redesign

Fixes #14400 
Fixes #13500 

![diffs_redesign](/uploads/16da9557e497114d886ef5ece2f306b3/diffs_redesign.gif)

See merge request !3476

5 files changed, 9 insertions, 18 deletions

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/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 698ed02ea0e..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
           →
-          %strong.filename.new
+          .filename.new
             = new_path
         - else
-          %strong
+          %span
             = diff_file.new_path
           - if diff_file.deleted_file
             deleted
@@ -28,8 +28,8 @@
 
       .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')
+          = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file" do
+            = icon('comment')
           \
 
         - if editable_diff?(diff_file)
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
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
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