From eb06fd2eea03a824d4c75a4dc5345e88a59ba4d4 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 1 Feb 2024 16:20:59 +0000
Subject: [PATCH] Add dark mode modal specific timeline entry styles
When a timeline entry on an issuable or work item appears in a
modal while the user is in dark mode, apply a different color
to the timeline entry line that connects notes.
Changelog: fixed
---
.../stylesheets/page_bundles/_system_note_styles.scss | 4 ++++
app/assets/stylesheets/pages/notes.scss | 8 ++++++++
2 files changed, 12 insertions(+)
diff --git a/app/assets/stylesheets/page_bundles/_system_note_styles.scss b/app/assets/stylesheets/page_bundles/_system_note_styles.scss
index 68e2b747c52d8..ec885966a8e68 100644
--- a/app/assets/stylesheets/page_bundles/_system_note_styles.scss
+++ b/app/assets/stylesheets/page_bundles/_system_note_styles.scss
@@ -8,6 +8,10 @@ Shared styles for system note dot and icon styles used for MR, Issue, Work Item
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 {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 11efc32588bd8..65c1444c51848 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -34,6 +34,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
.main-notes-list::before {
background: var(--gray-50, $gray-50);
+
+ .gl-dark .modal-body & {
+ background: var(--gray-100, $gray-100);
+ }
}
.timeline-entry:not(.draft-note):last-child::before {
@@ -42,6 +46,10 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
.gl-dark & {
background: var(--gray-10);
}
+
+ .gl-dark .modal-body & {
+ background: var(--gray-50, $gray-50);
+ }
&.note-comment {
top: 30px;
--
GitLab