Committing because I really need to restart my laptop or something :(

src/components/default/auth/SignInWithApple.tsx

@@ -5,8 +5,21 @@ import { useAuth } from '@/components/context/auth';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import Image from 'next/image';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
 
-export const SignInWithApple = () => {
+type SignInWithAppleProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithApple = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithAppleProps) => {
   const router = useRouter();
   const { isLoading, refreshUserData } = useAuth();
   const [statusMessage, setStatusMessage] = useState('');
@@ -38,8 +51,10 @@ export const SignInWithApple = () => {
   };
 
   return (
-    <form onSubmit={handleSignInWithApple} className='my-4'>
+    <form onSubmit={handleSignInWithApple} className={className}>
       <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
         className='w-full cursor-pointer'
         disabled={isLoading || isSigningIn}
         pendingText='Redirecting...'

src/components/default/auth/SignInWithMicrosoft.tsx

@@ -4,8 +4,21 @@ import { StatusMessage, SubmitButton } from '@/components/default';
 import { useAuth } from '@/components/context/auth';
 import { useState } from 'react';
 import Image from 'next/image';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
 
-export const SignInWithMicrosoft = () => {
+type SignInWithMicrosoftProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithMicrosoft = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithMicrosoftProps) => {
   const { isLoading } = useAuth();
   const [statusMessage, setStatusMessage] = useState('');
   const [isSigningIn, setIsSigningIn] = useState(false);
@@ -32,8 +45,10 @@ export const SignInWithMicrosoft = () => {
   };
 
   return (
-    <form onSubmit={handleSignInWithMicrosoft} className='my-4'>
+    <form onSubmit={handleSignInWithMicrosoft} className={className}>
       <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
         className='w-full cursor-pointer'
         disabled={isLoading || isSigningIn}
         pendingText='Redirecting...'

src/components/default/navigation/auth/AvatarDropdown.tsx

@@ -77,7 +77,7 @@ const AvatarDropdown = () => {
             onClick={handleSignOut}
             className='w-full justify-center cursor-pointer'
           >
-            Log out
+            Sign Out
           </button>
         </DropdownMenuItem>
       </DropdownMenuContent>