diff --git a/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue b/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
index 198ff33a249bb04cdf61976e30e5272a426a9f84..40cb7fbb0ff84498443c680a20a879a3107cffbb 100644
--- a/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue
@@ -113,13 +113,13 @@ export default {
>
<div
v-if="hasTimelineEvents"
- class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1"
+ class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-z-index-1"
>
<gl-icon name="comment" class="note-icon" />
</div>
<timeline-events-form
ref="eventForm"
- :class="{ 'gl-border-gray-50 gl-border-t': hasTimelineEvents }"
+ :class="{ 'gl-border-gray-50 gl-border-t gl-pt-3': hasTimelineEvents }"
:is-event-processed="createTimelineEventActive"
show-save-and-add
@save-event="createIncidentTimelineEvent"
diff --git a/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
index bbba08134f80fd06034c4a4b2dcaddd99882cbcc..c2fb8b6f68317da953ce26bb975187fae6a1ecd8 100644
--- a/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue
@@ -28,9 +28,9 @@ export default {
</script>
<template>
- <div class="gl-relative gl-display-flex gl-align-items-center">
+ <div class="edit-timeline-event gl-relative gl-display-flex gl-align-items-center">
<div
- class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1"
+ class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-z-index-1"
>
<gl-icon name="comment" class="note-icon" />
</div>
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 7f98e74f4aae5ecfb1681db2ed7233bd3cef9976..7944362a40f26af7d2fabbe0b0d4b0d07e039ae7 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -166,11 +166,11 @@ export default {
<template>
<form class="gl-flex-grow-1 gl-border-gray-50">
- <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row">
- <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5">
+ <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-mt-3">
+ <gl-form-group :label="__('Date')" class="gl-mr-5">
<gl-datepicker id="incident-date" ref="datepicker" v-model="datePickerInput" />
</gl-form-group>
- <div class="gl-display-flex gl-mt-5">
+ <div class="gl-display-flex">
<gl-form-group :label="__('Time')">
<div class="gl-display-flex">
<label label-for="timeline-input-hours" class="sr-only"></label>
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
index 89a565e280d3e5cd500c4117dc93abb1441191eb..9819fb459b35be4b8ef80b75703939b65afa47ba 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
@@ -51,12 +51,12 @@ export default {
<template>
<div class="timeline-event gl-display-grid">
<div
- class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
+ class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
>
<gl-icon :name="getEventIcon(action)" class="note-icon" />
</div>
<div class="timeline-event-note timeline-event-border" data-testid="event-text-container">
- <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-3">
+ <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-2">
<h3
class="timeline-event-note-date gl-font-weight-bold gl-font-sm gl-my-0"
data-testid="event-time"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
index 84bddb45ffaab447ed03b7ca7d4796f3d9f16418..10b80529a66a738d39be0b92e060ad0ea439ca94 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue
@@ -144,11 +144,11 @@ export default {
{{ eventDate }}
</h2>
- <ul class="notes main-notes-list gl-pt-2!">
+ <ul class="notes main-notes-list">
<li
v-for="(event, eventIndex) in events"
:key="eventIndex"
- class="timeline-entry-vertical-line timeline-entry note system-note note-wrapper gl-my-2! gl-pr-0!"
+ class="timeline-entry-vertical-line timeline-entry note system-note note-wrapper gl-my-0! gl-pr-0!"
>
<edit-timeline-event
v-if="eventToEdit === event.id"
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index 99e84777c4483272ad596a7bebb1e8f6143b38e8..493add1ea0f6d4eab8db8a1528d2d782952e3cd9 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -7,7 +7,13 @@
}
.timeline-event {
- grid-template-columns: #{$gl-spacing-scale-9} minmax(0, 1fr) #{$gl-spacing-scale-7};
+ grid-template-columns: auto minmax(0, 1fr) #{$gl-spacing-scale-7};
+}
+
+.create-timeline-event,
+.edit-timeline-event,
+.timeline-event {
+ gap: $gl-spacing-scale-5;
}
/**
@@ -51,8 +57,10 @@
}
.timeline-entry:not(:last-child) {
+ @include gl-pb-0;
+
.timeline-event-border {
- @include gl-pb-5;
+ @include gl-pb-3;
@include gl-border-gray-50;
@include gl-border-1;
@include gl-border-b-solid;