From 85ad61c20e7577a3352208c67accfecd151a09ea Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 21:20:13 +0800
Subject: [PATCH] Update styling on pricing table component

The styling of the pricing table component in the billing gateway package has been updated. This includes changing the border style for highlighted items, updating font weight in certain areas, and adjusting font sizes for better readability and consistency across different viewports.
---
 .../gateway/src/components/pricing-table.tsx       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 0f9ea8504..58b876ed2 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -153,10 +153,10 @@ function PricingItem(
       className={cn(
         props.className,
         `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg p-8 ring-2 lg:w-4/12 xl:max-w-[20rem]`,
+            rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
         {
-          ['ring-primary']: highlighted,
-          ['dark:shadow-primary/30 shadow-none ring-transparent dark:shadow-sm']:
+          ['border-primary']: highlighted,
+          ['dark:shadow-primary/40 border-transparent shadow dark:shadow-sm']:
             !highlighted,
         },
       )}
@@ -167,7 +167,7 @@ function PricingItem(
             <Heading level={5}>
               <b
                 className={
-                  'text-current-foreground font-heading font-medium uppercase'
+                  'text-current-foreground font-heading font-semibold uppercase'
                 }
               >
                 <Trans
@@ -324,7 +324,11 @@ function Price({ children }: React.PropsWithChildren) {
     <div
       className={`animate-in slide-in-from-left-4 fade-in items-center duration-500`}
     >
-      <span className={'flex items-center text-2xl font-bold lg:text-3xl'}>
+      <span
+        className={
+          'font-heading flex items-center text-3xl font-bold lg:text-4xl'
+        }
+      >
         {children}
       </span>
     </div>