16 files changed, 52 insertions, 90 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 22f38024f93..b6c39ae5f71 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -6,6 +6,8 @@ v 7.10.0 (unreleased)
   - Add a service to support external wikis (Hannes Rosenögger)
   - List new commits for newly pushed branch in activity view.
   - Add changelog, license and contribution guide links to project sidebar.
+  - Improve diff UI
+  - Identical look of selectboxes in UI
 
 v 7.9.0 (unreleased)
   - Add HipChat integration documentation (Stan Hu)
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index c7acde2afe5..fda142293bc 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -169,9 +169,7 @@ $ ->
 
   # Show/hide comments on diff
   $("body").on "click", ".js-toggle-diff-comments", (e) ->
-    $(@).find('i').
-      toggleClass('fa fa-chevron-down').
-      toggleClass('fa fa-chevron-up')
+    $(@).toggleClass('active')
     $(@).closest(".diff-file").find(".notes_holder").toggle()
     e.preventDefault()
 
diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss
index c13a685a528..7557f411111 100644
--- a/app/assets/stylesheets/generic/selects.scss
+++ b/app/assets/stylesheets/generic/selects.scss
@@ -46,55 +46,13 @@
   }
 }
 
-select {
-  &.select2 {
-    width: 100px;
-  }
-
-  &.select2-sm {
-    width: 100px;
-  }
-}
-
-@media (min-width: $screen-sm-min) {
-  select {
-    &.select2 {
-      width: 150px;
-    }
-    &.select2-sm {
-      width: 120px;
-    }
-  }
+.select2-container {
+  width: 100% !important;
 }
 
-/* Medium devices (desktops, 992px and up) */
-@media (min-width: $screen-md-min) {
-  select {
-    &.select2 {
-      width: 170px;
-    }
-    &.select2-sm {
-      width: 140px;
-    }
-  }
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: $screen-lg-min) {
-  select {
-    &.select2 {
-      width: 200px;
-    }
-    &.select2-sm {
-      width: 150px;
-    }
-  }
-}
-
-
 /** Branch/tag selector **/
 .project-refs-form .select2-container {
-  margin-right: 10px;
+  width: 160px !important;
 }
 
 .ajax-users-dropdown, .ajax-project-users-dropdown {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index e49fe1a9dd6..2b1b747139a 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -1,6 +1,5 @@
 .new-group-member-holder {
   margin-top: 50px;
-  background: #f9f9f9;
   padding-top: 20px;
 }
 
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 4ea34cc1dac..6c1dd4f7e9f 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -59,33 +59,34 @@
   }
 }
 
-@media (min-width: 800px)  { .issues_filters select { width: 160px; }  }
-@media (min-width: 1200px) { .issues_filters select { width: 220px; }  }
+@media (min-width: 800px)  {
+  .issues_bulk_update {
+    select, .select2-container {
+      width: 120px !important;
+      display: inline-block;
+    }
+  }
+}
 
-@media (min-width: 800px)  { .issues_bulk_update .select2-container { min-width: 120px; }  }
-@media (min-width: 1200px) { .issues_bulk_update .select2-container { min-width: 160px; }  }
+@media (min-width: 1200px) {
+  .issues_bulk_update {
+    select, .select2-container {
+      width: 160px !important;
+      display: inline-block;
+    }
+  }
+}
 
 .issues_bulk_update {
   .select2-container .select2-choice {
     color: #444 !important;
-    font-weight: 500;
   }
 }
 
-#update_status {
-  width: 100px;
-}
-
 .participants {
   margin-bottom: 20px;
 }
 
-.issues_bulk_update {
-  .select2-container {
-    text-shadow: none;
-  }
-}
-
 .issue-search-form {
   margin: 0;
   height: 24px;
@@ -177,6 +178,6 @@ h2.issue-title {
   font-weight: bold;
 }
 
-.context .select2-container {
-  width: 100% !important;
+.issue-form .select2-container {
+  width: 250px !important;
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index fe5667a587f..394b59b7e4b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -194,3 +194,7 @@
     }
   }
 }
