Fix styling of visited outgoing links

Change color of icon inside link depending on state of the link.
digitalservicebund · Mar 3, 2025 · dc77197 · dc77197
1 parent 25259a7
commit dc77197
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/shared/components/RichText.tsx b/packages/shared/components/RichText.tsx
@@ -28,11 +28,11 @@ const RichText = ({
           const newLinkHtml = linkHtml
             .replace(
               /^<a /,
-              `<a target="_blank" aria-describedby=${A11Y_MESSAGE_NEW_WINDOW} rel="noopener noreferrer" `,
+              `<a target="_blank" aria-describedby=${A11Y_MESSAGE_NEW_WINDOW} rel="noopener noreferrer" class="group"`,
             )
             .replace(
               `>${token.text}<`,
-              `>${token.text} ${openInNewIconString}<`,
+              `>${token.text}${openInNewIconString}<`,
             );
 
           return newLinkHtml;

diff --git a/packages/shared/components/openInNewWindow.tsx b/packages/shared/components/openInNewWindow.tsx
@@ -5,6 +5,6 @@ export const openInNewIconString = ReactDOMServer.renderToString(
   <OpenInNewIcon
     height="1.2em"
     width="1.2em"
-    className="mb-1 ml-[0.2rem] !inline fill-blue-800"
+    className="mb-1 ml-[0.2rem] !inline fill-blue-800 group-visited:fill-[#4c2c92]"
   />,
 );