I fixed some issues with how we were setting up styles. should be consistent now

src/components/default/auth/buttons/server/sign-in-with-apple.tsx

@@ -1,47 +1,32 @@
 'use server';
 import { signInWithApple } from '@/lib/queries';
-import { SubmitButton } from '@/components/default/forms';
-import Image from 'next/image';
-import { type buttonVariants } from '@/components/ui';
-import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import {
+  SubmitButton,
+  type SubmitButtonProps,
+} from '@/components/default/forms';
 import { SupabaseServer } from '@/utils/supabase';
+import { FaApple } from 'react-icons/fa';
+import { type ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
 
-type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
-type ImageProps = {
-  src: string;
-  alt: string;
-  className?: string;
-  width?: number;
-  height?: number;
-}
-type FormProps = ComponentProps<'form'>;
-type TextProps = ComponentProps<'p'>;
-type SignInWithAppleProps = {
-  buttonProps?: ButtonProps;
-  imageProps?: ImageProps;
-  formProps?: FormProps;
-  textProps?: TextProps;
+export type SignInWithAppleProps = {
+  submitButtonProps?: SubmitButtonProps;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className'>;
+  textClassName?: ComponentProps<'p'>['className'];
+  textProps?: Omit<ComponentProps<'p'>, 'className'>;
+  iconClassName?: ComponentProps<'svg'>['className'];
+  iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
 };
 
 export const SignInWithApple = async ({
-  buttonProps = {
-    className: 'w-full cursor-pointer',
-    type: 'submit',
-  },
-  imageProps = {
-    src: '/icons/auth/apple.svg',
-    alt: 'Apple',
-    className: 'invert-75 dark:invert-25',
-    width: 24,
-    height: 24,
-  },
-  formProps = {
-    className: 'my-4',
-  },
-  textProps = {
-    className: 'text-[1.0rem]',
-  },
+  submitButtonProps,
+  formClassName,
+  formProps,
+  textClassName,
+  textProps,
+  iconClassName,
+  iconProps,
 } : SignInWithAppleProps) => {
   const supabase = await SupabaseServer();
 
@@ -49,28 +34,30 @@ export const SignInWithApple = async ({
     try {
       if (!supabase) throw new Error('Supabase client not found');
       const result = await signInWithApple(supabase);
-      if (result.error) throw new Error(`Error Signing in with Apple: ${result.error.message}`);
-      if (result.data.url) window.location.href = result.data.url;
+      if (result.error)
+        throw new Error(`Error signing in with Microsoft: ${result.error.message}`);
+      else if (result.data.url) window.location.href = result.data.url;
     } catch (error) {
       console.error(error);
     }
   };
 
   return (
-    <form action={handleSignInWithApple} {...formProps}>
+    <form
+      action={handleSignInWithApple}
+      className={cn('my-4', formClassName)}
+      {...formProps}
+    >
       <SubmitButton
         pendingText='Signing in...'
-        {...buttonProps}
+        className={cn('w-full', submitButtonProps?.className)}
+        {...submitButtonProps}
       >
         <div className='flex items-center gap-2'>
-          <Image
-            src={imageProps.src}
-            alt={imageProps.alt}
-            className={imageProps.className}
-            width={imageProps.width}
-            height={imageProps.height}
-          />
-          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
+          <FaApple className={cn('size-5', iconClassName)} {...iconProps} />
+          <p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
+            Sign In with Apple
+          </p>
         </div>
       </SubmitButton>
     </form>