diff --git a/wally-registry-frontend/src/app/page.tsx b/wally-registry-frontend/src/app/page.tsx index 94798a9..65dca14 100644 --- a/wally-registry-frontend/src/app/page.tsx +++ b/wally-registry-frontend/src/app/page.tsx @@ -16,6 +16,17 @@ const Flex = styled.div` margin: 1.5rem 0; ` +const BannerInlineLink = styled.a` + border-bottom: 1px dotted var(--wally-white); + + &:hover, + &:focus { + color: var(--wally-mauve); + border-bottom: 1px solid var(--wally-mauve); + cursor: help; + } +` + const PopularPackages = () => { const popularPackagesList = mockPopularPackages.map((popPackage, index) => ( Wally, a package manager for Roblox - Wally is a package manager for Roblox inspired by Cargo (Rust) and npm + Wally is a package manager for Roblox inspired by{" "} + + Cargo + {" "} + (Rust) and{" "} + + npm + {" "} (JavaScript). It brings the familiar, community-oriented world of sharing code from other communities into the Roblox ecosystem. diff --git a/wally-registry-frontend/src/components/CopyCode.tsx b/wally-registry-frontend/src/components/CopyCode.tsx index 4c421ed..d15c090 100644 --- a/wally-registry-frontend/src/components/CopyCode.tsx +++ b/wally-registry-frontend/src/components/CopyCode.tsx @@ -44,7 +44,7 @@ const CopyIcon = styled.div` color: white; ` -const CopyCodeButton = styled.button<{ recentlyCopied: boolean }>` +const CopyCodeButton = styled.button<{ $recentlyCopied: boolean }>` display: flex; justify-content: space-between; align-items: center; @@ -59,7 +59,7 @@ const CopyCodeButton = styled.button<{ recentlyCopied: boolean }>` word-break: break-word; white-space: pre-line; - ${(props) => props.recentlyCopied && jumpAnimation} + ${(props) => props.$recentlyCopied && jumpAnimation} &:hover ${CopyIcon} { visibility: visible; @@ -92,7 +92,7 @@ export default function CopyCody({ return ( copyToClipBoard(copyContent)} > <> diff --git a/wally-registry-frontend/src/components/Header.tsx b/wally-registry-frontend/src/components/Header.tsx index f1a5d9d..ad023ed 100644 --- a/wally-registry-frontend/src/components/Header.tsx +++ b/wally-registry-frontend/src/components/Header.tsx @@ -2,7 +2,7 @@ import Image from "next/image" import Link from "next/link" -import { useRouter } from "next/navigation" +import { usePathname, useRouter } from "next/navigation" import AsyncSelect from "react-select/async" import styled from "styled-components" import logo from "../../public/assets/wally-logo.svg" @@ -188,18 +188,8 @@ const StyledNav = styled.nav` } ` -const activeClassName = "nav-active" - -const StyledNavLink = styled(Link).attrs({ - activeClassName, -})` - && { - ${(props) => props.$styles} - } - - &.${activeClassName} { - color: var(--wally-red); - } +const StyledNavLink = styled(Link)` + color: ${(props) => (props.$active ? "var(--wally-red)" : "inherit")}; &:hover { color: var(--wally-red); @@ -317,6 +307,9 @@ const filterWallyPackages = async (inputValue: string) => { export default function Header() { const router = useRouter() + const pathname = usePathname() + + const currentParentPage = pathname.split("/")[1] const loadOptions = async (inputValue: string) => new Promise((resolve) => { @@ -380,9 +373,9 @@ export default function Header() { {links.map(([text, url]) => ( {text}