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/features/auth/src/components/auth-layout.tsx

@@ -2,20 +2,20 @@ export function AuthLayoutShell({
   children,
   Logo,
 }: React.PropsWithChildren<{
-  Logo: React.ComponentType;
+  Logo?: React.ComponentType;
 }>) {
   return (
     <div
       className={
         'flex h-screen flex-col items-center justify-center' +
-        ' dark:lg:bg-background space-y-10 lg:space-y-12 lg:bg-gray-50' +
-        ' animate-in fade-in slide-in-from-top-8 zoom-in-95 duration-1000'
+        ' bg-background lg:bg-muted/30 gap-y-10 lg:gap-y-8' +
+        ' animate-in fade-in slide-in-from-top-16 zoom-in-95 duration-1000'
       }
     >
-      {Logo && <Logo />}
+      {Logo ? <Logo /> : null}
 
       <div
-        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12 dark:shadow`}
+        className={`bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:gap-y-8 xl:py-8`}
       >
         {children}
       </div>

packages/features/auth/src/components/auth-provider-button.tsx

@@ -12,7 +12,7 @@ export function AuthProviderButton({
 }>) {
   return (
     <Button
-      className={'flex w-full space-x-2 text-center'}
+      className={'flex w-full gap-x-3 text-center'}
       data-provider={providerId}
       data-test={'auth-provider-button'}
       variant={'outline'}

packages/features/auth/src/components/password-reset-request-container.tsx

@@ -75,13 +75,7 @@ export function PasswordResetRequestContainer(params: {
             })}
             className={'w-full'}
           >
-            <div className={'flex flex-col space-y-4'}>
-              <div>
-                <p className={'text-muted-foreground text-sm'}>
-                  <Trans i18nKey={'auth:passwordResetSubheading'} />
-                </p>
-              </div>
-
+            <div className={'flex flex-col gap-y-4'}>
               <AuthErrorAlert error={error} />
 
               <FormField

packages/features/auth/src/components/password-sign-in-form.tsx

@@ -43,7 +43,7 @@ export function PasswordSignInForm({
   return (
     <Form {...form}>
       <form
-        className={'w-full space-y-2.5'}
+        className={'flex w-full flex-col gap-y-4'}
         onSubmit={form.handleSubmit(onSubmit)}
       >
         <FormField
@@ -91,17 +91,19 @@ export function PasswordSignInForm({
 
               <FormMessage />
 
-              <Button
-                asChild
-                type={'button'}
-                size={'sm'}
-                variant={'link'}
-                className={'text-xs'}
-              >
-                <Link href={'/auth/password-reset'}>
-                  <Trans i18nKey={'auth:passwordForgottenQuestion'} />
-                </Link>
-              </Button>
+              <div>
+                <Button
+                  asChild
+                  type={'button'}
+                  size={'sm'}
+                  variant={'link'}
+                  className={'text-xs'}
+                >
+                  <Link href={'/auth/password-reset'}>
+                    <Trans i18nKey={'auth:passwordForgottenQuestion'} />
+                  </Link>
+                </Button>
+              </div>
             </FormItem>
           )}
         />

packages/features/auth/src/components/password-sign-up-form.tsx

@@ -55,7 +55,7 @@ export function PasswordSignUpForm({
   return (
     <Form {...form}>
       <form
-        className={'w-full space-y-2.5'}
+        className={'flex w-full flex-col gap-y-4'}
         onSubmit={form.handleSubmit(onSubmit)}
       >
         <FormField

packages/features/auth/src/components/sign-in-methods-container.tsx

@@ -7,6 +7,7 @@ import type { Provider } from '@supabase/supabase-js';
 import { isBrowser } from '@kit/shared/utils';
 import { If } from '@kit/ui/if';
 import { Separator } from '@kit/ui/separator';
+import { Trans } from '@kit/ui/trans';
 
 import { MagicLinkAuthContainer } from './magic-link-auth-container';
 import { OauthProviders } from './oauth-providers';
@@ -63,7 +64,17 @@ export function SignInMethodsContainer(props: {
       </If>
 
       <If condition={props.providers.oAuth.length}>
-        <Separator />
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <Separator />
+          </div>
+
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background text-muted-foreground px-2">
+              <Trans i18nKey="auth:orContinueWith" />
+            </span>
+          </div>
+        </div>
 
         <OauthProviders
           enabledProviders={props.providers.oAuth}

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -55,7 +55,17 @@ export function SignUpMethodsContainer(props: {
       </If>
 
       <If condition={props.providers.oAuth.length}>
-        <Separator />
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <Separator />
+          </div>
+
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background text-muted-foreground px-2">
+              <Trans i18nKey="auth:orContinueWith" />
+            </span>
+          </div>
+        </div>
 
         <OauthProviders
           enabledProviders={props.providers.oAuth}

packages/features/auth/src/components/terms-and-conditions-form-field.tsx

@@ -16,7 +16,7 @@ export function TermsAndConditionsFormField(
         return (
           <FormItem>
             <FormControl>
-              <label className={'flex items-start space-x-2 py-2'}>
+              <label className={'flex items-start gap-x-3 py-2'}>
                 <Checkbox required name={field.name} />
 
                 <div className={'text-xs'}>