Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-30 23:11:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add some hover effects

Browse Source
This commit is contained in:
mrjvs 2024-01-18 20:37:27 +01:00
parent b3222b130f
commit 47d680da8a
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/onboarding/Onboarding.tsx
View File

@ -70,7 +70,7 @@ export function OnboardingPage() {
<Card onClick={() => navigate("/onboarding/extension")}> <Card onClick={() => navigate("/onboarding/extension")}>
<CardContent <CardContent
colorClass="!text-onboarding-best" colorClass="!text-onboarding-best"
title="Browser extension — best quality" title="Browser extension"
subtitle="Best quality" subtitle="Best quality"
description="Install browser extension and gain access to the best sources." description="Install browser extension and gain access to the best sources."
> >
@ -84,7 +84,7 @@ export function OnboardingPage() {
<a <a
onClick={skipModal.show} onClick={skipModal.show}
type="button" type="button"
className="text-onboarding-link cursor-pointer" className="text-onboarding-link hover:opacity-75 cursor-pointer"
> >
use the default setup use the default setup
</a> </a>

14
src/pages/onboarding/utils.tsx
View File

@ -1,4 +1,5 @@
import classNames from "classnames"; import classNames from "classnames";
import { ReactNode } from "react";
import { Icon, Icons } from "@/components/Icon"; import { Icon, Icons } from "@/components/Icon";
import { Heading2, Heading3, Paragraph } from "@/components/utils/Text"; import { Heading2, Heading3, Paragraph } from "@/components/utils/Text";
@ -18,9 +19,9 @@ export function Card(props: {
} }
export function CardContent(props: { export function CardContent(props: {
title: string; title: ReactNode;
description: string; description: ReactNode;
subtitle: string; subtitle: ReactNode;
colorClass: string; colorClass: string;
children?: React.ReactNode; children?: React.ReactNode;
}) { }) {
@ -51,9 +52,12 @@ export function CardContent(props: {
export function Link(props: { children: React.ReactNode }) { export function Link(props: { children: React.ReactNode }) {
return ( 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} {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> </a>
); );
} }