fix(darkmode): dashboard edit state and span tree (#24683)

src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx

@@ -1063,7 +1063,7 @@ export const SpanTreeConnector = styled('div')<TogglerTypes & {orphanBranch: boo
 
   &:after {
     content: '';
-    background-color: ${p => p.theme.gray200};
+    background-color: ${p => p.theme.border};
     border-radius: 4px;
     height: 3px;
     width: 3px;

src/sentry/static/sentry/app/utils/theme.tsx

@@ -196,6 +196,11 @@ const aliases = {
    * Background of default badge (mainly used in NavTabs)
    */
   badgeBackground: colors.gray200,
+
+  /**
+   * Overlay for partial opacity
+   */
+  overlayBackgroundAlpha: 'rgba(255, 255, 255, 0.7)',
 } as const;
 
 const generateAlertTheme = alias => ({
@@ -554,6 +559,7 @@ const darkAliases = {
   progressBackground: colors.gray400,
   badgeBackground: colors.gray400,
   alertBackgroundAlpha: 0.1,
+  overlayBackgroundAlpha: 'rgba(18, 9, 23, 0.7)',
 } as const;
 
 export const lightTheme = {

src/sentry/static/sentry/app/views/dashboardsV2/widgetCard.tsx

@@ -75,7 +75,7 @@ class WidgetCard extends React.Component<Props> {
         <IconContainer style={{visibility: hideToolbar ? 'hidden' : 'visible'}}>
           <IconClick>
             <StyledIconGrabbable
-              color="gray500"
+              color="textColor"
               {...draggableProps?.listeners}
               {...draggableProps?.attributes}
             />
@@ -86,7 +86,7 @@ class WidgetCard extends React.Component<Props> {
               onEdit();
             }}
           >
-            <IconEdit color="gray500" />
+            <IconEdit color="textColor" />
           </IconClick>
           <IconClick
             data-test-id="widget-delete"
@@ -94,7 +94,7 @@ class WidgetCard extends React.Component<Props> {
               onDelete();
             }}
           >
-            <IconDelete color="gray500" />
+            <IconDelete color="textColor" />
           </IconClick>
         </IconContainer>
       </ToolbarPanel>
@@ -245,7 +245,7 @@ const ToolbarPanel = styled('div')`
   justify-content: flex-end;
   align-items: flex-start;
 
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: ${p => p.theme.overlayBackgroundAlpha};
   border-radius: ${p => p.theme.borderRadius};
 `;