diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index c9194734f4350b14586eeb13ac31dbf3b0c5263f..e8f59ef2c116b8fc1f833052f0e7943efe72ebfe 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -201,7 +201,6 @@ export default {
:is-overview-tab="isOverviewTab"
:should-scroll-to-note="shouldScrollToNote"
:internal-note="isDiscussionInternal"
- :variant="diffLine ? 'diff' : ''"
@handleDeleteNote="$emit('deleteNote')"
>
<template #avatar-badge>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 287fb05338298db981074a433e8966984e8518aa..50ac65feb12225f28befb0d263ea695f995c9635 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -61,11 +61,6 @@ export default {
type: Object,
required: true,
},
- variant: {
- type: String,
- required: false,
- default: '',
- },
},
data() {
return {
@@ -155,7 +150,6 @@ export default {
:class="{
target: isTargetNote,
'pr-0': shouldShowDescriptionVersion,
- [`system-note-variant-${variant}`]: variant,
}"
class="system-note"
>
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 41013a59a5213f600822dc8dbc3010d8305bb98a..77f00c46a683fcd3ded69c4ec54f9e94cb55bed0 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -4,7 +4,6 @@
@import './pages/groups';
@import './pages/issues';
@import './pages/note_form';
-@import './pages/notes';
@import './pages/pipelines';
@import './pages/registry';
@import './pages/settings';
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 9c78bf693dc4c53627cfcefc074283cead237583..8c9715c573148511686a168e12c3b059fa314fb4 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -38,7 +38,6 @@
@import 'framework/brand_logo';
@import 'framework/tables';
@import 'framework/tabs';
-@import 'framework/timeline';
@import 'framework/typography';
@import 'framework/zen';
@import 'framework/wells';
diff --git a/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss b/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
index 1ddb70e50fc29c6935c9f174e3069f71bbf6e97d..82253e13ba3d8d488a68365953e697b9a2402c79 100644
--- a/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
+++ b/app/assets/stylesheets/page_bundles/notes/_diff_comments.scss
@@ -1,7 +1,6 @@
/**
* Line note button on the side of diffs
*/
-
.diff-grid-left:hover,
.diff-grid-right:hover,
.line_holder .is-over:not(.no-comment-btn) {
@@ -145,7 +144,7 @@
}
}
-// Diff code in discussion view
+// Diff code on overview tab
.discussion-body .diff-file {
.file-title {
cursor: default;
@@ -374,3 +373,36 @@
.diff-viewer > .image ~ .note-container form.new-note {
margin-left: 0;
}
+
+// Diff notes on overview tab
+.notes.timeline > .timeline-entry.note-discussion .timeline-content .diff-content ul li:first-of-type {
+ .timeline-content {
+ margin-left: 0;
+ border: 0;
+ padding: 0;
+ }
+
+ .timeline-entry-inner {
+ margin-left: $note-spacing-left;
+ @apply gl-bg-subtle gl-border-l gl-border-r;
+
+ .timeline-content {
+ padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+ @apply gl-bg-default gl-border-b gl-border-b-subtle;
+
+ // stylelint-disable-next-line gitlab/no-gl-class
+ .gl-dark & {
+ @apply gl-bg-strong gl-border-b-default;
+ }
+ }
+
+ .timeline-avatar {
+ margin: $gl-padding-8 0 0 $gl-padding;
+ }
+
+ .timeline-discussion-body {
+ margin-left: $note-spacing-reply-left;
+ }
+ }
+}
+
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/page_bundles/notes/_notes_base.scss
similarity index 77%
rename from app/assets/stylesheets/pages/notes.scss
rename to app/assets/stylesheets/page_bundles/notes/_notes_base.scss
index e5b6e24b89a4130ba62739c1b43f39496d01923a..5ec5cce5e43ee646fe6c90d6751816c07ddd4901 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/page_bundles/notes/_notes_base.scss
@@ -1,29 +1,3 @@
-.issuable-discussion:not(.incident-timeline-events),
-.limited-width-notes {
- .main-notes-list::before,
- .timeline-entry:last-child::before {
- @include vertical-line(15px, 15px);
- }
-
- .main-notes-list::before {
- @apply gl-bg-strong;
- }
-
- .timeline-entry:not(.draft-note):last-child::before {
- @apply gl-bg-default;
-
- // stylelint-disable-next-line gitlab/no-gl-class
- .gl-dark & {
- @apply gl-bg-subtle;
- }
-
- // stylelint-disable-next-line gitlab/no-gl-class
- .gl-dark .modal-body & {
- @apply gl-bg-strong;
- }
- }
-}
-
.notes {
display: block;
list-style: none;
@@ -125,43 +99,6 @@
@apply gl-border-b gl-rounded-b-base;
}
}
-
- .diff-content {
- ul li:first-of-type {
- .timeline-avatar {
- margin-top: 0;
- }
-
- .timeline-content {
- margin-left: 0;
- border: 0;
- padding: 0;
- }
-
- .timeline-entry-inner {
- margin-left: $note-spacing-left;
- @apply gl-bg-subtle gl-border-l gl-border-r;
-
- .timeline-content {
- padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
- @apply gl-bg-default gl-border-b gl-border-b-subtle;
-
- // stylelint-disable-next-line gitlab/no-gl-class
- .gl-dark & {
- @apply gl-bg-strong gl-border-b-default;
- }
- }
-
- .timeline-avatar {
- margin: $gl-padding-8 0 0 $gl-padding;
- }
-
- .timeline-discussion-body {
- margin-left: $note-spacing-reply-left;
- }
- }
- }
- }
}
.discussion-reply-holder {
@@ -302,17 +239,6 @@
}
}
-.card .notes {
- .system-note {
- margin: 0;
- padding: 0;
- }
-
- .timeline-icon {
- margin: 20px 0 0 28px;
- }
-}
-
.discussion-header,
.note-header-info {
a {
@@ -454,23 +380,6 @@
}
}
-.user-activity-content {
- position: relative;
-
- .system-note-image {
- @apply gl-flex;
- @apply gl-justify-center;
- @apply gl-items-center;
- top: 14px;
- width: 22px;
- height: 22px;
-
- svg {
- fill: $gray-600 !important;
- }
- }
-}
-
//This needs to be deleted when Snippet/Commit comments are convered to Vue
// See https://gitlab.com/gitlab-org/gitlab-foss/issues/53918#note_117038785
.unstyled-comments {
@@ -482,11 +391,3 @@
padding: $gl-padding;
}
}
-
-// Timeline avatars
-
-// stylelint-disable-next-line gitlab/no-gl-class
-.timeline-avatar .gl-avatar-link {
- @apply gl-bg-default;
- border-radius: 50%;
-}
diff --git a/app/assets/stylesheets/page_bundles/notes/_system_notes.scss b/app/assets/stylesheets/page_bundles/notes/_system_notes.scss
index a574a61d6dfa984fd27b51b440c99557bb0aacfb..ac7f838c098773b32c120637f21c42f6e1a97238 100644
--- a/app/assets/stylesheets/page_bundles/notes/_system_notes.scss
+++ b/app/assets/stylesheets/page_bundles/notes/_system_notes.scss
@@ -110,9 +110,13 @@
}
// System notes on diffs
-.system-note-variant-diff {
+.card .notes {
+ .system-note {
+ margin: 0;
+ padding: 0;
+ }
+
.system-note-dot {
- top: 0;
margin-top: $gl-spacing-scale-4;
margin-left: $gl-spacing-scale-5;
}
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/page_bundles/notes/_timeline.scss
similarity index 61%
rename from app/assets/stylesheets/framework/timeline.scss
rename to app/assets/stylesheets/page_bundles/notes/_timeline.scss
index 9e49fe3506cbaf91c4dbcd119fc4e714041a10ef..f42363c3f9ed7fb5d9a43c37bb7d6066d12fb132 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/page_bundles/notes/_timeline.scss
@@ -62,3 +62,36 @@
border-right: 0;
border-radius: $gl-border-radius-base $gl-border-radius-base 0 0;
}
+
+.issuable-discussion:not(.incident-timeline-events),
+.limited-width-notes {
+ .main-notes-list::before,
+ .timeline-entry:last-child::before {
+ @include vertical-line(15px, 15px);
+ }
+
+ .main-notes-list::before {
+ @apply gl-bg-strong;
+ }
+
+ .timeline-entry:not(.draft-note):last-child::before {
+ @apply gl-bg-default;
+
+ // stylelint-disable-next-line gitlab/no-gl-class
+ .gl-dark & {
+ @apply gl-bg-subtle;
+ }
+
+ // stylelint-disable-next-line gitlab/no-gl-class
+ .gl-dark .modal-body & {
+ @apply gl-bg-strong;
+ }
+ }
+}
+
+// Timeline avatars
+// stylelint-disable-next-line gitlab/no-gl-class
+.timeline-avatar .gl-avatar-link {
+ @apply gl-bg-default;
+ border-radius: 50%;
+}
diff --git a/app/assets/stylesheets/page_bundles/notes_shared.scss b/app/assets/stylesheets/page_bundles/notes_shared.scss
index d954e4085c1ed87a9d4710a9975899151584646d..8aeae9f38820848df4ae5a489eb3833c40e6550a 100644
--- a/app/assets/stylesheets/page_bundles/notes_shared.scss
+++ b/app/assets/stylesheets/page_bundles/notes_shared.scss
@@ -1,3 +1,5 @@
@import 'mixins_and_variables_and_functions';
+@import './notes/notes_base';
@import './notes/system_notes';
@import './notes/note_actions';
+@import './notes/timeline';
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
index a542faeaecfa6f27e85893155203972008f0a006..ee890113a7475de51ed14285d278aa27b021c300 100644
--- a/app/assets/stylesheets/page_bundles/profile.scss
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -193,3 +193,20 @@ $profile-grid-flex: 1fr;
line-height: 22px;
background-color: var(--gl-gray-10);
}
+
+.user-activity-content {
+ position: relative;
+
+ .system-note-image {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: 14px;
+ width: 22px;
+ height: 22px;
+
+ svg {
+ fill: $gray-600 !important;
+ }
+ }
+}