fix(my-joy-instances): fix breadcrumb routing to align with designs

fixes #1294

packages/my-joy-instances/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap

@@ -73,8 +73,8 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
+  padding-top: 0.375rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.375rem;
 }
 
 .c8 {
@@ -156,6 +156,34 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
         <div
           className="c5"
         >
+          <div
+            className="c6"
+          >
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Compute
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
           <div
             className="c6"
           >
@@ -264,8 +292,8 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
+  padding-top: 0.375rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.375rem;
 }
 
 .c8 {
@@ -347,6 +375,34 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
         <div
           className="c5"
         >
+          <div
+            className="c6"
+          >
+            <h4
+              className="c7"
+              name="breadcrum-item"
+            >
+              Compute
+            </h4>
+            <svg
+              className="c8 "
+              height="6"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(-90deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgb(151, 151, 151)"
+              />
+            </svg>
+          </div>
           <div
             className="c6"
           >

packages/my-joy-instances/src/containers/navigation/breadcrumb.js

@@ -9,6 +9,10 @@ export default ({ match }) => {
   const instance = get(match, 'params.instance');
 
   const links = [
+    {
+      name: 'Compute',
+      pathname: '/'
+    },
     {
       name: 'Instances',
       pathname: '/'

packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap

@@ -98,8 +98,8 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 }
 
 .c2 {
-  padding-top: 0.75rem;
+  padding-top: 0.375rem;
-  padding-bottom: 0.75rem;
+  padding-bottom: 0.375rem;
 }
 
 .c0 {

packages/ui-toolkit/src/breadcrumb/index.js

@@ -14,7 +14,7 @@ const BreadcrumContianer = styled(Container)`
  */
 export default ({ children, ...rest }) => (
   <BreadcrumContianer {...rest} fluid>
-    <Padding top={2} bottom={2}>
+    <Padding top={1} bottom={1}>
       <Container>
         <Row name="breadcrum">
           <Col xs={12}>{children}</Col>