refactor: migrate logs (#673)

apps/client/src/common/components/app-link/AppLink.module.scss

@@ -0,0 +1,13 @@
+@use "../../../theme/v2Styles" as *;
+@use "../../../theme/mixins" as *;
+
+.link {
+  @include action-link;
+  font-size: $inner-section-text-size;
+}
+
+.linkIcon {
+  margin-left: $element-inner-spacing;
+  display: inline-block;
+  transform: rotate(45deg);
+}

apps/client/src/common/components/app-link/AppLink.tsx

@@ -0,0 +1,26 @@
+import { MouseEvent, ReactNode } from 'react';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+
+import { openLink } from '../../utils/linkUtils';
+
+import style from './AppLink.module.scss';
+
+interface AppLinkProps {
+  href: string;
+  children: ReactNode;
+}
+
+export default function AppLink(props: AppLinkProps) {
+  const { href, children } = props;
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    openLink(href);
+  };
+
+  return (
+    <a href='#!' target='_blank' rel='noreferrer' className={style.link} onClick={handleClick}>
+      {children} <IoArrowUp className={style.linkIcon} />
+    </a>
+  );
+}

apps/client/src/common/components/external-link/ExternalLink.tsx

@@ -12,7 +12,7 @@ interface ExternalLinkProps {
   inline?: boolean;
 }
 
-export default function ModalLink(props: ExternalLinkProps) {
+export default function ExternalLink(props: ExternalLinkProps) {
   const { href, inline, children } = props;
   const classes = cx([style.link, inline ? style.inline : null]);
 

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -71,7 +71,6 @@ $button-size: 48px;
   @include action-link;
   justify-content: space-between;
   padding: 0.5rem 1rem;
-  cursor: pointer;
 
   &:hover {
     background-color: $menu-hover-bg;