From ff972478be0bba77859507a619962392a4059d86 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Thu, 17 Nov 2022 09:01:37 +0100
Subject: [PATCH] added ExternalLinkIndication.tsx

---
 src/components/ExternalLinkIndication.tsx     | 20 +++++++++++++++++++
 src/components/index.ts                       |  2 ++
 .../ExpandedUrlsListItem.tsx                  |  9 +++++++--
 .../ProxiedImagesListItem.tsx                 |  4 ++--
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ExternalLinkIndication.tsx

diff --git a/src/components/ExternalLinkIndication.tsx b/src/components/ExternalLinkIndication.tsx
new file mode 100644
index 0000000..793c8ff
--- /dev/null
+++ b/src/components/ExternalLinkIndication.tsx
@@ -0,0 +1,20 @@
+import {ReactElement} from "react"
+import {HiOutlineExternalLink} from "react-icons/hi"
+
+import {Box, BoxProps} from "@mui/material"
+
+export interface ExternalLinkIndicationProps extends BoxProps {}
+
+export default function ExternalLinkIndication({
+	children,
+	...props
+}: ExternalLinkIndicationProps): ReactElement {
+	return (
+		<Box component="span" {...props} display="flex" alignItems="center">
+			<Box component="span" mr={1}>
+				{children}
+			</Box>
+			<HiOutlineExternalLink />
+		</Box>
+	)
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index da2213f..0c8a0e3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -40,5 +40,7 @@ export * from "./LanguageButton"
 export {default as LanguageButton} from "./LanguageButton"
 export * from "./ExpandableListItem"
 export {default as ExpandableListItem} from "./ExpandableListItem"
+export * from "./ExternalLinkIndication"
+export {default as ExternalLinkIndication} from "./ExternalLinkIndication"
 
 export * as SimplePageBuilder from "./simple-page-builder"
diff --git a/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx b/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx
index 988394c..c9ef991 100644
--- a/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx
+++ b/src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx
@@ -1,11 +1,12 @@
 import {ReactElement} from "react"
 import {useTranslation} from "react-i18next"
 import {BsArrowsAngleExpand} from "react-icons/bs"
+import {HiOutlineExternalLink} from "react-icons/hi"
 
 import {List, ListItemButton, ListItemText} from "@mui/material"
 
 import {DecryptedReportContent} from "~/server-types"
-import {ExpandableListItem} from "~/components"
+import {ExpandableListItem, ExternalLinkIndication} from "~/components"
 
 export interface ExpandedUrlsListItemProps {
 	urls: DecryptedReportContent["messageDetails"]["content"]["expandedUrls"]
@@ -32,7 +33,11 @@ export default function ExpandedUrlsListItem({urls}: ExpandedUrlsListItemProps):
 						rel="noopener noreferrer nofollow"
 					>
 						<ListItemText
-							primary={urlData.expandedUrl}
+							primary={
+								<ExternalLinkIndication>
+									{urlData.expandedUrl}
+								</ExternalLinkIndication>
+							}
 							secondary={urlData.originalUrl}
 						/>
 					</ListItemButton>
diff --git a/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx b/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
index 13e0df1..8757694 100644
--- a/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
+++ b/src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx
@@ -10,7 +10,7 @@ import {Grid, List, ListItemButton, ListItemText} from "@mui/material"
 
 import {DecryptedReportContent, ServerSettings} from "~/server-types"
 import {isDev} from "~/constants/development"
-import {ExpandableListItem} from "~/components"
+import {ExpandableListItem, ExternalLinkIndication} from "~/components"
 
 export interface ProxiedImagesListItemProps {
 	images: DecryptedReportContent["messageDetails"]["content"]["proxiedImages"]
@@ -38,7 +38,7 @@ export default function ProxiedImagesListItem({images}: ProxiedImagesListItemPro
 						key={image.imageProxyId}
 					>
 						<ListItemText
-							primary={image.url}
+							primary={<ExternalLinkIndication>{image.url}</ExternalLinkIndication>}
 							secondary={
 								<>
 									<Grid