Updated some commit UI colors

Fixed issue with tree view styles

4 files changed, 19 insertions, 20 deletions

diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 05949e2cd43..d360a224848 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -41,13 +41,17 @@
   }
 
   .text-expander {
-    background: #eee;
-    color: #555;
+    background: $gray-light;
+    color: $gl-gray-dark;
     padding: 0 5px;
     cursor: pointer;
-    margin-left: 4px;
+    border: 1px solid $border-gray-dark;
+    border-radius: $border-radius-default;
+    margin-left: 5px;
+
     &:hover {
-      background-color: #ddd;
+      background-color: darken($gray-light, 10%);
+      text-decoration: none;
     }
   }
 }
@@ -55,6 +59,7 @@
 .commit-actions {
   @media (min-width: $screen-md-min) {
     float: right;
+    margin-left: $gl-padding;
   }
 }
 
@@ -70,17 +75,11 @@
     border-bottom: 1px solid #eee;
   }
 
-  a {
+  a,
+  button {
     color: $gl-dark-link-color;
   }
 
-  .commit-link {
-    &:hover {
-      color: $gl-link-color;
-      text-decoration: none;
-    }
-  }
-
   .avatar {
     margin-left: -55px;
   }
@@ -94,7 +93,7 @@
     font-size: 14px;
     border-left: 1px solid #eee;
     padding: 10px 15px;
-    margin: 10px 0 10px 0;
+    margin: 10px 0;
     background: #f9f9f9;
     display: none;
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index f16fc7f388f..cfb6e2e888e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -101,7 +101,7 @@
   margin: 0;
 
   .commit {
-    padding: 0;
+    padding: 0 0 0 55px;
 
     .commit-row-title {
       .commit-row-message {
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index f742922d926..bf5505125ab 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -14,10 +14,10 @@ module ButtonHelper
   #   # => "<button class='...' data-clipboard-target='div#foo'>...</button>"
   #
   # See http://clipboardjs.com/#usage
-  def clipboard_button(data = {})
+  def clipboard_button(data = {}, css_class: 'btn-clipboard')
     content_tag :button,
       icon('clipboard'),
-      class: 'btn btn-clipboard',
+      class: "btn #{css_class}",
       data: data,
       type: :button
   end
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 288b95c3e6e..f79c9448f60 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -12,15 +12,15 @@
     = commit_author_avatar(commit)
     .commit-row-title
       %span.item-title
-        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message commit-link"
+        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
         - if commit.description?
           %a.text-expander.js-toggle-button ...
 
       .commit-actions
         - if commit.status
           = render_commit_status(commit, cssclass: 'btn btn-transparent')
-        = clipboard_button(clipboard_text: commit.id)
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent commit-link"
+        = clipboard_button({ clipboard_text: commit.id }, css_class: 'btn-transparent')
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
         = link_to_browse_code(project, commit)
 
     - if commit.description?
@@ -30,4 +30,4 @@
     .commit-row-info
       = commit_author_link(commit, avatar: true, size: 24)
       authored
-      #{time_ago_with_tooltip(commit.committed_date)} &nbsp;
+      #{time_ago_with_tooltip(commit.committed_date)}