Diff design updates

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%);
+}

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;
     }
 

app/assets/stylesheets/framework/timeline.scss

@@ -14,10 +14,6 @@
       background: $row-hover;
     }
 
-    &:last-child {
-      border-bottom: none;
-    }
-
     .avatar {
       margin-right: 15px;
     }

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
  */
@@ -200,6 +201,13 @@ $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
  */
 $award-emoji-menu-bg: #fff;

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 {

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 {

app/assets/stylesheets/pages/note_form.scss

 /**
  * 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;
   }
 

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;
+      }
+    }
   }
 }
 

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
 

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')

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

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,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')
           \
 

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)

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
 

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