From e76632fe887fc95ead4491c6d254885d407e5fb3 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Thu, 10 Oct 2024 16:27:43 -0400
Subject: [PATCH] fix: remove underlines from breadcrumbs

* changes non-links to midGrey
---
 src/Breadcrumbs/Breadcrumbs.story.tsx   | 8 ++++----
 src/Breadcrumbs/BreadcrumbsListItem.tsx | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Breadcrumbs/Breadcrumbs.story.tsx b/src/Breadcrumbs/Breadcrumbs.story.tsx
index 8509d0e88..5d6f9555c 100644
--- a/src/Breadcrumbs/Breadcrumbs.story.tsx
+++ b/src/Breadcrumbs/Breadcrumbs.story.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Link } from "../Link";
 import { Text } from "../Type";
-import { Breadcrumbs } from "./index";
 import { Flex } from "../Flex";
 import dashed from "../utils/dashed";
+import { Breadcrumbs } from "./index";
 
 export default {
   title: "Components/Breadcrumbs",
@@ -17,7 +17,7 @@ export const _Breadcrumbs = () => (
     </Breadcrumbs>
     <Breadcrumbs>
       <Link href="/">Home</Link>
-      <Link href="/Tenants">Tenants</Link>
+      <Link href="/">Tenants</Link>
     </Breadcrumbs>
   </>
 );
@@ -44,7 +44,7 @@ export const WithDifferentSizes = () => (
 export const WithoutLink = () => (
   <Breadcrumbs>
     <Link href="/">Home</Link>
-    <Link href="/Tenants">Tenants</Link>
+    <Link href="/">Tenants</Link>
     <Text>Current Tenant</Text>
   </Breadcrumbs>
 );
@@ -59,7 +59,7 @@ export const WithReactRouter = () => (
       <Link as={ReactRouterLink} to="/">
         Home
       </Link>
-      <Link as={ReactRouterLink} to="/Tenants">
+      <Link as={ReactRouterLink} to="/">
         Tenants
       </Link>
       <Text>Current Tenant</Text>
diff --git a/src/Breadcrumbs/BreadcrumbsListItem.tsx b/src/Breadcrumbs/BreadcrumbsListItem.tsx
index 9cb0b42f6..313071a36 100644
--- a/src/Breadcrumbs/BreadcrumbsListItem.tsx
+++ b/src/Breadcrumbs/BreadcrumbsListItem.tsx
@@ -28,9 +28,10 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>(
     listStyle: "none",
     display: "inline-flex",
     alignSelf: "center",
-    color: theme.colors.darkBlue,
+    color: theme.colors.midGrey,
     a: {
       color: theme.colors.darkBlue,
+      textDecorationLine: "none",
     },
     "a:visited": {
       color: theme.colors.darkBlue,
@@ -46,7 +47,7 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>(
       large: {
         "a, p": {
           py: "x2",
-          px: "x1",
+          px: "x0",
           fontSize: "medium",
         },
       },