feat(app): add hover effect to links in navigation elements (#469)

* feat(app): add OpacityElement * feat(app): implement OpacityElement * fix(app): OpacityElement improvements; fix CtaHeader links * Update apps/app/src/components/OpacityElement.tsx Co-authored-by: Michał Miszczyszyn <michal@mmiszy.pl> * Update apps/app/src/components/OpacityElement.tsx * Update apps/app/src/components/OpacityElement.tsx * Remove 'permanent' prop from 'OpacityElement' * Remove 'OpacityElement' from project * Add hover effect to some links - mostly in navigation elements * Revert previous type definition for ActiveNavigationLink component props Co-authored-by: Michał Miszczyszyn <michal@mmiszy.pl>
typeofweb-org · Jan 2, 2023 · 5a2bf62 · 5a2bf62
1 parent 85df5dd
commit 5a2bf62
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 10 deletions.
diff --git a/apps/app/src/components/CtaHeader/CtaHeader.tsx b/apps/app/src/components/CtaHeader/CtaHeader.tsx
@@ -12,7 +12,7 @@ type CtaHeaderActiveLinkProps = Readonly<{
 const CtaHeaderActiveLink = (props: CtaHeaderActiveLinkProps) => (
 	<ActiveLink
 		activeClassName="font-bold border-white"
-		className="flex h-12 grow items-center justify-center border-b-2 border-transparent px-7"
+		className="flex h-12 grow items-center justify-center border-b-2 border-transparent px-7 transition-opacity hover:opacity-80"
 		{...props}
 	/>
 );

diff --git a/apps/app/src/components/Footer.tsx b/apps/app/src/components/Footer.tsx
@@ -7,21 +7,37 @@ export const Footer = () => (
 			<nav className="flex text-sm text-white">
 				<ul className="flex list-none flex-wrap justify-center gap-y-4 gap-x-7">
 					<li>
-						<Link href="/about">Jak korzystać?</Link>
+						<Link href="/about" className="transition-opacity hover:opacity-80">
+							Jak korzystać?
+						</Link>
 					</li>
 					<li>
-						<Link href="/regulations">Regulamin</Link>
+						<Link href="/regulations" className="transition-opacity hover:opacity-80">
+							Regulamin
+						</Link>
 					</li>
 					<li>
-						<Link href="/authors">Autorzy</Link>
+						<Link href="/authors" className="transition-opacity hover:opacity-80">
+							Autorzy
+						</Link>
 					</li>
 					<li>
-						<a href="https://www.facebook.com/DevFAQ" target="_blank" rel="noreferrer">
+						<a
+							href="https://www.facebook.com/DevFAQ"
+							target="_blank"
+							rel="noreferrer"
+							className="transition-opacity hover:opacity-80"
+						>
 							Facebook
 						</a>
 					</li>
 					<li>
-						<a href="https://typeofweb.com" target="_blank" rel="noreferrer">
+						<a
+							href="https://typeofweb.com"
+							target="_blank"
+							rel="noreferrer"
+							className="transition-opacity hover:opacity-80"
+						>
 							Type of Web
 						</a>
 					</li>

diff --git a/apps/app/src/components/Header/ActiveNagivationLink.tsx b/apps/app/src/components/Header/ActiveNagivationLink.tsx
@@ -8,5 +8,9 @@ type ActiveNavigationLinkProps = Readonly<{
 }>;
 
 export const ActiveNavigationLink = (props: ActiveNavigationLinkProps) => (
-	<ActiveLink className="border-b border-transparent" activeClassName="border-white" {...props} />
+	<ActiveLink
+		className="border-b border-transparent transition-opacity hover:opacity-80"
+		activeClassName="border-white"
+		{...props}
+	/>
 );
diff --git a/apps/app/src/components/Header/HeaderNavigation.tsx b/apps/app/src/components/Header/HeaderNavigation.tsx
@@ -50,6 +50,7 @@ export const HeaderNavigation = ({ children }: { children: ReactNode }) => {
 								target="_blank"
 								rel="noreferrer"
 								onClick={handleClickLink}
+								className="transition-opacity hover:opacity-80"
 							>
 								Facebook
 							</a>

diff --git a/apps/app/src/components/Header/UserAvatar.tsx b/apps/app/src/components/Header/UserAvatar.tsx
@@ -19,7 +19,7 @@ export const UserAvatar = ({ userData }: UserAvatarProps) => {
 			height={38}
 			title="Kliknij, aby się wylogować"
 			onClick={() => logout.mutate({})}
-			className="mx-auto cursor-pointer rounded-full"
+			className="mx-auto cursor-pointer rounded-full transition-opacity hover:opacity-80"
 		/>
 	);
 };
diff --git a/apps/app/src/components/LoginForm/BackLink.tsx b/apps/app/src/components/LoginForm/BackLink.tsx
@@ -8,7 +8,10 @@ export const BackLink = () => {
 	const previousPath = searchParams.get("previousPath") || "/";
 
 	return (
-		<Link href={previousPath} className="text-sm text-white underline">
+		<Link
+			href={previousPath}
+			className="text-sm text-white underline transition-opacity hover:opacity-80"
+		>
 			Powrót do strony głównej
 		</Link>
 	);

diff --git a/apps/app/src/components/LoginForm/GitHubLoginButton.tsx b/apps/app/src/components/LoginForm/GitHubLoginButton.tsx
@@ -29,7 +29,7 @@ export const GitHubLoginButton = () => {
 			onClick={() => {
 				void handleClick();
 			}}
-			className="flex w-fit items-center rounded-lg border-2 border-neutral-300 bg-white p-2 text-zinc-800"
+			className="flex w-fit items-center rounded-lg border-2 border-neutral-300 bg-white p-2 text-zinc-800 transition-colors hover:bg-neutral-200"
 		>
 			<GitHubLogo className="mr-3" />
 			Zaloguj się przez GitHuba