From d8d6aa8f92fbcbcf93cb61870d6dbe98ac16f993 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 21:13:27 +0800
Subject: [PATCH] Update UI component styles and structure

Several modifications have been made to the styles and structure of the Loading, Docs Navigation, and Pricing Table components. For Loading component, GlobalLoader is now wrapped in a function. Visual changes were also made to the Docs Navigation buttons and the Pricing Table elements layout and text styles, to improve the overall look and feel of the interfaces.
---
 .../app/(marketing)/docs/_components/docs-navigation.tsx  | 5 ++---
 apps/web/app/(marketing)/loading.tsx                      | 4 +++-
 packages/billing/gateway/src/components/pricing-table.tsx | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
index ac3570bf4..57d1f0195 100644
--- a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
@@ -26,11 +26,10 @@ const DocsNavLink: React.FC<{
 
   return (
     <Button
-      className={cn('w-full', {
-        ['font-semibold']: isFirstLevel,
+      className={cn('w-full shadow-none', {
+        ['font-normal']: !isFirstLevel,
       })}
       variant={isCurrent ? 'secondary' : 'ghost'}
-      size={isFirstLevel ? 'default' : 'sm'}
     >
       <Link
         className="flex h-full max-w-full grow items-center space-x-2"
diff --git a/apps/web/app/(marketing)/loading.tsx b/apps/web/app/(marketing)/loading.tsx
index 4ea53181d..993c48c78 100644
--- a/apps/web/app/(marketing)/loading.tsx
+++ b/apps/web/app/(marketing)/loading.tsx
@@ -1,3 +1,5 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default GlobalLoader;
+export default function Loading() {
+  return <GlobalLoader fullPage />;
+}
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 23a10d305..0f9ea8504 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -161,13 +161,13 @@ function PricingItem(
         },
       )}
     >
-      <div className={'flex flex-col space-y-8'}>
+      <div className={'flex flex-col space-y-6'}>
         <div className={'flex flex-col space-y-4'}>
           <div className={'flex items-center space-x-4'}>
             <Heading level={5}>
               <b
                 className={
-                  'text-current-foreground font-heading font-normal uppercase'
+                  'text-current-foreground font-heading font-medium uppercase'
                 }
               >
                 <Trans
@@ -178,7 +178,7 @@ function PricingItem(
             </Heading>
 
             <If condition={props.product.badge}>
-              <Badge variant={'outline'}>
+              <Badge variant={highlighted ? 'default' : 'outline'}>
                 <If condition={highlighted}>
                   <Sparkles className={'h-3'} />
                 </If>
@@ -193,7 +193,7 @@ function PricingItem(
             </If>
           </div>
 
-          <span className={cn(`text-muted-foreground h-10 text-base`)}>
+          <span className={cn(`text-muted-foreground h-8 text-base`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}