Merge branch 'system-notes-legacy' into 'master'

Fix alignment of legacy system notes

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/166051



Merged-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Approved-by: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Reviewed-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Co-authored-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>

app/assets/stylesheets/page_bundles/notes/_notes_base.scss

@@ -242,7 +242,7 @@
 .discussion-header,
 .note-header-info {
   a {
-    color: inherit;
+    color: var(--gl-text-color-default);
 
     &:hover,
     &.hover {

app/assets/stylesheets/page_bundles/notes/_system_notes.scss

@@ -121,3 +121,10 @@
     margin-left: $gl-spacing-scale-5;
   }
 }
+
+// Legacy system notes (commits and snippets)
+.system-note-legacy {
+  .note-headline-light p {
+    margin-bottom: 0;
+  }
+}

app/assets/stylesheets/page_bundles/notes/_timeline.scss

@@ -11,7 +11,7 @@
 
   .system-note {
     .note-text {
-      color: $gl-text-color !important;
+      color: var(--gl-text-color-default);
     }
   }
 

app/views/shared/notes/_note.html.haml

@@ -6,7 +6,7 @@
 - note_counter = local_assigns.fetch(:note_counter, 0)
 
 %li.timeline-entry.note-wrapper{ id: dom_id(note),
-  class: ["note", "note-comment", "note-row-#{note.id}", ('system-note' if note.system)],
+  class: ["note", "note-comment", "note-row-#{note.id}", ('system-note system-note-legacy' if note.system)],
   data: { author_id: note.author.id,
     editable: note_editable,
     note_id: note.id } }
@@ -28,16 +28,16 @@
               - badge_class = "hidden" if @fresh_discussion || counter.nil?
               %span.gl-flex.gl-items-center.gl-justify-center.gl-text-sm.design-note-pin.small.user-avatar{ class: badge_class }
                 = counter
-    .timeline-content
+    %div{ class: ('timeline-content' unless note.system) }
       .note-header
-        .note-header-info
+        .note-header-info{ class: ('!gl-pt-0 -gl-mt-1' if note.system) }
           %a{ href: user_path(note.author) }
             %span.note-header-author-name.gl-font-bold
               = note.author.name
             = user_status(note.author)
           %span.note-headline-light{ data: { testid: 'note-author-content' } }
             = note.author.to_reference
-          %span.note-headline-light.note-headline-meta
+          %span.note-headline-light.note-headline-meta{ class: ('gl-flex gl-flex-wrap gl-gap-2' if note.system) }
             - if note.system
               %span.system-note-message
                 = markdown_field(note, :note)