fix: update the external link icon

acid-info · Jul 10, 2023 · 3eab172 · 3eab172
1 parent 4e2f413
commit 3eab172
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git 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
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
@@ -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
@@ -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;
+}