refactor: improve links inside editor

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

@@ -1,12 +1,10 @@
-@use "../../../../theme/mixins" as *;
-
 .link {
-  @include action-link;
-  font-size: $inner-section-text-size;
-}
+  color: $label-gray;
+  font-size: $text-body-size;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 
-.linkIcon {
-  margin-left: $element-inner-spacing;
-  display: inline-block;
-  @include rotate-fourty-five;
+  &:hover {
+    color: $blue-400;
+  }
 }

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

@@ -1,26 +1,25 @@
-import { MouseEvent, ReactNode } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-
-import { openLink } from '../../../utils/linkUtils';
+import { type PropsWithChildren } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import style from './AppLink.module.scss';
 
 interface AppLinkProps {
-  href: string;
-  children: ReactNode;
+  search: string;
 }
 
-export default function AppLink(props: AppLinkProps) {
-  const { href, children } = props;
+/**
+ * Component used to navigate to an editor link inside the same window
+ * Handles the path to respect Ontime Clouds base URL
+ */
+export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
+  const { search, children } = props;
+  const navigate = useNavigate();
 
-  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    openLink(href);
-  };
+  const handleClick = () => navigate({ search });
 
   return (
-    <a href='#!' target='_blank' rel='noreferrer' className={style.link} onClick={handleClick}>
-      {children} <IoArrowUp className={style.linkIcon} />
-    </a>
+    <button onClick={handleClick} className={style.link}>
+      {children}
+    </button>
   );
 }