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

Update UI components and styling

Browse Source 
This commit includes overall UI and styling improvements in different areas of the application. In particular, it refactors the font usage in the tailwind configuration and modifies the Heading import path in `heading.tsx`. The pricing table and line item details in the billing gateway had been extensively updated to provide better visual representation. Finally, changes were made to the marketing page to make it more straightforward and clear.
This commit is contained in:
giancarlo
2024-04-25 20:17:50 +07:00
parent 0ad26e991d
commit 2a65cd0b95
5 changed files with 42 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,7 +121,7 @@ function Home() {
<Heading <Heading
level={2} level={2}
className={'font-medium text-muted-foreground'} className={'font-sans font-normal text-muted-foreground'}
> >
Unbeatable Features and Benefits for Your SaaS Business Unbeatable Features and Benefits for Your SaaS Business
</Heading> </Heading>
@@ -136,16 +136,16 @@ function Home() {
> >
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<FeatureContainer> <FeatureContainer>
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-6'}>
<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>
<div className={'flex flex-col space-y-1'}> <div className={'flex flex-col'}>
<Heading level={1}>Authentication</Heading> <Heading level={2}>Authentication</Heading>
<Heading <Heading
level={2} level={3}
className={'font-sans font-normal 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
@@ -185,16 +185,16 @@ function Home() {
</FeatureContainer> </FeatureContainer>
<FeatureContainer> <FeatureContainer>
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-6'}>
<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>
<div className={'flex flex-col space-y-1'}> <div className={'flex flex-col'}>
<Heading level={1}>Dashboard</Heading> <Heading level={2}>Dashboard</Heading>
<Heading <Heading
level={2} level={3}
className={'font-sans font-normal 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
@@ -212,16 +212,16 @@ function Home() {
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<FeatureContainer> <FeatureContainer>
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-6'}>
<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>
<div className={'flex flex-col space-y-1'}> <div className={'flex flex-col'}>
<Heading level={1}>Billing</Heading> <Heading level={2}>Billing</Heading>
<Heading <Heading
level={2} level={3}
className={'font-sans font-normal 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
@@ -260,12 +260,12 @@ function Home() {
<div className={'flex flex-col space-y-2'}> <div className={'flex flex-col space-y-2'}>
<Heading level={1}> <Heading level={1}>
Fair pricing for all types of SaaS businesses Fair pricing for all types of businesses
</Heading> </Heading>
<Heading <Heading
level={2} level={2}
className={'font-medium text-muted-foreground'} className={'font-sans font-normal text-muted-foreground'}
> >
Get started on our free plan and upgrade when you are ready. Get started on our free plan and upgrade when you are ready.
</Heading> </Heading>

10
packages/billing/gateway/src/components/line-item-details.tsx
View File

@@ -42,7 +42,7 @@ export function LineItemDetails(
<If condition={item.setupFee}> <If condition={item.setupFee}>
<div className={className}> <div className={className}>
<span className={'flex items-center space-x-1'}> <span className={'flex items-center space-x-1'}>
<PlusSquare className={'w-4'} /> <PlusSquare className={'w-3'} />
<span> <span>
<Trans <Trans
@@ -65,7 +65,7 @@ export function LineItemDetails(
<div className={className}> <div className={className}>
<span className={'flex items-center space-x-1'}> <span className={'flex items-center space-x-1'}>
<span className={'flex items-center space-x-1.5'}> <span className={'flex items-center space-x-1.5'}>
<PlusSquare className={'w-4'} /> <PlusSquare className={'w-3'} />
<span> <span>
<Trans i18nKey={'billing:basePlan'} /> <Trans i18nKey={'billing:basePlan'} />
@@ -95,7 +95,7 @@ export function LineItemDetails(
<If condition={item.tiers?.length}> <If condition={item.tiers?.length}>
<span className={'flex items-center space-x-1.5'}> <span className={'flex items-center space-x-1.5'}>
<PlusSquare className={'w-4'} /> <PlusSquare className={'w-3'} />
<span className={'flex space-x-1 text-sm'}> <span className={'flex space-x-1 text-sm'}>
<span> <span>
@@ -118,7 +118,7 @@ export function LineItemDetails(
<div key={index} className={'flex flex-col'}> <div key={index} className={'flex flex-col'}>
<div className={className}> <div className={className}>
<span className={'flex items-center space-x-1.5'}> <span className={'flex items-center space-x-1.5'}>
<PlusSquare className={'w-4'} /> <PlusSquare className={'w-3'} />
<span> <span>
<Trans i18nKey={'billing:perTeamMember'} /> <Trans i18nKey={'billing:perTeamMember'} />
@@ -145,7 +145,7 @@ export function LineItemDetails(
<div className={className}> <div className={className}>
<span className={'flex items-center space-x-1'}> <span className={'flex items-center space-x-1'}>
<span className={'flex items-center space-x-1.5'}> <span className={'flex items-center space-x-1.5'}>
<PlusSquare className={'w-4'} /> <PlusSquare className={'w-3'} />
<span className={'flex space-x-1'}> <span className={'flex space-x-1'}>
<span> <span>

37
packages/billing/gateway/src/components/pricing-table.tsx
View File

@@ -51,7 +51,7 @@ export function PricingTable({
const [interval, setInterval] = useState(intervals[0]!); const [interval, setInterval] = useState(intervals[0]!);
return ( return (
<div className={'flex flex-col space-y-8'}> <div className={'flex flex-col space-y-8 xl:space-y-12'}>
<div className={'flex justify-center'}> <div className={'flex justify-center'}>
{intervals.length ? ( {intervals.length ? (
<PlanIntervalSwitcher <PlanIntervalSwitcher
@@ -89,7 +89,6 @@ export function PricingTable({
return ( return (
<PricingItem <PricingItem
className={cn('border')}
selectable selectable
key={plan.id} key={plan.id}
plan={plan} plan={plan}
@@ -157,8 +156,8 @@ function PricingItem(
data-cy={'subscription-plan'} data-cy={'subscription-plan'}
className={cn( className={cn(
props.className, props.className,
`s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch `s-full relative flex flex-1 grow flex-col items-stretch justify-between
rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`, self-stretch rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
{ {
['border-primary']: highlighted, ['border-primary']: highlighted,
['dark:shadow-primary/40 border-transparent shadow dark:shadow-sm']: ['dark:shadow-primary/40 border-transparent shadow dark:shadow-sm']:
@@ -166,8 +165,21 @@ function PricingItem(
}, },
)} )}
> >
<If condition={props.product.badge}>
<div className={'absolute -top-2.5 left-0 flex w-full justify-center'}>
<Badge variant={highlighted ? 'default' : 'outline'}>
<span>
<Trans
i18nKey={props.product.badge}
defaults={props.product.badge}
/>
</span>
</Badge>
</div>
</If>
<div className={'flex flex-col space-y-6'}> <div className={'flex flex-col space-y-6'}>
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-2.5'}>
<div className={'flex items-center space-x-6'}> <div className={'flex items-center space-x-6'}>
<b <b
className={ className={
@@ -179,20 +191,9 @@ function PricingItem(
defaults={props.product.name} defaults={props.product.name}
/> />
</b> </b>
<If condition={props.product.badge}>
<Badge variant={highlighted ? 'default' : 'outline'}>
<span>
<Trans
i18nKey={props.product.badge}
defaults={props.product.badge}
/>
</span>
</Badge>
</If>
</div> </div>
<span className={cn(`text-muted-foreground h-10 text-base`)}> <span className={cn(`text-muted-foreground h-6 text-sm`)}>
<Trans <Trans
i18nKey={props.product.description} i18nKey={props.product.description}
defaults={props.product.description} defaults={props.product.description}
@@ -282,6 +283,8 @@ function PricingItem(
</div> </div>
<If condition={props.displayPlanDetails && lineItemsToDisplay.length}> <If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
<Separator />
<div className={'flex flex-col space-y-2'}> <div className={'flex flex-col space-y-2'}>
<h6 className={'text-sm font-semibold'}> <h6 className={'text-sm font-semibold'}>
<Trans i18nKey={'billing:detailsLabel'} /> <Trans i18nKey={'billing:detailsLabel'} />

2
packages/ui/src/shadcn/heading.tsx
View File

@@ -1,4 +1,4 @@
import { cn } from '../utils/cn'; import { cn } from '../utils';
type Level = 1 | 2 | 3 | 4 | 5 | 6; type Level = 1 | 2 | 3 | 4 | 5 | 6;

2
tooling/tailwind/index.ts
View File

@@ -64,7 +64,7 @@ export default {
}, },
fontFamily: { fontFamily: {
cal: ['var(--font-cal)', ...fontFamily.sans], cal: ['var(--font-cal)', ...fontFamily.sans],
sans: ['system-ui', 'var(--font-sans)', ...fontFamily.sans], sans: ['-apple-system', 'var(--font-sans)', ...fontFamily.sans],
heading: ['var(--font-heading)'], heading: ['var(--font-heading)'],
}, },
keyframes: { keyframes: {