Use Link tag for correct styling

GeoWerkstatt · Sep 2, 2024 · c734583 · c734583
1 parent 961030f
commit c734583
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/Geopilot.Frontend/src/components/markdownContent.tsx b/src/Geopilot.Frontend/src/components/markdownContent.tsx
@@ -4,7 +4,7 @@
 import ReactMarkdown from "react-markdown";
 import rehypeExternalLinks from "rehype-external-links";
 import { FC } from "react";
-import { Typography } from "@mui/material";
+import { Link, Typography } from "@mui/material";
 
 interface MarkdownContentProps {
   content: string;
@@ -23,6 +23,7 @@ export const MarkdownContent: FC<MarkdownContentProps> = ({ content, routeHash }
         h5: props => <Typography component="h5" variant="h6" {...props} />,
         h6: props => <Typography component="h6" variant="h5" {...props} />,
         p: props => <Typography component="p" variant="body1" {...props} />,
+        a: props => <Link {...props} target="_blank" rel="noreferrer" />,
       }}>
       {content}
     </ReactMarkdown>

diff --git a/src/Geopilot.Frontend/src/pages/footer/about.tsx b/src/Geopilot.Frontend/src/pages/footer/about.tsx
@@ -101,7 +101,7 @@ export const About = () => {
               {licenseInfoCustom[key].version && ` (${t("version")} ${licenseInfoCustom[key].version})`}{" "}
             </Typography>
             <p>
-              <a href={licenseInfoCustom[key].repository}>{licenseInfoCustom[key].repository}</a>
+              <Link href={licenseInfoCustom[key].repository}>{licenseInfoCustom[key].repository}</Link>
             </p>
             <p>{licenseInfoCustom[key].description}</p>
             <p>{licenseInfoCustom[key].copyright}</p>
@@ -119,7 +119,7 @@ export const About = () => {
               {licenseInfo[key].version && ` (${t("version")} ${licenseInfo[key].version})`}{" "}
             </Typography>
             <p>
-              <a href={licenseInfo[key].repository}>{licenseInfo[key].repository}</a>
+              <Link href={licenseInfo[key].repository}>{licenseInfo[key].repository}</Link>
             </p>
             <p>{licenseInfo[key].description}</p>
             <p>{licenseInfo[key].copyright}</p>