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

11 files changed, 71 insertions, 68 deletions

diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index c0de09f3968..dbdd5a4464b 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 96d8a812723..a7c6cbaae21 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/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
  *
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 32eb750180f..1c1392f8f67 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/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;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c8996753809..bb72f453d1b 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/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;
   }
 
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index d29944207c5..7bec4bd5f56 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 0d5c4aed971..cfb1df4df84 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index af991a128f3..a42ae7e55a5 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/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;
       }
     }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index d9ba1d4de4d..8f5db1b3b9c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/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;
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 6d7b7031c30..0600bb1cb1a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 685b9775fe1..e4f5ab26b4d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/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;
     }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c119f0c9b22..ed4a5474034 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/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 {