From 2a65cd0b9512bd1cb189c0bd330f866807feebcd Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 25 Apr 2024 20:17:50 +0700
Subject: [PATCH] Update UI components and styling

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.
---
 apps/web/app/(marketing)/page.tsx             | 30 +++++++--------
 .../src/components/line-item-details.tsx      | 10 ++---
 .../gateway/src/components/pricing-table.tsx  | 37 ++++++++++---------
 packages/ui/src/shadcn/heading.tsx            |  2 +-
 tooling/tailwind/index.ts                     |  2 +-
 5 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 5cd079a7f..287e0a113 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -121,7 +121,7 @@ function Home() {
 
               <Heading
                 level={2}
-                className={'font-medium text-muted-foreground'}
+                className={'font-sans font-normal text-muted-foreground'}
               >
                 Unbeatable Features and Benefits for Your SaaS Business
               </Heading>
@@ -136,16 +136,16 @@ function Home() {
         >
           <FeatureShowcaseContainer>
             <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'}>
                   <Lock className={'h-5 text-green-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Authentication</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Authentication</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     Secure and Easy-to-Use Authentication for Your SaaS Website
@@ -185,16 +185,16 @@ function Home() {
             </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'}>
                   <LayoutDashboard className={'h-5 text-indigo-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Dashboard</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Dashboard</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     A fantastic dashboard to manage your SaaS business
@@ -212,16 +212,16 @@ function Home() {
 
           <FeatureShowcaseContainer>
             <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'}>
                   <CreditCard className={'h-5 text-blue-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Billing</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Billing</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     A powerful billing system for your SaaS business
@@ -260,12 +260,12 @@ function Home() {
 
             <div className={'flex flex-col space-y-2'}>
               <Heading level={1}>
-                Fair pricing for all types of SaaS businesses
+                Fair pricing for all types of businesses
               </Heading>
 
               <Heading
                 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.
               </Heading>
diff --git a/packages/billing/gateway/src/components/line-item-details.tsx b/packages/billing/gateway/src/components/line-item-details.tsx
index 475bff87e..0e3c2973a 100644
--- a/packages/billing/gateway/src/components/line-item-details.tsx
+++ b/packages/billing/gateway/src/components/line-item-details.tsx
@@ -42,7 +42,7 @@ export function LineItemDetails(
           <If condition={item.setupFee}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span>
                   <Trans
@@ -65,7 +65,7 @@ export function LineItemDetails(
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
-                  <PlusSquare className={'w-4'} />
+                  <PlusSquare className={'w-3'} />
 
                   <span>
                     <Trans i18nKey={'billing:basePlan'} />
@@ -95,7 +95,7 @@ export function LineItemDetails(
 
             <If condition={item.tiers?.length}>
               <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>
@@ -118,7 +118,7 @@ export function LineItemDetails(
           <div key={index} className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1.5'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span>
                   <Trans i18nKey={'billing:perTeamMember'} />
@@ -145,7 +145,7 @@ export function LineItemDetails(
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
-                  <PlusSquare className={'w-4'} />
+                  <PlusSquare className={'w-3'} />
 
                   <span className={'flex space-x-1'}>
                     <span>
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 0194ef02e..1dc0b2826 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -51,7 +51,7 @@ export function PricingTable({
   const [interval, setInterval] = useState(intervals[0]!);
 
   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'}>
         {intervals.length ? (
           <PlanIntervalSwitcher
@@ -89,7 +89,6 @@ export function PricingTable({
 
           return (
             <PricingItem
-              className={cn('border')}
               selectable
               key={plan.id}
               plan={plan}
@@ -157,8 +156,8 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
+        `s-full relative flex flex-1 grow flex-col items-stretch justify-between 
+            self-stretch rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
         {
           ['border-primary']: highlighted,
           ['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-4'}>
+        <div className={'flex flex-col space-y-2.5'}>
           <div className={'flex items-center space-x-6'}>
             <b
               className={
@@ -179,20 +191,9 @@ function PricingItem(
                 defaults={props.product.name}
               />
             </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>
 
-          <span className={cn(`text-muted-foreground h-10 text-base`)}>
+          <span className={cn(`text-muted-foreground h-6 text-sm`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}
@@ -282,6 +283,8 @@ function PricingItem(
         </div>
 
         <If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
+          <Separator />
+
           <div className={'flex flex-col space-y-2'}>
             <h6 className={'text-sm font-semibold'}>
               <Trans i18nKey={'billing:detailsLabel'} />
diff --git a/packages/ui/src/shadcn/heading.tsx b/packages/ui/src/shadcn/heading.tsx
index 58807c71e..eca5354a9 100644
--- a/packages/ui/src/shadcn/heading.tsx
+++ b/packages/ui/src/shadcn/heading.tsx
@@ -1,4 +1,4 @@
-import { cn } from '../utils/cn';
+import { cn } from '../utils';
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 
diff --git a/tooling/tailwind/index.ts b/tooling/tailwind/index.ts
index 71faf2ca2..c3d41ff75 100644
--- a/tooling/tailwind/index.ts
+++ b/tooling/tailwind/index.ts
@@ -64,7 +64,7 @@ export default {
       },
       fontFamily: {
         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)'],
       },
       keyframes: {