Skip to content

Commit 7b61b23

Browse files
Hazy019Hazy019
committed
feat: create testimonial approval page with token validation and editing capabilities
1 parent b16924f commit 7b61b23

1 file changed

Lines changed: 37 additions & 44 deletions

File tree

‎src/app/approve-testimonial/page.tsx‎

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -161,22 +161,14 @@ function ApproveTestimonialContent() {
161161

162162
// ─── Shared page shell ───────────────────────────────────────────────────
163163
const Shell = ({ children }: { children: React.ReactNode }) => (
164-
<div className="w-full min-h-screen min-h-[100dvh] bg-gradient-to-b from-[#fbfbfa] via-[#f5f5f3] to-[#ebebe8] flex flex-col items-center justify-start sm:justify-center font-sans px-4 py-8 sm:py-12 pb-[calc(env(safe-area-inset-bottom,0px)+3rem)] overflow-y-auto custom-scrollbar">
165-
<div className="w-full max-w-lg flex flex-col items-center my-auto">
166-
{children}
167-
<div className="mt-6 flex items-center justify-center gap-1.5 text-xs font-mono text-neutral-400">
168-
<span>Powered by</span>
169-
<span className="font-bold text-neutral-600">ClientEcho</span>
170-
<span>&bull;</span>
171-
<span>Secure Social Proof</span>
172-
</div>
173-
</div>
164+
<div className="w-full h-screen h-[100dvh] max-h-[100dvh] bg-gradient-to-br from-[#f8f8f6] via-[#f4f4f2] to-[#ececea] flex flex-col items-center justify-center font-sans p-4 sm:p-6 pb-[calc(env(safe-area-inset-bottom,0px)+1.25rem)] overflow-hidden">
165+
{children}
174166
</div>
175167
);
176168

177169
const Card = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => (
178170
<div
179-
className={`w-full bg-white rounded-[24px] sm:rounded-[28px] shadow-[0_10px_35px_-5px_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.04)] border border-black/[0.06] overflow-hidden animate-fade-in-up transition-all ${className}`}
171+
className={`w-full max-w-lg bg-white rounded-[24px] sm:rounded-[28px] shadow-[0_12px_45px_rgba(0,0,0,0.10)] border border-black/[0.06] flex flex-col max-h-[calc(100dvh-2.5rem)] sm:max-h-[85vh] overflow-hidden animate-fade-in-up transition-all ${className}`}
180172
>
181173
{children}
182174
</div>
@@ -328,35 +320,36 @@ function ApproveTestimonialContent() {
328320
return (
329321
<Shell>
330322
<Card>
331-
{/* ── Card Header ── */}
332-
<div className="px-6 sm:px-8 pt-7 pb-5 text-center border-b border-black/[0.05] bg-gradient-to-b from-neutral-50/50 to-white space-y-3">
323+
{/* ── Fixed Card Header ── */}
324+
<div className="flex-shrink-0 px-6 pt-6 pb-4 text-center border-b border-black/[0.06] space-y-2.5 bg-white z-10">
333325
{/* Logo — centered */}
334-
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center mx-auto shadow-[0_2px_12px_rgba(0,0,0,0.08)] border border-black/[0.07] mb-2.5 transition-transform hover:scale-105">
326+
<div className="w-11 h-11 bg-white rounded-2xl flex items-center justify-center mx-auto shadow-[0_2px_12px_rgba(0,0,0,0.08)] border border-black/[0.07] mb-2 transition-transform hover:scale-105">
335327
<Image
336328
src="/ClientEcho_logo.png"
337329
alt="ClientEcho"
338-
width={32}
339-
height={32}
330+
width={28}
331+
height={28}
340332
className="w-7 h-7 object-contain"
341333
/>
342334
</div>
343335

344-
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-neutral-100/90 border border-neutral-200/80 text-[10px] font-mono uppercase tracking-wider text-neutral-600 font-bold">
336+
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full bg-neutral-100 border border-neutral-200/80 text-[10px] font-mono uppercase tracking-wider text-neutral-600 font-bold">
345337
<Lock className="w-2.5 h-2.5 text-neutral-500" />
346338
<span>Secure 1-Click Verification</span>
347339
</div>
348340

349-
<h1 className="font-display text-xl sm:text-2xl font-bold text-neutral-900 tracking-tight leading-snug">
341+
<h1 className="font-display text-xl sm:text-2xl font-bold text-neutral-900 tracking-tight leading-tight">
350342
Confirm Your Testimonial
351343
</h1>
352344
<p className="text-neutral-500 text-xs sm:text-sm leading-relaxed max-w-sm mx-auto">
353345
Review the draft below. Adjust the rating, tweak the wording, or approve it instantly with 1 click.
354346
</p>
355347
</div>
356348

357-
{/* ── Form container with smooth flow ── */}
358-
<form onSubmit={handleSubmitApproval} className="flex flex-col">
359-
<div className="p-6 sm:p-8 space-y-5">
349+
{/* ── Form container wrapping scrollable body and grounded sticky footer ── */}
350+
<form onSubmit={handleSubmitApproval} className="flex-1 flex flex-col min-h-0">
351+
{/* ── Scrollable Body with Scoped Signature Custom Scrollbar ── */}
352+
<div className="flex-1 overflow-y-auto px-6 py-5 space-y-5 custom-scrollbar min-h-0">
360353
{/* ── Personal Note from Creator ── */}
361354
{validState.testimonial?.promptMessage && (
362355
<div className="p-4 bg-amber-50/70 rounded-2xl border border-amber-200/60 space-y-1.5 text-left">
@@ -472,31 +465,31 @@ function ApproveTestimonialContent() {
472465
<span>{submitError}</span>
473466
</div>
474467
)}
468+
</div>
475469

476-
{/* ── Submit Action & Trust Signals ── */}
477-
<div className="pt-2 space-y-3">
478-
<button
479-
type="submit"
480-
disabled={submitting}
481-
className="w-full py-4 px-6 bg-neutral-900 hover:bg-neutral-800 text-white font-semibold rounded-2xl text-sm sm:text-base shadow-lg shadow-neutral-900/10 transition-all active:scale-[0.99] flex items-center justify-center gap-2.5 disabled:opacity-50 cursor-pointer"
482-
>
483-
{submitting ? (
484-
<>
485-
<Loader2 className="w-4 h-4 animate-spin" />
486-
<span>Publishing Testimonial...</span>
487-
</>
488-
) : (
489-
<>
490-
<Check className="w-4 h-4" />
491-
<span>{isEditing ? "Confirm & Publish My Edits" : "Approve & Publish Testimonial"}</span>
492-
</>
493-
)}
494-
</button>
470+
{/* ── Grounded Card Footer with Primary CTA (Non-scrolling) ── */}
471+
<div className="flex-shrink-0 px-6 py-4 border-t border-black/[0.06] bg-white space-y-2.5 shadow-[0_-4px_20px_rgba(0,0,0,0.03)] z-10">
472+
<button
473+
type="submit"
474+
disabled={submitting}
475+
className="w-full py-3.5 sm:py-4 bg-neutral-900 hover:bg-neutral-800 text-white font-semibold rounded-2xl text-sm sm:text-[15px] shadow-md transition-all active:scale-[0.99] flex items-center justify-center gap-2.5 disabled:opacity-50 cursor-pointer"
476+
>
477+
{submitting ? (
478+
<>
479+
<Loader2 className="w-4 h-4 animate-spin" />
480+
<span>Publishing Testimonial...</span>
481+
</>
482+
) : (
483+
<>
484+
<Check className="w-4 h-4" />
485+
<span>{isEditing ? "Confirm & Publish My Edits" : "Approve & Publish Testimonial"}</span>
486+
</>
487+
)}
488+
</button>
495489

496-
<div className="flex items-center justify-center gap-1.5 text-xs font-mono text-neutral-400">
497-
<ShieldCheck className="w-3.5 h-3.5 text-neutral-500" />
498-
<span>No password required · Powered by ClientEcho</span>
499-
</div>
490+
<div className="flex items-center justify-center gap-1.5 text-[11px] font-mono text-neutral-400">
491+
<ShieldCheck className="w-3.5 h-3.5 text-neutral-500" />
492+
<span>No password required · Powered by ClientEcho</span>
500493
</div>
501494
</div>
502495
</form>

0 commit comments

Comments
 (0)