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

src/app/(auth-pages)/sign-in/page.tsx

@@ -155,7 +155,12 @@ const Login = () => {
             </SubmitButton>
           </form>
         </Form>
-        <Separator className='my-4' />
+
+        <div className='flex items-center w-full gap-4'>
+          <Separator className='flex-1 bg-accent py-0.5' />
+          <span className='text-sm text-muted-foreground'>or</span>
+          <Separator className='flex-1 bg-accent py-0.5' />
+        </div>
         <SignInWithMicrosoft />
         <SignInWithApple />
       </CardContent>

src/app/(auth-pages)/sign-up/page.tsx

@@ -21,8 +21,13 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  Separator,
 } from '@/components/ui';
 import { useEffect, useState } from 'react';
+import {
+  SignInWithApple,
+  SignInWithMicrosoft
+} from '@/components/default/auth';
 
 const formSchema = z
   .object({
@@ -108,7 +113,7 @@ const SignUp = () => {
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSignUp)}
-            className='flex flex-col mx-auto space-y-4'
+            className='flex flex-col mx-auto space-y-4 mb-4'
           >
             <FormField
               control={form.control}
@@ -191,6 +196,13 @@ const SignUp = () => {
             </SubmitButton>
           </form>
         </Form>
+        <div className='flex items-center w-full gap-4'>
+          <Separator className='flex-1 bg-accent py-0.5' />
+          <span className='text-sm text-muted-foreground'>or</span>
+          <Separator className='flex-1 bg-accent py-0.5' />
+        </div>
+        <SignInWithMicrosoft />
+        <SignInWithApple />
       </CardContent>
     </Card>
   );

src/app/page.tsx

@@ -13,7 +13,11 @@ import {
   CardTitle,
   Separator,
 } from '@/components/ui';
-import { SignInSignUp, SignInWithMicrosoft } from '@/components/default/auth';
+import {
+  SignInSignUp,
+  SignInWithApple,
+  SignInWithMicrosoft
+} from '@/components/default/auth';
 
 const HomePage = async () => {
   const response = await getUser();
@@ -41,7 +45,10 @@ const HomePage = async () => {
                 <span className='text-sm text-muted-foreground'>or</span>
                 <Separator className='flex-1 bg-accent py-0.5' />
               </div>
-              <SignInWithMicrosoft />
+              <div className='flex gap-4'>
+                <SignInWithMicrosoft buttonSize='lg' />
+                <SignInWithApple buttonSize='lg' />
+              </div>
             </CardHeader>
             <Separator className='bg-accent' />
             <CardContent className='flex flex-col px-5 py-2 items-center justify-center'>

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>