Tailwind CSS 4 Migration (#100)

* Updated to TailwindCSS v4
* Moved CSS module to its own CSS file because of lightingcss strict validation
* Respect next parameter in middleware
* Updated all packages. 
* Split CSSs for better organization.
* Redesigned theme and auth pages
* Improved pill and header design
* Formatted files using Prettier
* Better footer layout
* Better auth layout
* Bump version of the repository to 2.0.0

packages/billing/gateway/src/components/current-lifetime-order-card.tsx

@@ -61,9 +61,9 @@ export function CurrentLifetimeOrderCard({
         </CardDescription>
       </CardHeader>
 
-      <CardContent className={'space-y-3 text-sm'}>
+      <CardContent className={'gap-y-4 text-sm'}>
         <div className={'flex flex-col space-y-1'}>
-          <div className={'flex items-center space-x-2 text-lg font-semibold'}>
+          <div className={'flex items-center gap-x-3 text-lg font-semibold'}>
             <BadgeCheck
               className={
                 's-6 fill-green-500 text-white dark:fill-white dark:text-black'
@@ -77,7 +77,7 @@ export function CurrentLifetimeOrderCard({
         </div>
 
         <div>
-          <div className="flex flex-col space-y-0.5">
+          <div className="flex flex-col gap-y-1">
             <span className="font-semibold">
               <Trans i18nKey="billing:detailsLabel" />
             </span>

packages/billing/gateway/src/components/current-subscription-card.tsx

@@ -67,7 +67,7 @@ export function CurrentSubscriptionCard({
 
       <CardContent className={'space-y-4 border-t pt-4 text-sm'}>
         <div className={'flex flex-col space-y-1'}>
-          <div className={'flex items-center space-x-2 text-lg font-semibold'}>
+          <div className={'flex items-center gap-x-3 text-lg font-semibold'}>
             <BadgeCheck
               className={
                 's-6 fill-green-500 text-white dark:fill-white dark:text-black'
@@ -102,7 +102,7 @@ export function CurrentSubscriptionCard({
         </If>
 
         <If condition={subscription.status === 'trialing'}>
-          <div className="flex flex-col space-y-0.5">
+          <div className="flex flex-col gap-y-1">
             <span className="font-semibold">
               <Trans i18nKey="billing:trialEndsOn" />
             </span>
@@ -132,7 +132,7 @@ export function CurrentSubscriptionCard({
           </Alert>
         </If>
 
-        <div className="flex flex-col space-y-0.5">
+        <div className="flex flex-col gap-y-1">
           <span className="font-semibold">
             <Trans i18nKey="billing:detailsLabel" />
           </span>

packages/billing/gateway/src/components/line-item-details.tsx

@@ -110,7 +110,7 @@ export function LineItemDetails(
               <span className={'flex items-center space-x-1.5'}>
                 <PlusSquare className={'w-3'} />
 
-                <span className={'flex space-x-1 text-sm'}>
+                <span className={'flex gap-x-2 text-sm'}>
                   <span>
                     <Trans
                       i18nKey={'billing:perUnit'}
@@ -243,7 +243,7 @@ function Tiers({
 
     return (
       <span
-        className={'text-secondary-foreground flex space-x-1 text-xs'}
+        className={'text-secondary-foreground flex gap-x-2 text-xs'}
         key={index}
       >
         <span>-</span>

packages/billing/gateway/src/components/plan-picker.tsx

@@ -113,12 +113,10 @@ export function PlanPicker(
   return (
     <Form {...form}>
       <div
-        className={
-          'flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0'
-        }
+        className={'flex flex-col gap-y-4 lg:flex-row lg:gap-x-4 lg:gap-y-0'}
       >
         <form
-          className={'flex w-full max-w-xl flex-col space-y-4'}
+          className={'flex w-full max-w-xl flex-col gap-y-8'}
           onSubmit={form.handleSubmit(props.onSubmit)}
         >
           <If condition={intervals.length}>
@@ -131,7 +129,7 @@ export function PlanPicker(
                 name={'interval'}
                 render={({ field }) => {
                   return (
-                    <FormItem className={'rounded-md border p-4'}>
+                    <FormItem className={'flex flex-col gap-4'}>
                       <FormLabel htmlFor={'plan-picker-id'}>
                         <Trans i18nKey={'common:billingInterval.label'} />
                       </FormLabel>
@@ -147,10 +145,11 @@ export function PlanPicker(
                                   htmlFor={interval}
                                   key={interval}
                                   className={cn(
-                                    'flex items-center space-x-2 rounded-md border border-transparent px-4 py-2 transition-colors',
+                                    'focus-within:border-primary flex items-center gap-x-2.5 rounded-md border px-2.5 py-2 transition-colors',
                                     {
-                                      ['border-primary']: selected,
-                                      ['hover:border-primary']: !selected,
+                                      ['bg-muted border-input']: selected,
+                                      ['hover:border-input border-transparent']:
+                                        !selected,
                                     },
                                   )}
                                 >
@@ -207,7 +206,7 @@ export function PlanPicker(
           <FormField
             name={'planId'}
             render={({ field }) => (
-              <FormItem>
+              <FormItem className={'flex flex-col gap-4'}>
                 <FormLabel>
                   <Trans i18nKey={'common:planPickerLabel'} />
                 </FormLabel>
@@ -259,7 +258,9 @@ export function PlanPicker(
                         primaryLineItem.tiers[0],
                       );
 
-                      const tierTranslationKey = isMultiTier ? 'billing:startingAtPriceUnit' : 'billing:priceUnit';
+                      const tierTranslationKey = isMultiTier
+                        ? 'billing:startingAtPriceUnit'
+                        : 'billing:priceUnit';
 
                       return (
                         <RadioGroupItemLabel
@@ -288,7 +289,7 @@ export function PlanPicker(
 
                           <div
                             className={
-                              'flex w-full flex-col content-center space-y-2 lg:flex-row lg:items-center lg:justify-between lg:space-y-0'
+                              'flex w-full flex-col content-center gap-y-3 lg:flex-row lg:items-center lg:justify-between lg:space-y-0'
                             }
                           >
                             <Label
@@ -336,7 +337,7 @@ export function PlanPicker(
 
                             <div
                               className={
-                                'flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
+                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
                               }
                             >
                               <div>
@@ -517,7 +518,7 @@ function PlanDetails({
 
         {selectedProduct.features.map((item) => {
           return (
-            <div key={item} className={'flex items-center space-x-1 text-sm'}>
+            <div key={item} className={'flex items-center gap-x-2 text-sm'}>
               <CheckCircle className={'h-4 text-green-500'} />
 
               <span className={'text-secondary-foreground'}>

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

@@ -168,7 +168,7 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded-xl border p-8 lg:w-4/12 xl:max-w-[20rem]`,
+        `s-full relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
         {
           ['border-primary']: highlighted,
           ['border-border']: !highlighted,
@@ -230,7 +230,7 @@ function PricingItem(
           <If condition={props.plan.name}>
             <span
               className={cn(
-                `animate-in slide-in-from-left-4 fade-in text-muted-foreground flex items-center space-x-0.5 text-sm capitalize`,
+                `animate-in slide-in-from-left-4 fade-in text-muted-foreground flex items-center gap-x-1 text-sm capitalize`,
               )}
             >
               <span>
@@ -397,7 +397,7 @@ function PlanIntervalSwitcher(
         const selected = plan === props.interval;
 
         const className = cn(
-          'animate-in fade-in rounded-full !outline-none transition-all focus:!ring-0',
+          'animate-in fade-in !outline-hidden rounded-full transition-all focus:!ring-0',
           {
             'border-r-transparent': index === 0,
             ['hover:text-primary text-muted-foreground']: !selected,
@@ -472,7 +472,7 @@ function DefaultCheckoutButton(
     <Link className={'w-full'} href={linkHref}>
       <Button
         size={'lg'}
-        className={'border-primary w-full rounded-lg border'}
+        className={'w-full rounded-lg border'}
         variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>