1 files changed, 67 insertions, 3 deletions

diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index bb72f453d1b..cd9f2d787c5 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -54,7 +54,11 @@
   .mr-widget-pipeline-graph {
     display: inline-block;
     vertical-align: middle;
-    margin: 0 -6px 0 0;
+    margin-right: 4px;
+
+    .stage-cell .stage-container {
+      margin: 3px 3px 3px 0;
+    }
 
     .dropdown-menu {
       margin-top: 11px;
@@ -228,7 +232,7 @@
     margin: 10px 0;
     background: $gray-light;
     display: none;
-    white-space: pre-line;
+    white-space: pre-wrap;
     word-break: normal;
 
     pre {
@@ -250,8 +254,8 @@
     }
 
     .committed_ago {
-      float: right;
       @extend .cgray;
+      float: right;
     }
   }
 }
@@ -279,3 +283,63 @@
     color: $gl-text-color;
   }
 }
+
+
+.gpg-status-box {
+  &.valid {
+    @include green-status-color;
+  }
+
+  &.invalid {
+    @include status-color($gray-dark, $gray, $common-gray-dark);
+    border-color: $common-gray-light;
+  }
+}
+
+.gpg-popover-status {
+  display: flex;
+  align-items: center;
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+.gpg-popover-icon {
+  // same margin as .s32.avatar
+  margin-right: $btn-side-margin;
+
+  &.valid {
+    svg {
+      border: 1px solid $brand-success;
+
+      fill: $brand-success;
+    }
+  }
+
+  &.invalid {
+    svg {
+      border: 1px solid $common-gray-light;
+
+      fill: $common-gray-light;
+    }
+  }
+
+  svg {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+}
+
+.gpg-popover-user-link {
+  display: flex;
+  align-items: center;
+  margin-bottom: $gl-padding / 2;
+  text-decoration: none;
+  color: $gl-text-color;
+}
+
+.commit .gpg-popover-help-link {
+  display: block;
+  color: $link-color;
+}