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.

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"

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 />;
+}

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}