3 files changed, 96 insertions, 20 deletions
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index c40cadafb9c..48aacc9606e 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -120,9 +120,10 @@
 }
 
 .referenced-commands {
+  $radius: $border-radius-default - 1px;
   background: $blue-50;
   padding: $gl-padding-8 $gl-padding;
-  border-radius: $border-radius-default;
+  border-radius: 0 0 $radius $radius;
 
   p {
     margin: 0;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index c3f90abe018..3a4ac4257b6 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1231,3 +1231,60 @@ $tabs-holder-z-index: 250;
     vertical-align: middle;
   }
 }
+
+.mr-system-note-icon {
+  width: 20px;
+  height: 20px;
+  margin-left: 6px;
+
+  &.gl-bg-green-100 {
+    --bg-color: var(--green-100, #{$green-100});
+  }
+
+  &.gl-bg-red-100 {
+    --bg-color: var(--red-100, #{$red-100});
+  }
+
+  &.gl-bg-blue-100 {
+    --bg-color: var(--blue-100, #{$blue-100});
+  }
+}
+
+.mr-system-note-icon:not(.mr-system-note-empty)::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  bottom: 100%;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, transparent, var(--bg-color));
+
+  .system-note:first-child & {
+    display: none;
+  }
+}
+
+.mr-system-note-icon:not(.mr-system-note-empty)::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  top: 100%;
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, var(--bg-color), transparent);
+
+  .system-note:last-child & {
+    display: none;
+  }
+}
+
+.mr-system-note-empty {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  margin-left: 12px;
+  margin-right: 8px;
+  border: 2px solid var(--gray-50, $gray-50);
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index a7381f99bae..45f9729e785 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -7,7 +7,7 @@ $system-note-icon-size: 1.5rem;
 $system-note-svg-size: 1rem;
 $icon-size-diff: $avatar-icon-size - $system-note-icon-size;
 
-$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 0.3rem;
+$system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 1.3rem;
 $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
 @mixin vertical-line($left) {
@@ -15,10 +15,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     content: '';
     border-left: 2px solid var(--gray-50, $gray-50);
     position: absolute;
-    top: $gl-padding-6;
+    top: 16px;
     bottom: 0;
     left: calc(#{$left} - 1px);
-    height: calc(100% + 1.5rem);
+    height: calc(100% + 20px);
   }
 }
 
@@ -30,8 +30,30 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
 .issuable-discussion:not(.incident-timeline-events),
 .limited-width-notes {
-  .main-notes-list > li.timeline-entry:not(:last-of-type) {
-    @include vertical-line(1rem);
+  .main-notes-list::before,
+  .timeline-entry:last-child::before {
+    content: '';
+    position: absolute;
+    width: 2px;
+    left: 15px;
+    top: 15px;
+    height: calc(100% - 15px);
+  }
+
+  .main-notes-list::before {
+    background: var(--gray-50, $gray-50);
+  }
+
+  .timeline-entry:last-child::before {
+    background: var(--white);
+
+    .gl-dark & {
+      background: var(--gray-10);
+    }
+
+    &.note-comment {
+      top: 30px;
+    }
   }
 }
 
@@ -63,6 +85,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
       height: 2rem;
     }
 
+    .gl-avatar {
+      border-color: var(--gray-50, $gray-50);
+    }
+
     &.note-comment,
     &.note-skeleton,
     .draft-note {
@@ -265,7 +291,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
     &.being-posted {
       pointer-events: none;
-      opacity: 0.5;
+
+      .timeline-entry-inner {
+        opacity: 0.5;
+      }
 
       .dummy-avatar {
         background-color: $gray-100;
@@ -370,9 +399,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
 
     .timeline-content {
-      @include notes-media('min', map-get($grid-breakpoints, sm)) {
-        margin-left: 30px;
-      }
+      margin-left: 30px;
     }
 
     .note-header {
@@ -460,7 +487,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   }
 
   .timeline-icon {
-    margin: 12px 0 0 20px;
+    margin: 20px 0 0 28px;
   }
 }
 
@@ -570,15 +597,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     .system-note {
       background-color: transparent;
       padding: 0;
-
-      .timeline-icon {
-        margin-top: -2px;
-      }
-
-      .timeline-entry-inner .timeline-icon {
-        margin-top: $system-note-icon-m-top;
-        margin-left: $system-note-icon-m-left;
-      }
     }
   }