Make sign in with apple button look acceptable

src/app/page.tsx

@@ -1,10 +1,28 @@
+"use server"
 import Theme_Toggle from "~/components/theme/theme_toggle"
-//import Link from "next/link";
+import { auth } from "~/auth"
+import Sign_In_Apple_Button from "~/components/auth/server/SignInAppleButton"
+import Title from "~/components/home/Title"
 
-export default function HomePage() {
+export default async function HomePage() {
+  const session = await auth();
+  if (!session) {
+    return (
+      <main className="min-h-screen">
+        <div className="w-full justify-end items-end p-3 flex flex-col">
+          <Theme_Toggle />
+        </div>
+        <div className="w-full flex flex-col justify-center items-center">
+          <Title />
+          <Sign_In_Apple_Button />
+        </div>
+      </main>
+    );
+  }
   return (
     <main className="min-h-screen">
       <Theme_Toggle />
+
     </main>
   );
 }

src/components/auth/client/SignInAppleButton.tsx

@@ -0,0 +1,15 @@
+import { signIn } from "next-auth/react"
+import { Button } from "~/components/ui/button"
+import Image from "next/image"
+ 
+export default function Sign_In() {
+  return (
+  <div className="flex flex-row bg-primary py-3 px-10 rounded-xl text-lg font-semibold
+    mt-10 text-background my-auto">
+    <Image src="/logos/Apple_logo_black.svg" alt="Apple logo" width={20} height={20}
+    className="mr-4 my-auto"
+    />
+  <Button onClick={() => signIn("apple")}>Sign in with Apple</Button>
+  </div>
+  );
+}

src/components/auth/client/SignOutButton.tsx

@@ -0,0 +1,6 @@
+import { signOut } from "next-auth/react"
+import { Button } from "~/components/ui/button"
+ 
+export default function Sign_Out() {
+  return <Button onClick={() => signOut()}>Sign Out</Button>
+}

src/components/auth/server/SignInAppleButton.tsx

@@ -0,0 +1,21 @@
+import { signIn } from "~/auth"
+ 
+export default function Sign_In_Apple() {
+  return (
+    <form
+      action={async () => {
+        "use server"
+        await signIn("apple")
+      }}
+    >
+      <div className="flex flex-row bg-primary py-3 px-10 rounded-xl text-lg font-semibold
+            mt-10 text-background my-auto">
+        <div
+          className="apple-logo my-auto"
+          style={{ backgroundImage: 'var(--apple-logo)' }}
+        />
+        <button type="submit">Sign in with Apple</button>
+      </div>
+    </form>
+  )
+}

src/components/auth/server/SignOutButton.tsx

@@ -0,0 +1,14 @@
+import { signOut } from "~/auth"
+ 
+export default function Sign_Out() {
+  return (
+    <form
+      action={async () => {
+        "use server"
+        await signOut()
+      }}
+    >
+      <button type="submit">Sign Out</button>
+    </form>
+  )
+}

src/components/home/Title.tsx

@@ -0,0 +1,8 @@
+export default function Title() {
+  return (
+    <div className="py-2 px-3
+      rounded-xl text-4xl font-semibold mt-10">
+      <h1>Welcome to the Tenant Portal</h1>
+    </div>
+  );
+}

src/components/theme/theme_provider.tsx

@@ -6,8 +6,6 @@ import { type ThemeProviderProps } from "next-themes/dist/types"
 
 export default function Theme_Provider({ children, ...props }: ThemeProviderProps) {
   return (
-    <div className="w-full justify-end items-end p-3 flex flex-col">
-      <NextThemesProvider {...props}>{children}</NextThemesProvider>
-    </div>
+    <NextThemesProvider {...props}>{children}</NextThemesProvider>
   )
 }

src/styles/globals.css

@@ -29,6 +29,7 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --apple-logo: url("/logos/Apple_logo_grey.svg");
   }
 
   .dark {
@@ -56,6 +57,7 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --apple-logo: url("/logos/Apple_logo_black.svg");
   }
 }
 
@@ -67,3 +69,12 @@
     @apply bg-background text-foreground;
   }
 }
+
+.apple-logo {
+  width: 20px;
+  height: 20px;
+  margin-right: 1rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}