dubinc · steven-tey · Jun 25, 2025 · Jun 4, 2025 · Jun 4, 2025 · Jun 4, 2025
diff --git a/apps/web/app/(ee)/api/cron/payouts/confirm/confirm-payouts.ts b/apps/web/app/(ee)/api/cron/payouts/confirm/confirm-payouts.ts
@@ -140,7 +140,7 @@ export async function confirmPayouts({
 
       const exchangeRate = fxQuote.rates[currency].exchange_rate;
 
-      // if Stripe's FX rate is not available, use the cached rate from Redis
+      // if Stripe's FX rate is not available, throw an error
       if (!exchangeRate || exchangeRate <= 0) {
         throw new Error(
           `Failed to get exchange rate from Stripe for ${currency}.`,

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/layout.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/layout.tsx
@@ -1,5 +1,7 @@
 import Toolbar from "@/ui/layout/toolbar/toolbar";
 import { Grid, Wordmark } from "@dub/ui";
+import { cn } from "@dub/utils";
+import Link from "next/link";
 
 export default function PartnerOnboardingLayout({
   children,
@@ -8,24 +10,61 @@ export default function PartnerOnboardingLayout({
 }) {
   return (
     <>
-      <div className="flex min-h-screen flex-col">
-        <div className="fixed left-1/2 top-0 h-full w-[1280px] -translate-x-1/2 [mask-image:radial-gradient(50%_70%_at_50%_0%,black_70%,transparent)]">
+      <div className="absolute inset-0 isolate overflow-hidden bg-white">
+        {/* Grid */}
+        <div
+          className={cn(
+            "absolute inset-y-0 left-1/2 w-[1200px] -translate-x-1/2",
+            "[mask-composite:intersect] [mask-image:linear-gradient(black,transparent_320px),linear-gradient(90deg,transparent,black_5%,black_95%,transparent)]",
+          )}
+        >
           <Grid
-            cellSize={80}
-            patternOffset={[-79.25, -59]}
+            cellSize={60}
+            patternOffset={[0.75, 0]}
             className="text-neutral-200"
           />
         </div>
-        <div className="relative z-10 mt-10 flex w-full flex-col items-center justify-center px-3 text-center md:px-8">
-          <div className="animate-slide-up-fade relative flex w-auto flex-col items-center [--offset:10px] [animation-duration:1.3s] [animation-fill-mode:both]">
-            <Wordmark className="relative h-10" />
-            <span className="text-sm font-medium text-neutral-700">
-              Partner
-            </span>
+
+        {/* Gradient */}
+        {[...Array(2)].map((_, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "absolute left-1/2 top-6 size-[80px] -translate-x-1/2 -translate-y-1/2 scale-x-[1.6]",
+              idx === 0 ? "mix-blend-overlay" : "opacity-10",
+            )}
+          >
+            {[...Array(idx === 0 ? 2 : 1)].map((_, idx) => (
+              <div
+                key={idx}
+                className={cn(
+                  "absolute -inset-16 mix-blend-overlay blur-[50px] saturate-[2]",
+                  "bg-[conic-gradient(from_90deg,#F00_5deg,#EAB308_63deg,#5CFF80_115deg,#1E00FF_170deg,#855AFC_220deg,#3A8BFD_286deg,#F00_360deg)]",
+                )}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div className="relative flex min-h-screen w-full flex-col items-center justify-between">
+        <div className="grow basis-0">
+          <div className="pt-4">
+            <Link href="https://dub.co/home" target="_blank" className="block">
+              <Wordmark className="h-8" />
+              <div className="text-center text-sm font-semibold text-black/80">
+                Partners
+              </div>
+            </Link>
           </div>
-          {children}
         </div>
+
+        <div className="w-full py-16">{children}</div>
+
+        {/* Empty div to center main content */}
+        <div className="grow basis-0" />
       </div>
+
       <Toolbar show={["help"]} />
     </>
   );

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
@@ -99,14 +99,14 @@ export function OnboardingForm({
     <form
       ref={formRef}
       onSubmit={handleSubmit(async (data) => await executeAsync(data))}
-      className="flex w-full flex-col gap-4 text-left"
+      className="flex w-full flex-col gap-6 text-left"
     >
       <label>
         <span className="text-sm font-medium text-neutral-800">Full Name</span>
         <input
           type="text"
           className={cn(
-            "mt-2 block w-full rounded-md read-only:bg-neutral-100 read-only:text-neutral-500 focus:outline-none sm:text-sm",
+            "mt-1.5 block w-full rounded-md read-only:bg-neutral-100 read-only:text-neutral-500 focus:outline-none sm:text-sm",
             errors.name
               ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
@@ -131,7 +131,7 @@ export function OnboardingForm({
               <FileUpload
                 accept="images"
                 className={cn(
-                  "mt-2 size-20 rounded-full border border-neutral-300",
+                  "mt-1.5 size-20 rounded-full border border-neutral-300",
                   errors.image && "border-0 ring-2 ring-red-500",
                 )}
                 iconClassName="size-5"
@@ -192,7 +192,7 @@ export function OnboardingForm({
         </span>
         <ReactTextareaAutosize
           className={cn(
-            "mt-2 block w-full rounded-md focus:outline-none sm:text-sm",
+            "mt-1.5 block w-full rounded-md focus:outline-none sm:text-sm",
             errors.description
               ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
@@ -209,7 +209,7 @@ export function OnboardingForm({
           <span className="text-sm font-medium text-neutral-800">
             Profile Type
           </span>
-          <div className="mt-2">
+          <div className="mt-1.5">
             <ToggleGroup
               options={[
                 {
@@ -262,7 +262,7 @@ export function OnboardingForm({
                 <input
                   type="text"
                   className={cn(
-                    "mt-2 block w-full rounded-md read-only:bg-neutral-100 read-only:text-neutral-500 focus:outline-none sm:text-sm",
+                    "mt-1.5 block w-full rounded-md read-only:bg-neutral-100 read-only:text-neutral-500 focus:outline-none sm:text-sm",
                     errors.companyName
                       ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
                       : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
@@ -284,7 +284,7 @@ export function OnboardingForm({
           <Button
             type="submit"
             text="Continue"
-            className="mt-2"
+            className="mt-1.5"
             loading={isPending || isSubmitting || isSubmitSuccessful}
           />
         </motion.div>

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/online-presence/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/online-presence/page-client.tsx
@@ -21,7 +21,7 @@ export function OnlinePresencePageClient({
       />
       <Link
         href="/onboarding/verify"
-        className="text-sm text-neutral-500 transition-colors hover:text-neutral-800"
+        className="text-sm font-medium text-neutral-800 transition-colors hover:text-neutral-950"
       >
         I'll complete this later
       </Link>

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/online-presence/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/online-presence/page.tsx
@@ -6,23 +6,20 @@ import { OnlinePresencePageClient } from "./page-client";
 
 export default function OnlinePresencePage() {
   return (
-    <div className="relative mx-auto my-10 w-full max-w-[416px] md:mt-14">
-      <div className="absolute inset-0 bg-white/60 [mask-composite:intersect] [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent),linear-gradient(transparent,black_10%,black_90%,transparent)]" />
-      <div className="relative">
-        <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
-          Your online presence
-        </h1>
+    <div className="relative mx-auto w-full max-w-[416px] text-center md:mt-4">
+      <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+        Your online presence
+      </h1>
 
-        <p className="animate-slide-up-fade mt-2 text-sm text-neutral-600 [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
-          These improve your reputation score and rank you higher. Verification
-          is optional and can be done later.
-        </p>
+      <p className="animate-slide-up-fade text-content-subtle mt-1 text-sm [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
+        These improve your reputation score and rank you higher. Verification is
+        optional and can be done later.
+      </p>
 
-        <div className="animate-slide-up-fade mt-8 grid gap-4 [animation-delay:750ms] [animation-duration:1s] [animation-fill-mode:both]">
-          <Suspense fallback={<OnlinePresenceForm partner={null} />}>
-            <OnlinePresenceFormRSC />
-          </Suspense>
-        </div>
+      <div className="animate-slide-up-fade mt-8 grid gap-4 [animation-delay:750ms] [animation-duration:1s] [animation-fill-mode:both]">
+        <Suspense fallback={<OnlinePresenceForm partner={null} />}>
+          <OnlinePresenceFormRSC />
+        </Suspense>
       </div>
     </div>
   );

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/page.tsx
@@ -5,17 +5,14 @@ import { OnboardingForm } from "./onboarding-form";
 
 export default function PartnerOnboarding() {
   return (
-    <div className="mx-auto my-10 flex w-full max-w-[480px] flex-col items-center md:mt-14">
+    <div className="mx-auto flex w-full max-w-[480px] flex-col items-center md:mt-4">
       <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
-        Complete your partner profile
+        Create your partner profile
       </h1>
       <div className="animate-slide-up-fade w-full rounded-xl p-8 [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
-        <div className="absolute inset-0 bg-white/50 [mask-composite:intersect] [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent),linear-gradient(transparent,black_10%,black_90%,transparent)]" />
-        <div className="relative">
-          <Suspense fallback={<OnboardingForm />}>
-            <OnboardingFormRSC />
-          </Suspense>
-        </div>
+        <Suspense fallback={<OnboardingForm />}>
+          <OnboardingFormRSC />
+        </Suspense>
       </div>
     </div>
   );

diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/verify/page.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/verify/page.tsx
@@ -11,10 +11,9 @@ import { Suspense } from "react";
 
 export default function OnboardingVerificationPage() {
   return (
-    <div className="relative mx-auto my-10 flex w-full max-w-[416px] flex-col items-center md:mt-14">
-      <div className="absolute inset-0 bg-white/60 [mask-composite:intersect] [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent),linear-gradient(transparent,black_10%,black_90%,transparent)]" />
-      <h1 className="animate-slide-up-fade text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
-        Connect your bank account
+    <div className="relative mx-auto my-10 flex w-full max-w-[416px] flex-col items-center text-center md:mt-6">
+      <h1 className="animate-slide-up-fade text-content-emphasis text-lg font-medium [--offset:8px] [animation-delay:250ms] [animation-duration:1s] [animation-fill-mode:both]">
+        Payout information
       </h1>
       <div className="animate-slide-up-fade relative mt-8 w-full [--offset:10px] [animation-delay:500ms] [animation-duration:1s] [animation-fill-mode:both]">
         <Suspense fallback={<PayoutSkeleton />}>
@@ -73,7 +72,7 @@ function PayoutProvider({ provider }: { provider: "stripe" | "paypal" }) {
 
         <Link
           href="/programs"
-          className="text-sm text-neutral-500 transition-colors hover:text-neutral-800"
+          className="text-sm font-medium text-neutral-800 transition-colors hover:text-neutral-950"
         >
           I'll complete this later
         </Link>

diff --git a/apps/web/app/app.dub.co/(onboarding)/layout.tsx b/apps/web/app/app.dub.co/(onboarding)/layout.tsx
@@ -1,11 +1,9 @@
 import Toolbar from "@/ui/layout/toolbar/toolbar";
-import { NewBackground } from "@/ui/shared/new-background";
 import { PropsWithChildren } from "react";
 
 export default function Layout({ children }: PropsWithChildren) {
   return (
     <>
-      <NewBackground />
       {children}
       <Toolbar show={["help"]} />
     </>

diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/custom/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/custom/page.tsx
@@ -1,11 +1,9 @@
-import { Globe } from "@dub/ui/icons";
 import { StepPage } from "../../step-page";
 import { Form } from "./form";
 
 export default function Custom() {
   return (
     <StepPage
-      icon={Globe}
       title="Connect a custom domain"
       description={
         <a