diff --git a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx index 3ee4b4ca23..96f668d83c 100644 --- a/src/pages/Organizations/components/OrganizationBreadcrumb.jsx +++ b/src/pages/Organizations/components/OrganizationBreadcrumb.jsx @@ -3,7 +3,9 @@ import { Trans } from '@lingui/macro'; import { PageSection, PageSectionVariants, - Title, + Breadcrumb, + BreadcrumbItem, + BreadcrumbHeading } from '@patternfly/react-core'; import { Link @@ -21,20 +23,22 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location .map(({ url, name }, index) => { let elem; if (noLastLink && parentObj.length - 1 === index) { - elem = ({name}); + elem = ({name}); } else { elem = ( - - {name} - + + + {name} + + ); } return elem; }) - .reduce((prev, curr) => [prev, ' > ', curr])} + .reduce((prev, curr) => [prev, curr])} ); @@ -42,25 +46,31 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location breadcrumb = ( {generateCrumb()} - {' > '} - {getTabName(currentTab)} + + {getTabName(currentTab)} + ); } else if (location.pathname.indexOf('edit') > -1) { breadcrumb = ( {generateCrumb()} - {' > edit'} + + Edit + ); } else if (location.pathname.indexOf('add') > -1) { breadcrumb = ( {generateCrumb()} - {' > add'} + + Add + ); } else { + breadcrumb = ( {generateCrumb(true)} @@ -71,7 +81,7 @@ const OrganizationBreadcrumb = ({ parentObj, organization, currentTab, location return ( - {breadcrumb} + {breadcrumb} ); }; diff --git a/src/pages/Organizations/tabs.scss b/src/pages/Organizations/tabs.scss index 2afa2f5ee7..324bdb1c89 100644 --- a/src/pages/Organizations/tabs.scss +++ b/src/pages/Organizations/tabs.scss @@ -15,4 +15,9 @@ a { display: block; } +} + +.pf-c-breadcrumb__item.heading { + flex: 100%; + font-size: 20px; } \ No newline at end of file