Committing to hopefully figure out why photos aren't working in next.js

src/components/default/auth/SignInWithApple.tsx

@@ -38,16 +38,23 @@ export const SignInWithApple = () => {
   };
 
   return (
-    <form onSubmit={handleSignInWithApple}>
+    <form
+      onSubmit={handleSignInWithApple}
+      className='my-4'
+    >
       <SubmitButton
         className='w-full cursor-pointer'
         disabled={isLoading || isSigningIn}
         pendingText='Redirecting...'
         type="submit"
       >
-        <div className='flex items-center gap-3'>
-          <Image src='/icons/apple.png' alt='Apple logo' className='text-white' width={20} height={20} />
-          <p>Sign in with Apple</p>
+        <div className='flex items-center gap-2'>
+          <Image src='/icons/apple.svg'
+            alt='Apple logo'
+            className='invert-75 dark:invert-25'
+            width={22} height={22}
+          />
+          <p className='text-[1.0rem]'>Sign in with Apple</p>
         </div>
       </SubmitButton>
       {statusMessage && (