zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI components and replace PageHeader with AccountLayoutHeader

Browse Source 
This commit includes a major refactor of UI components to enhance the overall look and feel of the platform. The PageHeader component has been replaced by AccountLayoutHeader across multiple pages including settings, members, and billing. The new AccountLayoutHeader also includes an additional `account` prop, enhancing the component's functionality. Furthermore, this commit includes modifications to the marketing page styling, ensuring better spacing and alignment of features.
This commit is contained in:
giancarlo
2024-04-21 00:20:46 +08:00
parent ce38bdd36a
commit 562db0058e
4 changed files with 72 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/app/(dashboard)/home/[account]/billing/page.tsx
View File

@@ -6,17 +6,18 @@ import {
} from '@kit/billing-gateway/components'; } from '@kit/billing-gateway/components';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert'; import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import { If } from '@kit/ui/if'; import { If } from '@kit/ui/if';
import { PageBody, PageHeader } from '@kit/ui/page'; import { PageBody } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans'; import { Trans } from '@kit/ui/trans';
import { cn } from '@kit/ui/utils'; import { cn } from '@kit/ui/utils';
import { createBillingPortalSession } from '~/(dashboard)/home/[account]/billing/server-actions';
import billingConfig from '~/config/billing.config'; import billingConfig from '~/config/billing.config';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n'; import { withI18n } from '~/lib/i18n/with-i18n';
import { AccountLayoutHeader } from '../_components/account-layout-header';
import { loadTeamAccountBillingPage } from '../_lib/server/team-account-billing-page.loader'; import { loadTeamAccountBillingPage } from '../_lib/server/team-account-billing-page.loader';
import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader'; import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
import { createBillingPortalSession } from '../billing/server-actions';
import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form'; import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form';
interface Params { interface Params {
@@ -71,9 +72,10 @@ async function TeamAccountBillingPage({ params }: Params) {
return ( return (
<> <>
<PageHeader <AccountLayoutHeader
title={<Trans i18nKey={'common:billingTabLabel'} />} title={<Trans i18nKey={'common:billingTabLabel'} />}
description={<Trans i18nKey={'common:billingTabDescription'} />} description={<Trans i18nKey={'common:billingTabDescription'} />}
account={params.account}
/> />
<PageBody> <PageBody>

6
apps/web/app/(dashboard)/home/[account]/members/page.tsx
View File

@@ -17,13 +17,14 @@ import {
CardTitle, CardTitle,
} from '@kit/ui/card'; } from '@kit/ui/card';
import { If } from '@kit/ui/if'; import { If } from '@kit/ui/if';
import { PageBody, PageHeader } from '@kit/ui/page'; import { PageBody } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans'; import { Trans } from '@kit/ui/trans';
import { Database } from '~/lib/database.types'; import { Database } from '~/lib/database.types';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n'; import { withI18n } from '~/lib/i18n/with-i18n';
import { AccountLayoutHeader } from '../_components/account-layout-header';
import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader'; import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
interface Params { interface Params {
@@ -108,9 +109,10 @@ async function TeamAccountMembersPage({ params }: Params) {
return ( return (
<> <>
<PageHeader <AccountLayoutHeader
title={<Trans i18nKey={'common:membersTabLabel'} />} title={<Trans i18nKey={'common:membersTabLabel'} />}
description={<Trans i18nKey={'common:membersTabDescription'} />} description={<Trans i18nKey={'common:membersTabDescription'} />}
account={params.account}
/> />
<PageBody> <PageBody>

6
apps/web/app/(dashboard)/home/[account]/settings/page.tsx
View File

@@ -1,10 +1,11 @@
import { TeamAccountSettingsContainer } from '@kit/team-accounts/components'; import { TeamAccountSettingsContainer } from '@kit/team-accounts/components';
import { PageBody, PageHeader } from '@kit/ui/page'; import { PageBody } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans'; import { Trans } from '@kit/ui/trans';
import pathsConfig from '~/config/paths.config'; import pathsConfig from '~/config/paths.config';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { AccountLayoutHeader } from '../_components/account-layout-header';
import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader'; import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
export const generateMetadata = async () => { export const generateMetadata = async () => {
@@ -39,9 +40,10 @@ async function TeamAccountSettingsPage(props: Props) {
return ( return (
<> <>
<PageHeader <AccountLayoutHeader
title={<Trans i18nKey={'teams:settings.pageTitle'} />} title={<Trans i18nKey={'teams:settings.pageTitle'} />}
description={<Trans i18nKey={'teams:settings.pageDescription'} />} description={<Trans i18nKey={'teams:settings.pageDescription'} />}
account={props.params.account}
/> />
<PageBody> <PageBody>

109
apps/web/app/(marketing)/page.tsx
View File

@@ -104,7 +104,7 @@ function Home() {
<div className={'container mx-auto'}> <div className={'container mx-auto'}>
<div <div
className={ className={
'flex flex-col items-center justify-center space-y-24 py-16' 'flex flex-col items-center justify-center space-y-8 py-8 xl:space-y-16 xl:py-16'
} }
> >
<div <div
@@ -131,23 +131,27 @@ function Home() {
</div> </div>
<div className={'container mx-auto'}> <div className={'container mx-auto'}>
<div className={'flex flex-col space-y-24 xl:space-y-36'}> <div
className={'flex flex-col space-y-16 xl:space-y-32 2xl:space-y-36'}
>
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<LeftFeatureContainer> <FeatureContainer>
<div className={'flex flex-col space-y-2.5'}> <div className={'flex flex-col space-y-4'}>
<IconContainer className={'bg-green-50 dark:bg-green-500/10'}> <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
<Lock className={'h-5 text-green-500'} /> <Lock className={'h-5 text-green-500'} />
</IconContainer> </IconContainer>
<Heading level={2}>Authentication</Heading> <div className={'flex flex-col space-y-1'}>
<Heading level={1}>Authentication</Heading>
<Heading <Heading
level={3} level={2}
className={'font-medium text-muted-foreground'} className={'font-sans font-normal text-muted-foreground'}
> >
Secure and Easy-to-Use Authentication for Your SaaS Website Secure and Easy-to-Use Authentication for Your SaaS Website
and API and API
</Heading> </Heading>
</div>
</div> </div>
<div> <div>
@@ -156,9 +160,9 @@ function Home() {
secure, easy-to-use, and fully customizable. It supports secure, easy-to-use, and fully customizable. It supports
email/password, social logins, and more. email/password, social logins, and more.
</div> </div>
</LeftFeatureContainer> </FeatureContainer>
<RightFeatureContainer> <FeatureContainer>
<Image <Image
className="rounded-2xl" className="rounded-2xl"
src={'/images/sign-in.webp'} src={'/images/sign-in.webp'}
@@ -166,11 +170,11 @@ function Home() {
height={'1680'} height={'1680'}
alt={'Sign In'} alt={'Sign In'}
/> />
</RightFeatureContainer> </FeatureContainer>
</FeatureShowcaseContainer> </FeatureShowcaseContainer>
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<LeftFeatureContainer> <FeatureContainer reverse>
<Image <Image
className="rounded-2xl" className="rounded-2xl"
src={'/images/dashboard.webp'} src={'/images/dashboard.webp'}
@@ -178,22 +182,24 @@ function Home() {
height={'1410'} height={'1410'}
alt={'Dashboard'} alt={'Dashboard'}
/> />
</LeftFeatureContainer> </FeatureContainer>
<RightFeatureContainer> <FeatureContainer>
<div className={'flex flex-col space-y-2.5'}> <div className={'flex flex-col space-y-4'}>
<IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}> <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
<LayoutDashboard className={'h-5 text-indigo-500'} /> <LayoutDashboard className={'h-5 text-indigo-500'} />
</IconContainer> </IconContainer>
<Heading level={2}>Dashboard</Heading> <div className={'flex flex-col space-y-1'}>
<Heading level={1}>Dashboard</Heading>
<Heading <Heading
level={3} level={2}
className={'font-medium text-muted-foreground'} className={'font-sans font-normal text-muted-foreground'}
> >
A fantastic dashboard to manage your SaaS business A fantastic dashboard to manage your SaaS business
</Heading> </Heading>
</div>
</div> </div>
<div> <div>
@@ -201,24 +207,26 @@ function Home() {
at a glance all you need to know about your business. It is at a glance all you need to know about your business. It is
fully customizable and extendable. fully customizable and extendable.
</div> </div>
</RightFeatureContainer> </FeatureContainer>
</FeatureShowcaseContainer> </FeatureShowcaseContainer>
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<LeftFeatureContainer> <FeatureContainer>
<div className={'flex flex-col space-y-2.5'}> <div className={'flex flex-col space-y-4'}>
<IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}> <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
<CreditCard className={'h-5 text-blue-500'} /> <CreditCard className={'h-5 text-blue-500'} />
</IconContainer> </IconContainer>
<Heading level={2}>Billing</Heading> <div className={'flex flex-col space-y-1'}>
<Heading level={1}>Billing</Heading>
<Heading <Heading
level={3} level={2}
className={'font-medium text-muted-foreground'} className={'font-sans font-normal text-muted-foreground'}
> >
A powerful billing system for your SaaS business A powerful billing system for your SaaS business
</Heading> </Heading>
</div>
</div> </div>
<div> <div>
@@ -226,9 +234,9 @@ function Home() {
such as Stripe, Lemon Squeezy and Paddle. Fully customizable and such as Stripe, Lemon Squeezy and Paddle. Fully customizable and
easy to use. easy to use.
</div> </div>
</LeftFeatureContainer> </FeatureContainer>
<RightFeatureContainer> <FeatureContainer>
<Image <Image
className="rounded-2xl" className="rounded-2xl"
src={'/images/billing.webp'} src={'/images/billing.webp'}
@@ -236,7 +244,7 @@ function Home() {
height={'1392'} height={'1392'}
alt={'Billing'} alt={'Billing'}
/> />
</RightFeatureContainer> </FeatureContainer>
</FeatureShowcaseContainer> </FeatureShowcaseContainer>
</div> </div>
</div> </div>
@@ -310,7 +318,7 @@ function FeatureShowcaseContainer(props: React.PropsWithChildren) {
return ( return (
<div <div
className={ className={
'flex flex-col items-center justify-between lg:flex-row' + 'flex flex-col items-center justify-between space-y-8 lg:flex-row lg:space-y-0' +
' lg:space-x-24' ' lg:space-x-24'
} }
> >
@@ -319,17 +327,18 @@ function FeatureShowcaseContainer(props: React.PropsWithChildren) {
); );
} }
function LeftFeatureContainer(props: React.PropsWithChildren) { function FeatureContainer(
props: React.PropsWithChildren<{
className?: string;
reverse?: boolean;
}>,
) {
return ( return (
<div className={'flex w-full flex-col space-y-6 lg:w-6/12'}> <div
{props.children} className={cn('flex w-full flex-col space-y-6 lg:w-6/12', {
</div> 'order-2 mt-8 lg:order-none lg:mt-0': props.reverse,
); })}
} >
function RightFeatureContainer(props: React.PropsWithChildren) {
return (
<div className={'flex w-full flex-col space-y-6 lg:w-6/12'}>
{props.children} {props.children}
</div> </div>
); );