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/accounts/src/components/account-selector.tsx

@@ -111,7 +111,12 @@ export function AccountSelector({
             <If
               condition={selected}
               fallback={
-                <span className={'flex max-w-full items-center space-x-4'}>
+                <span
+                  className={cn('flex max-w-full items-center', {
+                    'justify-center gap-x-0': collapsed,
+                    'gap-x-4': !collapsed,
+                  })}
+                >
                   <PersonalAccountAvatar />
 
                   <span
@@ -125,12 +130,17 @@ export function AccountSelector({
               }
             >
               {(account) => (
-                <span className={'flex max-w-full items-center space-x-4'}>
-                  <Avatar className={'h-6 w-6 rounded-sm'}>
+                <span
+                  className={cn('flex max-w-full items-center', {
+                    'justify-center gap-x-0': collapsed,
+                    'gap-x-4': !collapsed,
+                  })}
+                >
+                  <Avatar className={'rounded-xs h-6 w-6'}>
                     <AvatarImage src={account.image ?? undefined} />
 
                     <AvatarFallback
-                      className={'group-hover:bg-background rounded-sm'}
+                      className={'group-hover:bg-background rounded-xs'}
                     >
                       {account.label ? account.label[0] : ''}
                     </AvatarFallback>
@@ -212,11 +222,11 @@ export function AccountSelector({
                       }}
                     >
                       <div className={'flex items-center'}>
-                        <Avatar className={'mr-2 h-6 w-6 rounded-sm'}>
+                        <Avatar className={'rounded-xs mr-2 h-6 w-6'}>
                           <AvatarImage src={account.image ?? undefined} />
 
                           <AvatarFallback
-                            className={cn('rounded-sm', {
+                            className={cn('rounded-xs', {
                               ['bg-background']: value === account.value,
                               ['group-hover:bg-background']:
                                 value !== account.value,
@@ -276,7 +286,7 @@ export function AccountSelector({
 
 function UserAvatar(props: { pictureUrl?: string }) {
   return (
-    <Avatar className={'h-6 w-6 rounded-sm'}>
+    <Avatar className={'rounded-xs h-6 w-6'}>
       <AvatarImage src={props.pictureUrl} />
     </Avatar>
   );

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -88,7 +88,7 @@ export function PersonalAccountDropdown({
           'animate-in fade-in focus:outline-primary flex cursor-pointer items-center duration-500 group-data-[minimized=true]:px-0',
           className ?? '',
           {
-            ['active:bg-secondary/50 items-center space-x-4 rounded-md' +
+            ['active:bg-secondary/50 items-center gap-4 rounded-md' +
             ' hover:bg-secondary p-2 transition-colors']: showProfileName,
           },
         )}
@@ -129,8 +129,8 @@ export function PersonalAccountDropdown({
         </If>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className={'xl:!min-w-[15rem]'}>
-        <DropdownMenuItem className={'!h-10 rounded-none'}>
+      <DropdownMenuContent className={'xl:min-w-[15rem]!'}>
+        <DropdownMenuItem className={'h-10! rounded-none'}>
           <div
             className={'flex flex-col justify-start truncate text-left text-xs'}
           >