feat(traces): updated copy context and empty state (#71164)

Making context more verbose for future changes. Note the following: 
![Screenshot 2024-05-20 at 9 20
40 AM](https://github.com/getsentry/sentry/assets/4830259/270f0c8d-2dec-456a-9350-67254db52ed0)

**Before:**
![Screenshot 2024-05-20 at 9 15
38 AM](https://github.com/getsentry/sentry/assets/4830259/c95473b3-b37d-4401-a5c4-c2918ddedfd3)

**After:**
![Screenshot 2024-05-20 at 9 14
39 AM](https://github.com/getsentry/sentry/assets/4830259/1482cbda-3a1c-4a45-b4cc-74d0f4dac8c1)

static/app/views/performance/traces/content.tsx

@@ -177,7 +177,7 @@ export function Content() {
       />
       <StyledPanel>
         <TracePanelContent>
-          <StyledPanelHeader align="right" lightText>
+          <StyledPanelHeader align="left" lightText>
             {t('Trace ID')}
           </StyledPanelHeader>
           <StyledPanelHeader align="left" lightText>
@@ -186,7 +186,7 @@ export function Content() {
           <StyledPanelHeader align="right" lightText>
             {t('Total Spans')}
           </StyledPanelHeader>
-          <StyledPanelHeader align="right" lightText>
+          <StyledPanelHeader align="left" lightText>
             {t('Timeline')}
           </StyledPanelHeader>
           <StyledPanelHeader align="right" lightText>
@@ -210,7 +210,9 @@ export function Content() {
           )}
           {isEmpty && (
             <StyledPanelItem span={7} overflow>
-              <EmptyStateWarning withIcon />
+              <EmptyStateWarning withIcon>
+                <div>{t('No traces available')}</div>
+              </EmptyStateWarning>
             </StyledPanelItem>
           )}
           {data?.map(trace => <TraceRow key={trace.trace} trace={trace} />)}
@@ -521,7 +523,6 @@ const SpanPanelContent = styled('div')`
 const StyledPanelHeader = styled(PanelHeader)<{align: 'left' | 'right'}>`
   white-space: nowrap;
   justify-content: ${p => (p.align === 'left' ? 'flex-start' : 'flex-end')};
-  padding: ${space(2)} ${space(1)};
 `;
 
 const Description = styled('div')`
@@ -538,7 +539,7 @@ const StyledPanelItem = styled(PanelItem)<{
   span?: number;
 }>`
   align-items: center;
-  padding: ${space(1)};
+  padding: ${space(1)} ${space(2)};
   ${p => (p.align === 'left' ? 'justify-content: flex-start;' : null)}
   ${p => (p.align === 'right' ? 'justify-content: flex-end;' : null)}
   ${p => (p.overflow ? p.theme.overflowEllipsis : null)};

static/app/views/performance/traces/tracesSearchBar.tsx

@@ -19,7 +19,11 @@ interface TracesSearchBarProps {
 }
 
 const getSpanName = (index: number) => {
-  const spanNames = [t('Span A'), t('Span B'), t('Span C')];
+  const spanNames = [
+    t('Find traces where a span is'),
+    t('and another span where'),
+    t('and another span where'),
+  ];
   return spanNames[index];
 };
 
@@ -99,9 +103,7 @@ export function TracesSearchBar({
             searchSource="trace-explorer"
             query={query}
             onSearch={(queryString: string) => handleSearch(index, queryString)}
-            placeholder={t(
-              'Search for traces containing a span matching these attributes'
-            )}
+            placeholder={t('Search for span attributes')}
             organization={organization}
             metricAlert={false}
             supportedTags={supportedTags}
@@ -152,7 +154,8 @@ 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: 800;