Update draft comments design to match new design

ee/app/assets/javascripts/batch_comments/components/draft_note.vue

@@ -63,7 +63,7 @@ export default {
 <template>
   <article
     :class="componentClasses"
-    class="draft-note-component"
+    class="draft-note-component note-wrapper"
   >
     <header class="draft-note-header">
       <strong class="badge draft-pending-label">

ee/app/assets/stylesheets/components/batch_comments/draft_note.scss

+$draft-actions-left-margin: 40px + $gl-padding;
+
 .draft-note-component {
   margin: 0;
   background: $orange-50;
@@ -21,13 +23,18 @@
   .referenced-commands.draft-note-commands {
     background: $orange-100;
     font-size: $label-font-size;
-    margin-top: $gl-padding;
-    margin-left: 40px + $gl-padding;
+    margin: 0 0 $gl-padding $draft-actions-left-margin;
   }
 
   .timeline-entry {
     background-color: transparent;
   }
+
+  .draft-note-actions {
+    @include notes-media('min', map-get($grid-breakpoints, sm)) {
+      margin-left: $draft-actions-left-margin;
+    }
+  }
 }
 
 button[disabled] {
@@ -41,14 +48,13 @@ button[disabled] {
 }
 
 .draft-note-header {
-  padding: $gl-padding-8 $gl-padding;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .draft-note-resolution {
-  padding: $gl-padding-4 $gl-padding;
+  padding: 0 $gl-padding;
   line-height: 1;
   font-size: $label-font-size;
   color: $theme-gray-700;
@@ -78,34 +84,32 @@ button[disabled] {
   vertical-align: text-top;
 }
 
-.draft-note-actions {
-  padding: $gl-padding;
-}
-
 .discussion-body,
 .diff-file {
   .notes .note {
     &.draft-note {
-      background-color: $white-light;
-      margin: 0 $gl-padding;
-      border: 1px solid $border-color;
-
-      .timeline-entry-inner {
-        padding-top: 0;
-        padding-bottom: 0;
-        padding-right: 0;
+      margin: $gl-padding-8 0 $gl-padding;
+      padding: 0;
+      border: 0;
+
+      .note-actions {
+        margin-top: -26px;
+      }
+
+      &.is-editing {
+        margin-bottom: 0;
       }
     }
   }
 
   .notes_holder {
     .notes_content {
-      &.parallel ul.draft-notes > li {
-        padding-left: 40px;
-      }
-
       .notes {
         &.draft-notes {
+          &::before {
+            border: 0;
+          }
+
           background-color: transparent;
         }
       }

ee/changelogs/unreleased/_acet-discussion-redesign-fix-for-draft-comments.yml

+---
+title: Update draft comments design to match new design
+merge_request: 8405
+author:
+type: fixed