[UX] Restyle global breadcrumbs (#1954)

* Issue-1858 Restyle global breadcrumbs

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* Undo max count

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* update snapshot

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* add svg round-filter

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* update tests

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* spelling err

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* remove un-necessary width

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr updates

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr updates

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* clean code

Signed-off-by: kaddy645 <xdeskart@amazon.com>

src/core/public/_variables.scss

@@ -1,3 +1,6 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
+$osdHeaderBreadcrumbBlueBackground: #b9d9eb;
+$osdHeaderBreadcrumbGrayBackground: #d9e1e2;
+$osdHeaderBreadcrumbCollapsedLink: #002a3a;

src/core/public/chrome/ui/header/header_breadcrumbs.scss

@@ -0,0 +1,55 @@
+@import "../../../../public/variables";
+
+$firstBreadcrumbPolygon: polygon(
+  0% 0%,
+  100% 0%,
+  calc(100% - #{$euiSizeS}) 100%,
+  0% 100%
+);
+$breadcrumbPolygon: polygon(
+  $euiSizeS 0%,
+  100% 0%,
+  calc(100% - #{$euiSizeS}) 100%,
+  0% 100%
+);
+
+.osdHeaderBreadcrumbs {
+  /*
+  filter defines a custom filter effect by grouping atomic filter primitives!
+  here we are using Gaussian filter with stdDeviation for applying
+  border-radius on clipped background.
+  */
+
+  filter: url("../../public/assets/round_filter.svg#round");
+
+  .osdBreadcrumbs {
+    clip-path: $breadcrumbPolygon;
+    background-color: $osdHeaderBreadcrumbGrayBackground;
+    padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS;
+
+    &:first-child {
+      clip-path: $firstBreadcrumbPolygon;
+    }
+
+    &:last-child {
+      background-color: $osdHeaderBreadcrumbBlueBackground;
+    }
+  }
+
+  .euiBreadcrumbSeparator {
+    display: none;
+  }
+
+  .euiBreadcrumb__collapsedLink {
+    color: $osdHeaderBreadcrumbCollapsedLink;
+    background: $euiColorEmptyShade;
+  }
+
+  .euiPopover__anchor {
+    padding: 0 $euiSizeS;
+  }
+
+  .euiBreadcrumb:not(.euiBreadcrumb:last-child) {
+    margin-right: 0;
+  }
+}

src/core/public/chrome/ui/header/header_breadcrumbs.tsx

@@ -35,6 +35,8 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeBreadcrumb } from '../../chrome_service';
 
+import './header_breadcrumbs.scss';
+
 interface Props {
   appTitle$: Observable<string>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
@@ -57,7 +59,15 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) {
       i === 0 && 'first',
       i === breadcrumbs.length - 1 && 'last'
     ),
+    className: classNames('osdBreadcrumbs'),
   }));
 
-  return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
+  return (
+    <EuiHeaderBreadcrumbs
+      breadcrumbs={crumbs}
+      max={10}
+      data-test-subj="breadcrumbs"
+      className="osdHeaderBreadcrumbs"
+    />
+  );
 }