1 files changed, 58 insertions, 12 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 299eda53140..25400d886fb 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,17 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: $note-targe3-outside; }
-  50% { background: $note-targe3-inside; }
-  to { background: $note-targe3-outside; }
+  from {
+    background: $note-targe3-outside;
+  }
+
+  50% {
+    background: $note-targe3-inside;
+  }
+
+  to {
+    background: $note-targe3-outside;
+  }
 }
 
 ul.notes {
@@ -33,10 +41,12 @@ ul.notes {
 
     .diff-content {
       overflow: visible;
+      padding: 0;
     }
   }
 
-  > li { // .timeline-entry
+  > li {
+    // .timeline-entry
     padding: 0;
     display: block;
     position: relative;
@@ -153,7 +163,6 @@ ul.notes {
     }
 
     .note-header {
-
       @include notes-media('max', map-get($grid-breakpoints, xs)) {
         .inline {
           display: block;
@@ -245,7 +254,6 @@ ul.notes {
 
       .system-note-commit-list-toggler {
         color: $gl-link-color;
-        display: none;
         padding: 10px 0 0;
         cursor: pointer;
         position: relative;
@@ -624,20 +632,18 @@ ul.notes {
 .line_holder .is-over:not(.no-comment-btn) {
   .add-diff-note {
     opacity: 1;
+    z-index: 101;
   }
 }
 
 .add-diff-note {
   @include btn-comment-icon;
   opacity: 0;
-  margin-top: -2px;
   margin-left: -55px;
   position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 10;
-
-  .new & {
-    margin-top: -10px;
-  }
 }
 
 .discussion-body,
@@ -665,7 +671,6 @@ ul.notes {
     background-color: $white-light;
   }
 
-
   a {
     color: $gl-link-color;
   }
@@ -771,3 +776,44 @@ ul.notes {
     height: auto;
   }
 }
+
+// Vue refactored diff discussion adjustments
+.files {
+  .diff-discussions {
+    .note-discussion.timeline-entry {
+      padding-left: 0;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      > .timeline-entry-inner {
+        padding: 0;
+
+        > .timeline-content {
+          margin-left: 0;
+        }
+
+        > .timeline-icon {
+          display: none;
+        }
+      }
+
+      .discussion-body {
+        padding-top: 0;
+
+        .discussion-wrapper {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  .diff-comment-form {
+    display: block;
+  }
+
+  .add-diff-note svg {
+    margin-top: 4px;
+  }
+}