fix(quicktrace): fire icon alignment (#24646)

* removed unneccessary color hover and fixed warning bg

* fix fire node

* replace 2px with space 0.25

* max height

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

src/sentry/static/sentry/app/components/quickTrace/index.tsx

@@ -24,6 +24,7 @@ import {Theme} from 'app/utils/theme';
 import {
   DropdownItem,
   DropdownItemSubContainer,
+  ErrorNodeContent,
   EventNode,
   QuickTraceContainer,
   SectionSubtext,
@@ -259,10 +260,10 @@ function EventNodeSelector({
   if (errors.length > 0 || (currentEvent && currentEvent?.type !== 'transaction')) {
     type = nodeKey === 'current' ? 'error' : 'warning';
     text = (
-      <div>
+      <ErrorNodeContent>
         <IconFire size="xs" />
         {text}
-      </div>
+      </ErrorNodeContent>
     );
   }
 

src/sentry/static/sentry/app/components/quickTrace/styles.tsx

@@ -18,6 +18,7 @@ export const SectionSubtext = styled('div')<{type?: 'error' | 'default'}>`
 export const QuickTraceContainer = styled('div')`
   display: flex;
   align-items: center;
+  height: 24px;
 `;
 
 const nodeColors = (theme: Theme) => ({
@@ -28,7 +29,7 @@ const nodeColors = (theme: Theme) => ({
   },
   warning: {
     color: theme.red300,
-    background: theme.white,
+    background: theme.background,
     border: theme.red300,
   },
   white: {
@@ -45,6 +46,7 @@ const nodeColors = (theme: Theme) => ({
 
 export const EventNode = styled(Tag)<{pad?: 'left' | 'right'}>`
   span {
+    display: flex;
     color: ${p => nodeColors(p.theme)[p.type || 'white'].color};
   }
   & ${/* sc-selector */ Background} {
@@ -97,6 +99,13 @@ export const StyledTruncate = styled(Truncate)`
   white-space: nowrap;
 `;
 
+export const ErrorNodeContent = styled('div')`
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  grid-gap: ${space(0.25)};
+  align-items: center;
+`;
+
 export function SingleEventHoverText({event}: {event: QuickTraceEvent}) {
   return (
     <div>

src/sentry/static/sentry/app/components/tag.tsx

@@ -68,7 +68,7 @@ function Tag({
   };
 
   const tag = (
-    <Tooltip title={tooltipText} containerDisplayMode="inline">
+    <Tooltip title={tooltipText} containerDisplayMode="inline-flex">
       <Background type={type}>
         {tagIcon()}
 
@@ -157,9 +157,6 @@ const Text = styled('span')<{maxWidth: number; type: keyof Theme['tag']}>`
   white-space: nowrap;
   text-overflow: ellipsis;
   line-height: ${TAG_HEIGHT};
-  a:hover & {
-    color: ${p => p.theme.gray500};
-  }
 `;
 
 const DismissButton = styled(Button)`