From 3eab172a0bdc2382c51d41d538c4cfdfb961cfe0 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 10 Jul 2023 23:39:13 +0330
Subject: [PATCH] fix: update the external link icon

---
 .../src/client/components/Icon/Icon.tsx           | 15 +++++++++++----
 .../src/client/static/icons/external-link.svg     |  3 +++
 .../theme/NavbarItem/NavbarNavLink/index.tsx      | 13 ++++++++-----
 .../NavbarItem/NavbarNavLink/styles.module.css    |  9 +++++++++
 4 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg

diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
index d295671..5b09ad1 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import { useColorMode } from '@docusaurus/theme-common'
 import { clsx } from 'clsx'
-import React from 'react'
+import React, { CSSProperties } from 'react'
 
 import styles from './style.module.scss'
 
@@ -14,7 +14,11 @@ import DiscordSvg from '../../static/icons/discord.svg'
 import DiscourseSvg from '../../static/icons/discourse.svg'
 import DotSvg from '../../static/icons/dot.svg'
 import DropdownSvg from '../../static/icons/dropdown.svg'
+import EditSvg from '../../static/icons/edit.svg'
+import ExternalLinkSvg from '../../static/icons/external-link.svg'
 import FolderSvg from '../../static/icons/folder.svg'
+import FullscreenExitSvg from '../../static/icons/fullscreen-exit.svg'
+import FullscreenSvg from '../../static/icons/fullscreen.svg'
 import GithubSvg from '../../static/icons/github.svg'
 import GScholarSvg from '../../static/icons/gscholar.svg'
 import HistorySvg from '../../static/icons/history.svg'
@@ -23,9 +27,6 @@ import SearchSvg from '../../static/icons/search.svg'
 import StatusSvg from '../../static/icons/status.svg'
 import TelegramSvg from '../../static/icons/telegram.svg'
 import TwitterSvg from '../../static/icons/twitter.svg'
-import EditSvg from '../../static/icons/edit.svg'
-import FullscreenSvg from '../../static/icons/fullscreen.svg'
-import FullscreenExitSvg from '../../static/icons/fullscreen-exit.svg'
 
 type TIconProps = {
   size?: 's' | 'm' | 'l'
@@ -192,3 +193,9 @@ export const IconFullscreenExit = (props: TIconProps): JSX.Element => (
     <FullscreenExitSvg />
   </Icon>
 )
+
+export const IconExternalLink = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <ExternalLinkSvg />
+  </Icon>
+)
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg b/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg
new file mode 100644
index 0000000..01d903e
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/external-link.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 6L5.5 1M5.5 1C5.5 1 2.45262 1 0.5 1M5.5 1V6" stroke="white"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx
index fd41632..1414faf 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/index.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
-import Link from '@docusaurus/Link'
-import useBaseUrl from '@docusaurus/useBaseUrl'
+import { Typography } from '@acid-info/lsd-react'
 import isInternalUrl from '@docusaurus/isInternalUrl'
+import Link from '@docusaurus/Link'
 import { isRegexpStringMatch } from '@docusaurus/theme-common'
-import { PickIcon, Typography } from '@acid-info/lsd-react'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import React from 'react'
+import { IconExternalLink } from '../../../components/Icon/Icon'
 import styles from './styles.module.css'
 
 export default function NavbarNavLink({
@@ -35,7 +36,9 @@ export default function NavbarNavLink({
             className={styles.linkContent}
           >
             {label}
-            {isExternalLink && <PickIcon color="primary" />}
+            {isExternalLink && (
+              <IconExternalLink className={styles.externalLinkIcon} />
+            )}
           </Typography>
         ),
       }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/styles.module.css
index 23a6519..a9c5a88 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/NavbarNavLink/styles.module.css
@@ -10,3 +10,12 @@
   text-underline-offset: 0.3rem;
   text-decoration-color: rgba(var(--lsd-text-primary), 0.6);
 }
+
+.externalLinkIcon {
+  width: 8px;
+}
+
+.externalLinkIcon svg {
+  width: 100%;
+  height: auto;
+}