fix(frontend): highlight selected span (#2504)

kubeshop · May 12, 2023 · c47f431 · c47f431
1 parent d1c50f1
commit c47f431
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/web/src/components/Visualization/components/DAG/SpanNode.styled.ts b/web/src/components/Visualization/components/DAG/SpanNode.styled.ts
@@ -62,7 +62,8 @@ export const Container = styled.div<{$matched: boolean; $selected: boolean}>`
   align-items: center;
   background-color: ${({theme}) => theme.color.white};
   border: ${({theme, $selected}) =>
-    $selected ? `1px solid ${theme.color.interactive}` : `1px solid ${theme.color.border}`};
+    $selected ? `2px solid ${theme.color.interactive}` : `1px solid ${theme.color.border}`};
+  box-shadow: ${({$selected}) => $selected && '3px 3px 6px 0px rgba(59, 97, 246, 0.6)'};
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -74,7 +75,7 @@ export const Container = styled.div<{$matched: boolean; $selected: boolean}>`
     $matched &&
     css`
       border: ${({theme}) => !$selected && `1px solid ${theme.color.text}`};
-      box-shadow: ${({theme}) => `2px 2px 0px ${theme.color.text}`};
+      box-shadow: ${({theme}) => !$selected && `2px 2px 0px ${theme.color.text}`};
     `}
 `;