chore: breadcrumb text implements in all places

Author: shivani170

src/components/Jobs/JobDetails/JobDetails.tsx

@@ -37,6 +37,7 @@ import {
     TabGroup,
     URLS as CommonURLS,
     handleAnalyticsEvent,
+    BreadcrumbText,
 } from '@devtron-labs/devtron-fe-common-lib'
 import AppConfig from '../../../Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig'
 import Overview from '../../app/Overview/Overview'
@@ -153,7 +154,7 @@ const JobHeader = ({ jobName }: { jobName: string }) => {
                     linked: false,
                 },
                 app: {
-                    component: <span className="cb-5 fs-16 dc__capitalize">Jobs</span>,
+                    component: <BreadcrumbText heading="Jobs" />,
                     linked: true,
                 },
             },

src/components/ResourceBrowser/ClusterInstallationStatus.tsx

@@ -17,7 +17,12 @@
 import { useMemo } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 
-import { getInfrastructureManagementBreadcrumb, useAsync, useBreadcrumb } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    BreadcrumbText,
+    getInfrastructureManagementBreadcrumb,
+    useAsync,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 
@@ -62,7 +67,7 @@ const ClusterInstallationStatus = () => {
             alias: {
                 ...getInfrastructureManagementBreadcrumb(),
                 'resource-browser': {
-                    component: <span className="cn-9 fs-16 fw-6 lh-24">Resource Browser</span>,
+                    component: <BreadcrumbText heading="Resource Browser" isActive />,
                 },
                 'installation-cluster': {
                     component: (

src/components/ResourceBrowser/ResourceBrowser.tsx

@@ -19,6 +19,7 @@ import { useLocation } from 'react-router-dom'
 
 import {
     BreadCrumb,
+    BreadcrumbText,
     ClusterDetail,
     DevtronProgressing,
     ErrorScreenManager,
@@ -51,7 +52,7 @@ const ResourceBrowser: React.FC = () => {
             alias: {
                 ...getInfrastructureManagementBreadcrumb(),
                 'resource-browser': {
-                    component: <span className="cn-9 fs-16 fw-6 lh-24">Resource Browser</span>,
+                    component: <BreadcrumbText heading="Resource Browser" isActive />,
                 },
             },
         },

src/components/bulkEdits/BulkEdits.tsx

@@ -23,6 +23,7 @@ import yamlJsParser from 'yaml'
 
 import {
     BreadCrumb,
+    BreadcrumbText,
     BulkEditConfigV2Type,
     BulkEditVersion,
     Button,
@@ -599,7 +600,7 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
             {
                 alias: {
                     ...getApplicationManagementBreadcrumb(),
-                    'bulk-edit': { component: <span className="cn-9 fs-16 fw-6 lh-24">Bulk Edit</span> },
+                    'bulk-edit': { component: <BreadcrumbText heading="Bulk Edits" isActive /> },
                 },
             },
             [pathname],

src/components/project/ProjectList.tsx

@@ -27,6 +27,7 @@ import {
     BreadCrumb,
     useBreadcrumb,
     getApplicationManagementBreadcrumb,
+    BreadcrumbText,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { HEADER_TEXT, ViewType } from '../../config'
 import { createProject, getProjectList } from './service'
@@ -204,7 +205,7 @@ export default class ProjectList extends Component<ProjectListProps, ProjectList
             {
                 alias: {
                     ...getApplicationManagementBreadcrumb(),
-                    projects: { component: <span className="cn-9 fs-16 fw-6 lh-24">Projects</span> },
+                    projects: { component: <BreadcrumbText heading="Projects" isActive /> },
                 },
             },
             [pathname],

src/css/base.scss

@@ -1360,6 +1360,8 @@ button.anchor {
 
 .dc__devtron-breadcrumb__item__separator {
     margin: 0 4px;
+    font-weight: 400;
+    color: var(--N500);
 }
 
 .multi-chart-summary__values-select.popup-body,