fix: change colour on hover for links

frontend/components/BlueLink.tsx

@@ -7,8 +7,10 @@ export type Props = {
 
 export default function BlueLink({ to, children }: Props) {
   return (
-    <Link href={to} className="hover:underline text-sky-500 dark:text-sky-400">
+    <Link href={to}>
-      {children}
+      <a className="hover:underline text-sky-500 dark:text-sky-400">
+        {children}
+      </a>
     </Link>
   );
 }

frontend/components/NavItem.tsx

@@ -9,11 +9,10 @@ export interface Props {
 
 export default function NavItem(props: Props) {
   const ret = (
-    <Link
+    <Link href={props.href}>
-      className="hover:text-sky-500 dark:hover:text-sky-400"
+      <a className="hover:text-sky-500 dark:hover:text-sky-400">
-      href={props.href}
+        {props.children}
-    >
+      </a>
-      {props.children}
     </Link>
   );
 

frontend/components/Navigation.tsx

@@ -56,9 +56,7 @@ export default function Navigation() {
 
   const nav = user ? (
     <>
-      <NavItem href={`/u/${user.username}`}>
+      <NavItem href={`/u/${user.username}`}>@{user.username}</NavItem>
-        <a>@{user.username}</a>
-      </NavItem>
       <NavItem href="/settings">Settings</NavItem>
       <NavItem href="/logout">Log out</NavItem>
     </>

frontend/pages/u/[user]/index.tsx

@@ -18,6 +18,7 @@ import {
   HeartFill,
   People,
 } from "react-bootstrap-icons";
+import BlueLink from "../../../components/BlueLink";
 
 interface Props {
   user: User;
@@ -38,12 +39,7 @@ export default function Index({ user }: Props) {
             <span className="font-bold">public</span> profile.
           </span>
           <br />
-          <Link
+          <BlueLink to="/edit/profile">Edit your profile</BlueLink>
-            href="/edit/profile"
-            className="hover:underline text-sky-500 dark:text-sky-400"
-          >
-            Edit your profile
-          </Link>
         </div>
       )}
       <div className="container mx-auto">