From b6f1ba6e681c42ae0624f1213b122c4dd3c5484e Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 5 Apr 2024 12:10:29 +0800
Subject: [PATCH] Update UI and layout of PricingTable component

Separated billing schema from UI concerns and enhanced visuals of PricingTable for better user experience. This included restructuring the data display layout, refining text color and size for better readability, and implementing a new Separator component for improved aesthetics.
---
 .../gateway/src/components/pricing-table.tsx      | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index b2727d55b..291ae6b95 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -12,6 +12,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
@@ -172,7 +173,7 @@ function PricingItem(
             </If>
           </div>
 
-          <span className={cn(`text-muted-foreground`)}>
+          <span className={cn(`text-muted-foreground text-sm`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}
@@ -180,19 +181,13 @@ function PricingItem(
           </span>
         </div>
 
-        <div className={'flex items-center space-x-1'}>
+        <div className={'flex flex-col space-y-1'}>
           <Price>
             {formatCurrency(props.product.currency, props.baseLineItem.cost)}
           </Price>
 
           <If condition={props.plan.name}>
-            <span
-              className={cn(
-                `text-muted-foreground flex items-center space-x-1 text-base lowercase`,
-              )}
-            >
-              <span>/</span>
-
+            <span className={cn(`text-muted-foreground capitalize`)}>
               <span className={'text-sm'}>
                 <If
                   condition={props.plan.interval}
@@ -280,7 +275,7 @@ function ListItem({ children }: React.PropsWithChildren) {
         <CheckCircle className={'h-4 text-green-600'} />
       </div>
 
-      <span className={'text-secondary-foreground text-sm'}>{children}</span>
+      <span className={'text-muted-foreground text-sm'}>{children}</span>
     </li>
   );
 }