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