2.21.5 (#417)

* refactor: streamline sign-in and sign-up methods containers for improved conditional rendering

- Updated SignInMethodsContainer and SignUpMethodsContainer to conditionally render the separator and "or continue with" text only when applicable authentication methods are available.
- Enhanced code readability by removing redundant div elements and improving the structure of conditional rendering.

* refactor: enhance UI components with improved styling and structure

- Updated PlanIntervalSwitcher to include hover effects and adjusted button size for better user interaction.
- Refined PersonalAccountDropdown by removing unnecessary animation classes for cleaner code.
- Modified Footer component to standardize padding across different screen sizes.
- Adjusted Pill component's height and padding for a more consistent appearance.

* refactor: enhance admin members and memberships tables with date rendering and sorting adjustments

- Removed User ID column from both AdminMembersTable and AdminMembershipsTable for a cleaner interface.
- Added date rendering functionality for Created At and Updated At columns, displaying time in a user-friendly format.
- Disabled sorting for Name, Email, Role, Created At, and Updated At columns to improve usability.

* fix: update account linking messages and redirect logic

- Changed the success message for account linking to indicate that a request has been sent and to prompt the user to wait.
- Added a redirect path to the PersonalAccountSettingsContainer for improved navigation after account linking.
- Removed the unused useUnlinkIdentity hook to clean up the codebase.

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

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

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

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