Consistently use monospace font for branch and tag namesdm-consistent-branch-name-style

40 files changed, 160 insertions, 162 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 4a1fd881169..995048917f6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -61,32 +61,34 @@ export default {
         </span>
       </div>
       <div class="normal">
-        <b>Request to merge</b>
-        <span
-          class="label-branch"
-          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
-          :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
-          data-placement="bottom"
-          v-html="mr.sourceBranchLink"></span>
-        <button
-          class="btn btn-transparent btn-clipboard has-tooltip"
-          data-title="Copy branch name to clipboard"
-          :data-clipboard-text="mr.sourceBranch">
-          <i
-            aria-hidden="true"
-            class="fa fa-clipboard"></i>
-        </button>
-        <b>into</b>
-        <span
-          class="label-branch"
-          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
-          :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-          data-placement="bottom">
-          <a
-            :href="mr.targetBranchCommitsPath">
-            {{mr.targetBranch}}
-          </a>
-        </span>
+        <strong>
+          Request to merge
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
+            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+            data-placement="bottom"
+            v-html="mr.sourceBranchLink"></span>
+          <button
+            class="btn btn-transparent btn-clipboard has-tooltip"
+            data-title="Copy branch name to clipboard"
+            :data-clipboard-text="mr.sourceBranch">
+            <i
+              aria-hidden="true"
+              class="fa fa-clipboard"></i>
+          </button>
+          into
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
+            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+            data-placement="bottom">
+            <a
+              :href="mr.targetBranchCommitsPath">
+              {{mr.targetBranch}}
+            </a>
+          </span>
+        </strong>
         <span
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count">
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 96d8a812723..bf8301d7b4d 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -305,6 +305,11 @@ a > code {
   color: $link-color;
 }
 
+.git-revision-dropdown-toggle,
+.git-revision-dropdown .dropdown-content ul li a {
+  font-family: $monospace_font;
+}
+
 /**
  * Apply Markdown typography
  *
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 75c57e369e7..2257972ed26 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -160,6 +160,34 @@
     text-transform: capitalize;
   }
 
+  .label-branch {
+    @extend .monospace;
+
+    color: $gl-text-color;
+    font-weight: bold;
+    overflow: hidden;
+    margin: 0 3px;
+    word-break: break-all;
+
+    &.label-truncated {
+      position: relative;
+      display: inline-block;
+      width: 250px;
+      margin-bottom: -3px;
+      white-space: nowrap;
+      text-overflow: clip;
+      line-height: 14px;
+
+      &::after {
+        position: absolute;
+        content: '...';
+        right: 0;
+        font-family: $regular_font;
+        background-color: $gray-light;
+      }
+    }
+  }
+
   .js-deployment-link {
     display: inline-block;
   }
@@ -359,34 +387,6 @@
   }
 }
 
-.label-branch {
-  color: $gl-text-color;
-  font-family: $monospace_font;
-  font-weight: bold;
-  overflow: hidden;
-  font-size: 90%;
-  margin: 0 3px;
-  word-break: break-all;
-
-  &.label-truncated {
-    position: relative;
-    display: inline-block;
-    width: 250px;
-    margin-bottom: -3px;
-    white-space: nowrap;
-    text-overflow: clip;
-    line-height: 14px;
-
-    &::after {
-      position: absolute;
-      content: '...';
-      right: 0;
-      font-family: $regular_font;
-      background-color: $gray-light;
-    }
-  }
-}
-
 .commits-empty {
   text-align: center;
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c119f0c9b22..5e2c84c42a1 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -825,7 +825,8 @@ pre.light-well {
 }
 
 .compare-form-group {
-  .dropdown-menu {
+  .dropdown-menu,
+  .inline-input-group {
     width: 100%;
 
     @media (min-width: $screen-sm-min) {
@@ -844,14 +845,6 @@ pre.light-well {
       width: auto;
     }
   }
-
-  .inline-input-group {
-    width: 100%;
-
-    @media (min-width: $screen-sm-min) {
-      width: 250px;
-    }
-  }
 }
 
 .clearable-input {
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 97b497a0fed..497e494ffa5 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -74,12 +74,8 @@ module CommitsHelper
   # Returns the sorted alphabetically links to branches, separated by a comma
   def commit_branches_links(project, branches)
     branches.sort.map do |branch|
-      link_to(
-        namespace_project_tree_path(project.namespace, project, branch)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('code-fork') + ' ' + branch
-        end
+      link_to(namespace_project_commits_path(project.namespace, project, branch), class: "label label-gray monospace") do
+        icon('code-fork') + " #{branch}"
       end
     end.join(" ").html_safe
   end
@@ -88,13 +84,8 @@ module CommitsHelper
   def commit_tags_links(project, tags)
     sorted = VersionSorter.rsort(tags)
     sorted.map do |tag|
-      link_to(
-        namespace_project_commits_path(project.namespace, project,
-                                       project.repository.find_tag(tag).name)
-      ) do
-        content_tag :span, class: 'label label-gray' do
-          icon('tag') + ' ' + tag
-        end
+      link_to(namespace_project_commits_path(project.namespace, project, tag), class: "label label-gray monospace") do
+        icon('tag') + " #{tag}"
       end
     end.join(" ").html_safe
   end
diff --git a/app/models/issue.rb b/app/models/issue.rb
index 27e3ed9bc7f..ecfc33ec1a1 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -174,7 +174,7 @@ class Issue < ActiveRecord::Base
 
   # Returns boolean if a related branch exists for the current issue
   # ignores merge requests branchs
-  def has_related_branch? 
+  def has_related_branch?
     project.repository.branch_names.any? do |branch|
       /\A#{iid}-(?!\d+-stable)/i =~ branch
     end
diff --git a/app/models/project_services/chat_message/pipeline_message.rb b/app/models/project_services/chat_message/pipeline_message.rb
index 47b68f00cff..3edc395033c 100644
--- a/app/models/project_services/chat_message/pipeline_message.rb
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -35,7 +35,7 @@ module ChatMessage
 
     def activity
       {
-        title: "Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status}",
+        title: "Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status}",
         subtitle: "in #{project_link}",
         text: "in #{pretty_duration(duration)}",
         image: user_avatar || ''
@@ -45,7 +45,7 @@ module ChatMessage
     private
 
     def message
-      "#{project_link}: Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
+      "#{project_link}: Pipeline #{pipeline_link} of #{ref_type} #{branch_link} by #{user_name} #{humanized_status} in #{pretty_duration(duration)}"
     end
 
     def humanized_status
@@ -70,7 +70,7 @@ module ChatMessage
     end
 
     def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
     end
 
     def project_link
diff --git a/app/models/project_services/chat_message/push_message.rb b/app/models/project_services/chat_message/push_message.rb
index c52dd6ef8ef..04a59d559ca 100644
--- a/app/models/project_services/chat_message/push_message.rb
+++ b/app/models/project_services/chat_message/push_message.rb
@@ -61,7 +61,7 @@ module ChatMessage
     end
 
     def removed_branch_message
-      "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
+      "#{user_name} removed #{ref_type} `#{ref}` from #{project_link}"
     end
 
     def push_message
@@ -102,7 +102,7 @@ module ChatMessage
     end
 
     def branch_link
-      "[#{ref}](#{branch_url})"
+      "`[#{ref}](#{branch_url})`"
     end
 
     def project_link
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
index 51ad0a3f8ba..2458c41194c 100644
--- a/app/serializers/pipeline_entity.rb
+++ b/app/serializers/pipeline_entity.rb
@@ -38,7 +38,7 @@ class PipelineEntity < Grape::Entity
 
     expose :path do |pipeline|
       if pipeline.ref
-        namespace_project_tree_path(
+        namespace_project_commits_path(
           pipeline.project.namespace,
           pipeline.project,
           id: pipeline.ref)
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 768bc1fb323..41b609b9b42 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -5,7 +5,7 @@
         .event-last-push
           .event-last-push-text
             %span You pushed to
-            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name) do
+            = link_to namespace_project_commits_path(event.project.namespace, event.project, event.ref_name, class: 'monospace') do
               %strong= event.ref_name
             - if @project && event.project != @project
               %span at
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 8b35a037c55..e29375cf47e 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -6,7 +6,8 @@
 - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
 %li{ class: "js-branch-#{branch.name}" }
   %div
-    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated' do
+    = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated monospace' do
+      = icon('code-fork')
       = branch.name
     &nbsp;
     - if branch.name == @repository.root_ref
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 796ecdfd014..8207725905d 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -19,7 +19,7 @@
     = label_tag :ref, 'Create from', class: 'control-label'
     .col-sm-10.dropdown.create-from
       = hidden_field_tag :ref, default_ref
-      = button_tag type: 'button', title: default_ref, class: 'dropdown-toggle form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+      = button_tag type: 'button', title: default_ref, class: 'dropdown-toggle form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
         .text-left.dropdown-toggle-text= default_ref
       = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .help-block Existing branch name, tag, or commit SHA
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/builds/_header.html.haml
index a0f8f105d9a..fd5851cbbb3 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -6,18 +6,16 @@
     = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false, title: @build.status_title
     %strong
       Job
-      = link_to namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id' do
-        \##{@build.id}
+      = link_to "##{@build.id}", namespace_project_build_path(@project.namespace, @project, @build), class: 'js-build-id'
     in pipeline
-    = link_to pipeline_path(pipeline) do
-      %strong ##{pipeline.id}
+    %strong
+      = link_to "##{pipeline.id}", pipeline_path(pipeline)
     for commit
-    = link_to namespace_project_commit_path(@project.namespace, @project, pipeline.sha) do
-      %strong= pipeline.short_sha
+    %strong
+      = link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha)
     from
-    = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
-      %code
-        = @build.ref
+    %strong
+      = link_to @build.ref, namespace_project_commits_path(@project.namespace, @project, @build.ref), class: 'monospace'
 
     = render "projects/builds/user" if @build.user
 
diff --git a/app/views/projects/commit/branches.html.haml b/app/views/projects/commit/branches.html.haml
index 2b0c9a4b4de..ce21ab479f9 100644
--- a/app/views/projects/commit/branches.html.haml
+++ b/app/views/projects/commit/branches.html.haml
@@ -1,15 +1,15 @@
-- if @branches.any?
-  %span
-    - branch = commit_default_branch(@project, @branches)
-    = link_to(namespace_project_tree_path(@project.namespace, @project, branch)) do
-      %span.label.label-gray
-        = branch
-    - if @branches.any? || @tags.any?
-      = link_to("#", class: "js-details-expand") do
-        %span.label.label-gray
-          \...
+- if @branches.any? || @tags.any?
+  - branch = commit_default_branch(@project, @branches)
+  = link_to(namespace_project_commits_path(@project.namespace, @project, branch), class: "label label-gray monospace") do
+    = icon('code-fork')
+    = branch
+
+  -# `commit_default_branch` deletes the default branch from `@branches`,
+  -# so only render this if we have more branches left
+  - if @branches.any? || @tags.any?
+    %span
+      = link_to "…", "#", class: "js-details-expand label label-gray"
+
       %span.js-details-content.hide
-        - if @branches.any?
-          = commit_branches_links(@project, @branches)
-        - if @tags.any?
-          = commit_tags_links(@project, @tags)
+        = commit_branches_links(@project, @branches) if @branches.any?
+        = commit_tags_links(@project, @tags) if @tags.any?
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 1f4c9fac54c..adb724c1b8d 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -7,7 +7,7 @@
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
           .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
       = render 'shared/ref_dropdown'
     .compare-ellipsis.inline ...
@@ -15,7 +15,7 @@
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
           .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
       = render 'shared/ref_dropdown'
     &nbsp;
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index 45be6581cfc..09cbf779576 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/app/views/projects/compare/index.html.haml
@@ -6,10 +6,10 @@
   .sub-header-block
     Compare Git revisions.
     %br
-    Fill input field with commit id like
-    %code.label-branch 4eedf23
+    Fill input field with commit SHA like
+    %code.monospace 4eedf23
     or branch/tag name like
-    %code.label-branch master
+    %code.monospace master
     and press compare button for the commits list and a code diff.
     %br
     Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 0dfc9fe20ed..deebbb744b6 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -16,9 +16,9 @@
           There isn't anything to compare.
         %p.slead
           - if params[:to] == params[:from]
-            %span.label-branch= params[:from]
+            %span.monospace= params[:from]
             and
-            %span.label-branch= params[:to]
+            %span.monospace= params[:to]
             are the same.
           - else
             You'll need to use different branch names to get a valid comparison.
diff --git a/app/views/projects/issues/_related_branches.html.haml b/app/views/projects/issues/_related_branches.html.haml
index 1892ebb512f..fb604ca1998 100644
--- a/app/views/projects/issues/_related_branches.html.haml
+++ b/app/views/projects/issues/_related_branches.html.haml
@@ -11,5 +11,4 @@
             = render_pipeline_status(pipeline)
         %span.related-branch-info
           %strong
-            = link_to namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "label-branch" do
-              = branch
+            = link_to branch, namespace_project_compare_path(@project.namespace, @project, from: @project.default_branch, to: branch), class: "monospace"
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 11b7aaec704..ff021116750 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -37,7 +37,7 @@
       by #{link_to_member(@project, merge_request.author, avatar: false)}
       - if merge_request.target_project.default_branch != merge_request.target_branch
         &nbsp;
-        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
+        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch), class: 'monospace' do
           = icon('code-fork')
           = merge_request.target_branch
 
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index da79ca2ee75..fba796f823f 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -3,9 +3,9 @@
 %p.slead
   - source_title, target_title = format_mr_branch_names(@merge_request)
   From
-  %strong.label-branch= source_title
+  %strong.monospace= source_title
   %span into
-  %strong.label-branch= target_title
+  %strong.monospace= target_title
 
   %span.pull-right
     = link_to 'Change branches', mr_change_branches_path(@merge_request)
diff --git a/app/views/projects/merge_requests/show/_versions.html.haml b/app/views/projects/merge_requests/show/_versions.html.haml
index 11b0c55be0b..b5dc105941f 100644
--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -34,11 +34,10 @@
         and
         %span.dropdown.inline.mr-version-compare-dropdown
           %a.btn.btn-default.dropdown-toggle{ data: {toggle: :dropdown} }
-            %span
-              - if @start_version
-                version #{version_index(@start_version)}
-              - else
-                #{@merge_request.target_branch}
+            - if @start_version
+              version #{version_index(@start_version)}
+            - else
+              %span.monospace= @merge_request.target_branch
             = icon('caret-down')
           .dropdown-menu.dropdown-select.dropdown-menu-selectable
             .dropdown-title
@@ -61,7 +60,8 @@
                 %li
                   = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_version) do
                     %strong
-                      #{@merge_request.target_branch} (base)
+                      %span.monospace= @merge_request.target_branch
+                      (base)
                     .monospace= short_sha(@merge_request_diff.base_commit_sha)
 
     - if different_base?(@start_version, @merge_request_diff)
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index 4a21cce024e..2d272a93b98 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -19,7 +19,7 @@
   .form-group
     .col-md-6
       = f.label :ref, 'Target Branch', class: 'label-light'
-      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
+      = dropdown_tag("Select target branch", options: { toggle_class: 'btn js-target-branch-dropdown git-revision-dropdown-toggle', dropdown_class: 'git-revision-dropdown', title: "Select target branch", filter: true, placeholder: "Filter", data: { data: @project.repository.branch_names } } )
       = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
   .form-group
     .col-md-6
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 14a270a3039..71a8e490c3e 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -11,8 +11,8 @@
     .col-sm-10
       = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
       = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
+                     options: { toggle_class: 'js-branch-select wide git-revision-dropdown-toggle',
+                                filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search branches",
                                 data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
       .help-block Existing branch name, tag
   .form-actions
diff --git a/app/views/projects/protected_branches/_dropdown.html.haml b/app/views/projects/protected_branches/_dropdown.html.haml
index 5af0cc7a2f3..6e9c473494e 100644
--- a/app/views/projects/protected_branches/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
 = dropdown_tag('Select branch or create wildcard',
-               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide',
-                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected branches",
+               options: { toggle_class: 'js-protected-branch-select js-filter-submit wide git-revision-dropdown-toggle',
+                          filter: true, dropdown_class: "dropdown-menu-selectable git-revision-dropdown", placeholder: "Search protected branches",
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_branch_name],
diff --git a/app/views/projects/protected_branches/_matching_branch.html.haml b/app/views/projects/protected_branches/_matching_branch.html.haml
index 8a5332ca5bb..c144f615f7b 100644
--- a/app/views/projects/protected_branches/_matching_branch.html.haml
+++ b/app/views/projects/protected_branches/_matching_branch.html.haml
@@ -1,6 +1,7 @@
 %tr
   %td
-    = link_to matching_branch.name, namespace_project_tree_path(@project.namespace, @project, matching_branch.name)
+    = link_to matching_branch.name, namespace_project_commits_path(@project.namespace, @project, matching_branch.name), class: 'monospace'
+
     - if @project.root_ref?(matching_branch.name)
       %span.label.label-info.prepend-left-5 default
   %td
diff --git a/app/views/projects/protected_branches/_protected_branch.html.haml b/app/views/projects/protected_branches/_protected_branch.html.haml
index b2a6b8469a3..eaa1582d76c 100644
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
@@ -1,6 +1,7 @@
 %tr.js-protected-branch-edit-form{ data: { url: namespace_project_protected_branch_path(@project.namespace, @project, protected_branch) } }
   %td
-    = protected_branch.name
+    %span.monospace= protected_branch.name
+
     - if @project.root_ref?(protected_branch.name)
       %span.label.label-info.prepend-left-5 default
   %td
diff --git a/app/views/projects/protected_branches/show.html.haml b/app/views/projects/protected_branches/show.html.haml
index f8cfe5e4b11..ff634d485d9 100644
--- a/app/views/projects/protected_branches/show.html.haml
+++ b/app/views/projects/protected_branches/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.monospace
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/protected_tags/_dropdown.html.haml b/app/views/projects/protected_tags/_dropdown.html.haml
index c50515cfe06..c8531f96f97 100644
--- a/app/views/projects/protected_tags/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/_dropdown.html.haml
@@ -1,8 +1,8 @@
 = f.hidden_field(:name)
 
 = dropdown_tag('Select tag or create wildcard',
-               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide',
-                          filter: true, dropdown_class: "dropdown-menu-selectable  capitalize-header", placeholder: "Search protected tag",
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide git-revision-dropdown-toggle',
+                          filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: "Search protected tag",
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
                                   selected: params[:protected_tag_name],
diff --git a/app/views/projects/protected_tags/_matching_tag.html.haml b/app/views/projects/protected_tags/_matching_tag.html.haml
index 97e5cd6f9d2..c0047b4c84a 100644
--- a/app/views/projects/protected_tags/_matching_tag.html.haml
+++ b/app/views/projects/protected_tags/_matching_tag.html.haml
@@ -1,6 +1,7 @@
 %tr
   %td
-    = link_to matching_tag.name, namespace_project_tree_path(@project.namespace, @project, matching_tag.name)
+    = link_to matching_tag.name, namespace_project_commits_path(@project.namespace, @project, matching_tag.name), class: 'monospace'
+
     - if @project.root_ref?(matching_tag.name)
       %span.label.label-info.prepend-left-5 default
   %td
diff --git a/app/views/projects/protected_tags/_protected_tag.html.haml b/app/views/projects/protected_tags/_protected_tag.html.haml
index 26bd3a1f5ed..dee603eca4b 100644
--- a/app/views/projects/protected_tags/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/_protected_tag.html.haml
@@ -1,6 +1,7 @@
 %tr.js-protected-tag-edit-form{ data: { url: namespace_project_protected_tag_path(@project.namespace, @project, protected_tag) } }
   %td
-    = protected_tag.name
+    %span.monospace= protected_tag.name
+
     - if @project.root_ref?(protected_tag.name)
       %span.label.label-info.prepend-left-5 default
   %td
diff --git a/app/views/projects/protected_tags/show.html.haml b/app/views/projects/protected_tags/show.html.haml
index 63743f28b3c..1ac6cf2c7ce 100644
--- a/app/views/projects/protected_tags/show.html.haml
+++ b/app/views/projects/protected_tags/show.html.haml
@@ -2,7 +2,7 @@
 
 .row.prepend-top-default.append-bottom-default
   .col-lg-3
-    %h4.prepend-top-0
+    %h4.prepend-top-0.monospace
       = @protected_ref.name
 
   .col-lg-9
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 4c4f3655b97..5d833b35a6a 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -2,10 +2,9 @@
 - release = @releases.find { |release| release.tag == tag.name }
 %li.flex-row
   .row-main-content.str-truncated
-    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
-      %span.item-title
-        = icon('tag')
-        = tag.name
+    = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'item-title monospace' do
+      = icon('tag')
+      = tag.name
 
     - if protected_tag?(@project, tag)
       %span.label.label-success
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index e996ae3e4fc..0585c957afa 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -6,7 +6,9 @@
   .top-area.multi-line
     .nav-text
       .title
-        %span.item-title= @tag.name
+        %span.item-title.monospace
+          = icon('tag')
+          = @tag.name
         - if protected_tag?(@project, @tag)
           %span.label.label-success
             protected
diff --git a/app/views/shared/_ref_dropdown.html.haml b/app/views/shared/_ref_dropdown.html.haml
index 96f68c80c48..8b2a3bee407 100644
--- a/app/views/shared/_ref_dropdown.html.haml
+++ b/app/views/shared/_ref_dropdown.html.haml
@@ -1,6 +1,6 @@
 - dropdown_class = local_assigns.fetch(:dropdown_class, '')
 
-.dropdown-menu.dropdown-menu-selectable{ class: dropdown_class }
+.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: dropdown_class }
   = dropdown_title "Select Git revision"
   = dropdown_filter "Filter by Git revision"
   = dropdown_content
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index 9a8252ab087..2029eb5824a 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -6,8 +6,8 @@
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
   .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown" }
-    .dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'ref', submit_form_on_click: true }, { toggle_class: "js-project-refs-dropdown git-revision-dropdown-toggle" }
+    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
       = dropdown_title "Switch branch/tag"
       = dropdown_filter "Search branches and tags"
       = dropdown_content
diff --git a/changelogs/unreleased/dm-consistent-branch-name-style.yml b/changelogs/unreleased/dm-consistent-branch-name-style.yml
new file mode 100644
index 00000000000..c47f0c31826
--- /dev/null
+++ b/changelogs/unreleased/dm-consistent-branch-name-style.yml
@@ -0,0 +1,4 @@
+---
+title: Consistently use monospace font for branch and tag names
+merge_request:
+author:
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 48f816c8460..44504454771 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -65,8 +65,8 @@ describe('MRWidgetHeader', () => {
 
     it('should render template elements correctly', () => {
       expect(el.classList.contains('mr-source-target')).toBeTruthy();
-      expect(el.querySelectorAll('.label-branch')[0].textContent).toContain(mr.sourceBranch);
-      expect(el.querySelectorAll('.label-branch')[1].textContent).toContain(mr.targetBranch);
+      expect(el.querySelectorAll('.monospace')[0].textContent).toContain(mr.sourceBranch);
+      expect(el.querySelectorAll('.monospace')[1].textContent).toContain(mr.targetBranch);
       expect(el.querySelector('.diverged-commits-count').textContent).toContain('12 commits behind');
 
       expect(el.textContent).toContain('Check out branch');
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
index 78a70725e94..b15e3ee5068 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
@@ -44,8 +44,8 @@ describe('MRWidgetClosed', () => {
       expect(el.querySelector('h4').textContent).toContain('Closed by');
       expect(el.querySelector('h4').textContent).toContain(mr.closedBy.name);
       expect(el.textContent).toContain('The changes were not merged into');
-      expect(el.querySelector('.label-branch').getAttribute('href')).toEqual(mr.targetBranchCommitsPath);
-      expect(el.querySelector('.label-branch').textContent).toContain(mr.targetBranch);
+      expect(el.querySelector('.monospace').getAttribute('href')).toEqual(mr.targetBranchCommitsPath);
+      expect(el.querySelector('.monospace').textContent).toContain(mr.targetBranch);
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js
index fb2ef606604..721b054a4a1 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js
@@ -26,8 +26,8 @@ describe('MRWidgetLocked', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.innerText).toContain('it is locked');
       expect(el.innerText).toContain('changes will be merged into');
-      expect(el.querySelector('.label-branch a').getAttribute('href')).toEqual(mr.targetBranchPath);
-      expect(el.querySelector('.label-branch a').textContent).toContain(mr.targetBranch);
+      expect(el.querySelector('.monospace a').getAttribute('href')).toEqual(mr.targetBranchPath);
+      expect(el.querySelector('.monospace a').textContent).toContain(mr.targetBranch);
     });
   });
 });
diff --git a/spec/models/project_services/chat_message/push_message_spec.rb b/spec/models/project_services/chat_message/push_message_spec.rb
index c794f659c41..e38117b75f6 100644
--- a/spec/models/project_services/chat_message/push_message_spec.rb
+++ b/spec/models/project_services/chat_message/push_message_spec.rb
@@ -28,7 +28,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq(
-          'test.user pushed to branch <http://url.com/commits/master|master> of '\
+          'test.user pushed to branch `<http://url.com/commits/master|master>` of '\
             '<http://url.com|project_name> (<http://url.com/compare/before...after|Compare changes>)')
         expect(subject.attachments).to eq([{
           text: "<http://url1.com|abcdefgh>: message1 - author1\n\n"\
@@ -45,7 +45,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq(
-          'test.user pushed to branch [master](http://url.com/commits/master) of [project_name](http://url.com) ([Compare changes](http://url.com/compare/before...after))')
+          'test.user pushed to branch `[master](http://url.com/commits/master)` of [project_name](http://url.com) ([Compare changes](http://url.com/compare/before...after))')
         expect(subject.attachments).to eq(
           "[abcdefgh](http://url1.com): message1 - author1\n\n[12345678](http://url2.com): message2 - author2")
         expect(subject.activity).to eq({
@@ -74,7 +74,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq('test.user pushed new tag ' \
-          '<http://url.com/commits/new_tag|new_tag> to ' \
+          '`<http://url.com/commits/new_tag|new_tag>` to ' \
           '<http://url.com|project_name>')
         expect(subject.attachments).to be_empty
       end
@@ -87,7 +87,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding pushes' do
         expect(subject.pretext).to eq(
-          'test.user pushed new tag [new_tag](http://url.com/commits/new_tag) to [project_name](http://url.com)')
+          'test.user pushed new tag `[new_tag](http://url.com/commits/new_tag)` to [project_name](http://url.com)')
         expect(subject.attachments).to be_empty
         expect(subject.activity).to eq({
           title: 'test.user created tag',
@@ -107,7 +107,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding a new branch' do
         expect(subject.pretext).to eq(
-          'test.user pushed new branch <http://url.com/commits/master|master> to '\
+          'test.user pushed new branch `<http://url.com/commits/master|master>` to '\
             '<http://url.com|project_name>')
         expect(subject.attachments).to be_empty
       end
@@ -120,7 +120,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding a new branch' do
         expect(subject.pretext).to eq(
-          'test.user pushed new branch [master](http://url.com/commits/master) to [project_name](http://url.com)')
+          'test.user pushed new branch `[master](http://url.com/commits/master)` to [project_name](http://url.com)')
         expect(subject.attachments).to be_empty
         expect(subject.activity).to eq({
           title: 'test.user created branch',
@@ -140,7 +140,7 @@ describe ChatMessage::PushMessage, models: true do
     context 'without markdown' do
       it 'returns a message regarding a removed branch' do
         expect(subject.pretext).to eq(
-          'test.user removed branch master from <http://url.com|project_name>')
+          'test.user removed branch `master` from <http://url.com|project_name>')
         expect(subject.attachments).to be_empty
       end
     end
@@ -152,7 +152,7 @@ describe ChatMessage::PushMessage, models: true do
 
       it 'returns a message regarding a removed branch' do
         expect(subject.pretext).to eq(
-          'test.user removed branch master from [project_name](http://url.com)')
+          'test.user removed branch `master` from [project_name](http://url.com)')
         expect(subject.attachments).to be_empty
         expect(subject.activity).to eq({
           title: 'test.user removed branch',