Use badges for branches/tags in commit page

Changelog: changed

app/assets/stylesheets/framework/wells.scss

@@ -65,33 +65,6 @@
     display: inline;
   }
 
-  .branch-link {
-    margin-bottom: 2px;
-  }
-
-  .limit-box {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    background-color: $red-100;
-    border-radius: $border-radius-default;
-    text-align: center;
-
-    &:hover {
-      background-color: $red-200;
-    }
-
-    .limit-icon {
-      margin: 0 4px;
-    }
-
-    .limit-message {
-      line-height: 16px;
-      margin-right: 8px;
-      font-size: 12px;
-    }
-  }
-
   svg {
     vertical-align: text-top;
   }

app/helpers/commits_helper.rb

@@ -73,9 +73,7 @@ module CommitsHelper
 
   # Returns a link formatted as a commit branch link
   def commit_branch_link(url, text)
-    link_to(url, class: 'badge badge-gray ref-name branch-link') do
-      sprite_icon('branch', size: 12, css_class: 'fork-svg') + "#{text}"
-    end
+    gl_badge_tag(text, { variant: :info, icon: 'branch' }, { href: url, class: 'gl-font-monospace gl-mb-1' })
   end
 
   # Returns the sorted alphabetically links to branches, separated by a comma
@@ -87,9 +85,7 @@ module CommitsHelper
 
   # Returns a link formatted as a commit tag link
   def commit_tag_link(url, text)
-    link_to(url, class: 'badge badge-gray ref-name') do
-      sprite_icon('tag', size: 12, css_class: 'gl-mr-2 vertical-align-middle') + "#{text}"
-    end
+    gl_badge_tag(text, { variant: :info, icon: 'tag' }, { href: url, class: 'gl-font-monospace' })
   end
 
   # Returns the sorted links to tags, separated by a comma

app/views/projects/commit/_limit_exceeded_message.html.haml

-.has-tooltip{ class: "limit-box limit-box-#{objects} gl-ml-2", data: { title: _('Project has too many %{label_for_message} to search') % { label_for_message: label_for_message } } }
-  .limit-icon
-    - if objects == :branch
-      = sprite_icon('fork', size: 12)
-    - else
-      = sprite_icon('tag')
-  .limit-message
-    %span= _('%{label_for_message} unavailable') % { label_for_message: label_for_message.capitalize }
+- icon = objects == :branch ? 'fork' : 'tag'
+- text = _('%{label_for_message} unavailable') % { label_for_message: label_for_message.capitalize }
+- tooltip_title = _('Project has too many %{label_for_message} to search') % { label_for_message: label_for_message }
+
+= gl_badge_tag(text, { variant: :danger, icon: icon }, { class: 'has-tooltip gl-ml-2', data: { title: tooltip_title } })

app/views/projects/commit/branches.html.haml

@@ -6,8 +6,9 @@
 
 - if @branches.any? || @tags.any? || @tags_limit_exceeded
   %span
-    = link_to "#", class: "js-details-expand badge badge-gray ref-name" do
-      = sprite_icon('ellipsis_h', size: 12, css_class: 'vertical-align-middle')
+    = gl_badge_tag(_("Expand"),
+      { variant: :info, icon: 'ellipsis_h', icon_only: true },
+      { href: '#', class: 'js-details-expand gl-font-monospace' })
     %span.js-details-content.hide
       = commit_branches_links(@project, @branches)
       - if @tags_limit_exceeded