Update UI styling and Spinner component

Several updates have been made to UI components across various packages. Styling changes have been made in 'global-loader.tsx', 'docs-card.tsx', and 'pricing-table.tsx'. The Spinner component in 'spinner.tsx' has been updated to adjust size and animation properties. Addition of a new prop 'spinnerClassName' in 'loading-overlay.tsx' allows dynamic class assignment. The 'loading.tsx' now exports GlobalLoader directly instead of wrapping it in a function. 'pnpm-lock.yaml' has been updated with a new specifier.

apps/web/app/(marketing)/docs/_components/docs-card.tsx

@@ -19,7 +19,7 @@ export function DocsCard({
       <div
         className={`flex grow flex-col space-y-2.5 border bg-background p-6 ${link ? 'rounded-t-2xl border-b-0' : 'rounded-2xl'}`}
       >
-        <h3 className="mt-0 text-lg font-semibold dark:text-white">
+        <h3 className="mt-0 text-lg font-semibold hover:underline dark:text-white">
           <Link href={link.url}>{title}</Link>
         </h3>
 

apps/web/app/(marketing)/loading.tsx

@@ -1,5 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default function Loading() {
+export default GlobalLoader;
-  return <GlobalLoader fullPage />;
-}

packages/billing/gateway/src/components/pricing-table.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { ArrowRight, CheckCircle, Circle } from 'lucide-react';
+import { ArrowRight, CheckCircle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
@@ -347,7 +347,7 @@ function Price({ children }: React.PropsWithChildren) {
 function ListItem({ children }: React.PropsWithChildren) {
   return (
     <li className={'flex items-center space-x-2.5'}>
-      <Circle className={'fill-primary h-2 w-2'} />
+      <CheckCircle className={'text-primary h-4'} />
 
       <span
         className={cn('text-sm', {

packages/ui/src/makerkit/global-loader.tsx

@@ -22,7 +22,7 @@ export function GlobalLoader({
       <If condition={displaySpinner}>
         <div
           className={
-            'flex flex-1 flex-col items-center justify-center py-48 animate-in fade-in zoom-in-50 slide-in-from-bottom-4'
+            'flex flex-1 flex-col items-center justify-center animate-in fade-in zoom-in-50 slide-in-from-bottom-8'
           }
         >
           <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />

packages/ui/src/makerkit/loading-overlay.tsx

@@ -7,8 +7,10 @@ export function LoadingOverlay({
   children,
   className,
   fullPage = true,
+  spinnerClassName,
 }: PropsWithChildren<{
   className?: string;
+  spinnerClassName?: string;
   fullPage?: boolean;
   displayLogo?: boolean;
 }>) {
@@ -23,7 +25,7 @@ export function LoadingOverlay({
         },
       )}
     >
-      <Spinner className={'text-primary'} />
+      <Spinner className={spinnerClassName} />
 
       <div>{children}</div>
     </div>

packages/ui/src/makerkit/spinner.tsx

@@ -10,11 +10,10 @@ export function Spinner(
       <svg
         aria-hidden="true"
         className={cn(
-          `h-8 w-8 animate-spin fill-white text-primary dark:fill-primary dark:text-primary/30`,
+          `h-10 w-10 animate-spin fill-primary-foreground text-primary dark:fill-primary dark:text-primary/30`,
           props.className,
         )}
         viewBox="0 0 100 101"
-        fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path

pnpm-lock.yaml

@@ -1368,6 +1368,8 @@ importers:
         specifier: ^5.4.5
         version: 5.4.5
 
+  tooling/license: {}
+
   tooling/prettier:
     dependencies:
       '@ianvs/prettier-plugin-sort-imports':