sina_sajjadi
/
marriage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix input autofill code

master
mortezaei 4 days ago
parent
cb3c34ee90
commit
4a4051ea93
2 changed files with 51 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      src/app/new-match/new-match-client.tsx
  2. 6
      src/components/Componentes/advisor-actions-card.tsx

95
src/app/new-match/new-match-client.tsx
View File

@ -385,7 +385,7 @@ function useMatchSummaryDisplay(
function FieldLine({ field }: { field: DisplayField }) { function FieldLine({ field }: { field: DisplayField }) {
return ( return (
<p className="break-words text-[11px] leading-[1.4] font-medium text-white">
<p className="break-words text-[11px] leading-[1.65] font-medium text-white">
<span className="font-semibold">{field.label}: </span> <span className="font-semibold">{field.label}: </span>
<span>{field.value}</span> <span>{field.value}</span>
</p> </p>
@ -522,57 +522,57 @@ export default function NewMatchClient() {
<PageBackground /> <PageBackground />
<main <main
style={{ style={{
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 12 + bottom}px`,
paddingTop: `${Math.max(8, top + 2)}px`,
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16}px`,
paddingTop: `${Math.max(12, top + 4)}px`,
}} }}
className="-mx-[17px] flex min-h-full flex-col px-4 text-center justify-between"
className="-mx-[17px] flex h-full min-h-full flex-col justify-between overflow-hidden text-center px-4"
> >
<PageHeader profile={profile} /> <PageHeader profile={profile} />
<div className="flex flex-1 flex-col justify-between"> <div className="flex flex-1 flex-col justify-between">
{/* Header Section Skeleton */} {/* Header Section Skeleton */}
<section className="flex flex-col items-center mt-2 sm:mt-4">
<LoadingSkeleton className="h-[52px] w-[52px] rounded-full" />
<LoadingSkeleton className="h-5 w-[200px] mt-2 sm:mt-3" />
<LoadingSkeleton className="h-3.5 w-[260px] mt-1.5" />
<LoadingSkeleton className="h-3.5 w-[220px] mt-1" />
<section className="flex flex-col items-center mt-9">
<LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
<LoadingSkeleton className="h-6 w-[220px] mt-4" />
<LoadingSkeleton className="h-4 w-[280px] mt-3" />
<LoadingSkeleton className="h-4 w-[240px] mt-1.5" />
</section> </section>
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
{/* Match Card Skeleton */} {/* Match Card Skeleton */}
<section className="mt-2.5 sm:mt-4 rounded-[15px] border border-white/80 bg-white px-3.5 py-3 shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
<section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
{/* Name line */} {/* Name line */}
<LoadingSkeleton className="h-4.5 w-[140px]" />
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */} {/* Subtitle / Details lines */}
<div className="mt-2 w-full flex flex-col items-center gap-1.5 min-h-[40px]">
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<LoadingSkeleton className="h-3 w-[180px]" /> <LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" /> <LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" /> <LoadingSkeleton className="h-3 w-[150px]" />
</div> </div>
{/* Button skeleton */} {/* Button skeleton */}
<LoadingSkeleton className="mt-2.5 h-[38px] w-full rounded-[10px]" />
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
</section> </section>
{/* Advisor Card Skeleton */} {/* Advisor Card Skeleton */}
<section className="mt-2.5 sm:mt-4">
<div className="rounded-[13px] border border-white/80 bg-white px-3 py-3 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
<LoadingSkeleton className="h-[15px] w-[130px]" />
<div className="mt-1.5 space-y-1">
<LoadingSkeleton className="h-[10px] w-[240px]" />
<LoadingSkeleton className="h-[10px] w-[160px]" />
<section className="mt-[36px]">
<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">
<LoadingSkeleton className="h-[10px] w-[260px]" />
<LoadingSkeleton className="h-[10px] w-[180px]" />
</div> </div>
<div className="mt-3 flex items-center justify-between gap-3">
<div className="mt-4 flex items-center justify-between gap-3">
<div className="flex items-center pl-1"> <div className="flex items-center pl-1">
<LoadingSkeleton className="h-[28px] w-[28px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[28px] w-[28px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[28px] w-[28px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[28px] w-[28px] rounded-full border-2 border-white" />
<LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
<LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
</div> </div>
<LoadingSkeleton className="h-[36px] w-[110px] rounded-[9px]" />
<LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
</div> </div>
</div> </div>
</section> </section>
@ -612,65 +612,65 @@ export default function NewMatchClient() {
<main <main
style={{ style={{
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 12 + bottom}px`,
paddingTop: `${Math.max(8, top + 2)}px`,
paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16}px`,
paddingTop: `${Math.max(12, top + 4)}px`,
}} }}
className="-mx-[17px] flex min-h-full flex-col px-4 text-center justify-between"
className="-mx-[17px] flex h-full min-h-full flex-col justify-between overflow-hidden text-center px-4"
> >
<PageHeader profile={profile} /> <PageHeader profile={profile} />
<div className="flex flex-1 flex-col justify-between"> <div className="flex flex-1 flex-col justify-between">
<section className="flex flex-col items-center mt-2 sm:mt-4">
<section className="flex flex-col items-center mt-9">
<div <div
aria-hidden="true" aria-hidden="true"
className="relative flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_10px_24px_rgba(240,68,91,0.22)]"
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)]"
> >
<Image <Image
src={"/assets/images/Ellipse 1210.svg"} src={"/assets/images/Ellipse 1210.svg"}
width={60}
height={60}
width={70}
height={70}
alt="notification" alt="notification"
/> />
</div> </div>
<h2 className="text-[19px] sm:text-[21px] font-bold mt-2 sm:mt-3">
<h2 className="text-[22px] font-bold mt-3.5">
{matchHeadingTitle} {matchHeadingTitle}
</h2> </h2>
<p className="mt-1 max-w-[322px] text-[11.5px] sm:text-[12px] leading-[1.3] font-semibold text-[#7C7C7C]">
<p className="mt-[11px] max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
{matchHeadingDescription} {matchHeadingDescription}
</p> </p>
</section> </section>
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
{isLoading ? ( {isLoading ? (
<section className="mt-2.5 sm:mt-4 rounded-[15px] border border-white/80 bg-white px-3.5 py-3 shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<div className="flex flex-col items-center py-1">
<section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
<div className="flex flex-col items-center py-2">
{/* Name line */} {/* Name line */}
<LoadingSkeleton className="h-4.5 w-[140px]" />
<LoadingSkeleton className="h-5 w-[140px]" />
{/* Subtitle / Details lines */} {/* Subtitle / Details lines */}
<div className="mt-2 w-full flex flex-col items-center gap-1.5 min-h-[40px]">
<div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
<LoadingSkeleton className="h-3 w-[180px]" /> <LoadingSkeleton className="h-3 w-[180px]" />
<LoadingSkeleton className="h-3 w-[120px]" /> <LoadingSkeleton className="h-3 w-[120px]" />
<LoadingSkeleton className="h-3 w-[150px]" /> <LoadingSkeleton className="h-3 w-[150px]" />
</div> </div>
{/* Button skeleton */} {/* Button skeleton */}
<LoadingSkeleton className="mt-2.5 h-[38px] w-full rounded-[10px]" />
<LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
</div> </div>
</section> </section>
) : ( ) : (
<section className="mt-2.5 sm:mt-4 rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-3.5 sm:px-[17px] pt-3 pb-3 text-white shadow-[0_14px_30px_rgba(240,68,91,0.22)]">
<section className="mt-[36px] rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[18px] pb-[17px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
{isError ? ( {isError ? (
<p className="py-4 text-[13px] font-semibold">
<p className="py-8 text-[13px] font-semibold">
Unable to load match summary. Unable to load match summary.
</p> </p>
) : matchSummary ? ( ) : matchSummary ? (
<> <>
<h2 className="break-words text-[13.5px] sm:text-[14px] leading-tight font-bold">
<h2 className="break-words text-[14px] leading-[1.4] font-bold">
<span>{matchDisplay.name}</span> <span>{matchDisplay.name}</span>
</h2> </h2>
<div className="mt-1.5 min-h-[40px] space-y-0.5 text-left">
<div className="mt-[6px] min-h-[48px] space-y-0.5 text-left">
{matchDisplay.age ? ( {matchDisplay.age ? (
<FieldLine field={matchDisplay.age} /> <FieldLine field={matchDisplay.age} />
) : null} ) : null}
@ -680,7 +680,7 @@ export default function NewMatchClient() {
) : null} ) : null}
{pairedEduFields.length ? ( {pairedEduFields.length ? (
<p className="break-words text-[11px] leading-[1.4] font-medium text-white">
<p className="break-words text-[11px] leading-[1.65] font-medium text-white">
{pairedEduFields.map((field, index) => ( {pairedEduFields.map((field, index) => (
<span key={field.id}> <span key={field.id}>
{index > 0 ? ( {index > 0 ? (
@ -720,20 +720,21 @@ export default function NewMatchClient() {
openProfile(); openProfile();
} }
}} }}
className="mt-2 sm:mt-3 inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[38px] text-[15px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
className="mt-[15px] 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"]} {t["View more details"]}
</button> </button>
</> </>
) : ( ) : (
<p className="py-4 text-[13px] font-semibold">
<p className="py-8 text-[13px] font-semibold">
No match summary is available yet. No match summary is available yet.
</p> </p>
)} )}
</section> </section>
)} )}
<div className="w-full space-y-2 mt-2.5 sm:mt-4">
<div className="w-full space-y-3">
<AdvisorActionsCard <AdvisorActionsCard
className="mt-[36px]"
title={t["Get an advisor"]} title={t["Get an advisor"]}
description={ description={
t[ t[

6
src/components/Componentes/advisor-actions-card.tsx
View File

@ -56,15 +56,15 @@ export function AdvisorActionsCard({
return ( return (
<section className={["space-y-3", className].filter(Boolean).join(" ")}> <section className={["space-y-3", className].filter(Boolean).join(" ")}>
<div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
<div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
<h2 className="group-16 leading-none font-bold text-[#1C1C1C]"> <h2 className="group-16 leading-none font-bold text-[#1C1C1C]">
{title} {title}
</h2> </h2>
<p className="mt-1.5 max-w-[280px] group-10 leading-[1.4] font-semibold text-[#8A8A8A]">
<p className="mt-2 max-w-[280px] group-10 leading-[1.45] font-semibold text-[#8A8A8A]">
{description} {description}
</p> </p>
<div className="mt-3 flex items-center justify-between gap-3">
<div className="mt-4 flex items-center justify-between gap-3">
<div className="flex items-center pl-1"> <div className="flex items-center pl-1">
{isLoading {isLoading
? /* ── Shimmer circles while API loads ── */ ? /* ── Shimmer circles while API loads ── */

Write Preview
Loading…
Cancel
Save