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

2025-06-04 23:16:12 -05:00
parent f51e78ed2f
commit 3e0c23054a
12 changed files with 80 additions and 23 deletions
--- a/src/app/(auth-pages)/profile/page.tsx
+++ b/src/app/(auth-pages)/profile/page.tsx
@@ -81,7 +81,7 @@ const ProfilePage = () => {
  }

  return (
-    <div className='max-w-3xl min-w-sm md:min-w-lg mx-auto p-4'>
+    <div className='max-w-2xl min-w-sm mx-auto p-4'>
      <Card className='mb-8'>
        <CardHeader className='pb-2'>
          <CardTitle className='text-2xl'>Your Profile</CardTitle>
--- a/src/app/(auth-pages)/sign-in/page.tsx
+++ b/src/app/(auth-pages)/sign-in/page.tsx
@@ -80,10 +80,10 @@ const Login = () => {
  return (
    <Card className='min-w-xs md:min-w-sm'>
      <CardHeader>
-        <CardTitle className='text-2xl font-medium'>
+        <CardTitle className='text-3xl font-medium'>
          Sign In
        </CardTitle>
-        <CardDescription className='text-sm text-foreground'>
+        <CardDescription className='text-foreground'>
          Don&apos;t have an account?{' '}
          <Link className='font-medium underline' href='/sign-up'>
            Sign up
@@ -101,7 +101,7 @@ const Login = () => {
              name='email'
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>Email</FormLabel>
+                  <FormLabel className='text-lg'>Email</FormLabel>
                  <FormControl>
                    <Input type='email' placeholder='you@example.com' {...field} />
                  </FormControl>
@@ -116,7 +116,7 @@ const Login = () => {
              render={({ field }) => (
                <FormItem>
                  <div className='flex justify-between'>
-                    <FormLabel>Password</FormLabel>
+                    <FormLabel className='text-lg'>Password</FormLabel>
                    <Link
                      className='text-xs text-foreground underline text-right'
                      href='/forgot-password'
@@ -142,6 +142,7 @@ const Login = () => {
            <SubmitButton
              disabled={isLoading}
              pendingText='Signing In...'
+              className='text-[1.0rem] cursor-pointer'
            >
              Sign in
            </SubmitButton>
@@ -149,7 +150,6 @@ const Login = () => {
        </Form>
        <Separator className='my-4' />
        <SignInWithMicrosoft />
-        <Separator className='my-4' />
        <SignInWithApple />
      </CardContent>
    </Card>
--- a/src/app/(auth-pages)/sign-up/page.tsx
+++ b/src/app/(auth-pages)/sign-up/page.tsx
@@ -97,10 +97,10 @@ const SignUp = () => {
  return (
    <Card className='min-w-xs md:min-w-sm'>
      <CardHeader>
-        <CardTitle className='text-2xl font-medium'>
+        <CardTitle className='text-3xl font-medium'>
          Sign Up
        </CardTitle>
-        <CardDescription className='text text-foreground'>
+        <CardDescription className='text-foreground'>
          Already have an account?{' '}
          <Link className='text-primary font-medium underline' href='/sign-in'>
            Sign in
@@ -115,7 +115,7 @@ const SignUp = () => {
              name='name'
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel className='text-lg'>Name</FormLabel>
                  <FormControl>
                    <Input type='text' placeholder='Full Name' {...field} />
                  </FormControl>
@@ -127,7 +127,7 @@ const SignUp = () => {
              name='email'
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>Email</FormLabel>
+                  <FormLabel className='text-lg'>Email</FormLabel>
                  <FormControl>
                    <Input type='email' placeholder='you@example.com' {...field} />
                  </FormControl>
@@ -140,7 +140,7 @@ const SignUp = () => {
              name='password'
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>Password</FormLabel>
+                  <FormLabel className='text-lg'>Password</FormLabel>
                  <FormControl>
                    <Input type='password' placeholder='Your password' {...field} />
                  </FormControl>
@@ -153,7 +153,7 @@ const SignUp = () => {
              name='confirmPassword'
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>Confirm Password</FormLabel>
+                  <FormLabel className='text-lg'>Confirm Password</FormLabel>
                  <FormControl>
                    <Input type='password' placeholder='Confirm password' {...field} />
                  </FormControl>
@@ -170,10 +170,11 @@ const SignUp = () => {
                : <StatusMessage message={{ success: statusMessage }} />
            )}
            <SubmitButton
+              className='text-[1.0rem] cursor-pointer'
              disabled={isLoading}
              pendingText='Signing Up...'
            >
-              Sign up
+              Sign Up
            </SubmitButton>
          </form>
        </Form>
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -42,7 +42,7 @@ export const metadata: Metadata = {
      { url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
      { url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16'},
      { url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32'},
-      { url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96'},
+      { url: '/favicon.png', type: 'image/png', sizes: '96x96'},
      { url: '/favicon.ico', type: 'image/x-icon', sizes: 'any', media: '(prefers-color-scheme: dark)' },
      { url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16', media: '(prefers-color-scheme: dark)' },
      { url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32', media: '(prefers-color-scheme: dark)' },
--- a/src/components/default/auth/SignInWithApple.tsx
+++ b/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 && (
--- a/src/components/default/auth/SignInWithMicrosoft.tsx
+++ b/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 && (
--- a/src/components/default/navigation/index.tsx
+++ b/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'>
--- a/src/lib/hooks/auth.ts
+++ b/src/lib/hooks/auth.ts
@@ -60,6 +60,31 @@ export const signIn = async (
  }
 };

+
+export const signInWithMicrosoft = async (): Promise<Result<string>> => {
+  const supabase = createClient();
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'azure',
+    options: {
+      scopes: 'openid, profile email offline_access',
+    }
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url};
+};
+
+export const signInWithApple = async (): Promise<Result<string>> => {
+  const supabase = createClient();
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'apple',
+    options: {
+      scopes: 'openid, profile email offline_access',
+    }
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url};
+};
+
 export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
  const email = formData.get('email') as string;
  const supabase = createClient();