From 9712fb2a838250163b05f38e2eeb0bed572a1408 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Tue, 30 Jul 2024 09:57:42 +0200
Subject: [PATCH] feat(nx-dev): improve link visibility on docs pages

---
 .../src/lib/related-documents-section.tsx                   | 2 +-
 nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx          | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx b/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
index 2fab5c2ffc236..c2612ee8ba2a1 100644
--- a/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
@@ -53,7 +53,7 @@ function CategoryBox({ category }: { category: RelatedDocumentsCategory }) {
           >
             <Link
               href={d.path}
-              className="flex flex-grow items-center justify-between no-underline hover:text-sky-600 hover:underline dark:hover:text-sky-400"
+              className="flex flex-grow items-center justify-between no-underline transition-colors ease-out hover:text-blue-700 hover:underline dark:text-sky-500 dark:hover:text-sky-400"
               prefetch={false}
             >
               <span>{d.name}</span>
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx
index 50deffcbdecef..e3d2fe479b390 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { cx } from '@nx/nx-dev/ui-primitives';
 
 export function CustomLink(props: any) {
   const target =
@@ -11,7 +12,10 @@ export function CustomLink(props: any) {
       passHref
       target={target}
       rel={target === '_blank' ? 'noreferrer' : undefined}
-      className={props.className}
+      className={cx(
+        props.className,
+        'text-blue-600 transition-colors ease-out hover:text-blue-700 dark:text-sky-500 dark:hover:text-sky-400'
+      )}
     >
       {props.children}
     </Link>