From b7681d59b424d14570b7d80ad9f12727e3fd6347 Mon Sep 17 00:00:00 2001
From: Brent Kimmel <bkimmel@endgame.com>
Date: Tue, 7 Jul 2020 16:14:53 -0400
Subject: [PATCH 1/2] Fix breadcrumb on panels for visibility / round corners

---
 .../security_solution/public/resolver/view/assets.tsx    | 7 ++++++-
 .../resolver/view/panels/panel_content_utilities.tsx     | 9 +++++++--
 2 files changed, 13 insertions(+), 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
index 442a90f0a57531..da57e76b85d41b 100644
--- 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,10 @@ 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: getThemedOption(
+      theme.euiColorLightestShade,
+      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
index 65422d3d705d09..56f88ccb13115d 100644
--- 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}

From 848d1d1a80f93c592ef4373558ef4fb86a0de9f8 Mon Sep 17 00:00:00 2001
From: Brent Kimmel <bkimmel@endgame.com>
Date: Tue, 7 Jul 2020 16:22:13 -0400
Subject: [PATCH 2/2] remove duplicate

---
 .../security_solution/public/resolver/view/assets.tsx        | 5 +----
 1 file changed, 1 insertion(+), 4 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
index da57e76b85d41b..42f9634238e6a0 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx
@@ -439,10 +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: getThemedOption(
-      theme.euiColorLightestShade,
-      theme.euiColorLightestShade
-    ),
+    resolverBreadcrumbBackground: theme.euiColorLightestShade,
     resolverEdgeText: getThemedOption(theme.euiColorDarkShade, theme.euiColorFullShade),
     triggerBackingFill: `${theme.euiColorDanger}${getThemedOption('0F', '1F')}`,
   };