From f58d2e364fc08a98bdefd8d4f498b4a3ccc5c8bc Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 19 Apr 2024 00:04:37 +0800
Subject: [PATCH] Update UI elements and refine billing schema

Several changes were made to improve UI consistency across various components. Styling updates and enhancements were applied to elements including but not limited to, the SiteHeader, SiteNavigationItem, and ModeToggle components. Additionally, a refinement was made to the billing schema to enforce only having one per-seat and one flat line item per plan.
---
 .../_components/site-header-account-section.tsx  | 16 +++++++---------
 .../app/(marketing)/_components/site-header.tsx  |  2 +-
 .../_components/site-navigation-item.tsx         |  5 +++--
 .../billing/core/src/create-billing-schema.ts    | 14 +++++++++++++-
 packages/ui/src/makerkit/mode-toggle.tsx         |  8 ++++----
 5 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 4cb3e23bb..b36890140 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -63,26 +63,24 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 }
 
 function AuthButtons() {
+  const textClassName =
+    'text-gray-600 hover:text-current dark:text-gray-400 dark:hover:text-white';
+
   return (
     <div className={'flex space-x-2'}>
       <div className={'hidden space-x-0.5 md:flex'}>
-        <ModeToggle />
+        <ModeToggle className={textClassName} />
 
         <Link href={pathsConfig.auth.signIn}>
-          <Button variant={'link'}>
+          <Button variant={'ghost'} className={textClassName}>
             <Trans i18nKey={'auth:signIn'} />
           </Button>
         </Link>
       </div>
 
       <Link href={pathsConfig.auth.signUp}>
-        <Button
-          variant={'ghost'}
-          className={
-            'border border-primary hover:bg-primary hover:text-primary-foreground'
-          }
-        >
-          <Trans i18nKey={'auth:getStarted'} />
+        <Button variant={'default'}>
+          <Trans i18nKey={'auth:signUp'} />
           <ChevronRight className={'h-4'} />
         </Button>
       </Link>
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 7cb85c34b..227550655 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -9,7 +9,7 @@ export function SiteHeader(props: { user?: User | null }) {
   return (
     <div
       className={
-        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/20'
+        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/10'
       }
     >
       <div className={'px-4 lg:px-8'}>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 67bca5bbb..c93492a08 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -10,9 +10,10 @@ const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
   return cn(
-    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors`,
+    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-200`,
     {
-      'hover:border-border': !isActive,
+      'hover:border-border active:dark:bg-secondary active:bg-gray-50 dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
+        !isActive,
       'dark:bg-secondary bg-gray-50': isActive,
     },
   );
diff --git a/packages/billing/core/src/create-billing-schema.ts b/packages/billing/core/src/create-billing-schema.ts
index d811ca4da..20eb882cf 100644
--- a/packages/billing/core/src/create-billing-schema.ts
+++ b/packages/billing/core/src/create-billing-schema.ts
@@ -80,7 +80,19 @@ export const PlanSchema = z
       })
       .min(1),
     interval: BillingIntervalSchema.optional(),
-    lineItems: z.array(LineItemSchema),
+    lineItems: z.array(LineItemSchema).refine(
+      (schema) => {
+        const types = schema.map((item) => item.type);
+        const perSeat = types.filter((type) => type === 'per-seat').length;
+        const flat = types.filter((type) => type === 'flat').length;
+
+        return perSeat <= 1 && flat <= 1;
+      },
+      {
+        message: 'Plans can only have one per-seat and one flat line item',
+        path: ['lineItems'],
+      },
+    ),
     trialDays: z
       .number({
         description:
diff --git a/packages/ui/src/makerkit/mode-toggle.tsx b/packages/ui/src/makerkit/mode-toggle.tsx
index 129742857..d8057a685 100644
--- a/packages/ui/src/makerkit/mode-toggle.tsx
+++ b/packages/ui/src/makerkit/mode-toggle.tsx
@@ -20,7 +20,7 @@ import { Trans } from './trans';
 
 const MODES = ['light', 'dark', 'system'];
 
-export function ModeToggle() {
+export function ModeToggle(props: { className?: string }) {
   const { setTheme, theme } = useTheme();
 
   const Items = useMemo(() => {
@@ -51,9 +51,9 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="rounded-full">
-          <Sun className="h-[1rem] w-[1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1rem] w-[1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button variant="ghost" size="icon" className={props.className}>
+          <Sun className="h-[0.9rem] w-[0.9rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[0.9rem] w-[0.9rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>