fix(traces): change span cta and fixed css alignment' (#72878)

**After:** ![Screenshot 2024-06-17 at 11 35 55 AM](https://github.com/getsentry/sentry/assets/4830259/b2d40bd9-8849-4fd9-9726-24bb6cd0617b) **Before:** ![Screenshot 2024-06-17 at 11 37 31 AM](https://github.com/getsentry/sentry/assets/4830259/cc39b413-468c-494f-b5bd-a391c5e8eac6)
getsentry · Jun 17, 2024 · a9c1599 · a9c1599
1 parent 15926b9
commit a9c1599
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/static/app/utils/analytics/tracingEventMap.tsx b/static/app/utils/analytics/tracingEventMap.tsx
@@ -84,11 +84,11 @@ export const tracingEventMap: Record<TracingEventKey, string | null> = {
   'trace.trace_layout.view_similar_spans': 'View Similar Spans in Trace',
   'trace.trace_layout.view_span_summary': 'View Span Summary in Trace',
   'trace.trace_layout.span_row_click': 'Clicked Span Row in Trace',
-  'trace_explorer.add_span_condition': 'Trace Explorer: Add Span Condition',
+  'trace_explorer.add_span_condition': 'Trace Explorer: Add Another Span',
   'trace_explorer.open_in_issues': 'Trace Explorer: Open Trace in Issues',
   'trace_explorer.open_trace': 'Trace Explorer: Open Trace in Trace Viewer',
   'trace_explorer.open_trace_span': 'Trace Explorer: Open Trace Span in Trace Viewer',
-  'trace_explorer.remove_span_condition': 'Trace Explorer: Remove Span Condition',
+  'trace_explorer.remove_span_condition': 'Trace Explorer: Remove Span',
   'trace_explorer.toggle_trace_details': 'Trace Explorer: Toggle Trace Details in Table',
   'trace_explorer.search_failure': 'Trace Explorer: Search Failure',
   'trace_explorer.search_request': 'Trace Explorer: Search Request',

diff --git a/static/app/views/traces/tracesSearchBar.tsx b/static/app/views/traces/tracesSearchBar.tsx
@@ -60,7 +60,7 @@ export function TracesSearchBar({
             projectIds={ALL_PROJECTS}
           />
           <StyledButton
-            aria-label={t('Remove span')}
+            aria-label={t('Remove Span')}
             icon={<IconClose size="sm" />}
             size="sm"
             onClick={() => {
@@ -77,7 +77,7 @@ export function TracesSearchBar({
 
       {canAddMoreQueries ? (
         <Button
-          aria-label={t('Add query')}
+          aria-label={t('Add Query')}
           icon={<IconAdd size="xs" isCircled />}
           size="sm"
           onClick={() => {
@@ -105,21 +105,19 @@ const TraceSearchBarsContainer = styled('div')`
 const TraceBar = styled('div')`
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
   width: 100%;
   gap: ${space(1)};
 `;
 
 const SpanLetter = styled('div')`
   background-color: ${p => p.theme.purple100};
   border-radius: ${p => p.theme.borderRadius};
-  padding: ${space(1)} ${space(2)};
   text-align: center;
   min-width: 220px;
   color: ${p => p.theme.purple400};
   white-space: nowrap;
   font-weight: ${p => p.theme.fontWeightBold};
+  align-content: center;
 `;
 
 const StyledSearchBar = styled(SearchBar)`