Browse Source

refactor: update layout styles, adjust component dimensions, and refine profile redirection logic

master
mortezaei 3 weeks ago
parent
commit
2e1267bc48
  1. 38
      src/app/finding-match/finding-match-client.tsx
  2. 2
      src/app/new-match/new-match-client.tsx
  3. 14
      src/app/questions-list/questions-list-client.tsx
  4. 2
      src/components/Componentes/button.tsx

38
src/app/finding-match/finding-match-client.tsx

@ -111,25 +111,27 @@ export default function FindingMatchClient() {
/> />
<main <main
style={{ paddingBottom: "calc(80px + var(--safe-bottom))" }}
style={{
minHeight: "calc(100dvh - 56px - max(12px, calc(var(--safe-top) + 6px)))",
paddingBottom: "calc(90px + var(--safe-bottom))",
}}
className="flex min-h-0 flex-1 flex-col justify-between text-center page-slide-enter" className="flex min-h-0 flex-1 flex-col justify-between text-center page-slide-enter"
> >
<section className="mt-6 flex flex-1 flex-col items-center px-[23px]">
<section className="mt-8 sm:mt-12 flex flex-col items-center px-4">
<div className="relative h-[124px] w-[130px]" aria-hidden="true"> <div className="relative h-[124px] w-[130px]" aria-hidden="true">
<Image <Image
src={matchImageSrc} src={matchImageSrc}
alt="" alt=""
fill fill
sizes="58px"
sizes="130px"
className="object-cover" className="object-cover"
priority priority
/> />
</div> </div>
<h1 className="mt-4 group-16 font-bold leading-none tracking-[0.02em] text-[#171717] uppercase">
<h1 className="mt-5 group-16 font-bold leading-none tracking-[0.02em] text-[#171717] uppercase">
{copy.title} {copy.title}
</h1> </h1>
<p className="mt-3 max-w-[320px] mx-auto text-center group-12 leading-[1.35] font-semibold text-[#747474]">
<p className="mt-3 max-w-[320px] mx-auto text-center group-12 leading-[1.4] font-semibold text-[#747474]">
{copy.description} {copy.description}
</p> </p>
{unseenRejection && ( {unseenRejection && (
@ -177,22 +179,24 @@ export default function FindingMatchClient() {
)}{" "} )}{" "}
</section> </section>
<AdvisorActionsCard
title={copy.advisorTitle}
description={copy.advisorDescription}
avatars={advisorAvatars}
extraCount={7}
getAdvisorLabel={copy.getAdvisor}
onGetAdvisor={openAdvisors}
/>
<div className="mt-auto pt-6 pb-2">
<AdvisorActionsCard
title={copy.advisorTitle}
description={copy.advisorDescription}
avatars={advisorAvatars}
extraCount={7}
getAdvisorLabel={copy.getAdvisor}
onGetAdvisor={openAdvisors}
/>
</div>
<FixToTheEnd> <FixToTheEnd>
{profile?.can_edit_profile === false ? ( {profile?.can_edit_profile === false ? (
<div <div
className="inline-flex w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] dark:bg-[#3D3E42] px-4 py-[17px] text-center text-[#747474] dark:text-[#A1A1A1] shadow-none"
className="inline-flex h-[52px] w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] dark:bg-[#3D3E42] px-4 text-center text-[#747474] dark:text-[#A1A1A1] shadow-none"
aria-live="polite" aria-live="polite"
> >
<Ic name="lock" aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
<Ic name="lock" aria-hidden="true" className="size-[18px] shrink-0" />
<span className="group-16 leading-none font-semibold"> <span className="group-16 leading-none font-semibold">
{t["Profile is locked"]} {t["Profile is locked"]}
</span> </span>
@ -202,7 +206,7 @@ export default function FindingMatchClient() {
variant="dark" variant="dark"
href={localizePath("/questions-list", locale)} href={localizePath("/questions-list", locale)}
> >
<Ic name="pencil" aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
<Ic name="pencil" aria-hidden="true" className="size-[18px] shrink-0" />
<span>{copy.editProfile}</span> <span>{copy.editProfile}</span>
</Button> </Button>
)} )}

2
src/app/new-match/new-match-client.tsx

@ -899,7 +899,7 @@ export default function NewMatchClient() {
className="inline-flex w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] px-4 h-[52px] text-center text-[#747474] shadow-none" className="inline-flex w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] px-4 h-[52px] text-center text-[#747474] shadow-none"
role="status" role="status"
> >
<Ic name="lock" aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
<Ic name="lock" aria-hidden="true" className="size-[18px] shrink-0" />
<span className="group-16 leading-none font-semibold"> <span className="group-16 leading-none font-semibold">
{t["Profile is locked"]} {t["Profile is locked"]}
</span> </span>

14
src/app/questions-list/questions-list-client.tsx

@ -112,8 +112,18 @@ export default function QuestionsListClient() {
() => (profile ? getSubmitPath(profile) : null), () => (profile ? getSubmitPath(profile) : null),
[profile], [profile],
); );
const isProfileRedirecting =
profileTargetPath !== null && profileTargetPath !== "/questions-list";
const isProfileRedirecting = useMemo(() => {
if (!profile || !profileTargetPath) return false;
if (profileTargetPath === "/questions-list") return false;
// Allow users to view and edit profile sections when profile is waiting or in match pool and can_edit_profile is not locked
if (
profileTargetPath === "/finding-match" &&
profile.can_edit_profile !== false
) {
return false;
}
return true;
}, [profile, profileTargetPath]);
useEffect(() => { useEffect(() => {
if (isProfileRedirecting && profileTargetPath) { if (isProfileRedirecting && profileTargetPath) {

2
src/components/Componentes/button.tsx

@ -162,7 +162,7 @@ export function Button({
<span className="flex w-full min-w-0 max-w-full items-center justify-center gap-2"> <span className="flex w-full min-w-0 max-w-full items-center justify-center gap-2">
{renderArrow("left")} {renderArrow("left")}
<span className="flex min-w-0 max-w-full flex-1 flex-col items-center justify-center"> <span className="flex min-w-0 max-w-full flex-1 flex-col items-center justify-center">
<span className="block w-full min-w-0 max-w-full truncate text-center group-16 font-semibold leading-none">
<span className="flex w-full min-w-0 max-w-full items-center justify-center gap-2 truncate text-center group-16 font-semibold leading-none">
{children} {children}
</span> </span>
{description && !isOutlined ? ( {description && !isOutlined ? (

Loading…
Cancel
Save