Rebased and squashed commits

- all commits squashed to make danger review happy

2 files changed, 45 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index d2d35d91e0b..623c44e062f 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1093,6 +1093,17 @@ table.code {
   line-height: 0;
 }
 
+.discussion-collapsible {
+  margin: 0 $gl-padding $gl-padding 71px;
+}
+
+.parallel {
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}
+
 @media (max-width: map-get($grid-breakpoints, md)-1) {
   .diffs .files {
     @include fixed-width-container;
@@ -1110,6 +1121,11 @@ table.code {
       padding-right: 0;
     }
   }
+
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
 }
 
 .image-diff-overlay,
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e880b941d67..7bd1a4138e4 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -134,6 +134,16 @@ $note-form-margin-left: 72px;
     }
   }
 
+  .discussion-toggle-replies {
+    border-top: 0;
+    border-radius: 4px 4px 0 0;
+
+    &.collapsed {
+      border: 0;
+      border-radius: 4px;
+    }
+  }
+
   .note-created-ago,
   .note-updated-at {
     white-space: normal;
@@ -462,6 +472,14 @@ $note-form-margin-left: 72px;
     position: relative;
   }
 
+  .notes-content .discussion-notes.diff-discussions {
+    border-bottom: 1px solid $border-color;
+
+    &:nth-last-child(1) {
+      border-bottom: 0;
+    }
+  }
+
   .notes_holder {
     font-family: $regular-font;
 
@@ -517,6 +535,17 @@ $note-form-margin-left: 72px;
   .discussion-reply-holder {
     border-radius: 0 0 $border-radius-default $border-radius-default;
     position: relative;
+
+    .discussion-form {
+      width: 100%;
+      background-color: $gray-light;
+      padding: 0;
+    }
+
+    .disabled-comment {
+      padding: $gl-vert-padding 0;
+      width: 100%;
+    }
   }
 }