From e2112eefeeb934cef908b8e0b9c86f3cb68fe8b5 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 4 Jun 2024 17:17:12 +0700
Subject: [PATCH] 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   | 2 +-
 apps/web/app/(marketing)/loading.tsx                      | 4 +---
 packages/billing/gateway/src/components/pricing-table.tsx | 4 ++--
 packages/ui/src/makerkit/global-loader.tsx                | 2 +-
 packages/ui/src/makerkit/loading-overlay.tsx              | 4 +++-
 packages/ui/src/makerkit/spinner.tsx                      | 3 +--
 pnpm-lock.yaml                                            | 2 ++
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/(marketing)/docs/_components/docs-card.tsx b/apps/web/app/(marketing)/docs/_components/docs-card.tsx
index 1fd5c11cd..3d6548837 100644
--- a/apps/web/app/(marketing)/docs/_components/docs-card.tsx
+++ b/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>
 
diff --git a/apps/web/app/(marketing)/loading.tsx b/apps/web/app/(marketing)/loading.tsx
index 993c48c78..4ea53181d 100644
--- a/apps/web/app/(marketing)/loading.tsx
+++ b/apps/web/app/(marketing)/loading.tsx
@@ -1,5 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default function Loading() {
-  return <GlobalLoader fullPage />;
-}
+export default GlobalLoader;
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index c2928be23..8567a1431 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/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', {
diff --git a/packages/ui/src/makerkit/global-loader.tsx b/packages/ui/src/makerkit/global-loader.tsx
index 6e45f51cf..c15e738dd 100644
--- a/packages/ui/src/makerkit/global-loader.tsx
+++ b/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} />
diff --git a/packages/ui/src/makerkit/loading-overlay.tsx b/packages/ui/src/makerkit/loading-overlay.tsx
index 2465aa70d..c990fc55d 100644
--- a/packages/ui/src/makerkit/loading-overlay.tsx
+++ b/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>
diff --git a/packages/ui/src/makerkit/spinner.tsx b/packages/ui/src/makerkit/spinner.tsx
index c9dafe000..9a824b638 100644
--- a/packages/ui/src/makerkit/spinner.tsx
+++ b/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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f17568fa..9194ed083 100644
--- a/pnpm-lock.yaml
+++ b/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':