From a56094213d5eff221d316fc526cd77c0e8683bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mattias=20Str=C3=B6mberg?= <mattias.stromberg@sweco.se>
Date: Thu, 21 Nov 2024 15:48:41 +0100
Subject: [PATCH] Use theme to define color on links in Document Handler

---
 .../utils/ContentComponentFactory.js          | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js b/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
index bcd8655c1..5525e9a7e 100644
--- a/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
+++ b/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
@@ -754,7 +754,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     );
   };
 
-  const getExternalLink = (externalLink) => {
+  const GetExternalLink = (externalLink) => {
+    // Grab the theme to determine current light/dark mode
+    const theme = useTheme();
+
     return (
       <Button
         startIcon={
@@ -766,7 +769,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
         }
         sx={{
           padding: 0,
-          color: "info.main",
+          color:
+            theme.palette.mode === "dark"
+              ? theme.palette.info.dark
+              : theme.palette.info.main,
           ".MuiButton-startIcon": {
             marginLeft: 0,
           },
@@ -782,7 +788,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     );
   };
 
-  const getMapLink = (aTag, mapLinkOrg) => {
+  const GetMapLink = (aTag, mapLinkOrg) => {
+    // Grab the theme to determine current light/dark mode
+    const theme = useTheme();
+
     // Attempt to safely URI Decode the supplied string. If
     // it fails, use it as-is.
     // The reason we want probably want to decode is that the
@@ -806,7 +815,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
         }
         sx={{
           padding: 0,
-          color: "info.main",
+          color:
+            theme.palette.mode === "dark"
+              ? theme.palette.info.dark
+              : theme.palette.info.main,
           ...(bottomMargin && { marginBottom: 1 }),
           ".MuiButton-startIcon": {
             marginLeft: 0,
@@ -825,7 +837,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     );
   };
 
-  const getDocumentLink = (headerIdentifier, documentLink, isPrintMode) => {
+  const GetDocumentLink = (headerIdentifier, documentLink, isPrintMode) => {
+    // Grab the theme to determine current light/dark mode
+    const theme = useTheme();
+
     return (
       <Button
         startIcon={
@@ -837,7 +852,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
         }
         sx={{
           padding: 0,
-          color: "info.main",
+          color:
+            theme.palette.mode === "dark"
+              ? theme.palette.info.dark
+              : theme.palette.info.main,
           ".MuiButton-startIcon": {
             marginLeft: 0,
           },
@@ -863,15 +881,15 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
 
   if (documentLink) {
     const isPrintMode = Boolean(aTag.attributes.printMode);
-    return getDocumentLink(headerIdentifier, documentLink, isPrintMode);
+    return GetDocumentLink(headerIdentifier, documentLink, isPrintMode);
   }
 
   if (mapLink) {
-    return getMapLink(aTag, mapLink, localObserver);
+    return GetMapLink(aTag, mapLink, localObserver);
   }
 
   if (externalLink) {
-    return getExternalLink(externalLink);
+    return GetExternalLink(externalLink);
   }
 
   if (hoverLink) {