Merge branch 'gt-remove-unnecessary-line-before-reply-holder' into 'master'

Remove boxes around code comments

Closes #54030 and #54058

See merge request gitlab-org/gitlab-ce!23092

5 files changed, 25 insertions, 47 deletions

diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 441c6073202..5c9a28b8512 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -398,7 +398,7 @@ Please check your network connection and try again.`;
                   <div class="discussion-with-resolve-btn">
                     <button
                       type="button"
-                      class="js-vue-discussion-reply btn btn-text-field mr-sm-2 qa-discussion-reply"
+                      class="js-vue-discussion-reply btn btn-text-field qa-discussion-reply"
                       title="Add a reply"
                       @click="showReplyForm"
                     >
@@ -407,7 +407,7 @@ Please check your network connection and try again.`;
                     <div v-if="discussion.resolvable">
                       <button
                         type="button"
-                        class="btn btn-default mr-sm-2"
+                        class="btn btn-default ml-sm-2"
                         @click="resolveHandler();"
                       >
                         <i v-if="isResolving" aria-hidden="true" class="fa fa-spinner fa-spin"></i>
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 97b3f696139..5b30295adf9 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -178,7 +178,7 @@
 
 table {
   .discussion-form-container {
-    padding: $gl-padding-top $gl-padding $gl-padding;
+    padding: $gl-padding;
   }
 }
 
@@ -237,11 +237,12 @@ table {
 }
 
 .discussion-body,
-.diff-file {
+.diff-file,
+.commit-diff {
   .discussion-reply-holder {
     background-color: $white-light;
-    padding: 10px 16px;
     border-radius: 0 0 3px 3px;
+    padding: $gl-padding;
 
     &.is-replying {
       padding-bottom: $gl-padding;
@@ -254,7 +255,6 @@ table {
     display: flex;
   }
 
-
   .discussion-actions {
     display: table;
 
@@ -275,8 +275,10 @@ table {
     }
   }
 
-  .btn {
-    width: 100%;
+  @include media-breakpoint-down(xs) {
+    .btn {
+      width: 100%;
+    }
   }
 
   .btn-text-field {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 39d01c49fd7..2adfa0d312e 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -14,7 +14,7 @@ $note-form-margin-left: 72px;
 }
 
 @mixin outline-comment() {
-  margin: $gl-padding;
+  margin: $gl-padding $gl-padding 0;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 }
@@ -27,8 +27,10 @@ $note-form-margin-left: 72px;
   }
 }
 
-.main-notes-list {
-  @include vertical-line(36px);
+.issuable-discussion {
+  .main-notes-list {
+    @include vertical-line(36px);
+  }
 }
 
 .notes {
@@ -76,10 +78,10 @@ $note-form-margin-left: 72px;
     .card {
       border: 0;
     }
+  }
 
-    li.note {
-      border-bottom: 1px solid $border-color;
-    }
+  li.note {
+    border-bottom: 1px solid $border-color;
   }
 
   .replies-toggle {
@@ -161,20 +163,6 @@ $note-form-margin-left: 72px;
     position: relative;
     border-bottom: 0;
 
-    &:target,
-    &.target {
-      border-bottom: 1px solid $white-normal;
-
-      &:not(:first-child) {
-        border-top: 1px solid $white-normal;
-        margin-top: -1px;
-      }
-
-      .timeline-entry-inner {
-        border-bottom: 0;
-      }
-    }
-
     &.being-posted {
       pointer-events: none;
       opacity: 0.5;
@@ -462,7 +450,7 @@ $note-form-margin-left: 72px;
     font-family: $regular-font;
 
     td {
-      border: 1px solid $white-normal;
+      border: 1px solid $border-color;
       border-left: 0;
 
       &.notes_content {
@@ -504,8 +492,6 @@ $note-form-margin-left: 72px;
   }
 
   .note-wrapper {
-    @include outline-comment();
-
     &.system-note {
       border: 0;
       margin-left: 20px;
@@ -514,23 +500,14 @@ $note-form-margin-left: 72px;
 
   .discussion-reply-holder {
     border-radius: 0 0 $border-radius-default $border-radius-default;
-    border-top: 1px solid $border-color;
     position: relative;
   }
 }
 
 .commit-diff {
-  .notes {
-    @include vertical-line(52px);
-  }
-
   .notes_content {
     background-color: $white-light;
   }
-
-  .discussion-reply-holder {
-    border-top: 1px solid $border-color;
-  }
 }
 
 .discussion-header,
@@ -943,12 +920,6 @@ $note-form-margin-left: 72px;
     border-bottom: 1px solid $border-color;
   }
 
-  .note-wrapper.outlined {
-    margin: 0;
-    border: 0;
-    border-radius: 0;
-  }
-
   .discussion-form-container {
     padding: $gl-padding;
   }
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index bc918430823..e125d7f108a 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -5,7 +5,7 @@
 - note_editable = can?(current_user, :admin_note, note)
 - note_counter = local_assigns.fetch(:note_counter, 0)
 
-%li.timeline-entry.note-wrapper.outlined{ id: dom_id(note),
+%li.timeline-entry.note-wrapper{ id: dom_id(note),
   class: ["note", "note-row-#{note.id}", ('system-note' if note.system)],
   data: { author_id: note.author.id,
     editable: note_editable,
diff --git a/changelogs/unreleased/gt-remove-unnecessary-line-before-reply-holder.yml b/changelogs/unreleased/gt-remove-unnecessary-line-before-reply-holder.yml
new file mode 100644
index 00000000000..142a9c1f2cc
--- /dev/null
+++ b/changelogs/unreleased/gt-remove-unnecessary-line-before-reply-holder.yml
@@ -0,0 +1,5 @@
+---
+title: Remove unnecessary line before reply holder
+merge_request: 23092
+author: George Tsiolis
+type: changed