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 && (

src/components/default/auth/SignInWithMicrosoft.tsx

@@ -38,7 +38,10 @@ export const SignInWithMicrosoft = () => {
   };
 
   return (
-    <form onSubmit={handleSignInWithMicrosoft}>
+    <form
+      onSubmit={handleSignInWithMicrosoft}
+      className='my-4'
+    >
       <SubmitButton
         className='w-full cursor-pointer'
         disabled={isLoading || isSigningIn}
@@ -46,8 +49,8 @@ export const SignInWithMicrosoft = () => {
         type="submit"
       >
         <div className='flex items-center gap-2'>
-          <Image src='/icons/microsoft.png' alt='Microsoft logo' width={20} height={20} />
-          <p>Sign in with Microsoft</p>
+          <Image src='/icons/microsoft.svg' alt='Microsoft logo' width={20} height={20} />
+          <p className='text-[1.0rem]'>Sign in with Microsoft</p>
         </div>
       </SubmitButton>
       {statusMessage && (

src/components/default/navigation/index.tsx

@@ -18,7 +18,7 @@ const Navigation = () => {
       >
         <div className='flex gap-5 items-center font-semibold'>
           <Link className='flex flex-row my-auto gap-2' href='/'>
-            <Image src='/favicon-96x96.png' alt='T3 Logo' width={50} height={50} />
+            <Image src='/favicon.png' alt='T3 Logo' width={50} height={50} />
             <h1 className='my-auto text-2xl'>T3 Supabase Template</h1>
           </Link>
           <div className='flex items-center gap-2'>