From 38b83d332385a45cf1096024e0db684d1c72cccf Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Thu, 30 Jul 2026 00:40:03 +0200
Subject: [PATCH] Adjust primary button styles in onboarding and compatibility
 screens for consistency with signup flow and improved prominence

---
 .../answer-compatibility-question-button.tsx   | 15 ++++++++++++++-
 web/pages/onboarding/index.tsx                 | 18 ++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/components/answers/answer-compatibility-question-button.tsx b/web/components/answers/answer-compatibility-question-button.tsx
index 38e89f7d..4ddfb8e5 100644
--- a/web/components/answers/answer-compatibility-question-button.tsx
+++ b/web/components/answers/answer-compatibility-question-button.tsx
@@ -1,3 +1,4 @@
+import {ArrowRightIcon} from '@heroicons/react/24/outline'
 import clsx from 'clsx'
 import {QuestionWithStats} from 'common/api/types'
 import {debug} from 'common/logger'
@@ -151,8 +152,20 @@ function CompatibilityOnboardingScreen({onNext, onSkip}: {onNext: () => void; on
       </div>
 
       <Col className="gap-4">
-        <Button onClick={onNext} size="lg" className="w-full max-w-xs mx-auto">
+        {/* Same fix as the /onboarding screens: this was falling through to `Button`'s default
+            `gray-outline`, so the screen's only real action was a hairline pill quieter than the
+            "Do this later" link under it. `cta` matches the forward action in the signup flow. */}
+        <Button
+          onClick={onNext}
+          size="xl"
+          color="cta"
+          className="group w-full max-w-xs mx-auto gap-2 py-3.5 text-lg"
+        >
           {t('compatibility.onboarding.start', 'Start answering')}
+          <ArrowRightIcon
+            className="w-5 h-5 transition-transform group-hover:translate-x-1"
+            strokeWidth={2.5}
+          />
         </Button>
         <button onClick={onSkip} className="text-sm text-ink-500 hover:text-ink-700 underline">
           {t('compatibility.onboarding.later', 'Do this later')}
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 6a43b9aa..a494a881 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -1,4 +1,4 @@
-import {CheckIcon} from '@heroicons/react/24/outline'
+import {ArrowRightIcon, CheckIcon} from '@heroicons/react/24/outline'
 import clsx from 'clsx'
 import Router from 'next/router'
 import {useEffect, useState} from 'react'
@@ -120,8 +120,22 @@ function OnboardingScreen({
       )}
 
       <Col className="gap-4 mt-9">
-        <Button onClick={onNext} size="lg" className="w-full">
+        {/* This is the one action the screen wants you to take, but it was rendering with `Button`'s
+            default `gray-outline` — a hairline pill with `text-ink-700` copy, quieter than the
+            underlined "Skip onboarding" sitting right below it. `cta` is the conversion style the
+            sign-up button already uses, so the flow's forward action looks the same throughout.
+            The arrow nudges right on hover to signal "next" rather than "submit". */}
+        <Button
+          onClick={onNext}
+          size="xl"
+          color="cta"
+          className="group w-full gap-2 py-3.5 text-lg"
+        >
           {continueText ?? t('common.continue', 'Continue')}
+          <ArrowRightIcon
+            className="w-5 h-5 transition-transform group-hover:translate-x-1"
+            strokeWidth={2.5}
+          />
         </Button>
         <div className="flex items-center justify-between gap-4">
           {/* Back moved down here beside Skip. It used to sit alone above the title, where it read as