1 files changed, 70 insertions, 48 deletions

diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index b487f6278c2..49226ae8eac 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -2,7 +2,6 @@
   background: none;
   border: 0;
   padding: 0;
-  margin-top: 10px;
   word-break: normal;
   white-space: pre-wrap;
 }
@@ -21,14 +20,10 @@
     margin: 0;
     color: $gl-text-color;
   }
-
-  .commit-description {
-    margin-top: 15px;
-  }
 }
 
 .commit-hash-full {
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     width: 80px;
     white-space: nowrap;
     overflow: hidden;
@@ -70,7 +65,7 @@
 }
 
 .branch-info .commit-icon {
-  margin-right: 3px;
+  margin-right: 8px;
 
   svg {
     top: 3px;
@@ -107,7 +102,6 @@
   }
 }
 
-
 .commits-compare-switch {
   float: left;
   margin-right: 9px;
@@ -141,10 +135,10 @@
 }
 
 .text-expander {
-  display: inline-block;
+  display: inline-flex;
   background: $white-light;
   color: $gl-text-color-secondary;
-  padding: 0 4px;
+  padding: 1px $gl-padding-4;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
   border-radius: $border-radius-default;
@@ -179,61 +173,91 @@
 .commit-detail {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: start;
   flex-grow: 1;
-
-  .merge-request-branches & {
-    flex-direction: column;
-  }
 }
 
 .commit-content {
   padding-right: 10px;
   white-space: normal;
+
+  .commit-title {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .commit-actions {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     .fa-spinner {
       font-size: 12px;
     }
   }
 
   .ci-status-link {
-    display: inline-block;
-    position: relative;
-    top: 2px;
+    display: inline-flex;
+  }
+
+  .ci-status-icon svg {
+    vertical-align: text-bottom;
   }
 
-  .btn-clipboard,
-  .btn-transparent {
-    padding-left: 0;
-    padding-right: 0;
+  > .ci-status-link,
+  > .btn,
+  > .commit-sha-group {
+    margin-left: $gl-padding-8;
   }
+}
 
+.commit-sha-group {
+  display: inline-flex;
+
+  .label,
   .btn {
-    &:not(:first-child) {
-      margin-left: $gl-padding;
-    }
+    padding: $gl-vert-padding $gl-btn-padding;
+    border: 1px $border-color solid;
+    font-size: $gl-font-size;
+    line-height: $line-height-base;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .label-monospace {
+    @extend .monospace;
+    user-select: text;
+    color: $gl-text-color;
+    background-color: $gray-light;
   }
 
-  .commit-sha {
-    font-size: 14px;
-    font-weight: $gl-font-weight-bold;
+  .btn svg {
+    top: auto;
+    fill: $gl-text-color-secondary;
   }
 
-  .ci-status-icon {
-    position: relative;
-    top: 2px;
+  .fa-clipboard {
+    color: $gl-text-color-secondary;
+  }
+
+  :first-child {
+    border-bottom-left-radius: $border-radius-default;
+    border-top-left-radius: $border-radius-default;
+  }
+
+  :not(:first-child) {
+    border-left: 0;
+  }
+
+  :last-child {
+    border-bottom-right-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
   }
 }
 
 .commit,
 .generic_commit_status {
-
   a,
   button {
-    color: $gl-text-color;
     vertical-align: baseline;
   }
 
@@ -247,20 +271,16 @@
 
   .commit-row-description {
     font-size: 14px;
-    padding: 10px 15px;
-    margin: 10px 0;
-    background: $gray-light;
+    padding: 0 0 0 $gl-padding-8;
+    border: 0;
     display: none;
     white-space: pre-wrap;
     word-break: normal;
-
-    pre {
-      border: 0;
-      background: inherit;
-      padding: 0;
-      margin: 0;
-      white-space: pre-wrap;
-    }
+    color: $gl-text-color-secondary;
+    background: none;
+    font-family: inherit;
+    border-left: 2px solid $theme-gray-300;
+    border-radius: unset;
 
     a {
       color: $gl-text-color;
@@ -303,10 +323,8 @@
   }
 }
 
-
 .gpg-status-box {
   padding: 2px 10px;
-  margin-right: $gl-padding;
 
   &:empty {
     display: none;
@@ -317,8 +335,12 @@
   }
 
   &.invalid {
-    @include status-color($gray-dark, $gray, $gray-darkest);
+    @include status-color($gray-dark, color("gray"), $gray-darkest);
     border-color: $gray-darkest;
+
+    &:not(span):hover {
+      color: color("gray");
+    }
   }
 }