fix: restyle breadcrumb to look cleaner (#310)

Co-authored-by: Park Se Hyun <>
opengovsg · Jul 18, 2024 · 549ceae · 549ceae
1 parent 76a822c
commit 549ceae
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/packages/components/src/templates/next/components/internal/Breadcrumb/Breadcrumb.tsx b/packages/components/src/templates/next/components/internal/Breadcrumb/Breadcrumb.tsx
@@ -4,21 +4,22 @@ import type { BreadcrumbProps } from "~/interfaces"
 
 const Breadcrumb = ({ links, LinkComponent = "a" }: BreadcrumbProps) => {
   return (
-    <div className="flex flex-row flex-wrap gap-1">
+    <div className="flex flex-row flex-wrap gap-2">
       {links.map((link, index) => {
         const isLast = index === links.length - 1
         return (
-          <div
-            key={index}
-            className="flex flex-row items-center gap-1 text-content-medium"
-          >
+          <div key={index} className="flex flex-row items-center gap-1">
             <LinkComponent
               href={link.url}
-              className="underline underline-offset-2 hover:text-hyperlink-hover active:text-hyperlink"
+              className={`text-sm underline decoration-transparent underline-offset-2 transition duration-150 ease-in hover:decoration-inherit active:text-hyperlink ${
+                isLast ? "font-medium text-gray-700" : "text-gray-600"
+              }`}
             >
               {link.title}
             </LinkComponent>
-            {!isLast && <MdChevronRight className="h-auto min-w-6" />}
+            {!isLast && (
+              <MdChevronRight className="h-auto min-w-6 text-gray-400" />
+            )}
           </div>
         )
       })}