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> ); }