@pradip1995/segment-login-template 0.4.1 → 0.4.3

package/src/account-payment-methods.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from "react"
 import {
-  createPaymentDetail,
-  deletePaymentDetail,
-  makeDefaultPaymentDetail,
-} from "@pradip1995/commerce-core/data/payment-details"
+  addPaymentMethodAction,
+  deletePaymentMethodAction,
+  makeDefaultPaymentMethodAction,
+} from "./payment-methods-actions"
+import { acct } from "./account-theme"
 
 type PaymentDetail = {
   id: string
@@ -14,6 +15,19 @@ type PaymentDetail = {
   is_default?: boolean
 }
 
+const emptyForm = {
+  upi_id: "",
+  account_holder_name: "",
+  bank_name: "",
+  account_number: "",
+  ifsc: "",
+  branch_name: "",
+  card_holder_name: "",
+  card_number: "",
+  expiry_date: "",
+  cvv: "",
+}
+
 export default function AccountPaymentMethods({
   paymentDetails,
 }: {
@@ -23,92 +37,118 @@ export default function AccountPaymentMethods({
   const [type, setType] = useState<"upi" | "bank" | "card">("upi")
   const [pending, setPending] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [form, setForm] = useState({
-    upi_id: "",
-    account_holder: "",
-    account_number: "",
-    ifsc: "",
-    card_last4: "",
-  })
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+  const [form, setForm] = useState(emptyForm)
 
   async function handleAdd(e: React.FormEvent) {
     e.preventDefault()
     setPending(true)
     setError(null)
-    try {
-      let detail_json: Record<string, string> = {}
-      if (type === "upi") {
-        detail_json = { upi_id: form.upi_id.trim() }
-      } else if (type === "bank") {
-        detail_json = {
-          account_holder: form.account_holder.trim(),
-          account_number: form.account_number.trim(),
-          ifsc: form.ifsc.trim(),
-        }
-      } else {
-        detail_json = { card_last4: form.card_last4.trim() }
+    setFieldErrors({})
+
+    let detail_json: Record<string, string> = {}
+    if (type === "upi") {
+      detail_json = { upi_id: form.upi_id.trim() }
+    } else if (type === "bank") {
+      detail_json = {
+        account_holder_name: form.account_holder_name.trim(),
+        bank_name: form.bank_name.trim(),
+        account_number: form.account_number.trim(),
+        ifsc: form.ifsc.trim(),
+      }
+      if (form.branch_name.trim()) {
+        detail_json.branch_name = form.branch_name.trim()
       }
-      await createPaymentDetail(type, detail_json)
-      window.location.reload()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to add payment method")
-    } finally {
+    } else {
+      detail_json = {
+        card_holder_name: form.card_holder_name.trim(),
+        card_number: form.card_number.trim(),
+        expiry_date: form.expiry_date.trim(),
+        cvv: form.cvv.trim(),
+      }
+    }
+
+    const result = await addPaymentMethodAction(type, detail_json)
+    if (!result.success) {
+      setError(result.error)
+      setFieldErrors(result.field_errors || {})
       setPending(false)
+      return
     }
+    window.location.reload()
   }
 
   async function handleDefault(id: string) {
     setPending(true)
-    try {
-      await makeDefaultPaymentDetail(id)
-      window.location.reload()
-    } finally {
+    setError(null)
+    setFieldErrors({})
+    const result = await makeDefaultPaymentMethodAction(id)
+    if (!result.success) {
+      setError(result.error)
       setPending(false)
+      return
     }
+    window.location.reload()
   }
 
   async function handleDelete(id: string) {
     if (!confirm("Remove this payment method?")) return
     setPending(true)
-    try {
-      await deletePaymentDetail(id)
-      window.location.reload()
-    } finally {
+    setError(null)
+    setFieldErrors({})
+    const result = await deletePaymentMethodAction(id)
+    if (!result.success) {
+      setError(result.error)
       setPending(false)
+      return
     }
+    window.location.reload()
   }
 
   function labelFor(detail: PaymentDetail) {
     const json = detail.detail_json ?? {}
     if (detail.type === "upi") return `UPI · ${json.upi_id || "—"}`
-    if (detail.type === "bank")
-      return `Bank · ${json.account_holder || "—"} (${json.account_number?.slice(-4) || "****"})`
-    return `Card · **** ${json.card_last4 || "****"}`
+    if (detail.type === "bank") {
+      const holder = json.account_holder_name || json.account_holder || "—"
+      const last4 = json.account_number?.slice(-4) || "****"
+      const bank = json.bank_name ? ` · ${json.bank_name}` : ""
+      return `Bank · ${holder}${bank} (····${last4})`
+    }
+    const holder = json.card_holder_name || "—"
+    const last4 =
+      json.card_number?.replace(/\s+/g, "").slice(-4) ||
+      json.card_last4 ||
+      "****"
+    return `Card · ${holder} (····${last4})`
   }
 
   return (
     <div className="space-y-6">
       <div className="flex flex-wrap items-end justify-between gap-4">
         <div>
-          <h2 className="section-heading text-xl mb-1">Payment methods</h2>
-          <p className="text-sm text-muted">Refund destinations for returns and exchanges.</p>
+          <h2 className={acct.title}>Payment methods</h2>
+          <p className={`text-sm ${acct.muted}`}>Refund destinations for returns and exchanges.</p>
         </div>
-        <button type="button" onClick={() => setShowForm((v) => !v)} className="btn-primary text-sm">
+        <button type="button" onClick={() => setShowForm((v) => !v)} className={acct.btnPrimary}>
           {showForm ? "Cancel" : "Add method"}
         </button>
       </div>
 
       {showForm && (
-        <form onSubmit={handleAdd} className="card-surface rounded-2xl p-6 space-y-4">
+        <form onSubmit={handleAdd} className={`${acct.card} p-6 space-y-4`}>
           <div className="flex flex-wrap gap-2">
             {(["upi", "bank", "card"] as const).map((t) => (
               <button
                 key={t}
                 type="button"
-                onClick={() => setType(t)}
-                className={`px-3 py-1.5 text-xs font-medium rounded-full border ${
+                onClick={() => {
+                  setType(t)
+                  setError(null)
+                  setFieldErrors({})
+                }}
+                className={`px-3 py-1.5 text-xs font-medium rounded-none border ${
                   type === t
-                    ? "border-brand-accent text-brand-accent bg-brand-accent/5"
+                    ? "border-brand-accent text-brand-accent bg-brand-accent-muted"
                     : "border-cart-border text-muted"
                 }`}
               >
@@ -121,46 +161,87 @@ export default function AccountPaymentMethods({
             <Field
               label="UPI ID"
               value={form.upi_id}
+              error={fieldErrors.upi_id}
               onChange={(v) => setForm((f) => ({ ...f, upi_id: v }))}
             />
           )}
+
           {type === "bank" && (
             <>
               <Field
-                label="Account holder"
-                value={form.account_holder}
-                onChange={(v) => setForm((f) => ({ ...f, account_holder: v }))}
+                label="Account holder name"
+                value={form.account_holder_name}
+                error={fieldErrors.account_holder_name}
+                onChange={(v) => setForm((f) => ({ ...f, account_holder_name: v }))}
+              />
+              <Field
+                label="Bank name"
+                value={form.bank_name}
+                error={fieldErrors.bank_name}
+                onChange={(v) => setForm((f) => ({ ...f, bank_name: v }))}
               />
               <Field
                 label="Account number"
                 value={form.account_number}
+                error={fieldErrors.account_number}
                 onChange={(v) => setForm((f) => ({ ...f, account_number: v }))}
               />
               <Field
                 label="IFSC"
                 value={form.ifsc}
+                error={fieldErrors.ifsc}
                 onChange={(v) => setForm((f) => ({ ...f, ifsc: v }))}
               />
+              <Field
+                label="Branch name (optional)"
+                value={form.branch_name}
+                required={false}
+                error={fieldErrors.branch_name}
+                onChange={(v) => setForm((f) => ({ ...f, branch_name: v }))}
+              />
             </>
           )}
+
           {type === "card" && (
-            <Field
-              label="Last 4 digits"
-              value={form.card_last4}
-              onChange={(v) => setForm((f) => ({ ...f, card_last4: v }))}
-            />
+            <>
+              <Field
+                label="Card holder name"
+                value={form.card_holder_name}
+                error={fieldErrors.card_holder_name}
+                onChange={(v) => setForm((f) => ({ ...f, card_holder_name: v }))}
+              />
+              <Field
+                label="Card number"
+                value={form.card_number}
+                error={fieldErrors.card_number}
+                onChange={(v) => setForm((f) => ({ ...f, card_number: v }))}
+              />
+              <Field
+                label="Expiry (MM/YY)"
+                value={form.expiry_date}
+                error={fieldErrors.expiry_date}
+                placeholder="08/28"
+                onChange={(v) => setForm((f) => ({ ...f, expiry_date: v }))}
+              />
+              <Field
+                label="CVV"
+                value={form.cvv}
+                error={fieldErrors.cvv}
+                onChange={(v) => setForm((f) => ({ ...f, cvv: v }))}
+              />
+            </>
           )}
 
-          {error && <p className="text-sm text-brand-sale">{error}</p>}
-
-          <button type="submit" disabled={pending} className="btn-primary text-sm disabled:opacity-60">
+          <button type="submit" disabled={pending} className={acct.btnPrimary}>
             {pending ? "Saving…" : "Save payment method"}
           </button>
         </form>
       )}
 
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
       {paymentDetails.length === 0 ? (
-        <div className="card-surface rounded-2xl p-8 text-center text-sm text-muted">
+        <div className={`${acct.cardMuted} p-8 text-center text-sm ${acct.muted}`}>
           No refund payment methods saved.
         </div>
       ) : (
@@ -168,7 +249,7 @@ export default function AccountPaymentMethods({
           {paymentDetails.map((detail) => (
             <li
               key={detail.id}
-              className="card-surface rounded-2xl p-5 flex flex-wrap justify-between gap-4 items-center"
+              className={`${acct.card} p-5 flex flex-wrap justify-between gap-4 items-center`}
             >
               <div>
                 <p className="font-medium text-heading text-sm">{labelFor(detail)}</p>
@@ -191,7 +272,7 @@ export default function AccountPaymentMethods({
                   type="button"
                   onClick={() => handleDelete(detail.id)}
                   disabled={pending}
-                  className="text-brand-sale hover:underline disabled:opacity-60"
+                  className="text-red-600 hover:underline disabled:opacity-60"
                 >
                   Remove
                 </button>
@@ -208,22 +289,33 @@ function Field({
   label,
   value,
   onChange,
+  error,
+  required = true,
+  placeholder,
 }: {
   label: string
   value: string
   onChange: (value: string) => void
+  error?: string
+  required?: boolean
+  placeholder?: string
 }) {
   return (
     <label className="block">
-      <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+      <span className="text-xs font-semibold uppercase tracking-wider text-muted mb-1.5 block">
         {label}
       </span>
       <input
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        required
-        className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
+        required={required}
+        placeholder={placeholder}
+        aria-invalid={Boolean(error)}
+        className={`w-full border rounded-none px-3 py-2.5 text-sm bg-surface text-heading focus:outline-none focus:border-brand-accent ${
+          error ? "border-red-500" : "border-cart-border"
+        }`}
       />
+      {error && <span className="mt-1 block text-xs text-red-600">{error}</span>}
     </label>
   )
 }

package/src/account-profile.tsx

@@ -9,6 +9,7 @@ import {
 } from "./auth-server"
 import type { OtpVerificationComponent } from "./otp-component"
 import OtpVerificationModal from "./otp-verification-modal"
+import { acct } from "./account-theme"
 
 export default function AccountProfile({
   customer,
@@ -94,28 +95,28 @@ export default function AccountProfile({
   return (
     <div className="space-y-8">
       <div>
-        <h2 className="section-heading text-xl mb-1">Account details</h2>
-        <p className="text-sm text-muted">Update your name and contact information.</p>
+        <h2 className={acct.title}>Account details</h2>
+        <p className={`text-sm ${acct.muted}`}>Update your name and contact information.</p>
       </div>
 
-      <form action={formAction} className="card-surface rounded-2xl p-6 space-y-4">
+      <form action={formAction} className={`${acct.card} p-6 space-y-4`}>
         <Field label="Full name" name="full_name" defaultValue={fullName} />
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-muted mb-1.5">
             Email
           </label>
           <div className="flex flex-wrap items-center gap-3">
             <input
               value={customer.email}
               readOnly
-              className="flex-1 min-w-[200px] border border-cart-border rounded px-3 py-2.5 text-sm bg-surface-muted text-muted"
+              className="flex-1 min-w-[200px] border border-cart-border rounded-none px-3 py-2.5 text-sm bg-surface-muted text-muted"
             />
             {!emailVerified && (
               <button
                 type="button"
                 onClick={() => sendVerifyOtp("email_verification")}
                 disabled={otpPending}
-                className="btn-outline text-xs shrink-0"
+                className={`${acct.btnOutline} !py-2 !px-3`}
               >
                 Verify email
               </button>
@@ -133,7 +134,7 @@ export default function AccountProfile({
                 type="button"
                 onClick={() => sendVerifyOtp("phone_verification")}
                 disabled={otpPending}
-                className="btn-outline text-xs"
+                className={`${acct.btnOutline} !py-2 !px-3`}
               >
                 Verify phone
               </button>
@@ -145,12 +146,12 @@ export default function AccountProfile({
         </div>
 
         {(state.error || message) && (
-          <p className={`text-sm ${state.ok || message ? "text-green-600" : "text-brand-sale"}`}>
+          <p className={`text-sm ${state.ok || message ? "text-green-600" : "text-red-600"}`}>
             {message || state.error}
           </p>
         )}
 
-        <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
+        <button type="submit" disabled={pending} className={acct.btnPrimary}>
           {pending ? "Saving…" : "Save changes"}
         </button>
       </form>
@@ -184,14 +185,14 @@ function Field({
 }) {
   return (
     <label className="block">
-      <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+      <span className="text-xs font-semibold uppercase tracking-wider text-muted mb-1.5 block">
         {label}
       </span>
       <input
         name={name}
         type={type}
         defaultValue={defaultValue}
-        className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
+        className="w-full border border-cart-border rounded-none px-3 py-2.5 text-sm bg-surface text-heading focus:outline-none focus:border-brand-accent"
       />
     </label>
   )

package/src/account-theme.ts

@@ -0,0 +1,79 @@
+/** Logged-in account visual tokens — maps to segment-tokens CSS variables */
+export const acct = {
+  pageBg: "bg-page-bg",
+  card: "bg-surface border border-cart-border rounded-none shadow-card",
+  cardMuted: "bg-surface-muted border border-cart-border rounded-none",
+  title:
+    "font-heading text-2xl sm:text-3xl font-extrabold tracking-tight text-heading",
+  sectionTitle:
+    "text-base sm:text-lg font-bold uppercase tracking-wider text-heading",
+  subsection: "text-sm font-semibold uppercase tracking-wider text-muted",
+  accent: "text-brand-accent",
+  muted: "text-muted",
+  heading: "text-heading",
+  body: "text-sm text-body",
+  border: "border-cart-border",
+  btnPrimary:
+    "inline-flex items-center justify-center bg-brand-primary hover:bg-brand-accent text-inverse rounded-none px-6 py-3 font-bold text-xs uppercase tracking-widest transition-all disabled:opacity-50",
+  btnAccent:
+    "inline-flex items-center justify-center bg-brand-accent hover:bg-brand-accent-hover text-inverse rounded-none px-6 py-3 font-bold text-xs uppercase tracking-widest transition-all disabled:opacity-50",
+  btnOutline:
+    "inline-flex items-center justify-center border border-cart-border text-brand-accent rounded-none px-6 py-3 font-bold text-xs uppercase tracking-widest hover:bg-surface-muted transition-all disabled:opacity-50",
+  input:
+    "w-full border border-cart-border rounded-none px-3 py-2.5 text-sm bg-surface text-heading focus:outline-none focus:border-brand-accent",
+  label:
+    "block text-xs font-semibold uppercase tracking-wider text-muted mb-1.5",
+  badge:
+    "inline-flex items-center px-3 py-1 text-xs font-semibold border rounded-none",
+} as const
+
+/** Auth / login visual tokens — maps to segment-tokens CSS variables (theme-safe) */
+export const auth = {
+  viewport:
+    "w-full flex flex-col lg:flex-row overflow-hidden min-h-[calc(100svh-6.25rem)] lg:h-[calc(100svh-6.25rem)] lg:max-h-[calc(100svh-6.25rem)] bg-page-bg",
+  formColumn: "relative flex flex-1 flex-col min-h-0 w-full lg:w-1/2 bg-page-bg",
+  formWash:
+    "pointer-events-none absolute inset-y-0 -left-20 w-40 bg-gradient-to-r from-transparent to-page-bg hidden lg:block z-[1]",
+  formGlow:
+    "pointer-events-none absolute inset-0 bg-gradient-to-l from-brand-primary/[0.03] via-transparent to-transparent hidden lg:block",
+  formInner:
+    "relative z-[2] flex flex-1 flex-col justify-center min-h-0 overflow-y-auto overscroll-contain px-5 sm:px-10 md:px-12 lg:px-14 xl:px-20 py-5 sm:py-6 lg:py-8",
+  formCard:
+    "relative w-full max-w-[440px] shrink-0 border border-cart-border/60 bg-surface shadow-[0_10px_40px_-16px_rgba(0,0,0,0.12)] p-7 sm:p-8",
+  desktopHeader: "hidden lg:block mb-6 max-w-[440px] shrink-0",
+  title:
+    "font-heading text-2xl xl:text-[32px] font-bold text-heading uppercase tracking-[0.08em] leading-tight",
+  subtitle: "mt-2 text-[11px] font-medium text-muted uppercase tracking-[0.28em]",
+  mobileTitle:
+    "font-heading text-base font-bold text-heading uppercase tracking-[0.16em] lg:hidden",
+  fieldLabel:
+    "text-[10px] font-semibold text-heading/80 uppercase tracking-[0.22em]",
+  input:
+    "w-full px-0 py-3 text-sm text-heading bg-transparent border-0 border-b-2 border-cart-border rounded-none placeholder:text-muted/50 focus:outline-none focus:border-brand-primary focus:ring-0 transition-colors duration-200",
+  btnPrimary:
+    "group relative w-full py-3.5 bg-brand-primary text-inverse text-[11px] font-bold uppercase tracking-[0.28em] shadow-[0_8px_28px_-6px_rgba(0,0,0,0.25)] hover:bg-brand-accent hover:shadow-[0_12px_32px_-6px_rgba(0,0,0,0.3)] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden active:scale-[0.98]",
+  btnShine:
+    "before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/15 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700",
+  btnOutline:
+    "w-full flex items-center justify-center gap-2.5 py-3 border border-brand-primary/15 bg-surface/80 hover:bg-page-bg hover:border-brand-primary/35 shadow-sm transition-all duration-200 disabled:opacity-50",
+  guestCta:
+    "w-full py-3 border border-brand-primary/20 bg-gradient-to-r from-surface to-page-bg text-heading text-[10px] font-bold uppercase tracking-[0.18em] hover:border-brand-accent hover:shadow-[0_4px_16px_-4px_rgba(0,0,0,0.15)] transition-all duration-300 flex items-center justify-center gap-2 disabled:opacity-50 active:scale-[0.98]",
+  tabActive:
+    "pb-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] border-b-2 -mb-px border-brand-accent text-brand-accent transition-colors duration-200",
+  tabIdle:
+    "pb-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] border-b-2 -mb-px border-transparent text-muted hover:text-heading transition-colors duration-200",
+  modeActive:
+    "flex-1 py-2 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] rounded-md bg-surface text-heading shadow-sm transition-colors duration-200",
+  modeIdle:
+    "flex-1 py-2 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] rounded-md text-muted hover:text-heading transition-colors duration-200",
+  chipActive:
+    "px-3 py-1.5 text-xs font-medium border border-brand-accent text-brand-accent bg-brand-accent/5 transition-colors duration-200",
+  chipIdle:
+    "px-3 py-1.5 text-xs font-medium border border-cart-border text-muted hover:text-heading transition-colors duration-200",
+} as const
+
+export type BrandPanelConfig = {
+  image?: string | null
+  eyebrow?: string | null
+  headline?: string | null
+}

package/src/forgot-password-form.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from "react"
 import { checkEmailRegistered, requestPasswordReset } from "./auth-server"
+import { auth } from "./account-theme"
+import { AuthField, Ornament } from "./login-form"
 
 export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
   const [email, setEmail] = useState("")
@@ -42,13 +44,17 @@ export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
 
   if (success) {
     return (
-      <div className="space-y-4 text-center py-4">
-        <div className="w-14 h-14 mx-auto rounded-full bg-green-100 flex items-center justify-center text-2xl">
-          ✉
+      <div className="space-y-5 text-center py-4">
+        <Ornament />
+        <div className="w-14 h-14 mx-auto rounded-full bg-brand-accent/10 flex items-center justify-center text-brand-accent">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
+            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+            <polyline points="22,6 12,13 2,6" />
+          </svg>
         </div>
-        <h2 className="section-heading text-lg">Check your email</h2>
+        <h2 className={`${auth.title} text-xl`}>Check your email</h2>
         <p className="text-sm text-muted">{message}</p>
-        <button type="button" onClick={onBack} className="btn-outline w-full">
+        <button type="button" onClick={onBack} className={auth.btnOutline}>
           Back to sign in
         </button>
       </div>
@@ -56,31 +62,43 @@ export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <p className="text-sm text-muted">
-        Enter your email and we&apos;ll send a link to reset your password.
-      </p>
-      <label className="block">
-        <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-          Email
-        </span>
-        <input
-          name="email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-          className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
-        />
-      </label>
-      {error && <p className="text-sm text-brand-sale">{error}</p>}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Sending…" : "Send reset link"}
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div className="text-center lg:text-left">
+        <Ornament />
+        <h2 className={`${auth.title} text-xl lg:text-2xl`}>Reset password</h2>
+        <p className="mt-2 text-sm text-muted">
+          Enter your email and we&apos;ll send a link to reset your password.
+        </p>
+      </div>
+
+      <AuthField
+        label="Email"
+        name="email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        autoComplete="email"
+        placeholder="you@example.com"
+      />
+
+      {error && (
+        <p className="text-sm text-brand-sale" role="alert">
+          {error}
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={pending}
+        className={`${auth.btnPrimary} ${auth.btnShine}`}
+      >
+        <span className="relative z-[1]">{pending ? "Sending…" : "Send reset link"}</span>
       </button>
+
       <button
         type="button"
         onClick={onBack}
-        className="text-sm text-muted hover:text-brand-accent w-full text-center"
+        className="text-sm text-muted hover:text-brand-accent w-full text-center transition-colors"
       >
         Back to sign in
       </button>

package/src/google-auth-section.tsx

@@ -6,9 +6,7 @@ import {
   GOOGLE_LOGIN_COUNTRY_CODE_KEY,
 } from "@pradip1995/commerce-auth/util/google-auth-client"
 import { initiateGoogleAuth } from "./auth-server"
-
-const BUTTON_CLASS =
-  "btn-outline w-full flex items-center justify-center gap-2.5 py-3 px-4"
+import { auth } from "./account-theme"
 
 export default function GoogleAuthSection({ countryCode }: { countryCode: string }) {
   const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim()
@@ -46,9 +44,9 @@ export default function GoogleAuthSection({ countryCode }: { countryCode: string
   }
 
   return (
-    <div className="mb-6">
+    <div>
       {error && (
-        <p className="mb-3 text-sm text-red-600" role="alert">
+        <p className="mb-3 text-sm text-brand-sale" role="alert">
           {error}
         </p>
       )}
@@ -56,10 +54,10 @@ export default function GoogleAuthSection({ countryCode }: { countryCode: string
         type="button"
         onClick={handleClick}
         disabled={loading}
-        className={BUTTON_CLASS}
-        style={{ borderRadius: "30px" }}
+        className={auth.btnOutline}
+        aria-label="Continue with Google"
       >
-        <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
           <path
             fill="#4285F4"
             d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
@@ -77,8 +75,8 @@ export default function GoogleAuthSection({ countryCode }: { countryCode: string
             d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
           />
         </svg>
-        <span className="text-sm text-gray-700 font-bold">
-          {loading ? "Connecting..." : "Continue with Google"}
+        <span className="text-xs text-heading font-medium tracking-wide">
+          {loading ? "Redirecting…" : "Continue with Google"}
         </span>
       </button>
     </div>