From b99134beb53b84cda06599863e830ad0be130b30 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 22 Aug 2024 12:29:33 -0600
Subject: [PATCH] Use new CSS file for work items system notes

Changelog: changed
---
 .../components/notes/system_note.vue          | 29 ++++----
 .../page_bundles/_system_note_styles.scss     | 66 -------------------
 .../stylesheets/page_bundles/issuable.scss    |  1 -
 .../stylesheets/page_bundles/work_items.scss  |  1 -
 4 files changed, 15 insertions(+), 82 deletions(-)
 delete mode 100644 app/assets/stylesheets/page_bundles/_system_note_styles.scss

diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index d4376ceb54f33c..96406bea3b5f3f 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -28,7 +28,7 @@ import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item
 
 const ALLOWED_ICONS = ['issue-close'];
 const ICON_COLORS = {
-  'issue-close': '!gl-bg-blue-100 gl-text-blue-700',
+  'issue-close': '!gl-bg-blue-100 gl-text-blue-700 icon-info',
 };
 
 export default {
@@ -115,23 +115,27 @@ export default {
 <template>
   <timeline-entry-item
     :id="noteAnchorId"
-    :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
-    class="note system-note note-wrapper"
+    :class="{
+      target: isTargetNote,
+      'pr-0': shouldShowDescriptionVersion,
+    }"
+    class="system-note-v2"
   >
     <div
       :class="[
         getIconColor,
         {
-          'system-note-icon gl-bg-gray-50 gl-text-gray-600': isAllowedIcon,
-          'system-note-tiny-dot !gl-bg-gray-900': !isAllowedIcon,
+          'system-note-icon-v2 gl-h-6 gl-w-6 gl-ml-2 -gl-mt-1': isAllowedIcon,
+          'system-note-dot gl-h-3 gl-w-3 gl-mt-3 -gl-top-1 gl-ml-4 gl-border-2 gl-border-gray-50 gl-border-solid gl-bg-gray-900':
+            !isAllowedIcon,
         },
       ]"
       class="gl-relative gl-float-left gl-flex gl-items-center gl-justify-center gl-rounded-full"
     >
-      <gl-icon v-if="isAllowedIcon" :size="12" :name="note.systemNoteIconName" />
+      <gl-icon v-if="isAllowedIcon" :size="14" :name="note.systemNoteIconName" />
     </div>
-    <div class="timeline-content">
-      <div class="note-header">
+    <div class="gl-ml-7">
+      <div class="gl-flex gl-justify-between gl-items-start">
         <note-header
           :author="note.author"
           :created-at="note.createdAt"
@@ -153,11 +157,8 @@ export default {
           </template>
         </note-header>
       </div>
-      <div class="note-body">
-        <div
-          v-if="shouldShowDescriptionVersion"
-          class="description-version gl-relative !gl-pt-3 gl-pl-4"
-        >
+      <div class="note-body-v2 gl-pl-3 gl-pb-3">
+        <div v-if="shouldShowDescriptionVersion" class="gl-relative !gl-pt-3">
           <pre v-if="isLoadingDescriptionVersion" class="loading-state">
             <gl-skeleton-loader />
           </pre>
@@ -165,7 +166,7 @@ export default {
             v-else
             v-safe-html="descriptionVersion"
             data-testid="description-version-diff"
-            class="wrapper gl-mt-3 gl-whitespace-pre-wrap gl-pr-7"
+            class="gl-mt-3 gl-whitespace-pre-wrap gl-pr-7"
           ></pre>
           <gl-button
             v-if="displayDeleteButton"
diff --git a/app/assets/stylesheets/page_bundles/_system_note_styles.scss b/app/assets/stylesheets/page_bundles/_system_note_styles.scss
deleted file mode 100644
index 04fc8a3dfb2bdb..00000000000000
--- a/app/assets/stylesheets/page_bundles/_system_note_styles.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
-Shared styles for system note dot and icon styles used for MR, Issue, Work Item
-*/
-.system-note-tiny-dot {
-    width: 8px;
-    height: 8px;
-    margin-top: 6px;
-    margin-left: 12px;
-    margin-right: 8px;
-    border: 2px solid var(--gray-50, $gray-50);
-
-    .gl-dark .modal-body & {
-      border-color: var(--gray-100, $gray-100);
-    }
-  }
-
-  .system-note-icon {
-    width: 20px;
-    height: 20px;
-    margin-left: 6px;
-
-    // stylelint-disable-next-line gitlab/no-gl-class
-    &.gl-bg-green-100 {
-      --bg-color: var(--green-100, #{$green-100});
-    }
-
-    // stylelint-disable-next-line gitlab/no-gl-class
-    &.gl-bg-red-100 {
-      --bg-color: var(--red-100, #{$red-100});
-    }
-
-    // stylelint-disable-next-line gitlab/no-gl-class
-    &.gl-bg-blue-100 {
-      --bg-color: var(--blue-100, #{$blue-100});
-    }
-  }
-
-  .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;
-    }
-  }
-
-  .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;
-    }
-  }
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index cde0103b4db66d..d237d950e4bb1b 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -1,5 +1,4 @@
 @import 'mixins_and_variables_and_functions';
-@import 'system_note_styles';
 @import './notes/system_notes_v2';
 
 .issuable-details {
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 9c1c0b79c2f254..dbea3234ec4b40 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -1,5 +1,4 @@
 @import 'mixins_and_variables_and_functions';
-@import 'system_note_styles';
 @import './notes/system_notes_v2';
 
 $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
-- 
GitLab