Fix breadcrumb on panels for visibility / round corners (#71010) (#71022

) * Fix breadcrumb on panels for visibility / round corners
elastic · Jul 8, 2020 · b030f5f · b030f5f
1 parent 6bbc857
commit b030f5f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx
@@ -21,7 +21,8 @@ type ResolverColorNames =
   | 'graphControlsBackground'
   | 'resolverBackground'
   | 'resolverEdge'
-  | 'resolverEdgeText';
+  | 'resolverEdgeText'
+  | 'resolverBreadcrumbBackground';
 
 type ColorMap = Record<ResolverColorNames, string>;
 interface NodeStyleConfig {
@@ -438,6 +439,7 @@ export const useResolverTheme = (): {
     processBackingFill: `${theme.euiColorPrimary}${getThemedOption('0F', '1F')}`, // Add opacity 0F = 6% , 1F = 12%
     resolverBackground: theme.euiColorEmptyShade,
     resolverEdge: getThemedOption(theme.euiColorLightestShade, theme.euiColorLightShade),
+    resolverBreadcrumbBackground: theme.euiColorLightestShade,
     resolverEdgeText: getThemedOption(theme.euiColorDarkShade, theme.euiColorFullShade),
     triggerBackingFill: `${theme.euiColorDanger}${getThemedOption('0F', '1F')}`,
   };

diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_utilities.tsx
@@ -32,6 +32,11 @@ const ThemedBreadcrumbs = styled(EuiBreadcrumbs)<{ background: string; text: str
     background-color: ${(props) => props.background};
     color: ${(props) => props.text};
     padding: 1em;
+    border-radius: 5px;
+  }
+
+  & .euiBreadcrumbSeparator {
+    background: ${(props) => props.text};
   }
 `;
 
@@ -46,11 +51,11 @@ export const StyledBreadcrumbs = memo(function StyledBreadcrumbs({
   truncate?: boolean;
 }) {
   const {
-    colorMap: { resolverEdge, resolverEdgeText },
+    colorMap: { resolverBreadcrumbBackground, resolverEdgeText },
   } = useResolverTheme();
   return (
     <ThemedBreadcrumbs
-      background={resolverEdge}
+      background={resolverBreadcrumbBackground}
       text={resolverEdgeText}
       breadcrumbs={breadcrumbs}
       truncate={truncate}