Onboarding
-- Create your merchant profile to start accepting modern payments and managing assets on the PLUTO infrastructure. -
-+ Onboarding +
++ Create your merchant profile to start accepting modern payments and + managing assets on the PLUTO infrastructure. +
++
{t("onboarding.subtitle") || "Complete all required steps to finish setup"}
{/* Overall progress bar */} -+
{sortedSteps.filter((s) => s.completed).length} of{" "}
{sortedSteps.length} steps completed
{isOnboardingComplete && (
-
+
)}
-
+
{step.description}
+
{t("onboarding.successMessage") || "You have successfully completed all required onboarding steps."}
diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx index cc37729..2b18831 100644 --- a/frontend/src/components/RegistrationForm.tsx +++ b/frontend/src/components/RegistrationForm.tsx @@ -14,6 +14,12 @@ import { Spinner } from "./ui/Spinner"; const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const BUSINESS_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9\s&'.,-]{1,79}$/; +const FIELD_BASE_CLASSES = + "rounded-2xl border bg-[#F9F9F9] p-4 text-sm font-bold text-[#0A0A0A] placeholder-[#A0A0A0] transition-all duration-200 focus:bg-white focus:outline-none motion-safe:hover:-translate-y-0.5"; +const FIELD_THEME_CLASSES = + "border-[#E8E8E8] hover:border-pluto-300 hover:bg-white hover:shadow-[0_14px_30px_rgba(13,27,46,0.06)] focus:border-pluto-500 focus:shadow-[0_0_0_1px_rgba(74,111,165,0.18),0_18px_36px_rgba(13,27,46,0.08)]"; +const FIELD_ERROR_CLASSES = + "border-red-500/50 hover:border-red-400 focus:border-red-500 focus:shadow-[0_0_0_1px_rgba(239,68,68,0.16),0_16px_32px_rgba(239,68,68,0.08)]"; // Memoized password strength indicator to prevent unnecessary re-renders const PasswordStrengthIndicator = React.memo( @@ -225,7 +231,7 @@ const RegistrationForm = React.memo(function RegistrationForm() { Enter Dashboard @@ -271,10 +277,10 @@ const RegistrationForm = React.memo(function RegistrationForm() { aria-describedby={ businessNameError ? "business-name-error" : undefined } - className={`rounded-2xl border bg-[#F9F9F9] p-4 text-sm font-bold text-[#0A0A0A] placeholder-[#A0A0A0] transition-all focus:bg-white focus:outline-none ${ + className={`${FIELD_BASE_CLASSES} ${ businessNameError - ? "border-red-500/50 focus:border-red-500" - : "border-[#E8E8E8] focus:border-[#0A0A0A]" + ? FIELD_ERROR_CLASSES + : FIELD_THEME_CLASSES }`} placeholder="PLUTO Merchant" /> @@ -308,10 +314,10 @@ const RegistrationForm = React.memo(function RegistrationForm() { }} aria-invalid={Boolean(emailError)} aria-describedby={emailError ? "primary-email-error" : undefined} - className={`rounded-2xl border bg-[#F9F9F9] p-4 text-sm font-bold text-[#0A0A0A] placeholder-[#A0A0A0] transition-all focus:bg-white focus:outline-none ${ + className={`${FIELD_BASE_CLASSES} ${ emailError - ? "border-red-500/50 focus:border-red-500" - : "border-[#E8E8E8] focus:border-[#0A0A0A]" + ? FIELD_ERROR_CLASSES + : FIELD_THEME_CLASSES }`} placeholder="owner@business.com" /> @@ -344,10 +350,10 @@ const RegistrationForm = React.memo(function RegistrationForm() { }} aria-invalid={Boolean(passwordError)} aria-describedby={passwordError ? "password-error" : undefined} - className={`rounded-2xl border bg-[#F9F9F9] p-4 text-sm font-bold text-[#0A0A0A] placeholder-[#A0A0A0] transition-all focus:bg-white focus:outline-none ${ + className={`${FIELD_BASE_CLASSES} ${ passwordError - ? "border-red-500/50 focus:border-red-500" - : "border-[#E8E8E8] focus:border-[#0A0A0A]" + ? FIELD_ERROR_CLASSES + : FIELD_THEME_CLASSES }`} placeholder="••••••••" /> @@ -387,10 +393,10 @@ const RegistrationForm = React.memo(function RegistrationForm() { aria-describedby={ notificationEmailError ? "notification-email-error" : undefined } - className={`rounded-2xl border bg-[#F9F9F9] p-4 text-sm font-bold text-[#0A0A0A] placeholder-[#A0A0A0] transition-all focus:bg-white focus:outline-none ${ + className={`${FIELD_BASE_CLASSES} ${ notificationEmailError - ? "border-red-500/50 focus:border-red-500" - : "border-[#E8E8E8] focus:border-[#0A0A0A]" + ? FIELD_ERROR_CLASSES + : FIELD_THEME_CLASSES }`} placeholder="alerts@business.com" /> @@ -409,15 +415,19 @@ const RegistrationForm = React.memo(function RegistrationForm() { diff --git a/frontend/tests/e2e/onboarding-hover.spec.ts b/frontend/tests/e2e/onboarding-hover.spec.ts new file mode 100644 index 0000000..5c48480 --- /dev/null +++ b/frontend/tests/e2e/onboarding-hover.spec.ts @@ -0,0 +1,44 @@ +import { expect, test } from "@playwright/test"; + +test.describe("Onboarding Flow Hover States", () => { + test.beforeEach(async ({ page }) => { + await page.goto("/register"); + await page.waitForLoadState("networkidle"); + }); + + test("uses Pluto-themed hover states for onboarding fields and actions", async ({ + page, + }) => { + const businessNameInput = page.locator("#businessName"); + await businessNameInput.hover(); + + await expect(businessNameInput).toHaveCSS( + "border-top-color", + "rgb(138, 175, 212)" + ); + + const boxShadow = await businessNameInput.evaluate((element) => + window.getComputedStyle(element).boxShadow + ); + expect(boxShadow).not.toBe("none"); + + await page.locator("#businessName").fill("Pluto Labs"); + await page.locator("#email").fill("owner@pluto.test"); + await page.locator("#notificationEmail").fill("alerts@pluto.test"); + await page.locator("#password").fill("VeryStrongPassword!123"); + + const submitButton = page.getByRole("button", { + name: "Create Professional Profile", + }); + await expect(submitButton).toBeEnabled(); + await submitButton.hover(); + await expect(submitButton).toHaveCSS( + "background-color", + "rgb(45, 74, 122)" + ); + + const loginLink = page.getByRole("link", { name: "Log in here" }); + await loginLink.hover(); + await expect(loginLink).toHaveCSS("color", "rgb(61, 100, 148)"); + }); +});