Skip to content

feat(front): modernize global page layout and align header styling wi… #395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LLEGIT wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(front): modernize global page layout and align header styling wi… #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions v6y-apps/front/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,12 @@ export default function RootLayout({
}>) {
return (
<html lang="en" className={inter.className}>
<body>
<main>
<AppProvider>
<Suspense fallback={<LoaderView />}>
<VitalityPageLayout>{children}</VitalityPageLayout>
</Suspense>
</AppProvider>
</main>
<body className="min-h-screen bg-background text-foreground antialiased">
<AppProvider>
<Suspense fallback={<LoaderView />}>
<VitalityPageLayout>{children}</VitalityPageLayout>
</Suspense>
</AppProvider>
</body>
</html>
);
Expand Down
12 changes: 5 additions & 7 deletions v6y-apps/front/src/commons/components/layout/DesktopMenuItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,19 @@ interface DesktopMenuItemsProps {

const DesktopMenuItems = ({ isLoggedIn, userName, onLogout }: DesktopMenuItemsProps) => {
const { translate } = useTranslationProvider();
const iconButtonClassName =
'h-10 w-10 border-slate-200 bg-white/90 text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-100';

return (
<div className="hidden md:flex items-center gap-2 flex-wrap justify-end">
<Link className="shrink-0" href="/faq">
<Button className="border-gray-200 h-10 w-10" size="icon" variant="outline">
<Button className={iconButtonClassName} size="icon" variant="outline">
<QuestionMarkCircledIcon className="w-5 h-5" />
</Button>
</Link>

{isLoggedIn && (
<Button
size="icon"
variant="outline"
className="border-gray-200 h-10 w-10 shrink-0"
>
<Button size="icon" variant="outline" className={`${iconButtonClassName} shrink-0`}>
<MagnifyingGlassIcon className="w-5 h-5" />
</Button>
)}
Expand All @@ -58,7 +56,7 @@ const DesktopMenuItems = ({ isLoggedIn, userName, onLogout }: DesktopMenuItemsPr
onClick={onLogout}
className="shrink-0"
>
<Button size="icon" variant="outline" className="border-gray-200 h-10 w-10">
<Button size="icon" variant="outline" className={iconButtonClassName}>
<ExitIcon className="w-5 h-5" />
</Button>
</Link>
Expand Down
71 changes: 41 additions & 30 deletions v6y-apps/front/src/commons/components/layout/VitalityPageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,38 +20,49 @@ const VitalityPageHeader = () => {

return (
<>
<header className="py-2 md:py-4 md:px-0 flex items-center justify-between bg-white">
<div className="flex items-center gap-4 md:gap-8 shrink-0">
<HeaderLogo />
</div>
<header className="sticky top-0 z-30 border-b border-slate-200/90 bg-linear-to-r from-white/95 via-slate-50/85 to-white/95 shadow-[0_10px_26px_-24px_rgba(15,23,42,0.9)] backdrop-blur supports-backdrop-filter:bg-white/75">
<div className="mx-auto flex w-full max-w-screen-2xl items-center justify-between px-4 py-3 md:px-8 lg:px-12">
<div className="flex items-center gap-4 md:gap-8 shrink-0">
<HeaderLogo />
</div>

<DesktopMenuItems isLoggedIn={isLoggedIn} userName={userName} onLogout={onLogout} />
<DesktopMenuItems
isLoggedIn={isLoggedIn}
userName={userName}
onLogout={onLogout}
/>

<Button
size="icon"
variant="outline"
className="md:hidden border-gray-200 h-9 w-9 shrink-0"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{isMobileMenuOpen ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
) : (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
)}
</svg>
</Button>
<Button
size="icon"
variant="outline"
className="md:hidden h-10 w-10 shrink-0 border-slate-200 bg-white/90 text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-100"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu"
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
{isMobileMenuOpen ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
) : (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
)}
</svg>
</Button>
</div>
</header>

<MobileMenu
Expand Down
10 changes: 7 additions & 3 deletions v6y-apps/front/src/commons/components/layout/VitalityPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@ import VitalityPageHeader from './VitalityPageHeader';

const VitalityPageLayout = ({ children }: { children: ReactNode }) => {
return (
<div className="px-4 md:px-16">
<div className="min-h-screen bg-background text-foreground flex flex-col">
<VitalityPageHeader />
<VitalityBreadcrumb />
{children}
<div className="mx-auto flex w-full max-w-screen-2xl flex-1 min-h-0 flex-col px-4 md:px-8 lg:px-12">
<VitalityBreadcrumb />
<main className="flex flex-1 min-h-0 flex-col pb-8 pt-2 md:pb-12 md:pt-3">
{children}
</main>
</div>
<Toaster position="top-center" richColors />
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion v6y-apps/front/src/features/auth/pages/VitalityLoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import VitalityLoginForm from '../components/VitalityLoginForm';

export default function VitalityLoginPage() {
return (
<div className="w-full min-h-screen flex justify-center items-center md:py-8 lg:py-12">
<div className="flex w-full flex-1 items-center justify-center">
<VitalityLoginForm />
</div>
);
Expand Down
Loading