Browse Source

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

master
mortezaei 3 weeks ago
parent
commit
2e1267bc48
  1. 22
      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

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

@ -111,25 +111,27 @@ export default function FindingMatchClient() {
/>
<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"
>
<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">
<Image
src={matchImageSrc}
alt=""
fill
sizes="58px"
sizes="130px"
className="object-cover"
priority
/>
</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}
</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}
</p>
{unseenRejection && (
@ -177,6 +179,7 @@ export default function FindingMatchClient() {
)}{" "}
</section>
<div className="mt-auto pt-6 pb-2">
<AdvisorActionsCard
title={copy.advisorTitle}
description={copy.advisorDescription}
@ -185,14 +188,15 @@ export default function FindingMatchClient() {
getAdvisorLabel={copy.getAdvisor}
onGetAdvisor={openAdvisors}
/>
</div>
<FixToTheEnd>
{profile?.can_edit_profile === false ? (
<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"
>
<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">
{t["Profile is locked"]}
</span>
@ -202,7 +206,7 @@ export default function FindingMatchClient() {
variant="dark"
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>
</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"
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">
{t["Profile is locked"]}
</span>

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

@ -112,8 +112,18 @@ export default function QuestionsListClient() {
() => (profile ? getSubmitPath(profile) : null),
[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(() => {
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">
{renderArrow("left")}
<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}
</span>
{description && !isOutlined ? (

Loading…
Cancel
Save