6 files changed, 82 insertions, 21 deletions
diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
index 48490869364..a64cefb62bd 100644
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ b/app/assets/javascripts/behaviors/details_behavior.js
@@ -15,6 +15,11 @@
     return $("body").on("click", ".js-details-expand", function(e) {
       $(this).next('.js-details-content').removeClass("hide");
       $(this).hide();
+
+      var truncatedItem = $(this).siblings('.js-details-short');
+      if (truncatedItem.length) {
+        truncatedItem.addClass("hide");
+      }
       return e.preventDefault();
     });
   });
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b271f8cf332..be2a7ceefff 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0;
 $background-color: $gray-light;
 $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
+$widget-expand-item: #e8f2f7;
+$widget-inner-border: #eef0f2;
 
 /*
  * Text
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 8ecac08137b..8ecf7fcb96d 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -33,10 +33,8 @@
 
   &.commit-info-row-header {
     line-height: 34px;
-
-    @media (min-width: $screen-sm-min) {
-      margin-bottom: 0;
-    }
+    padding: 10px 0;
+    margin-bottom: 0;
 
     .commit-options-dropdown-caret {
       @media (max-width: $screen-sm) {
@@ -80,6 +78,58 @@
   }
 }
 
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.commit-info-widget {
+  background: $background-color;
+  color: $gl-gray;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .widget-row {
+    padding: $gl-padding;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $widget-inner-border;
+    }
+
+    &.branch-info {
+      .monospace,
+      .commit-info {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .icon-container {
+    display: inline-block;
+    margin-right: 8px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.commit-icon {
+      svg {
+        path {
+          fill: $gl-text-color;
+        }
+      }
+    }
+  }
+
+  .label.label-gray {
+    background-color: $widget-expand-item;
+  }
+}
+
 .ci-status-link {
   svg {
     overflow: visible;
@@ -88,6 +138,7 @@
 
 .commit-box {
   border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
 
   .commit-title {
     margin: 0;
@@ -138,6 +189,9 @@
 }
 
 .commit-action-buttons {
+  position: relative;
+  top: -1px;
+
   i {
     color: $gl-icon-color;
     font-size: 13px;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index ad315cfae62..52d6a39bd59 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -33,21 +33,22 @@
     color: $gl-dark-link-color;
   }
 
-  .text-expander {
-    display: inline-block;
-    background: $gray-light;
-    color: $gl-placeholder-color;
-    padding: 0 5px;
-    cursor: pointer;
-    border: 1px solid $border-gray-dark;
-    border-radius: $border-radius-default;
-    margin-left: 5px;
-    line-height: 1;
-
-    &:hover {
-      background-color: darken($gray-light, 10%);
-      text-decoration: none;
-    }
+}
+
+.text-expander {
+  display: inline-block;
+  background: $gray-light;
+  color: $gl-placeholder-color;
+  padding: 0 5px;
+  cursor: pointer;
+  border: 1px solid $border-gray-dark;
+  border-radius: $border-radius-default;
+  margin-left: 5px;
+  line-height: 1;
+
+  &:hover {
+    background-color: darken($gray-light, 10%);
+    text-decoration: none;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 3d2b024fe5c..a2f5c6c6bd3 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -54,7 +54,6 @@
       margin: 0 0 10px;
     }
 
-
     .login-footer {
       margin-top: 10px;
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f510e3d3cdf..f8e31a624ec 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -60,7 +60,7 @@
   }
 
   .ci_widget {
-    border-bottom: 1px solid #eef0f2;
+    border-bottom: 1px solid $widget-inner-border;
 
     svg {
       margin-right: 4px;