styles: update Breadcrumbs style

src/components/Blog/BreadcrumbsNav/index.tsx

@@ -1,13 +1,12 @@
+import type { ReactNode } from 'react'
+import type { UrlObject } from 'url'
 import { Breadcrumbs, Typography } from '@mui/material'
 import Link from 'next/link'
-import css from './styles.module.css'
-import { type UrlObject } from 'url'
-import CategoryIcon from '@/public/images/Blog/category-icon.svg'
-import { type ReactNode } from 'react'
 import { AppRoutes } from '@/config/routes'
+import AngleIcon from '@/public/images/angle-icon.svg'
+import css from './styles.module.css'
 
-const TYPOGRAPHY_VARIANT = 'caption'
-const TYPOGRAPHY_COLOR = 'text.primary'
+const TYPOGRAPHY_VARIANT = 'body2'
 
 type BreadcrumbsType = {
   category: string
@@ -16,30 +15,24 @@ type BreadcrumbsType = {
 
 const createBreadcrumb = (key: string, text: ReactNode, linkProps: string | UrlObject) => (
   <Link key={key} href={linkProps}>
-    <Typography variant={TYPOGRAPHY_VARIANT} color={TYPOGRAPHY_COLOR}>
-      {text}
-    </Typography>
+    <Typography variant={TYPOGRAPHY_VARIANT}>{text}</Typography>
   </Link>
 )
 
 const BreadcrumbsNav = ({ category, title }: BreadcrumbsType) => {
   const breadcrumbs = [
     createBreadcrumb('1', 'Blog', { pathname: AppRoutes.blog.index }),
-    createBreadcrumb(
-      '2',
-      <div className={css.category}>
-        <CategoryIcon />
-        {category}
-      </div>,
-      { pathname: AppRoutes.blog.index, query: { category } },
-    ),
-    <Typography key="3" variant={TYPOGRAPHY_VARIANT} color={TYPOGRAPHY_COLOR}>
+    createBreadcrumb('2', <>{category}</>, {
+      pathname: AppRoutes.blog.index,
+      query: { category },
+    }),
+    <Typography key="3" variant={TYPOGRAPHY_VARIANT} className={css.title}>
       {title}
     </Typography>,
   ]
 
   return (
-    <Breadcrumbs separator=">" className={css.breadcrumbs}>
+    <Breadcrumbs separator={<AngleIcon />} className={css.breadcrumbs}>
       {breadcrumbs}
     </Breadcrumbs>
   )

src/components/Blog/BreadcrumbsNav/styles.module.css

@@ -1,23 +1,25 @@
-.breadcrumbs,
+.breadcrumbs li {
+  display: flex;
+  align-items: center;
+}
+
 .breadcrumbs a {
-  color: var(--mui-palette-text-primary);
-  margin-bottom: 24px;
+  transition-duration: var(--transition-duration);
 }
 
 .breadcrumbs a:hover {
+  color: var(--mui-palette-text-primary);
   text-decoration: underline;
 }
 
 .breadcrumbs :global .MuiBreadcrumbs-separator {
-  margin: 0 4px;
-}
-
-.breadcrumbs :global .MuiTypography-root {
-  line-height: inherit;
+  width: 8px;
+  height: 8px;
 }
 
-.category {
-  display: flex;
-  gap: 4px;
-  align-items: center;
+.title {
+  width: 290px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }