Consistently use monospace font for commit SHAs and branch and tag names

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js

@@ -33,7 +33,7 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
             <span>
               {{ __('FirstPushedBy|First') }}
               <span class="commit-icon">${iconCommit}</span>
-              <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
+              <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
               {{ __('FirstPushedBy|pushed by') }}
               <a :href="commit.author.webUrl" class="commit-author-link">
                 {{ commit.author.name }}

app/assets/javascripts/cycle_analytics/components/stage_staging_component.js

@@ -26,9 +26,9 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
             <h5 class="item-title">
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="build-date">{{ build.date }}</a>

app/assets/javascripts/cycle_analytics/components/stage_test_component.js

@@ -29,9 +29,9 @@ global.cycleAnalytics.StageTestComponent = Vue.extend({
               ·
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="issue-date">

app/assets/javascripts/pipelines/components/pipeline_url.js

@@ -29,7 +29,7 @@ export default {
       </a>
       <span
         v-if="!user"
-        class="js-pipeline-url-api api monospace">
+        class="js-pipeline-url-api api">
         API
       </span>
       <span

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.targetBranchPath">
-            {{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.targetBranchPath">
+              {{mr.targetBranch}}
+            </a>
+          </span>
+        </strong>
         <span
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count">

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js

@@ -54,6 +54,9 @@ export default {
               :href="mr.pipeline.path"
               class="pipeline-id">#{{mr.pipeline.id}}</a>
             {{mr.pipeline.details.status.label}}
+          </span>
+          <span
+            v-if="mr.pipeline.details.stages.length > 0">
             with {{stageText}}
           </span>
           <div class="mr-widget-pipeline-graph">
@@ -70,7 +73,7 @@ export default {
             for
             <a
               :href="mr.pipeline.commit.commit_path"
-              class="monospace js-commit-link">
+              class="commit-sha js-commit-link">
               {{mr.pipeline.commit.short_id}}</a>.
           </span>
           <span

app/assets/javascripts/vue_shared/components/commit.js

@@ -119,14 +119,14 @@ export default {
       </div>
       <a v-if="hasCommitRef"
-        class="monospace branch-name"
+        class="ref-name"
         :href="commitRef.ref_url">
         {{commitRef.name}}
       </a>
       <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
-      <a class="commit-id monospace"
+      <a class="commit-sha"
         :href="commitUrl">
         {{shortSha}}
       </a>

app/assets/stylesheets/framework/gfm.scss

@@ -2,7 +2,7 @@
  * Styles that apply to all GFM related forms.
  */
+.gfm-commit,
 .gfm-commit_range {
-  font-family: $monospace_font;
-  font-size: 90%;
+  @extend .commit-sha;
 }

app/assets/stylesheets/framework/typography.scss

@@ -289,11 +289,6 @@ pre {
   }
 }
-.monospace {
-  font-family: $monospace_font;
-  font-size: 90%;
-}
-
 code {
   &.key-fingerprint {
     background: $body-bg;
@@ -305,6 +300,24 @@ a > code {
   color: $link-color;
 }
+.monospace {
+  font-family: $monospace_font;
+}
+
+.commit-sha,
+.ref-name {
+  @extend .monospace;
+  font-size: 95%;
+}
+
+.git-revision-dropdown-toggle {
+  @extend .monospace;
+}
+
+.git-revision-dropdown .dropdown-content ul li a {
+  @extend .ref-name;
+}
+
 /**
  * Apply Markdown typography
  *

app/assets/stylesheets/framework/wells.scss

@@ -12,10 +12,14 @@
     }
     &.branch-info {
-      .monospace,
+      .commit-sha,
       .commit-info {
         margin-left: 4px;
       }
+
+      .ref-name {
+        font-size: 12px;
+      }
     }
   }

app/assets/stylesheets/pages/commits.scss

@@ -206,11 +206,11 @@
       margin-left: $gl-padding;
     }
   }
-}
-.commit-short-id {
-  font-family: $monospace_font;
-  font-weight: 600;
+  .commit-sha {
+    font-size: 14px;
+    font-weight: 600;
+  }
 }
 .commit,
@@ -271,7 +271,7 @@
     }
   }
-  .commit-id {
+  .commit-sha {
     color: $gl-link-color;
   }

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -387,7 +387,7 @@
         padding: 0 3px 0 0;
       }
-      .branch-name {
+      .ref-name {
         color: $black;
         display: inline-block;
         max-width: 180px;
@@ -398,7 +398,7 @@
         vertical-align: top;
       }
-      .short-sha {
+      .commit-sha {
         color: $gl-link-color;
         line-height: 1.3;
         vertical-align: top;

app/assets/stylesheets/pages/diff.scss

@@ -2,11 +2,6 @@
 .diff-file {
   margin-bottom: $gl-padding;
-  .commit-short-id {
-    font-family: $regular_font;
-    font-weight: 400;
-  }
-
   .file-title,
   .file-title-flex-parent {
     cursor: pointer;

app/assets/stylesheets/pages/environments.scss

@@ -90,7 +90,7 @@
     }
     .build-link,
-    .branch-name {
+    .ref-name {
       color: $gl-text-color;
     }
@@ -135,7 +135,7 @@
     }
     .branch-commit {
-      .commit-id {
+      .commit-sha {
         margin-right: 0;
       }
     }

app/assets/stylesheets/pages/merge_requests.scss

@@ -156,6 +156,34 @@
     text-transform: capitalize;
   }
+  .label-branch {
+    @extend .ref-name;
+
+    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;
   }
@@ -355,34 +383,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;

app/assets/stylesheets/pages/notes.scss

@@ -238,11 +238,6 @@ ul.notes {
           ul {
             margin: 3px 0 3px 16px !important;
-
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
           }
           p:first-child {

app/assets/stylesheets/pages/pipelines.scss

@@ -158,9 +158,13 @@
     float: none;
   }
+  .api {
+    @extend .monospace;
+  }
+
   .branch-commit {
-    .branch-name {
+    .ref-name {
       font-weight: bold;
       max-width: 120px;
       overflow: hidden;
@@ -182,7 +186,7 @@
       color: $gl-text-color;
     }
-    .commit-id {
+    .commit-sha {
       color: $gl-link-color;
     }

app/assets/stylesheets/pages/projects.scss

@@ -657,9 +657,8 @@ pre.light-well {
     color: $gl-text-color;
   }
-  .commit_short_id {
+  .commit-sha {
     margin-right: 5px;
-    color: $gl-link-color;
     font-weight: 600;
   }
@@ -825,7 +824,8 @@ pre.light-well {
 }
 .compare-form-group {
-  .dropdown-menu {
+  .dropdown-menu,
+  .inline-input-group {
     width: 100%;
     @media (min-width: $screen-sm-min) {
@@ -844,14 +844,6 @@ pre.light-well {
       width: auto;
     }
   }
-
-  .inline-input-group {
-    width: 100%;
-
-    @media (min-width: $screen-sm-min) {
-      width: 250px;
-    }
-  }
 }
 .clearable-input {

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(project_ref_path(project, branch), class: "label label-gray ref-name") 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(project_ref_path(project, tag), class: "label label-gray ref-name") do
+        icon('tag') + " #{tag}"
       end
     end.join(" ").html_safe
   end
@@ -198,8 +189,8 @@ module CommitsHelper
                                   tree_join(commit_sha, diff_new_path)),
       class: 'btn view-file js-view-file'
     ) do
-      raw('View file @') + content_tag(:span, commit_sha[0..6],
-                                       class: 'commit-short-id')
+      raw('View file @ ') + content_tag(:span, Commit.truncate_sha(commit_sha),
+                                       class: 'commit-sha')
     end
   end

app/helpers/diff_helper.rb

@@ -63,7 +63,7 @@ module DiffHelper
   def parallel_diff_discussions(left, right, diff_file)
     return unless @grouped_diff_discussions
-    
+
     discussions_left = discussions_right = nil
     if left && (left.unchanged? || left.removed?)
@@ -98,7 +98,7 @@ module DiffHelper
     [
       content_tag(:span, link_to(truncate(blob.name, length: 40), tree)),
       '@',
-      content_tag(:span, commit_id, class: 'monospace')
+      content_tag(:span, commit_id, class: 'commit-sha')
     ].join(' ').html_safe
   end