From 1743ed6c4f4dea4e49c3654ea4d34ede28f00691 Mon Sep 17 00:00:00 2001
From: Michael Sun <55160142+MichaelSun48@users.noreply.github.com>
Date: Thu, 22 Aug 2024 15:17:03 -0700
Subject: [PATCH] chore(escalation_policies): Minor UI Improvements across the
 board (#76493)

bunch of random ui improvements
---
 .../escalationPolicyList.tsx                  | 22 +++++++++----------
 .../triageSchedules/ScheduleTimelineRow.tsx   | 15 ++++++++-----
 .../triageSchedules/triageSchedulesList.tsx   |  3 +--
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/static/app/views/alerts/escalationPolicies/escalationPolicyList.tsx b/static/app/views/alerts/escalationPolicies/escalationPolicyList.tsx
index ed1a961ca22988..7940d7000ee493 100644
--- a/static/app/views/alerts/escalationPolicies/escalationPolicyList.tsx
+++ b/static/app/views/alerts/escalationPolicies/escalationPolicyList.tsx
@@ -77,7 +77,6 @@ function EscalateAfterItem({minutes}: {minutes: number}) {
         icon: 'blue400',
         iconBorder: 'blue200',
       }}
-      showLastLine
     />
   );
 }
@@ -103,10 +102,11 @@ function RepeatItem({n}: {n: number}) {
       title={'Repeat: ' + n + ' time' + (n > 1 ? 's' : '')}
       icon={<IconRefresh size="xs" />}
       colorConfig={{
-        title: 'purple400',
-        icon: 'purple400',
-        iconBorder: 'purple200',
+        title: 'yellow400',
+        icon: 'yellow400',
+        iconBorder: 'yellow200',
       }}
+      isActive
     />
   );
 }
@@ -139,9 +139,9 @@ function EscalationPolicyTimeline({policy}: {policy: EscalationPolicy}) {
           })}
           <RepeatItem n={policy.repeatNTimes} />
         </Timeline.Container>
-        <SideBarContainer>
+        <RightSideBarContainer>
           <SideBarSection title={'Used by 1 Alert'}>Some content here</SideBarSection>
-        </SideBarContainer>
+        </RightSideBarContainer>
       </EscalationPolicyContent>
     </EscalationPolicyContainer>
   );
@@ -197,6 +197,7 @@ const EscalationPolicyTimelineList = styled('ul')`
   display: flex;
   flex-direction: column;
   gap: ${space(2)};
+  padding: 0;
 `;
 
 const IncidentCreatedTimelineItem = styled(Timeline.Item)`
@@ -232,15 +233,14 @@ const EscalationPolicyContainer = styled('li')`
 `;
 
 const EscalationPolicyContent = styled('div')`
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 15px;
+  display: flex;
+  justify-content: space-between;
 `;
 
-const SideBarContainer = styled('div')`
+const RightSideBarContainer = styled('div')`
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  width: 500px;
 `;
 
 const SideBarTitle = styled('h6')`
diff --git a/static/app/views/alerts/triageSchedules/ScheduleTimelineRow.tsx b/static/app/views/alerts/triageSchedules/ScheduleTimelineRow.tsx
index 2f9676fb7f8681..cb1dba40646892 100644
--- a/static/app/views/alerts/triageSchedules/ScheduleTimelineRow.tsx
+++ b/static/app/views/alerts/triageSchedules/ScheduleTimelineRow.tsx
@@ -89,10 +89,13 @@ export function ScheduleTimelineRow({schedule, totalWidth, timeWindowConfig}: Pr
         <DetailsHeadline>
           <Name>{schedule.name}</Name>
         </DetailsHeadline>
-        <Description>{schedule.description}</Description>
+        <Description>
+          {schedule.description ??
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod'}
+        </Description>
       </DetailsArea>
       <OnRotationContainer>
-        <ScheduleTitle>On Rotation Now:</ScheduleTitle>
+        <ScheduleTitle>On Rotation:</ScheduleTitle>
         {/* TODO */}
         {/* {rotations[1].userId && <ParticipantList users={[users[rotations[1].userId]]} />} */}
       </OnRotationContainer>
@@ -197,7 +200,7 @@ const DetailsArea = styled('div')`
   border-right: 1px solid ${p => p.theme.border};
   border-radius: 0;
   position: relative;
-  padding: ${space(3)};
+  padding: ${space(1.5)};
   display: block;
 `;
 
@@ -217,15 +220,15 @@ const Description = styled('h3')`
   word-break: break-word;
   margin-bottom: ${space(0.5)};
   font-weight: ${p => p.theme.fontWeightNormal};
+  color: ${p => p.theme.subText};
 `;
 
 const ScheduleTitle = styled('h6')`
-  color: ${p => p.theme.subText};
   display: flex;
   align-items: center;
   gap: ${space(0.5)};
   font-size: ${p => p.theme.fontSizeMedium};
-  margin: ${space(1)} 0 0;
+  margin: 0;
 `;
 
 const TimelineRow = styled('li')`
@@ -260,7 +263,7 @@ const ScheduleOuterContainer = styled('div')`
 
 const OnRotationContainer = styled('div')`
   display: flex;
-  padding: ${space(1)} ${space(1)};
+  padding: ${space(1.5)};
   flex-direction: column;
   border-right: 1px solid ${p => p.theme.innerBorder};
   text-align: left;
diff --git a/static/app/views/alerts/triageSchedules/triageSchedulesList.tsx b/static/app/views/alerts/triageSchedules/triageSchedulesList.tsx
index 05263c8dbeec6d..b818525035fd76 100644
--- a/static/app/views/alerts/triageSchedules/triageSchedulesList.tsx
+++ b/static/app/views/alerts/triageSchedules/triageSchedulesList.tsx
@@ -70,11 +70,10 @@ function ScheduleList() {
   return (
     <Fragment>
       <SentryDocumentTitle title={t('Escalation Policies')} orgSlug={organization.slug} />
-
       <PageFiltersContainer>
+        <AlertHeader router={router} activeTab="schedules" />
         <Layout.Body>
           <Layout.Main fullWidth>
-            <AlertHeader router={router} activeTab="schedules" />
             <MonitorListPanel role="region">
               <TimelineWidthTracker ref={elementRef} />
               <Header>