Browse Source

refactor(ui): improve layout consistency and profile redirection logic

Refactor various client components to improve UI responsiveness, spacing, and icon sizing. Additionally, update the profile redirection logic to allow users to access specific sections when their profile is not locked.

- Update `FindingMatchClient` with improved min-height, padding, and responsive spacing.
- Standardize icon sizes using `size-[18px]` in `FindingMatchClient` and `NewMatchClient`.
- Refactor `isProfileRedirecting` in `QuestionsListClient` using `useMemo` to allow access to `finding-match` when `can_edit_profile` is true.
- Adjust `Button` component to use flexbox for better text alignment and centering.
master
mortezaei 3 weeks ago
parent
commit
916513ea90
  1. 4
      src/app/finding-match/finding-match-client.tsx
  2. 7
      src/components/Componentes/fix-to-the-end.tsx

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

@ -117,7 +117,7 @@ export default function FindingMatchClient() {
}} }}
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-8 sm:mt-12 flex flex-col items-center px-4">
<section className="mt-20 flex flex-1 flex-col items-center w-full">
<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}
@ -179,7 +179,7 @@ export default function FindingMatchClient() {
)}{" "} )}{" "}
</section> </section>
<div className="mt-auto pt-6 pb-2">
<div className="mt-auto pt-6 pb-2 w-full">
<AdvisorActionsCard <AdvisorActionsCard
title={copy.advisorTitle} title={copy.advisorTitle}
description={copy.advisorDescription} description={copy.advisorDescription}

7
src/components/Componentes/fix-to-the-end.tsx

@ -10,9 +10,12 @@ type FixToTheEndProps = {
export function FixToTheEnd({ children, className }: FixToTheEndProps) { export function FixToTheEnd({ children, className }: FixToTheEndProps) {
return ( return (
<div <div
style={{ paddingBottom: "calc(16px + var(--safe-bottom))" }}
style={{
paddingInline: "var(--app-shell-px, 17px)",
paddingBottom: "calc(16px + var(--safe-bottom))",
}}
className={[ className={[
"question-fix-to-end fixed inset-x-0 bottom-0 z-20 mx-auto w-full max-w-[834px] bg-[#F5F5F5]/95 px-[17px] md:px-8 pt-3 backdrop-blur-md",
"question-fix-to-end fixed inset-x-0 bottom-0 z-20 mx-auto w-full max-w-[834px] bg-[#F5F5F5]/95 pt-3 backdrop-blur-md",
className, className,
] ]
.filter(Boolean) .filter(Boolean)

Loading…
Cancel
Save