+
+.merge-request-form .select2-container {
+  width: 250px !important;
+}
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index b0e6a05fa06..57f63b52aa1 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -112,7 +112,7 @@
 
 .tree-ref-holder {
   float: left;
-  margin-right: 6px;
+  margin-right: 15px;
 
   .select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice {
     padding: 4px 12px;
diff --git a/app/views/groups/group_members/_group_member.html.haml b/app/views/groups/group_members/_group_member.html.haml
index 003025221b2..30e5faf822e 100644
--- a/app/views/groups/group_members/_group_member.html.haml
+++ b/app/views/groups/group_members/_group_member.html.haml
@@ -31,7 +31,9 @@
               %i.fa.fa-minus.fa-inverse
 
     .edit-member.hide.js-toggle-content
+      %br
       = form_for [@group, member], remote: true do |f|
-        .alert.prepend-top-20
-          = f.select :access_level, options_for_select(GroupMember.access_level_roles, member.access_level)
+        .prepend-top-10
+          = f.select :access_level, options_for_select(GroupMember.access_level_roles, member.access_level), {}, class: 'form-control'
+        .prepend-top-10
           = f.submit 'Save', class: 'btn btn-save btn-sm'
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 48d4c33ce85..1747f36dcf3 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -1,4 +1,4 @@
-.row
+.row.prepend-top-20.append-bottom-10
   .col-md-8
     = render 'projects/diffs/stats', diffs: diffs
   .col-md-4
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index a9e4d63cd98..860ab096341 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -22,9 +22,8 @@
 
       .diff-btn-group
         - if blob.text?
-          = link_to '#', class: 'js-toggle-diff-comments btn btn-sm' do
-            %i.fa.fa-chevron-down
-            Show/Hide comments
+          = link_to '#', class: 'js-toggle-diff-comments btn btn-sm active has_tooltip', title: "Toggle comments for this file" do
+            %i.fa.fa-comments
            
 
         - if @merge_request && @merge_request.source_project
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index d387ec2f75c..1625930615a 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -1,17 +1,14 @@
 .js-toggle-container
   .commit-stat-summary
     Showing
-    %strong.cdark #{pluralize(diffs.count, "changed file")}
+    = link_to '#', class: 'js-toggle-button' do
+      %strong #{pluralize(diffs.count, "changed file")}
     - if current_controller?(:commit)
       - unless @commit.has_zero_stats?
         with
         %strong.cgreen #{@commit.stats.additions} additions
         and
         %strong.cred #{@commit.stats.deletions} deletions
-     
-    = link_to '#', class: 'btn btn-sm js-toggle-button' do
-      Show diff stats
-      %i.fa.fa-chevron-down
   .file-stats.js-toggle-content.hide
     %ul.bordered-list
       - diffs.each_with_index do |diff, i|
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 2cb94d10b6f..54e3009cca2 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -18,7 +18,7 @@
   .clearfix
     .issues_bulk_update.hide
       = form_tag bulk_update_namespace_project_issues_path(@project.namespace, @project), method: :post  do
-        = select_tag('update[state_event]', options_for_select([['Open', 'reopen'], ['Closed', 'close']]), prompt: "Status")
+        = select_tag('update[state_event]', options_for_select([['Open', 'reopen'], ['Closed', 'close']]), prompt: "Status", class: 'form-control')
         = project_users_select_tag('update[assignee_id]', placeholder: 'Assignee')
         = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
         = hidden_field_tag 'update[issues_ids]', []
diff --git a/app/views/projects/project_members/_project_member.html.haml b/app/views/projects/project_members/_project_member.html.haml
index 1f31d84dd1d..a07d0762334 100644
--- a/app/views/projects/project_members/_project_member.html.haml
+++ b/app/views/projects/project_members/_project_member.html.haml
@@ -29,7 +29,9 @@
             %i.fa.fa-minus.fa-inverse
 
     .edit-member.hide.js-toggle-content
+      %br
       = form_for member, as: :project_member, url: namespace_project_project_member_path(@project.namespace, @project, member.user), remote: true do |f|
-        .alert.prepend-top-20
-          = f.select :access_level, options_for_select(ProjectMember.access_roles, member.access_level)
-          = f.submit 'Save', class: 'btn btn-save btn-sm'
+        .prepend-top-10
+          = f.select :access_level, options_for_select(ProjectMember.access_roles, member.access_level), {}, class: 'form-control'
+        .prepend-top-10
+          = f.submit 'Save', class: 'btn btn-save'
diff --git a/app/views/projects/protected_branches/index.html.haml b/app/views/projects/protected_branches/index.html.haml
index cfe28084170..4db71ce8ff9 100644
--- a/app/views/projects/protected_branches/index.html.haml
+++ b/app/views/projects/protected_branches/index.html.haml
@@ -23,12 +23,12 @@
       .col-sm-10
         = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: "Select branch"}, {class: "select2"})
     .form-group
-      = f.label :developers_can_push, class: 'control-label' do
-        Developers can push
-      .col-sm-10
+      .col-sm-offset-2.col-sm-10
         .checkbox
-          = f.check_box :developers_can_push
-          %span.descr Allow developers to push to this branch
+          = f.label :developers_can_push do
+            = f.check_box :developers_can_push
+            %strong Developers can push
+          .help-block Allow developers to push to this branch
     .form-actions
       = f.submit 'Protect', class: "btn-create btn"
 = render 'branches_list'
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index b34dd53e3b5..c0a9923348e 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -15,7 +15,7 @@
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
           autofocus: local_assigns[:autofocus] || false
     - if @group.persisted?
-      .alert.alert-danger
+      .alert.alert-warning.prepend-top-10
         %ul
           %li Changing group path can have unintended side effects.
           %li Renaming group path will rename directory for all related projects
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index 6e2f60972b6..6f6ce439f3e 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -209,13 +209,13 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
 
   step 'I click link "Hide inline discussion" of the second file' do
     within '.files [id^=diff]:nth-child(2)' do
-      click_link 'Show/Hide comments'
+      find('.js-toggle-diff-comments').click
     end
   end
 
   step 'I click link "Show inline discussion" of the second file' do
     within '.files [id^=diff]:nth-child(2)' do
-      click_link 'Show/Hide comments'
+      find('.js-toggle-diff-comments').click
     end
   end