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/team-accounts/src/components/members/invite-members-dialog-container.tsx

@@ -138,7 +138,7 @@ function InviteMembersForm({
         data-test={'invite-members-form'}
         onSubmit={form.handleSubmit(onSubmit)}
       >
-        <div className="flex flex-col space-y-4">
+        <div className="flex flex-col gap-y-4">
           {fieldArray.fields.map((field, index) => {
             const isFirst = index === 0;
 
@@ -147,7 +147,7 @@ function InviteMembersForm({
 
             return (
               <div data-test={'invite-member-form-item'} key={field.id}>
-                <div className={'flex items-end space-x-0.5 md:space-x-2'}>
+                <div className={'flex items-end gap-x-1 md:space-x-2'}>
                   <div className={'w-7/12'}>
                     <FormField
                       name={emailInputName}
@@ -189,6 +189,7 @@ function InviteMembersForm({
 
                             <FormControl>
                               <MembershipRoleSelector
+                                triggerClassName={'m-0'}
                                 roles={roles}
                                 value={field.value}
                                 onChange={(role) => {
@@ -204,7 +205,7 @@ function InviteMembersForm({
                     />
                   </div>
 
-                  <div className={'flex w-[40px] justify-end'}>
+                  <div className={'flex w-[40px] items-end justify-end'}>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>

packages/features/team-accounts/src/components/members/membership-role-selector.tsx

@@ -14,15 +14,20 @@ export function MembershipRoleSelector({
   value,
   currentUserRole,
   onChange,
+  triggerClassName,
 }: {
   roles: Role[];
   value: Role;
   currentUserRole?: Role;
   onChange: (role: Role) => unknown;
+  triggerClassName?: string;
 }) {
   return (
     <Select value={value} onValueChange={onChange}>
-      <SelectTrigger data-test={'role-selector-trigger'}>
+      <SelectTrigger
+        className={triggerClassName}
+        data-test={'role-selector-trigger'}
+      >
         <SelectValue />
       </SelectTrigger>