feat(comparison-cleanup): tweak copy and padding (#20736)

* updated copy and colors

* padding sizing consistency

* undo colors

* missing in baseline changes to added

Co-authored-by: Dora Chan <dora.lchan@gmail.com>

src/sentry/static/sentry/app/views/performance/compare/spanBar.tsx

@@ -357,7 +357,7 @@ class SpanBar extends React.Component<Props, State> {
         let label: string = '';
 
         if (baselineDuration === regressionDuration) {
-          label = 'no change';
+          label = 'No change';
         }
 
         if (baselineDuration > regressionDuration) {
@@ -376,20 +376,18 @@ class SpanBar extends React.Component<Props, State> {
           label = t('+ %s slower', duration);
         }
 
-        return <ComparisonReportLabelContainer>{label}</ComparisonReportLabelContainer>;
+        return <NotableComparisonReport>{label}</NotableComparisonReport>;
       }
       case 'baseline': {
         return (
           <ComparisonReportLabelContainer>
-            {t('removed from baseline')}
+            {t('Only in baseline')}
           </ComparisonReportLabelContainer>
         );
       }
       case 'regression': {
         return (
-          <ComparisonReportLabelContainer>
-            {t('missing from regression')}
-          </ComparisonReportLabelContainer>
+          <ComparisonReportLabelContainer>{t('Added')}</ComparisonReportLabelContainer>
         );
       }
       default: {
@@ -526,11 +524,8 @@ const getHatchPattern = ({spanBarHatch}) => {
 
 const ComparisonSpanBarRectangle = styled(SpanBarRectangle)`
   position: absolute;
-  top: 4px;
-  left: 1px;
-
+  left: 0;
   height: 16px;
-
   ${getHatchPattern};
 `;
 
@@ -538,12 +533,12 @@ const ComparisonReportLabelContainer = styled('div')`
   position: absolute;
   user-select: none;
   right: ${space(1)};
-
   line-height: 16px;
-  top: 4px;
-  height: 16px;
-
   font-size: ${p => p.theme.fontSizeExtraSmall};
 `;
 
+const NotableComparisonReport = styled(ComparisonReportLabelContainer)`
+  font-weight: bold;
+`;
+
 export default SpanBar;

src/sentry/static/sentry/app/views/performance/compare/spanDetail.tsx

@@ -125,7 +125,7 @@ const MatchedSpanDetailsContent = (props: {
       />
       <Row
         baselineTitle={t('Baseline Span ID')}
-        regressionTitle={t('Regressive Span ID')}
+        regressionTitle={t("This Event's Span ID")}
         renderBaselineContent={() => baselineSpan.span_id}
         renderRegressionContent={() => regressionSpan.span_id}
       />
@@ -268,9 +268,8 @@ const RowSplitter = styled('div')`
 const SpanBarContainer = styled('div')`
   position: relative;
   height: 16px;
-
-  margin-top: ${space(1)};
-  margin-bottom: ${space(1)};
+  margin-top: ${space(3)};
+  margin-bottom: ${space(2)};
 `;
 
 const SpanBars = (props: {
@@ -363,7 +362,7 @@ const RowContainer = styled('div')`
 `;
 
 const RowTitle = styled('div')`
-  font-size: ${p => p.theme.fontSizeMedium};
+  font-size: 13px;
   font-weight: 600;
 `;
 

src/sentry/static/sentry/app/views/performance/compare/transactionSummary.tsx

@@ -69,7 +69,7 @@ class TransactionSummary extends React.Component<Props> {
           <Regression />
           <EventRowContent>
             <Content>
-              <ContentTitle>{t('Regressive Event')}</ContentTitle>
+              <ContentTitle>{t('This Event')}</ContentTitle>
               <EventId>
                 <span>{t('ID')}: </span>
                 <StyledLink