1 files changed, 146 insertions, 13 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 54124a3d658..e66c1f8d072 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -28,17 +28,121 @@ ul.notes {
     }
   }
 
-  .note-created-ago, .note-updated-at {
+  .note-created-ago,
+  .note-updated-at {
     white-space: nowrap;
   }
 
   .system-note {
     font-size: 14px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background: #fdfdfd;
+    padding: 0;
+    clear: both;
+
+    &.timeline-entry::after {
+      clear: none;
+    }
+
+    .system-note-message {
+      display: inline-block;
+
+      &::first-letter {
+        text-transform: lowercase;
+      }
+
+      a {
+        color: $gl-link-color;
+        text-decoration: none;
+      }
+
+      p {
+        display: inline-block;
+        margin: 0;
+
+        &::first-letter {
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    .timeline-content {
+      padding: 14px 10px;
+    }
+
+    .note-body {
+      overflow: hidden;
+
+      .system-note-commit-list-toggler {
+        display: none;
+        padding: 10px 0 0;
+        cursor: pointer;
+        position: relative;
+        z-index: 2;
+
+        &:hover {
+          color: $gl-link-color;
+          text-decoration: underline;
+        }
+      }
+
+      .note-text {
+        & p:first-child {
+          display: none;
+        }
+
+        &.system-note-commit-list {
+          max-height: 63px;
+          overflow: hidden;
+          display: block;
+
+          ul {
+            margin: 3px 0 3px 15px !important;
+
+            li {
+              font-family: $monospace_font;
+              font-size: 12px;
+            }
+          }
+
+          p:first-child {
+            display: none;
+          }
+
+          p:last-child {
+            a {
+              color: $gl-text-color;
+
+              &:hover {
+                color: $gl-link-color;
+              }
+            }
+          }
+
+          &::after {
+            content: '';
+            width: 100%;
+            height: 67px;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background: linear-gradient(rgba($gray-light, 0.1) -100px, $white-light 100%);
+          }
+
+          &.hide-shade {
+            max-height: 100%;
+            overflow: auto;
+
+            &::after {
+              display: none;
+              background: transparent;
+            }
+          }
+        }
+      }
+    }
 
     .timeline-icon {
+      display: none;
+
       .avatar {
         visibility: hidden;
 
@@ -64,6 +168,12 @@ ul.notes {
     position: relative;
     border-bottom: 1px solid $table-border-gray;
 
+    &.note-discussion {
+      &.timeline-entry {
+        padding: 14px 10px;
+      }
+    }
+
     &.is-editting {
       .note-header,
       .note-text,
@@ -87,10 +197,8 @@ ul.notes {
         overflow: auto;
         word-wrap: break-word;
         @include md-typography;
-
         // Reset ul style types since we're nested inside a ul already
         @include bulleted-list;
-
         ul.task-list {
           ul:not(.task-list) {
             padding-left: 1.3em;
@@ -104,11 +212,6 @@ ul.notes {
         padding: 2px;
         margin-top: 10px;
       }
-
-      .award-control {
-        font-size: 13px;
-        padding: 2px 5px;
-      }
     }
 
     .note-header {
@@ -145,11 +248,36 @@ ul.notes {
   }
 }
 
+.page-sidebar-pinned.right-sidebar-expanded {
+  @media (max-width: $screen-lg-min) {
+    .note-header {
+      .note-headline-light {
+        display: block;
+      }
+
+      .note-actions {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+}
+
 // Diff code in discussion view
 .discussion-body .diff-file {
+  .file-title {
+    cursor: default;
+
+    &:hover {
+      background-color: $gray-light;
+    }
+  }
+
   .diff-header > span {
     margin-right: 10px;
   }
+
   .line_content {
     white-space: pre-wrap;
   }
@@ -217,6 +345,10 @@ ul.notes {
   }
 }
 
+.discussion-header {
+  font-size: 14px;
+}
+
 .note-headline-light,
 .discussion-headline-light {
   color: $notes-light-color;
@@ -334,7 +466,7 @@ ul.notes {
 
   .add-diff-note {
     margin-top: -4px;
-    @include border-radius(40px);
+    border-radius: 40px;
     background: #fff;
     padding: 4px;
     font-size: 16px;
@@ -345,6 +477,7 @@ ul.notes {
     width: 32px;
     // "hide" it by default
     display: none;
+
     &:hover {
       background: $gl-info;
       color: #fff;
@@ -448,7 +581,7 @@ ul.notes {
 .discussion-next-btn {
   svg {
     margin: 0;
-    
+
     path {
       fill: $gray-darkest;
     }