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

Update styling and add new heading font

Browse Source 
The styling of multiple components has been updated for consistency and readability. A new heading font has been added to improve visual hierarchy. Changes include updating font sizes, adding a new heading font, and adjusting borders and padding over several components.
This commit is contained in:
giancarlo
2024-04-16 14:32:22 +08:00
parent 55535e04b7
commit 26db7d9a0e
15 changed files with 86 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/app/(dashboard)/home/[account]/_lib/server/team-billing.service.ts
View File

@@ -314,7 +314,7 @@ async function getBillingPermissionsForAccountId(
* customer ID for the provided account ID * customer ID for the provided account ID
*/ */
async function getCustomerIdFromAccountId( async function getCustomerIdFromAccountId(
client: ReturnType<typeof getSupabaseServerActionClient<Database>>, client: SupabaseClient<Database>,
accountId: string, accountId: string,
) { ) {
const { data, error } = await client const { data, error } = await client

2
apps/web/app/(marketing)/_components/site-header-account-section.tsx
View File

@@ -71,7 +71,7 @@ function AuthButtons() {
<Button <Button
variant={'ghost'} variant={'ghost'}
className={ className={
'rounded-full border border-primary hover:bg-primary hover:text-primary-foreground' 'border border-primary hover:bg-primary hover:text-primary-foreground'
} }
> >
<Trans i18nKey={'auth:getStarted'} /> <Trans i18nKey={'auth:getStarted'} />

6
apps/web/app/(marketing)/_components/site-header.tsx
View File

@@ -6,9 +6,9 @@ import { AppLogo } from '~/components/app-logo';
export function SiteHeader(props: { user?: User | null }) { export function SiteHeader(props: { user?: User | null }) {
return ( return (
<div> <div className={'border-b border-gray-100 dark:border-border'}>
<div className={'container mx-auto'}> <div className={'px-4 lg:px-8'}>
<div className="flex h-16 items-center justify-between"> <div className="flex h-14 items-center justify-between">
<div className={'flex w-6/12 items-center space-x-8'}> <div className={'flex w-6/12 items-center space-x-8'}>
<AppLogo /> <AppLogo />

2
apps/web/app/(marketing)/_components/site-navigation-item.tsx
View File

@@ -9,7 +9,7 @@ import { cn, isRouteActive } from '@kit/ui/utils';
const getClassName = (path: string, currentPathName: string) => { const getClassName = (path: string, currentPathName: string) => {
const isActive = isRouteActive(path, currentPathName); const isActive = isRouteActive(path, currentPathName);
return cn(`text-sm font-medium`, { return cn(`text-[0.9em] font-medium`, {
'hover:underline': !isActive, 'hover:underline': !isActive,
}); });
}; };

2
apps/web/app/(marketing)/_components/site-navigation.tsx
View File

@@ -45,7 +45,7 @@ export function SiteNavigation() {
<> <>
<div className={'hidden items-center lg:flex'}> <div className={'hidden items-center lg:flex'}>
<NavigationMenu> <NavigationMenu>
<NavigationMenuList className={'space-x-6'}> <NavigationMenuList className={'space-x-4'}>
{NavItems} {NavItems}
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>

8
apps/web/app/(marketing)/_components/site-page-header.tsx
View File

@@ -7,10 +7,12 @@ export function SitePageHeader(props: {
}) { }) {
return ( return (
<div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}> <div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
<div className={'container flex flex-col space-y-4'}> <div className={'container flex flex-col space-y-2 lg:space-y-4'}>
<h1 className={'font-base text-3xl xl:text-5xl'}>{props.title}</h1> <h1 className={'font-base font-heading text-3xl xl:text-5xl'}>
{props.title}
</h1>
<h2 className={'text-muted-foreground xl:text-lg 2xl:text-xl'}> <h2 className={'text-lg text-muted-foreground 2xl:text-2xl'}>
{props.subtitle} {props.subtitle}
</h2> </h2>
</div> </div>

6
apps/web/app/(marketing)/blog/_components/html-renderer.module.css
View File

@@ -1,13 +1,13 @@
.HTML h1 { .HTML h1 {
@apply mt-14 text-4xl font-bold; @apply mt-14 text-4xl font-bold font-heading;
} }
.HTML h2 { .HTML h2 {
@apply mb-4 mt-12 text-2xl font-semibold lg:text-3xl; @apply mb-4 mt-12 text-2xl font-semibold lg:text-3xl font-heading;
} }
.HTML h3 { .HTML h3 {
@apply mt-10 text-2xl font-bold; @apply mt-10 text-2xl font-bold font-heading;
} }
.HTML h4 { .HTML h4 {

4
apps/web/app/(marketing)/blog/_components/post-header.tsx
View File

@@ -14,7 +14,9 @@ export const PostHeader: React.FC<{
<div className={'flex flex-1 flex-col'}> <div className={'flex flex-1 flex-col'}>
<div className={cn('border-b py-8')}> <div className={cn('border-b py-8')}>
<div className={'mx-auto flex max-w-3xl flex-col space-y-4'}> <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
<h1 className={'text-3xl font-semibold xl:text-5xl'}>{title}</h1> <h1 className={'font-heading text-3xl font-semibold xl:text-5xl'}>
{title}
</h1>
<div> <div>
<span className={'text-muted-foreground'}> <span className={'text-muted-foreground'}>

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

@@ -50,14 +50,18 @@ function Home() {
<div> <div>
<Heading <Heading
level={3} level={3}
className={'text-center font-medium text-muted-foreground'} className={
'text-center font-sans font-medium text-muted-foreground'
}
> >
<span>Build and launch a SaaS in days, not months</span> <span>Build and launch a SaaS in days, not months</span>
</Heading> </Heading>
<Heading <Heading
level={3} level={3}
className={'text-center font-medium text-muted-foreground'} className={
'text-center font-sans font-medium text-muted-foreground'
}
> >
<span> <span>
<span>Focus on your business, not on the tech</span> <span>Focus on your business, not on the tech</span>
@@ -104,11 +108,11 @@ function Home() {
<span>A modern, scalable, and secure SaaS Starter Kit</span> <span>A modern, scalable, and secure SaaS Starter Kit</span>
</Pill> </Pill>
<div className={'flex flex-col space-y-1'}> <div className={'flex flex-col space-y-2'}>
<Heading level={2}>The best tool in the space</Heading> <Heading level={1}>The best tool in the space</Heading>
<Heading <Heading
level={3} level={2}
className={'font-medium text-muted-foreground'} className={'font-medium text-muted-foreground'}
> >
Unbeatable Features and Benefits for Your SaaS Business Unbeatable Features and Benefits for Your SaaS Business
@@ -122,7 +126,7 @@ function Home() {
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-4'}>
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<LeftFeatureContainer> <LeftFeatureContainer>
<div className={'flex flex-col space-y-2'}> <div className={'flex flex-col space-y-2.5'}>
<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>
@@ -169,7 +173,7 @@ function Home() {
</LeftFeatureContainer> </LeftFeatureContainer>
<RightFeatureContainer> <RightFeatureContainer>
<div className={'flex flex-col space-y-2'}> <div className={'flex flex-col space-y-2.5'}>
<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>
@@ -194,7 +198,7 @@ function Home() {
<FeatureShowcaseContainer> <FeatureShowcaseContainer>
<LeftFeatureContainer> <LeftFeatureContainer>
<div className={'flex flex-col space-y-2'}> <div className={'flex flex-col space-y-2.5'}>
<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>
@@ -238,13 +242,13 @@ function Home() {
<div className={'flex flex-col items-center space-y-8 text-center'}> <div className={'flex flex-col items-center space-y-8 text-center'}>
<Pill>Get started for free. No credit card required.</Pill> <Pill>Get started for free. No credit card required.</Pill>
<div className={'flex flex-col space-y-1'}> <div className={'flex flex-col space-y-2'}>
<Heading level={2}> <Heading level={1}>
Fair pricing for all types of SaaS businesses Fair pricing for all types of SaaS businesses
</Heading> </Heading>
<Heading <Heading
level={3} level={2}
className={'font-medium text-muted-foreground'} className={'font-medium 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.
@@ -272,7 +276,7 @@ function HeroTitle({ children }: React.PropsWithChildren) {
return ( return (
<h1 <h1
className={ className={
'flex flex-col text-center text-4xl font-bold tracking-tight sm:text-6xl' 'font-heading flex flex-col text-center text-5xl font-semibold tracking-tight sm:text-6xl lg:text-7xl'
} }
> >
{children} {children}
@@ -282,7 +286,11 @@ function HeroTitle({ children }: React.PropsWithChildren) {
function Pill(props: React.PropsWithChildren) { function Pill(props: React.PropsWithChildren) {
return ( return (
<h2 className={'rounded-full border px-4 py-2 text-center text-sm'}> <h2
className={
'rounded-full px-4 py-2 text-center text-sm text-muted-foreground shadow dark:shadow-primary/20'
}
>
<Sparkle className={'inline-block h-4'} /> <Sparkle className={'inline-block h-4'} />
{props.children} {props.children}
</h2> </h2>
@@ -321,17 +329,18 @@ function RightFeatureContainer(props: React.PropsWithChildren) {
function MainCallToActionButton() { function MainCallToActionButton() {
return ( return (
<div className={'flex space-x-2'}> <div className={'flex space-x-2'}>
<Link href={'/docs'}>
<Button variant={'link'}>Documentation</Button>
</Link>
<Link href={'/auth/sign-up'}> <Link href={'/auth/sign-up'}>
<Button <Button>
size={'lg'}
className={'rounded-full py-6 text-base font-medium'}
>
<span className={'flex items-center space-x-0.5'}> <span className={'flex items-center space-x-0.5'}>
<span>Get Started</span> <span>Get Started</span>
<ChevronRight <ChevronRight
className={ className={
'h-5 animate-in fade-in slide-in-from-left-8' + 'h-4 animate-in fade-in slide-in-from-left-8' +
' delay-800 duration-1000 zoom-in fill-mode-both' ' delay-800 duration-1000 zoom-in fill-mode-both'
} }
/> />

18
apps/web/app/layout.tsx
View File

@@ -1,4 +1,4 @@
import { Inter as SansFont } from 'next/font/google'; import { Urbanist as HeadingFont, Inter as SansFont } from 'next/font/google';
import { cookies, headers } from 'next/headers'; import { cookies, headers } from 'next/headers';
import { Toaster } from '@kit/ui/sonner'; import { Toaster } from '@kit/ui/sonner';
@@ -12,10 +12,18 @@ import '../styles/globals.css';
const sans = SansFont({ const sans = SansFont({
subsets: ['latin'], subsets: ['latin'],
variable: '--font-family-sans', variable: '--font-sans',
fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'], fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
preload: true, preload: true,
weight: ['300', '400', '500', '600', '700', '800'], weight: ['300', '400', '500', '600', '700'],
});
const heading = HeadingFont({
subsets: ['latin'],
variable: '--font-heading',
fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
preload: true,
weight: ['500', '700'],
}); });
export default async function RootLayout({ export default async function RootLayout({
@@ -34,6 +42,7 @@ export default async function RootLayout({
<RootProviders theme={theme} lang={language}> <RootProviders theme={theme} lang={language}>
{children} {children}
</RootProviders> </RootProviders>
<Toaster richColors={false} /> <Toaster richColors={false} />
</body> </body>
</html> </html>
@@ -48,7 +57,8 @@ function getClassName(theme?: string) {
{ {
dark, dark,
}, },
sans.className, sans.variable,
heading.variable,
); );
} }

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

@@ -165,7 +165,11 @@ function PricingItem(
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-4'}>
<div className={'flex items-center space-x-4'}> <div className={'flex items-center space-x-4'}>
<Heading level={5}> <Heading level={5}>
<b className={'text-current-foreground font-normal uppercase'}> <b
className={
'text-current-foreground font-heading font-normal uppercase'
}
>
<Trans <Trans
i18nKey={props.product.name} i18nKey={props.product.name}
defaults={props.product.name} defaults={props.product.name}
@@ -189,7 +193,7 @@ function PricingItem(
</If> </If>
</div> </div>
<span className={cn(`text-muted-foreground h-10 text-lg`)}> <span className={cn(`text-muted-foreground h-10 text-base`)}>
<Trans <Trans
i18nKey={props.product.description} i18nKey={props.product.description}
defaults={props.product.description} defaults={props.product.description}

2
packages/features/auth/src/components/auth-layout.tsx
View File

@@ -15,7 +15,7 @@ export function AuthLayoutShell({
{Logo && <Logo />} {Logo && <Logo />}
<div <div
className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`} className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12 dark:shadow`}
> >
{children} {children}
</div> </div>

4
packages/ui/src/makerkit/page.tsx
View File

@@ -54,7 +54,9 @@ export function PageHeader({
<h1> <h1>
<span className={'flex items-center space-x-0.5 lg:space-x-2'}> <span className={'flex items-center space-x-0.5 lg:space-x-2'}>
<span className={'text-xl font-semibold dark:text-white'}> <span
className={'font-heading text-xl font-semibold dark:text-white'}
>
{title} {title}
</span> </span>
</span> </span>

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

@@ -12,7 +12,7 @@ export function Heading({
return ( return (
<h1 <h1
className={cn( className={cn(
`scroll-m-20 text-4xl font-bold tracking-tight dark:text-white`, `scroll-m-20 font-heading text-4xl font-bold tracking-tight dark:text-white`,
className, className,
)} )}
> >
@@ -23,7 +23,7 @@ export function Heading({
return ( return (
<h2 <h2
className={cn( className={cn(
`scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0`, `scroll-m-20 pb-2 font-heading text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
className, className,
)} )}
> >
@@ -34,7 +34,7 @@ export function Heading({
return ( return (
<h3 <h3
className={cn( className={cn(
'scroll-m-20' + ' text-2xl font-semibold tracking-tight', 'scroll-m-20 font-heading text-2xl font-semibold tracking-tight',
className, className,
)} )}
> >
@@ -45,7 +45,7 @@ export function Heading({
return ( return (
<h4 <h4
className={cn( className={cn(
'scroll-m-20 text-xl font-semibold tracking-tight', 'scroll-m-20 font-heading text-xl font-semibold tracking-tight',
className, className,
)} )}
> >
@@ -54,13 +54,23 @@ export function Heading({
); );
case 5: case 5:
return ( return (
<h5 className={cn('scroll-m-20 text-lg font-medium', className)}> <h5
className={cn(
'scroll-m-20 font-heading text-lg font-medium',
className,
)}
>
{children} {children}
</h5> </h5>
); );
case 6: case 6:
return ( return (
<h6 className={cn('scroll-m-20 text-base font-medium', className)}> <h6
className={cn(
'scroll-m-20 font-heading text-base font-medium',
className,
)}
>
{children} {children}
</h6> </h6>
); );

1
tooling/tailwind/index.ts
View File

@@ -65,6 +65,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: ['system-ui', 'var(--font-sans)', ...fontFamily.sans],
heading: ['var(--font-heading)'],
}, },
keyframes: { keyframes: {
'fade-up': { 'fade-up': {