chore: update posthog findings (#569)11-08-chore_update_posthog_findings

3 files changed, 93 insertions, 96 deletions

diff --git a/apps/web/app/onboarding/bio-form.tsx b/apps/web/app/onboarding/bio-form.tsx
index 63f359ec..21b0e34b 100644
--- a/apps/web/app/onboarding/bio-form.tsx
+++ b/apps/web/app/onboarding/bio-form.tsx
@@ -32,7 +32,46 @@ export function BioForm() {
 	}
 	return (
 		<div className="relative w-full">
-			<div className="space-y-4">
+			<div className="space-y-4 relative">
+				<div className="absolute top-0 right-0">
+					<AnimatePresence mode="sync">
+						{bio ? (
+							<motion.div
+								key="save"
+								initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+								animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+								exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+								transition={{ duration: 0.2, ease: "easeOut" }}
+							>
+								<Button
+									variant="link"
+									size="lg"
+									className="text-white/60 font-medium! text-base md:text-lg w-fit px-0! cursor-pointer"
+									onClick={handleNext}
+								>
+									Save & Continue
+								</Button>
+							</motion.div>
+						) : (
+							<motion.div
+								key="skip"
+								initial={{ opacity: 0, filter: "blur(5px)" }}
+								animate={{ opacity: 1, filter: "blur(0px)" }}
+								exit={{ opacity: 0, filter: "blur(5px)" }}
+								transition={{ duration: 0.2, ease: "easeOut" }}
+							>
+								<Button
+									variant="link"
+									size="lg"
+									className="text-white/60 font-medium! text-base md:text-lg w-fit px-0! cursor-pointer"
+									onClick={handleNext}
+								>
+									Skip For Now
+								</Button>
+							</motion.div>
+						)}
+					</AnimatePresence>
+				</div>
 				<NavMenu>
 					<p className="text-base text-white/60">
 						Step {getStepNumberFor("bio")} of {totalSteps}
@@ -53,45 +92,6 @@ export function BioForm() {
 				value={bio}
 				onChange={(e) => setBio(e.target.value)}
 			/>
-			<AnimatePresence mode="sync">
-				{bio ? (
-					<motion.div
-						key="save"
-						initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
-						animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
-						exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
-						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
-					>
-						<Button
-							variant="link"
-							size="lg"
-							className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
-							onClick={handleNext}
-						>
-							Save & Continue
-						</Button>
-					</motion.div>
-				) : (
-					<motion.div
-						key="skip"
-						initial={{ opacity: 0, filter: "blur(5px)" }}
-						animate={{ opacity: 1, filter: "blur(0px)" }}
-						exit={{ opacity: 0, filter: "blur(5px)" }}
-						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
-					>
-						<Button
-							variant="link"
-							size="lg"
-							className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
-							onClick={handleNext}
-						>
-							Skip For Now
-						</Button>
-					</motion.div>
-				)}
-			</AnimatePresence>
 		</div>
 	)
 }
diff --git a/apps/web/app/onboarding/extension-form.tsx b/apps/web/app/onboarding/extension-form.tsx
index 721acb4f..75f84557 100644
--- a/apps/web/app/onboarding/extension-form.tsx
+++ b/apps/web/app/onboarding/extension-form.tsx
@@ -816,7 +816,7 @@ export function ExtensionForm() {
 	const { totalSteps, nextStep, getStepNumberFor } = useOnboarding()
 	return (
 		<div className="relative flex items-start flex-col gap-6 w-full">
-			<div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full gap-6">
+			<div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full gap-6 relative">
 				<div className="flex flex-col items-start text-left gap-4 flex-1">
 					<NavMenu>
 						<p className="text-base text-white/60">
@@ -827,21 +827,29 @@ export function ExtensionForm() {
 						Install the Chrome extension
 					</h1>
 					<p className="text-white/80 text-lg md:text-2xl">
-						{/* Install the Supermemory extension to start saving and organizing everything that matters. */}
 						Bring Supermemory everywhere
 					</p>
 				</div>
-				<div className="flex flex-col items-center text-center gap-4 w-full md:w-auto">
+				<div className="flex flex-col items-end text-center gap-3 w-full md:w-auto">
+					<Button
+						variant="link"
+						size="lg"
+						className="text-white/80 hover:text-white font-medium! text-lg w-fit px-0! cursor-pointer"
+						onClick={nextStep}
+					>
+						Continue
+						<ChevronRightIcon className="size-4" />
+					</Button>
 					<a
 						href="https://chromewebstore.google.com/detail/afpgkkipfdpeaflnpoaffkcankadgjfc?utm_source=item-share-cb"
 						rel="noopener noreferrer"
 						target="_blank"
-						className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full pl-4.5 pr-6 py-4 text-lg md:text-2xl font-sans tracking-tight font-medium flex items-center gap-4 w-full md:w-auto justify-center"
+						className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full pl-3.5 pr-4 py-2.5 text-base font-sans tracking-tight font-medium flex items-center gap-3 w-full md:w-auto justify-center"
 					>
 						<img
 							src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/2048px-Google_Chrome_icon_%28February_2022%29.svg.png"
 							alt="Chrome"
-							className="size-6 md:size-8"
+							className="size-5"
 						/>
 						Add to Chrome
 					</a>
@@ -891,17 +899,6 @@ export function ExtensionForm() {
 					</div>
 				</div>
 			</div>
-			<div className="flex w-full justify-end">
-				<Button
-					variant="link"
-					size="lg"
-					className="text-black/40 hover:text-black font-medium! text-lg underline w-fit px-0! cursor-pointer"
-					onClick={nextStep}
-				>
-					Continue
-					<ChevronRightIcon className="size-4" />
-				</Button>
-			</div>
 		</div>
 	)
 }
diff --git a/apps/web/app/onboarding/mcp-form.tsx b/apps/web/app/onboarding/mcp-form.tsx
index d3152e42..161642c4 100644
--- a/apps/web/app/onboarding/mcp-form.tsx
+++ b/apps/web/app/onboarding/mcp-form.tsx
@@ -58,7 +58,46 @@ export function MCPForm() {
 
 	return (
 		<div className="relative flex flex-col gap-6">
-			<div className="space-y-4">
+			<div className="space-y-4 relative">
+				<div className="absolute top-0 right-0">
+					<AnimatePresence mode="sync">
+						{!isInstalling ? (
+							<motion.div
+								key="save"
+								initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+								animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+								exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
+								transition={{ duration: 0.2, ease: "easeOut" }}
+							>
+								<Button
+									variant="link"
+									size="lg"
+									className="text-white/80 not-odd:font-medium! text-lg w-fit px-0! cursor-pointer"
+									onClick={nextStep}
+								>
+									Continue
+								</Button>
+							</motion.div>
+						) : (
+							<motion.div
+								key="skip"
+								initial={{ opacity: 0, filter: "blur(5px)" }}
+								animate={{ opacity: 1, filter: "blur(0px)" }}
+								exit={{ opacity: 0, filter: "blur(5px)" }}
+								transition={{ duration: 0.2, ease: "easeOut" }}
+							>
+								<Button
+									variant="link"
+									size="lg"
+									className="text-white/80 font-medium! text-lg w-fit px-0! cursor-pointer"
+									onClick={nextStep}
+								>
+									Skip For Now
+								</Button>
+							</motion.div>
+						)}
+					</AnimatePresence>
+				</div>
 				<NavMenu>
 					<p className="text-base text-white/60">
 						Step {getStepNumberFor("mcp")} of {totalSteps}
@@ -207,45 +246,6 @@ export function MCPForm() {
 					</div>
 				</div>
 			</div>
-			<AnimatePresence mode="sync">
-				{!isInstalling ? (
-					<motion.div
-						key="save"
-						initial={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
-						animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
-						exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
-						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end"
-					>
-						<Button
-							variant="link"
-							size="lg"
-							className="text-white not-odd:font-medium! text-lg underline w-fit px-0! cursor-pointer"
-							onClick={nextStep}
-						>
-							Continue
-						</Button>
-					</motion.div>
-				) : (
-					<motion.div
-						key="skip"
-						initial={{ opacity: 0, filter: "blur(5px)" }}
-						animate={{ opacity: 1, filter: "blur(0px)" }}
-						exit={{ opacity: 0, filter: "blur(5px)" }}
-						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end"
-					>
-						<Button
-							variant="link"
-							size="lg"
-							className="text-white font-medium! text-lg underline w-fit px-0! cursor-pointer"
-							onClick={nextStep}
-						>
-							Skip For Now
-						</Button>
-					</motion.div>
-				)}
-			</AnimatePresence>
 		</div>
 	)
 }