diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index f231db33b1eb74eec5454b07df51a1af82458359..ea9e80ee6d3d2bd4c5760285195b4801ae40548c 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -86,7 +86,7 @@ export default {
     :note="draft"
     :line="line"
     :discussion-root="true"
-    class="draft-note-component draft-note gl-mb-0!"
+    class="draft-note-component draft-note"
     @handleEdit="handleEditing"
     @cancelForm="handleNotEditing"
     @updateSuccess="handleNotEditing"
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index b2841172fe1e6dbb151a9d9a109b93ff13f95c4b..be8b1a16352bf682230f95d1da8d96e8f55789c5 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -149,8 +149,8 @@ export default {
       if (this.showBody) {
         domParts.header = 'gl-rounded-bottom-left-none gl-rounded-bottom-right-none';
         domParts.contentByHash =
-          'gl-rounded-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100';
-        domParts.content = 'gl-rounded-bottom-left-base gl-rounded-bottom-right-base';
+          'gl-rounded-none gl-rounded-bottom-left-large gl-rounded-bottom-right-large gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100';
+        domParts.content = 'gl-rounded-bottom-left-large gl-rounded-bottom-right-large';
       }
 
       return domParts;
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 287b2fc1973d858afc5f18cb886cb66894136c38..98b80910b221b475d8cc6a6877b10c0f82e675ff 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -242,7 +242,7 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
-    <div class="gl-mb-3 gl-text-gray-500 gl-pb-3">
+    <div class="gl-mb-3 gl-text-gray-500 gl-pt-3">
       <multiline-comment-form
         :line="line"
         :line-range="lines"
diff --git a/app/assets/javascripts/issues/show/components/edited.vue b/app/assets/javascripts/issues/show/components/edited.vue
index 73dbf5bc77efbe14e3bf052a07f6e2d289159806..22d2bf0286d5d6093463ca73eacf0a56c0256602 100644
--- a/app/assets/javascripts/issues/show/components/edited.vue
+++ b/app/assets/javascripts/issues/show/components/edited.vue
@@ -83,7 +83,7 @@ export default {
           <time-ago-tooltip :time="updatedAt" tooltip-placement="bottom" />
         </template>
         <template #author>
-          <gl-link :href="updatedByPath" class="gl-font-sm gl-hover-text-gray-900 gl-text-gray-700">
+          <gl-link :href="updatedByPath" class="gl-font-sm gl-text-gray-700 gl-hover-text-gray-900">
             {{ updatedByName }}
           </gl-link>
         </template>
diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue
index 75cacd9ace0616e3e4eb354aa86600883f6ed4e5..bd19d518349ac91744a7d83ad36faf3f048fc440 100644
--- a/app/assets/javascripts/notes/components/diff_discussion_header.vue
+++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { GlButton, GlIcon, GlAvatar, GlAvatarLink } from '@gitlab/ui';
 import { escape } from 'lodash';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions } from 'vuex';
@@ -13,6 +13,8 @@ import NoteHeader from './note_header.vue';
 export default {
   name: 'DiffDiscussionHeader',
   components: {
+    GlButton,
+    GlIcon,
     GlAvatar,
     GlAvatarLink,
     NoteEditedText,
@@ -95,6 +97,9 @@ export default {
     toggleClass() {
       return this.discussion.expanded ? 'expanded' : 'collapsed';
     },
+    toggleChevronIconName() {
+      return this.discussion.expanded ? 'chevron-down' : 'chevron-right';
+    },
   },
   methods: {
     ...mapActions(['toggleDiscussion']),
@@ -102,6 +107,10 @@ export default {
       this.toggleDiscussion({ discussionId: this.discussion.id });
     },
   },
+  i18n: {
+    showThread: __('Show thread'),
+    hideThread: __('Hide thread'),
+  },
 };
 </script>
 
@@ -118,15 +127,8 @@ export default {
         <gl-avatar :src="author.avatar_url" :alt="author.name" :size="32" />
       </gl-avatar-link>
     </div>
-    <div class="timeline-content w-100 gl-ml-3" :class="toggleClass">
-      <note-header
-        :author="author"
-        :created-at="firstNote.created_at"
-        :note-id="firstNote.id"
-        :include-toggle="true"
-        :expanded="discussion.expanded"
-        @toggleHandler="toggleDiscussionHandler"
-      >
+    <div class="timeline-content w-100 gl-ml-2" :class="toggleClass">
+      <note-header :author="author" :created-at="firstNote.created_at" :note-id="firstNote.id">
         <span v-safe-html="headerText"></span>
       </note-header>
       <note-edited-text
@@ -134,15 +136,32 @@ export default {
         :edited-at="discussion.resolved_at"
         :edited-by="discussion.resolved_by"
         :action-text="resolvedText"
-        class-name="discussion-headline-light js-discussion-headline gl-pl-3"
+        class-name="discussion-headline-light js-discussion-headline gl-pl-3 gl-mt-2"
       />
       <note-edited-text
         v-else-if="lastUpdatedAt"
         :edited-at="lastUpdatedAt"
         :edited-by="lastUpdatedBy"
         :action-text="__('Last updated')"
-        class-name="discussion-headline-light js-discussion-headline gl-pl-3"
+        class-name="discussion-headline-light js-discussion-headline gl-pl-3 gl-mb-3"
       />
+      <div ref="discussionActions" class="discussion-actions gl-mt-3 gl-mb-2 gl-ml-n2 gl-pl-3">
+        <gl-button
+          category="tertiary"
+          size="small"
+          class="note-action-button discussion-toggle-button js-vue-toggle-button gl-pl-0! gl-py-1! gl-text-secondary!"
+          data-testid="thread-toggle"
+          @click="toggleDiscussionHandler"
+        >
+          <gl-icon ref="chevronIcon" :name="toggleChevronIconName" class="gl-mr-1" />
+          <template v-if="discussion.expanded">
+            {{ $options.i18n.hideThread }}
+          </template>
+          <template v-else>
+            {{ $options.i18n.showThread }}
+          </template>
+        </gl-button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 79157c3f99cb6380006da967d1e042eac56da4d8..e4f828bb48e20f0c9b833f00ea504fb079b1496b 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -131,6 +131,7 @@ export default {
   <div class="discussion-notes">
     <ul
       class="notes"
+      :class="{ 'notes-group': shouldGroupReplies }"
       @mouseenter="handleMouseEnter(discussion)"
       @mouseleave="handleMouseLeave(discussion)"
     >
@@ -170,6 +171,7 @@ export default {
             v-if="hasReplies"
             :collapsed="!isExpanded"
             :replies="replies"
+            :internal-note="isDiscussionInternal"
             @toggle="toggleDiscussion({ discussionId: discussion.id })"
           />
           <template v-if="isExpanded">
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index fcb9dc43e8eda85728c34886f66bafd2a63e9c58..7723750c850c83a1f117435ec5f50b489c9cbb1d 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -197,7 +197,7 @@ export default {
       :edited-at="note.last_edited_at"
       :edited-by="note.last_edited_by"
       :action-text="__('Edited')"
-      class="note_edited_ago"
+      class="note_edited_ago gl-mt-3"
     />
     <note-awards-list
       v-if="note.award_emoji && note.award_emoji.length"
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index 25c82c29a29c088d92c0499de692ecea43adf0ba..446d2eb84a1b12815a2f4248acec9fc4b303589d 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -33,7 +33,7 @@ export default {
     className: {
       type: String,
       required: false,
-      default: 'edited-text',
+      default: 'edited-text gl-text-secondary',
     },
   },
   i18n: EDITED_TEXT,
@@ -56,7 +56,7 @@ export default {
         <gl-link
           :href="editedBy.path"
           :data-user-id="editedBy.id"
-          class="js-user-link author-link gl-hover-text-decoration-underline"
+          class="js-user-link author-link gl-hover-text-decoration-underline gl-hover-text-gray-900 gl-text-gray-700"
         >
           {{ editedBy.name }}
         </gl-link>
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 9aaae960b6f7706ee44ace68f332710f80ef1791..77ce5ea5910fe9cbaf426f7e106f256379784ba4 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -352,7 +352,7 @@ export default {
         </template>
       </gl-sprintf>
     </div>
-    <div class="flash-container timeline-content"></div>
+    <div class="flash-container"></div>
     <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form">
       <comment-field-layout :noteable-data="getNoteableData" :is-internal-note="isInternalNote">
         <markdown-editor
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index c3701c01ee213b2d2fa17b4c7d721d10e2170df4..ec7625f91c39492c0cf9c1d2927f59bb6987476b 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,15 +1,14 @@
 <script>
-import { GlIcon, GlBadge, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions } from 'vuex';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     TimeAgoTooltip,
-    GlIcon,
     GlBadge,
     GlLoadingIcon,
   },
@@ -42,16 +41,6 @@ export default {
       required: false,
       default: '',
     },
-    includeToggle: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    expanded: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     showSpinner: {
       type: Boolean,
       required: false,
@@ -90,9 +79,6 @@ export default {
     authorHref() {
       return this.author.path || this.author.webUrl;
     },
-    toggleChevronIconName() {
-      return this.expanded ? 'chevron-up' : 'chevron-down';
-    },
     noteTimestampLink() {
       if (this.noteUrl) return this.noteUrl;
 
@@ -125,9 +111,6 @@ export default {
   },
   methods: {
     ...mapActions(['setTargetNoteHash']),
-    handleToggle() {
-      this.$emit('toggleHandler');
-    },
     updateTargetNoteHash() {
       if (this.$store) {
         this.setTargetNoteHash(this.noteTimestampLink);
@@ -142,31 +125,11 @@ export default {
       this.isUsernameLinkHovered = false;
     },
   },
-  i18n: {
-    showThread: __('Show thread'),
-    hideThread: __('Hide thread'),
-  },
 };
 </script>
 
 <template>
   <div class="note-header-info">
-    <div v-if="includeToggle" ref="discussionActions" class="discussion-actions">
-      <button
-        class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button"
-        data-testid="thread-toggle"
-        @click="handleToggle"
-      >
-        <gl-icon ref="chevronIcon" :name="toggleChevronIconName" />
-        <template v-if="expanded">
-          {{ $options.i18n.hideThread }}
-        </template>
-        <template v-else>
-          {{ $options.i18n.showThread }}
-        </template>
-      </button>
-    </div>
     <template v-if="hasAuthor">
       <span
         v-if="emailParticipant"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 493beb8cea9e5c2548983323437c4a9e9f9ea11e..e4c89f49e43373c208102816636123285c3d8d02 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -181,10 +181,9 @@ export default {
     },
     discussionHolderClass() {
       return {
-        'is-replying gl-pt-0!': this.isReplying,
+        'is-replying': this.isReplying,
         'internal-note': this.isDiscussionInternal,
         'public-note': !this.isDiscussionInternal,
-        'gl-pt-0!': !this.discussion.diff_discussion && this.isReplying,
       };
     },
   },
@@ -300,7 +299,7 @@ export default {
 </script>
 
 <template>
-  <timeline-entry-item class="note note-discussion">
+  <timeline-entry-item class="note note-discussion" :class="{ internal: isDiscussionInternal }">
     <div class="timeline-content">
       <div
         :data-discussion-id="discussion.id"
@@ -340,7 +339,7 @@ export default {
                 <li
                   v-else-if="canShowReplyActions && showReplies"
                   data-testid="reply-wrapper"
-                  class="discussion-reply-holder gl-border-t-0! gl-pb-5! clearfix"
+                  class="discussion-reply-holder clearfix"
                   :class="discussionHolderClass"
                 >
                   <discussion-actions
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index c817655b649aee37f3040967cb97812c4e8a8b82..dd2ba801329d92a6da560eb2cef61970832f272e 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -422,7 +422,7 @@ export default {
 <template>
   <timeline-entry-item
     :id="noteAnchorId"
-    :class="{ ...classNameBindings, 'internal-note': note.internal }"
+    :class="{ ...classNameBindings, 'internal-note internal': note.internal }"
     :data-award-url="note.toggle_award_path"
     :data-note-id="note.id"
     class="note note-wrapper note-comment"
@@ -443,7 +443,7 @@ export default {
       </gl-sprintf>
     </div>
 
-    <div v-if="isMRDiffView" class="timeline-avatar gl-float-left gl-pt-2">
+    <div v-if="isMRDiffView" class="timeline-avatar gl-float-left gl-pt-3!">
       <gl-avatar-link
         :href="author.path"
         :data-user-id="author.id"
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index 981b93246885131e0483b2a53c3a95bc9d6994c2..a8721bdf89e21aec639d9167bad19316b7948702 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -27,6 +27,10 @@ export default {
       type: Array,
       required: true,
     },
+    internalNote: {
+      type: Boolean,
+      required: false,
+    },
   },
   computed: {
     lastReply() {
@@ -37,11 +41,6 @@ export default {
 
       return uniqBy(authors, 'username');
     },
-    liClasses() {
-      return this.collapsed
-        ? 'gl-text-gray-500 gl-rounded-bottom-left-base! gl-rounded-bottom-right-base!'
-        : 'gl-border-b';
-    },
     buttonIcon() {
       return this.collapsed ? 'chevron-right' : 'chevron-down';
     },
@@ -60,8 +59,8 @@ export default {
 
 <template>
   <li
-    :class="liClasses"
-    class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border"
+    class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-pb-3 gl-text-secondary"
+    :class="[internalNote ? 'gl-pt-3' : 'gl-pt-2']"
   >
     <gl-button
       ref="toggle"
@@ -91,7 +90,7 @@ export default {
         <template #name>
           <gl-link
             :href="lastReply.author.path || lastReply.author.webUrl"
-            class="gl-text-body! gl-text-decoration-none! gl-mx-2"
+            class="gl-text-body! gl-text-decoration-none! gl-mx-2 gl-text-secondary!"
           >
             {{ lastReply.author.name }}
           </gl-link>
@@ -104,7 +103,7 @@ export default {
     </template>
     <gl-button
       v-else
-      class="gl-text-body! gl-text-decoration-none!"
+      class="gl-text-body! gl-text-decoration-none! gl-text-secondary!"
       variant="link"
       data-testid="collapse-replies-button"
       @click="toggle"
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
index 3636f222c2df4c954af1f4f2ee403b16df02891b..9f91f4247fa0d4f12ecdae1e334598fe82c18454 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
@@ -165,9 +165,8 @@ export default {
       return {
         'timeline-entry note-form': this.isNewDiscussion,
         // eslint-disable-next-line @gitlab/require-i18n-strings
-        'note note-wrapper note-comment discussion-reply-holder gl-border-t-0! clearfix': !this
-          .isNewDiscussion,
-        'gl-pt-0! is-replying': this.isEditing,
+        'note note-wrapper note-comment discussion-reply-holder clearfix': !this.isNewDiscussion,
+        'is-replying': this.isEditing,
         'internal-note': this.isInternalThread,
       };
     },
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
index 11aecc65803417fe70e0e557c5a7c04c8e5b4d4b..780a569e53613b39592a3492a2dd3233b643e696 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_note.vue
@@ -377,7 +377,8 @@ export default {
           :updated-at="note.lastEditedAt"
           :updated-by-name="lastEditedBy.name"
           :updated-by-path="lastEditedBy.webPath"
-          :class="isFirstNote ? 'gl-pl-3' : 'gl-pl-8'"
+          class="gl-text-secondary gl-display-inline-block gl-mb-3"
+          :class="isFirstNote ? 'gl-pl-3' : 'gl-pl-10 gl-ml-n2'"
         />
       </div>
       <div class="note-awards" :class="isFirstNote ? '' : 'gl-pl-7'">
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index b948a57ea33aaf5fbb3a3fda2cb81783593b2092..73a1037e70f9bd5c22321904325be361aae2de35 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -11,7 +11,8 @@ $diff-file-header: 41px;
   }
 
   table.code tr:last-of-type td:last-of-type {
-    border-bottom-right-radius: $border-radius-default - 1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .file-title,
@@ -428,12 +429,12 @@ $diff-file-header: 41px;
 table.code {
   width: 100%;
   font-family: $monospace-font;
+  background-color: transparent;
   border: 0;
   border-collapse: separate;
   margin: 0;
   padding: 0;
   table-layout: fixed;
-  border-radius: 0 0 $border-radius-default $border-radius-default;
 
   .diff-td.highlight-top {
     box-shadow: 0 -1px var(--highlight-border-color, $blue-300);
@@ -861,12 +862,18 @@ table.code {
   ul.notes {
     li.toggle-replies-widget,
     .discussion-reply-holder {
-      margin-left: 2.5rem;
-
       .reply-author-avatar {
         height: 1.5rem;
       }
     }
+
+    li.toggle-replies-widget {
+      margin-left: 2.5rem;
+    }
+
+    .discussion-reply-holder {
+      margin-left: 3.875rem;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 9cb264c992bf2b9a107bec9f7b4a8a1bd4d8ed22..798eb07d88763b69be92f39f221530ce4f7858b1 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -245,7 +245,7 @@ span.idiff {
     justify-content: space-between;
     background-color: $gray-light;
     border-bottom: 1px solid $border-color;
-    padding: $gl-padding-8 $gl-padding;
+    padding: $gl-padding-8 $gl-padding-12;
     margin: 0;
     min-height: px-to-rem(42px);
     border-radius: $border-radius-default $border-radius-default 0 0;
@@ -257,6 +257,10 @@ span.idiff {
 
   .file-header-content {
     padding-right: 30px;
+
+    > .btn {
+      margin-left: -$gl-padding-4;
+    }
   }
 
   a {
@@ -348,7 +352,7 @@ span.idiff {
     padding-bottom: $gl-padding;
 
     .discussion-reply-holder {
-      border-bottom: 1px solid $gray-50;
+      border-bottom: 1px solid $gray-100;
       border-radius: 0;
     }
   }
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 6b4f14789787b5a815c68e8102ebe8d385b14420..82b4834cc6fbc1501f372881137ebb16b96d11c1 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -98,7 +98,7 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
 
 @include media-breakpoint-down(sm) {
   ul.notes {
-    .flash-container.timeline-content {
+    .flash-container {
       margin-left: 0;
     }
   }
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 921e03f45f308440093f2ced82334ad5b04987a4..a0c38c26a9acc9c5886e592f966042804205d46d 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -30,6 +30,7 @@
 
   &:not(.note-form).internal-note .timeline-content,
   &:not(.note-form).draft-note .timeline-content {
+    padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding-12 !important;
     background-color: $orange-50 !important;
   }
 
@@ -43,10 +44,6 @@
       background-color: $line-target-blue;
     }
 
-    + .public-note.discussion-reply-holder {
-      padding-top: $gl-padding-12 !important;
-    }
-
     &.system-note .note-body .note-text.system-note-commit-list::after {
       background: linear-gradient(rgba($line-target-blue, 0.1) -100px, $line-target-blue 100%);
     }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index d112fd83ebfd4f608e89cb6ea4ecc5f307a1c523..1ecef113fa318d88dcb70764243bab9533a8a4a2 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -225,7 +225,7 @@ $tabs-holder-z-index: 250;
     clear: left;
 
     .note-body {
-      padding: 0 $gl-padding-8 $gl-padding-8 $gl-padding-32;
+      padding: 0 $gl-padding-8 $gl-padding-8 1.75rem;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5d644d636660addd6e97cce119caf57e01b087fa..5c5c550179159d46fb4d6694aa7991d3b8257834 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -268,34 +268,39 @@ table {
 .diff-file,
 .commit-diff {
   .discussion-reply-holder {
-    border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base;
-    padding: 0 $gl-padding $gl-padding-12 $gl-padding;
-    border-top: 1px solid $gray-50;
-
-    + .new-note {
-      border-top: 1px solid $gray-50;
-    }
-
-    &.is-replying {
-      padding-top: $gl-padding-12;
-    }
-
-    &.internal-note,
-    &.internal-note.is-replying {
-      padding-top: $gl-padding-12 !important;
-    }
+    margin-top: -1px;
+    margin-bottom: $gl-spacing-scale-3;
+    padding: 0 $gl-padding-12 $gl-padding-12;
+    background: $white;
+    border: 1px solid $gray-100;
+    border-top-color: $white;
+    border-bottom-left-radius: $gl-border-radius-large;
+    border-bottom-right-radius: $gl-border-radius-large;
+  }
+
+  .timeline-entry:first-of-type + .discussion-reply-holder,
+  .timeline-entry:first-of-type + .discussion-reply-holder + .new-note.discussion-reply-holder {
+    padding-top: $gl-padding-12;
+    border-top-color: $gray-100;
+    border-top-left-radius: $gl-border-radius-large;
+    border-top-right-radius: $gl-border-radius-large;
+  }
+
+  &.diff-file .note-wrapper:first-of-type + .discussion-reply-holder {
+    padding-top: 0;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 
-    .user-avatar-link {
-      img {
-        margin-top: -3px;
-      }
-    }
+  .note-wrapper.internal-note:first-of-type + .discussion-reply-holder {
+    margin-top: $gl-padding-8;
   }
 }
 
-.diff-td > .content > .discussion-reply-holder {
+.target + .discussion-reply-holder,
+.internal-note + .discussion-reply-holder {
   padding-top: $gl-padding-12;
-  @include gl-bg-gray-10;
 }
 
 .discussion-with-resolve-btn {
@@ -337,10 +342,6 @@ table {
     transition: border-color ease-in-out 0.15s,
       box-shadow ease-in-out 0.15s;
 
-    @include media-breakpoint-down(xs) {
-      margin-bottom: $gl-padding-8;
-    }
-
     &:hover {
       border: 1px solid $gray-500;
     }
@@ -465,3 +466,7 @@ table {
   transition: border-color ease-in-out 0.15s,
     box-shadow ease-in-out 0.15s;
 }
+
+.js-comment-form {
+  margin-top: $gl-padding-24;
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 8792c7f9a7206e13eab43e22264011cb2f835426..aed28f92afb6fb9770ebbc3014598d91956544ed 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -13,7 +13,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 @mixin vertical-line($top, $left) {
   content: '';
   position: absolute;
-  width: 2px;
+  width: 1px;
   left: $left;
   top: $top;
   height: calc(100% - #{$top});
@@ -22,13 +22,14 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 @mixin outline-comment() {
   margin: $gl-padding $gl-padding 0;
   border: 1px solid $border-color;
-  border-radius: $border-radius-default;
+  border-radius: $border-radius-large;
 }
 
 .issuable-discussion:not(.incident-timeline-events),
 .limited-width-notes {
   .main-notes-list::before,
-  .timeline-entry:last-child::before {
+  .timeline-entry:last-child::before,
+  .notes-group::before {
     @include vertical-line(15px, 15px);
   }
 
@@ -47,6 +48,11 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       top: 30px;
     }
   }
+
+  .notes-group .discussion-reply-holder:nth-child(2):last-of-type {
+    border-top-left-radius: $gl-border-radius-large;
+    border-top-right-radius: $gl-border-radius-large;
+  }
 }
 
 .notes {
@@ -57,7 +63,11 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   position: relative;
 
   &.timeline > .timeline-entry {
-    margin: $gl-padding 0;
+    margin: $gl-spacing-scale-3 0;
+
+    &.note-discussion {
+      margin-bottom: $gl-spacing-scale-4;
+    }
 
     &.system-note {
       margin-top: $gl-spacing-scale-1;
@@ -85,22 +95,18 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     &.note-skeleton,
     .draft-note {
       .timeline-avatar {
-        margin-top: 5px;
+        margin-top: 7px;
       }
 
-      .timeline-content:not(.flash-container) {
-        margin-left: 2.5rem;
-        border: 1px solid $border-color;
-        border-radius: $gl-border-radius-base;
-        padding: $gl-padding-4 $gl-padding-8;
-      }
-
-      &:not(.target) .timeline-content:not(.flash-container) {
-        background-color: $white;
+      .timeline-content {
+        margin-left: 1.75rem;
+        border-radius: $gl-border-radius-large;
+        padding: $gl-padding-8;
       }
 
-      &.draft-note .timeline-content:not(.flash-container) {
+      &.draft-note .timeline-content {
         border: 0;
+        margin-left: 2.75rem;
       }
 
       .note-header-info {
@@ -115,6 +121,15 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       }
     }
 
+    // Highlighted & internal notes
+    &.target,
+    &.internal-note {
+      .timeline-content {
+        padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding-12;
+        margin-left: 2.75rem;
+      }
+    }
+
     &.note-discussion {
       .timeline-content .discussion-wrapper {
         background-color: transparent;
@@ -124,38 +139,44 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
         ul li {
           &:first-of-type {
             .timeline-avatar {
-              margin-top: 5px;
+              margin-top: 7px;
             }
 
-            .timeline-content:not(.flash-container) {
-              margin-left: 2.5rem;
-              border-left: 1px solid $border-color;
-              border-right: 1px solid $border-color;
-              border-top: 1px solid $border-color;
-              border-top-left-radius: $gl-border-radius-base;
-              border-top-right-radius: $gl-border-radius-base;
-              padding: $gl-padding-4 $gl-padding-8;
+            .timeline-content {
+              padding: $gl-padding-8 $gl-padding-8 0 0;
+              margin-left: 2.25rem;
+              border-radius: $gl-border-radius-large;
             }
           }
 
-          &:not(.target) .timeline-content:not(.flash-container) {
-            background-color: $white;
+          // Highlighted note
+          &.target:first-of-type .timeline-content {
+            padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding-12;
+            margin-left: 2.75rem;
           }
 
-          &.draft-note .timeline-content:not(.flash-container) {
-            margin-left: 0;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+          // Internal note
+          &.internal-note:first-of-type .timeline-content {
+            margin-left: 2.75rem;
+          }
+
+          &.toggle-replies-widget + .timeline-entry .timeline-entry-inner {
+            .timeline-content {
+              border-top: 1px solid $gray-100;
+              border-top-left-radius: $gl-border-radius-large;
+              border-top-right-radius: $gl-border-radius-large;
+            }
           }
 
           &:not(:first-of-type) .timeline-entry-inner {
-            margin-left: 2.5rem;
-            border-left: 1px solid $border-color;
-            border-right: 1px solid $border-color;
-            background-color: $white;
+            margin-left: 3.875rem;
 
-            .timeline-content:not(.flash-container) {
-              padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 18px;
+            .timeline-content {
+              margin-top: -1px;
+              padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0 !important;
+              border: 1px solid $gray-100;
+              border-top: 0;
+              border-bottom: 0;
             }
 
             .timeline-discussion-body-footer {
@@ -163,18 +184,40 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
             }
 
             .timeline-avatar {
-              margin: $gl-padding-8 0 0 $gl-padding;
+              margin: $gl-padding-8 0 0 $gl-padding-12;
             }
 
             .timeline-discussion-body {
-              margin-left: 2rem;
+              margin-left: 2.75rem;
             }
           }
 
-          &:last-of-type .timeline-entry-inner {
-            border-bottom: 1px solid $border-color;
-            border-bottom-left-radius: $gl-border-radius-base;
-            border-bottom-right-radius: $gl-border-radius-base;
+          &:not(:last-of-type) .timeline-entry-inner {
+            .timeline-content {
+              border-bottom: 0;
+            }
+          }
+
+          // Internal note
+          &.internal-note:not(:first-of-type) .timeline-entry-inner {
+            .timeline-avatar {
+              margin-left: $gl-padding-12;
+            }
+          }
+
+          // Draft note
+          &.draft-note:not(:first-of-type) .timeline-content {
+            margin-left: 0;
+            border-top: 1px solid $gray-100;
+          }
+
+          &.draft-note:not(:first-of-type):not(:nth-of-type(2)) .timeline-content {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+          }
+
+          &.draft-note:last-of-type .timeline-content {
+            border-bottom: 1px solid $gray-100;
           }
         }
 
@@ -184,38 +227,29 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
               margin-top: 0;
             }
 
-            .timeline-content {
-              margin-left: 0;
-              border: 0;
-              padding: 0;
-            }
-
             .timeline-entry-inner {
-              margin-left: 2.5rem;
-              border-left: 1px solid $border-color;
-              border-right: 1px solid $border-color;
-              background-color: $white;
+              margin-left: 3.875rem;
 
               .timeline-content {
-                padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+                margin-top: -1px;
+                margin-left: 0;
+                padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 0;
+                border: 1px solid $gray-100;
+                border-bottom: 0;
+                border-radius: 0;
               }
 
               .timeline-avatar {
-                margin: $gl-padding-8 0 0 $gl-padding;
+                margin: $gl-padding-8 0 0 $gl-padding-12;
               }
 
               .timeline-discussion-body {
-                margin-left: 2rem;
+                margin-left: 2.75rem;
               }
             }
           }
         }
       }
-
-      .discussion-reply-holder {
-        border: 1px solid $border-color;
-        background-color: $white;
-      }
     }
 
     &.note-form {
@@ -232,6 +266,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
   }
 
+  .timeline-entry.internal + .timeline-entry.internal {
+    margin-top: $gl-spacing-scale-6;
+  }
+
   > .note-discussion {
     .card {
       border: 0;
@@ -337,7 +375,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
     .note-awards {
       .js-awards-block {
-        margin-top: 16px;
+        margin-top: $gl-padding-8;
       }
     }
 
@@ -382,7 +420,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
 
     .timeline-content {
-      margin-left: 30px;
+      margin-left: 2rem;
     }
 
     .note-header {
@@ -394,7 +432,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       padding: 0;
 
       ul {
-        margin: 0.5rem 0;
+        margin: $gl-padding-4 0 $gl-padding-8 0;
       }
 
       p {
@@ -420,6 +458,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       .system-note-commit-list-toggler {
         color: $blue-600;
         padding: 10px 0 0;
+        margin-left: 1.75rem;
         cursor: pointer;
         position: relative;
         z-index: 2;
@@ -479,9 +518,8 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 .discussion-body .diff-file {
   .file-title {
     cursor: default;
-    border-top: 0;
-    border-radius: 0;
-    margin-left: 2.5rem;
+    margin-left: 2.75rem;
+    margin-top: $gl-padding-4;
 
     &:hover {
       background-color: $gray-light;
@@ -497,35 +535,17 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   }
 
   .diff-content {
-    margin-left: 2.5rem;
+    margin-left: 2.75rem;
 
     &.outdated-lines-wrapper {
       margin-left: 0;
     }
 
-    .line_holder td:first-of-type {
-      @include gl-border-l;
-    }
-
-    .line_holder td:last-of-type {
-      @include gl-border-r;
-    }
-
     .discussion-notes {
-      margin-left: -2.5rem;
-
-      .notes {
-        background-color: transparent;
-      }
+      margin-left: -3.875rem;
 
-      .notes-content {
-        border: 0;
-      }
-
-      .timeline-content {
-        border-top: 0 !important;
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
+      .timeline-entry-inner::before {
+        top: $gl-padding-8 !important;
       }
     }
   }
@@ -591,11 +611,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
     .diff-td,
     td {
-      border: 1px solid $border-color;
-      border-left: 0;
-
       &.notes-content {
-        border-width: 1px 0;
         padding: 0;
         vertical-align: top;
         white-space: normal;
@@ -614,10 +630,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
           }
         }
 
-        .notes {
-          background-color: $white;
-        }
-
         a code {
           top: 0;
           margin-right: 0;
@@ -626,11 +638,22 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
   }
 
-  .diff-grid-comments:last-child {
-    .notes-content {
-      border-bottom-width: 0;
-      border-bottom-left-radius: #{$border-radius-default - 1px};
-      border-bottom-right-radius: #{$border-radius-default - 1px};
+  .diff-tr:last-of-type .diff-td.notes-content {
+    &:not(.parallel) {
+      border-bottom-left-radius: $border-radius-large - 1px;
+      border-bottom-right-radius: $border-radius-large - 1px;
+    }
+
+    &.parallel.old {
+      border-bottom-left-radius: $border-radius-large - 1px;
+    }
+
+    &.parallel.new {
+      border-bottom-right-radius: $border-radius-large - 1px;
+    }
+
+    .discussion-reply-holder {
+      margin-bottom: 0;
     }
   }
 }
@@ -649,13 +672,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   }
 
   .discussion-reply-holder {
-    border-top: 0;
-    border-radius: $gl-border-radius-base $gl-border-radius-base;
+    padding-top: 0;
+    border: 0;
+    border-radius: 0;
     position: relative;
 
     .discussion-form {
       width: 100%;
-      background-color: $gray-light;
       padding: 0;
     }
 
@@ -664,6 +687,12 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       width: 100%;
     }
   }
+
+  .diff-grid,
+  .diff-grid-comments:last-of-type .discussion-reply-holder {
+    border-bottom-left-radius: $gl-border-radius-large;
+    border-bottom-right-radius: $gl-border-radius-large;
+  }
 }
 
 .code-commit .notes-content,
@@ -708,10 +737,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
   }
 
-  .author-link {
-    color: $gl-text-color;
-  }
-
   // Prevent flickering of link when hovering between `author-name-link` and `.author-username-link`
   .author-name-link + .author-username .author-username-link {
     position: relative;
@@ -735,19 +760,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     padding-bottom: 0;
   }
 
-  .timeline-avatar {
-    margin-top: 5px;
-  }
-
   .timeline-content {
-    border-radius: $gl-border-radius-base;
-    padding: $gl-padding-8 !important;
-    @include gl-border;
-
-    &.expanded {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-radius: $gl-border-radius-large;
   }
 
   &.note-wrapper {
@@ -831,14 +847,8 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
  */
 
 .discussion-actions {
-  float: right;
   color: $gray-darkest;
 
-  @include media-breakpoint-down(xs) {
-    width: 100%;
-    margin: 0 0 $gl-padding-8;
-  }
-
   .btn-group > .discussion-next-btn {
     margin-left: -1px;
   }
@@ -985,7 +995,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
 .disabled-comment {
   background-color: $gray-light;
-  border-radius: $border-radius-base;
+  border-radius: $gl-border-radius-large;
   border: 1px solid $border-color;
   color: $note-disabled-comment-color;
   padding: $gl-padding-8 0;
@@ -1057,18 +1067,18 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       padding-left: 0;
 
       ul.notes li.note-wrapper {
-        .timeline-content:not(.flash-container) {
+        .timeline-content {
           padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
         }
 
         .timeline-avatar {
-          margin: $gl-padding-8 0 0 $gl-padding;
+          margin: $gl-padding-4 0 0 $gl-padding-12;
         }
       }
 
       ul.notes {
         li.toggle-replies-widget {
-          margin-left: 0;
+          margin-left: 1.1875rem;
           border-left: 0;
           border-right: 0;
           border-radius: 0 !important;
@@ -1100,18 +1110,15 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
         .discussion-wrapper {
           border: 0;
+          border-radius: 0;
         }
       }
     }
   }
 
   .draft-note-component.draft-note.timeline-entry {
-    .timeline-content:not(.flash-container) {
-      padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
-    }
-
     .timeline-avatar {
-      margin: $avatar-m-top 0 0 $avatar-m-left;
+      margin: $gl-padding-4 0 0 $gl-padding-8;
     }
   }
 
@@ -1176,3 +1183,30 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     background: var(--gray-50, $gray-50);
   }
 }
+
+// Targets a specific use-case where we use an old thread style
+.note.note-discussion .discussion .discussion-header + .discussion-body > .card:not(.diff-file) .timeline-entry {
+  &:not(:first-of-type) {
+    .note-body {
+      margin-left: 2.75rem;
+    }
+
+    &:nth-of-type(2) .timeline-content {
+      border-top: 1px solid $gray-100;
+      border-top-left-radius: $gl-border-radius-large;
+      border-top-right-radius: $gl-border-radius-large;
+    }
+  }
+}
+
+// Draft note in diffs
+.notes-group .discussion-collapsible:last-of-type .timeline-entry.draft-note:last-child {
+  margin-bottom: $gl-padding-24;
+}
+
+.notes.timeline > .timeline-entry.note-discussion .timeline-content .code ul li.draft-note:last-of-type .timeline-content {
+  border-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom: 0;
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 49230e558a8f0e64f3961ed7cddfb96088ad3d4c..88d83e78b7384a2c9c1fead58f8fae526e566ec5 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -196,11 +196,11 @@ def time_ago_with_tooltip(time, placement: 'top', html_class: '', short_format:
   def edited_time_ago_with_tooltip(editable_object, placement: 'top', html_class: 'time_ago', exclude_author: false)
     return unless editable_object.edited?
 
-    content_tag :small, class: 'edited-text' do
+    content_tag :small, class: 'edited-text gl-text-secondary gl-display-inline-block gl-my-3' do
       timeago = time_ago_with_tooltip(editable_object.last_edited_at, placement: placement, html_class: html_class)
 
       if !exclude_author && editable_object.last_edited_by
-        author_link = link_to_member(editable_object.project, editable_object.last_edited_by, avatar: false, extra_class: 'gl-hover-text-decoration-underline', author_class: nil)
+        author_link = link_to_member(editable_object.project, editable_object.last_edited_by, avatar: false, extra_class: 'gl-hover-text-decoration-underline gl-text-gray-700 gl-hover-text-gray-900', author_class: nil)
         output = safe_format(_("Edited %{timeago} by %{author}"), timeago: timeago, author: author_link)
       else
         output = safe_format(_("Edited %{timeago}"), timeago: timeago)
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index 224930e28df6ab88dbb5c5f19b048f7e3c0b9152..7e4f00ea2781264368402f03b1665be2731ed74b 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -50,5 +50,5 @@
           - if discussion.diff_discussion? && discussion.diff_file
             = render "discussions/diff_with_notes", discussion: discussion
           - else
-            .card
+            .card.gl-bg-transparent
               = render partial: "discussions/notes", locals: { discussion: discussion, disable_collapse_class: true }
diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml
index 5e6ebe87808b4b98bed77567743a9608a488c357..d4670c864b40758703ec48b3fc34729b98506c5b 100644
--- a/app/views/discussions/_notes.html.haml
+++ b/app/views/discussions/_notes.html.haml
@@ -15,7 +15,7 @@
         = badge_counter
     = render partial: "shared/notes/note", collection: discussion.notes, as: :note, locals: { badge_counter: badge_counter, show_image_comment_badge: show_image_comment_badge }
 
-    %li.discussion-reply-holder.clearfix{ class: 'gl-border-t-0! gl-pb-5!' }
+    %li.discussion-reply-holder.clearfix
       - if can_create_note?
         .discussion-with-resolve-btn
           = link_to_reply_discussion(discussion)
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index d37d707e935173fc78193c14e998f1145849901e..02ef84ab876af3b28f15c5d5b77e5b9ed3df93c2 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -5,7 +5,7 @@
 - else
   - preview_url = preview_markdown_path(@project)
 
-= form_for form_resources, url: new_form_url, remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form discussion-reply-holder gl-border-top-0!", "data-noteable-iid" => @note.noteable.try(:iid), }, authenticity_token: true do |f|
+= form_for form_resources, url: new_form_url, remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form discussion-reply-holder", "data-noteable-iid" => @note.noteable.try(:iid), }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
   = hidden_field_tag :merge_request_diff_head_sha, @note.noteable.try(:diff_head_sha)
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index 343a85974442739ebd8c99c3acf747f4d4a9ab4b..969ca2084d7d58df19e393a866f779ed39ffcf2f 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -10,7 +10,7 @@
   .notes.notes-form.timeline
     .timeline-entry.note-form
       .timeline-entry-inner
-        .flash-container.timeline-content
+        .flash-container
 
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
diff --git a/spec/frontend/notes/components/diff_discussion_header_spec.js b/spec/frontend/notes/components/diff_discussion_header_spec.js
index 123d53de3f3bccee83e8cd4b92097cb9dc7afca5..f47a31014fa45e553a263d832db1e81b5b66321e 100644
--- a/spec/frontend/notes/components/diff_discussion_header_spec.js
+++ b/spec/frontend/notes/components/diff_discussion_header_spec.js
@@ -1,7 +1,6 @@
-import { shallowMount } from '@vue/test-utils';
-
 import { nextTick } from 'vue';
-import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink, GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import diffDiscussionHeader from '~/notes/components/diff_discussion_header.vue';
 import createStore from '~/notes/stores';
 
@@ -13,15 +12,22 @@ describe('diff_discussion_header component', () => {
   let wrapper;
 
   const createComponent = ({ propsData = {} } = {}) => {
-    wrapper = shallowMount(diffDiscussionHeader, {
+    wrapper = shallowMountExtended(diffDiscussionHeader, {
       store,
       propsData: {
         discussion: discussionMock,
         ...propsData,
       },
+      stubs: {
+        GlButton,
+      },
     });
   };
 
+  const findActionsWrapper = () => wrapper.findComponent({ ref: 'discussionActions' });
+  const findToggleThreadButton = () => wrapper.findComponent(GlButton);
+  const findChevronIcon = () => wrapper.findComponent({ ref: 'chevronIcon' });
+
   beforeEach(() => {
     window.mrTabs = {};
     store = createStore();
@@ -166,4 +172,48 @@ describe('diff_discussion_header component', () => {
       });
     });
   });
+
+  describe('Toggle', () => {
+    describe('when includes a toggle', () => {
+      it('renders discussion actions', () => {
+        expect(findActionsWrapper().exists()).toBe(true);
+      });
+
+      it('has chevron-down icon if expanded prop is true', () => {
+        createComponent();
+
+        expect(findChevronIcon().props('name')).toBe('chevron-down');
+      });
+
+      it('has chevron-right icon if expanded is false', () => {
+        createComponent({
+          propsData: {
+            discussion: {
+              ...discussionMock,
+              expanded: false,
+            },
+          },
+        });
+
+        expect(findChevronIcon().props('name')).toBe('chevron-right');
+      });
+
+      it.each`
+        text                                    | expanded
+        ${diffDiscussionHeader.i18n.showThread} | ${false}
+        ${diffDiscussionHeader.i18n.hideThread} | ${true}
+      `('toggle button has text $text is expanded is $expanded', ({ text, expanded }) => {
+        createComponent({
+          propsData: {
+            discussion: {
+              ...discussionMock,
+              expanded,
+            },
+          },
+        });
+
+        expect(findToggleThreadButton().text()).toBe(text);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index 54f2bcd09ed23fa606d6cf4b3b0c1bf993b3995f..cf2bdbee5a0066eac5e0f2092dc000960327f3b9 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/spec/frontend/notes/components/note_header_spec.js
@@ -13,9 +13,6 @@ const actions = {
 describe('NoteHeader component', () => {
   let wrapper;
 
-  const findActionsWrapper = () => wrapper.findComponent({ ref: 'discussionActions' });
-  const findToggleThreadButton = () => wrapper.findByTestId('thread-toggle');
-  const findChevronIcon = () => wrapper.findComponent({ ref: 'chevronIcon' });
   const findActionText = () => wrapper.findComponent({ ref: 'actionText' });
   const findTimestampLink = () => wrapper.findComponent({ ref: 'noteTimestampLink' });
   const findTimestamp = () => wrapper.findComponent({ ref: 'noteTimestamp' });
@@ -59,65 +56,6 @@ describe('NoteHeader component', () => {
     });
   };
 
-  it('does not render discussion actions when includeToggle is false', () => {
-    createComponent({
-      includeToggle: false,
-    });
-
-    expect(findActionsWrapper().exists()).toBe(false);
-  });
-
-  describe('when includes a toggle', () => {
-    it('renders discussion actions', () => {
-      createComponent({
-        includeToggle: true,
-      });
-
-      expect(findActionsWrapper().exists()).toBe(true);
-    });
-
-    it('emits toggleHandler event on button click', () => {
-      createComponent({
-        includeToggle: true,
-      });
-
-      wrapper.find('.note-action-button').trigger('click');
-      expect(wrapper.emitted('toggleHandler')).toBeDefined();
-      expect(wrapper.emitted('toggleHandler')).toHaveLength(1);
-    });
-
-    it('has chevron-up icon if expanded prop is true', () => {
-      createComponent({
-        includeToggle: true,
-        expanded: true,
-      });
-
-      expect(findChevronIcon().props('name')).toBe('chevron-up');
-    });
-
-    it('has chevron-down icon if expanded prop is false', () => {
-      createComponent({
-        includeToggle: true,
-        expanded: false,
-      });
-
-      expect(findChevronIcon().props('name')).toBe('chevron-down');
-    });
-
-    it.each`
-      text                          | expanded
-      ${NoteHeader.i18n.showThread} | ${false}
-      ${NoteHeader.i18n.hideThread} | ${true}
-    `('toggle button has text $text is expanded is $expanded', ({ text, expanded }) => {
-      createComponent({
-        includeToggle: true,
-        expanded,
-      });
-
-      expect(findToggleThreadButton().text()).toBe(text);
-    });
-  });
-
   it('renders an author link if author is passed to props', () => {
     createComponent({ author });
 
diff --git a/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap b/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap
index af930f565090ce9b83977e9d0ddeac1a8c10a4ca..796a087d869eab7a24d3ead94902b83ef1830f66 100644
--- a/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap
+++ b/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap
@@ -5,7 +5,6 @@ exports[`Work Item Note Replying should have the note body and header 1`] = `
   actiontext=""
   author="[object Object]"
   emailparticipant=""
-  expanded="true"
   noteabletype=""
   noteurl=""
   showspinner="true"