From 47d680da8a18662d3ec9fb2366284378a5fecf69 Mon Sep 17 00:00:00 2001 From: mrjvs <jellevs@gmail.com> Date: Thu, 18 Jan 2024 20:37:27 +0100 Subject: [PATCH] Add some hover effects --- src/pages/onboarding/Onboarding.tsx | 4 ++-- src/pages/onboarding/utils.tsx | 14 +++++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index 05879507..3387f044 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -70,7 +70,7 @@ export function OnboardingPage() { <Card onClick={() => navigate("/onboarding/extension")}> <CardContent colorClass="!text-onboarding-best" - title="Browser extension — best quality" + title="Browser extension" subtitle="Best quality" description="Install browser extension and gain access to the best sources." > @@ -84,7 +84,7 @@ export function OnboardingPage() { <a onClick={skipModal.show} type="button" - className="text-onboarding-link cursor-pointer" + className="text-onboarding-link hover:opacity-75 cursor-pointer" > use the default setup </a> diff --git a/src/pages/onboarding/utils.tsx b/src/pages/onboarding/utils.tsx index eaf722b2..410875b7 100644 --- a/src/pages/onboarding/utils.tsx +++ b/src/pages/onboarding/utils.tsx @@ -1,4 +1,5 @@ import classNames from "classnames"; +import { ReactNode } from "react"; import { Icon, Icons } from "@/components/Icon"; import { Heading2, Heading3, Paragraph } from "@/components/utils/Text"; @@ -18,9 +19,9 @@ export function Card(props: { } export function CardContent(props: { - title: string; - description: string; - subtitle: string; + title: ReactNode; + description: ReactNode; + subtitle: ReactNode; colorClass: string; children?: React.ReactNode; }) { @@ -51,9 +52,12 @@ export function CardContent(props: { export function Link(props: { children: React.ReactNode }) { return ( - <a className="text-onboarding-link cursor-pointer flex gap-2 items-center"> + <a className="text-onboarding-link cursor-pointer flex gap-2 items-center group hover:opacity-75 transition-opacity"> {props.children} - <Icon icon={Icons.ARROW_RIGHT} /> + <Icon + icon={Icons.ARROW_RIGHT} + className="group-hover:translate-x-0.5 transition-transform text-xl group-active:translate-x-0" + /> </a> ); }