fix: change colour on hover for links

This commit is contained in:
Sam 2022-11-18 15:26:52 +01:00
parent bfdaafeb0a
commit dcfb60e9e3
4 changed files with 11 additions and 16 deletions

View File

@ -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}>
<a className="hover:underline text-sky-500 dark:text-sky-400">
{children}
</a>
</Link>
);
}

View File

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

View File

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

View File

@ -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
href="/edit/profile"
className="hover:underline text-sky-500 dark:text-sky-400"
>
Edit your profile
</Link>
<BlueLink to="/edit/profile">Edit your profile</BlueLink>
</div>
)}
<div className="container mx-auto">