|
|
|
@ -531,18 +531,17 @@ export default function NewMatchClient() { |
|
|
|
<PageHeader profile={profile} /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between"> |
|
|
|
{/* Header Section Skeleton */} |
|
|
|
<section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0"> |
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between py-1"> |
|
|
|
{/* 1. Header Section Skeleton */} |
|
|
|
<section className="flex flex-col items-center shrink-0"> |
|
|
|
<LoadingSkeleton className="h-[60px] w-[60px] rounded-full" /> |
|
|
|
<LoadingSkeleton className="h-6 w-[220px] mt-2.5 sm:mt-3" /> |
|
|
|
<LoadingSkeleton className="h-4 w-[280px] mt-2" /> |
|
|
|
<LoadingSkeleton className="h-4 w-[240px] mt-1" /> |
|
|
|
</section> |
|
|
|
|
|
|
|
<div className="flex flex-col justify-between shrink-0"> |
|
|
|
{/* Match Card Skeleton */} |
|
|
|
<section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center"> |
|
|
|
{/* 2. Match Card Skeleton */} |
|
|
|
<section className="w-full rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center shrink-0"> |
|
|
|
{/* Name line */} |
|
|
|
<LoadingSkeleton className="h-5 w-[140px]" /> |
|
|
|
|
|
|
|
@ -553,11 +552,11 @@ export default function NewMatchClient() { |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Button skeleton */} |
|
|
|
<LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" /> |
|
|
|
<LoadingSkeleton className="mt-3 h-[40px] w-full rounded-[10px]" /> |
|
|
|
</section> |
|
|
|
|
|
|
|
{/* Advisor Card Skeleton */} |
|
|
|
<section className="mt-4 sm:mt-6"> |
|
|
|
{/* 3. Advisor Card Skeleton */} |
|
|
|
<section className="w-full shrink-0"> |
|
|
|
<div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm"> |
|
|
|
<LoadingSkeleton className="h-[16px] w-[140px]" /> |
|
|
|
<div className="mt-2 space-y-1"> |
|
|
|
@ -578,7 +577,6 @@ export default function NewMatchClient() { |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
</> |
|
|
|
); |
|
|
|
@ -628,8 +626,9 @@ export default function NewMatchClient() { |
|
|
|
<PageHeader profile={profile} /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between"> |
|
|
|
<section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0"> |
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between py-1"> |
|
|
|
{/* 1. Header Section */} |
|
|
|
<section className="flex flex-col items-center shrink-0"> |
|
|
|
<div |
|
|
|
aria-hidden="true" |
|
|
|
className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]" |
|
|
|
@ -649,9 +648,10 @@ export default function NewMatchClient() { |
|
|
|
</p> |
|
|
|
</section> |
|
|
|
|
|
|
|
<div className="flex flex-col justify-between shrink-0"> |
|
|
|
{/* 2. Match Summary Card Section */} |
|
|
|
<div className="w-full shrink-0"> |
|
|
|
{isLoading ? ( |
|
|
|
<section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]"> |
|
|
|
<section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]"> |
|
|
|
<div className="flex flex-col items-center py-2"> |
|
|
|
{/* Name line */} |
|
|
|
<LoadingSkeleton className="h-5 w-[140px]" /> |
|
|
|
@ -663,11 +663,11 @@ export default function NewMatchClient() { |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Button skeleton */} |
|
|
|
<LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" /> |
|
|
|
<LoadingSkeleton className="mt-3 h-[40px] w-full rounded-[10px]" /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
) : ( |
|
|
|
<section className="mt-4 sm:mt-6 rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]"> |
|
|
|
<section className="rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]"> |
|
|
|
{isError ? ( |
|
|
|
<p className="py-8 text-[13px] font-semibold"> |
|
|
|
Unable to load match summary. |
|
|
|
@ -736,7 +736,7 @@ export default function NewMatchClient() { |
|
|
|
openProfile(); |
|
|
|
} |
|
|
|
}} |
|
|
|
className="mt-3 sm:mt-3.5 inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer" |
|
|
|
className="mt-3 inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer" |
|
|
|
> |
|
|
|
{t["View more details"]} |
|
|
|
</button> |
|
|
|
@ -748,9 +748,11 @@ export default function NewMatchClient() { |
|
|
|
)} |
|
|
|
</section> |
|
|
|
)} |
|
|
|
<div className="w-full space-y-3"> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 3. Advisor Section */} |
|
|
|
<div className="w-full shrink-0"> |
|
|
|
<AdvisorActionsCard |
|
|
|
className="mt-4 sm:mt-6" |
|
|
|
title={t["Get an advisor"]} |
|
|
|
description={ |
|
|
|
t[ |
|
|
|
@ -764,7 +766,6 @@ export default function NewMatchClient() { |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
|
|
|
|
{profile?.can_edit_profile === false && ( |
|
|
|
|