Make sign in with apple button look acceptable

public/logos/Apple_logo_black.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000">
+  <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
+</svg>

public/logos/Apple_logo_grey.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="842.32007" height="1000.0001">
+  <path fill="#b3b3b3" d="M824.66636 779.30363c-15.12299 34.93724-33.02368 67.09674-53.7638 96.66374-28.27076 40.3074-51.4182 68.2078-69.25717 83.7012-27.65347 25.4313-57.2822 38.4556-89.00964 39.1963-22.77708 0-50.24539-6.4813-82.21973-19.629-32.07926-13.0861-61.55985-19.5673-88.51583-19.5673-28.27075 0-58.59083 6.4812-91.02193 19.5673-32.48053 13.1477-58.64639 19.9994-78.65196 20.6784-30.42501 1.29623-60.75123-12.0985-91.02193-40.2457-19.32039-16.8514-43.48632-45.7394-72.43607-86.6641-31.060778-43.7024-56.597041-94.37983-76.602609-152.15586C10.740416 658.44309 0 598.01283 0 539.50845c0-67.01648 14.481044-124.8172 43.486336-173.25401C66.28194 327.34823 96.60818 296.6578 134.5638 274.1276c37.95566-22.53016 78.96676-34.01129 123.1321-34.74585 24.16591 0 55.85633 7.47508 95.23784 22.166 39.27042 14.74029 64.48571 22.21538 75.54091 22.21538 8.26518 0 36.27668-8.7405 83.7629-26.16587 44.90607-16.16001 82.80614-22.85118 113.85458-20.21546 84.13326 6.78992 147.34122 39.95559 189.37699 99.70686-75.24463 45.59122-112.46573 109.4473-111.72502 191.36456.67899 63.8067 23.82643 116.90384 69.31888 159.06309 20.61664 19.56727 43.64066 34.69027 69.2571 45.4307-5.55531 16.11062-11.41933 31.54225-17.65372 46.35662zM631.70926 20.0057c0 50.01141-18.27108 96.70693-54.6897 139.92782-43.94932 51.38118-97.10817 81.07162-154.75459 76.38659-.73454-5.99983-1.16045-12.31444-1.16045-18.95003 0-48.01091 20.9006-99.39207 58.01678-141.40314 18.53027-21.27094 42.09746-38.95744 70.67685-53.0663C578.3158 9.00229 605.2903 1.31621 630.65988 0c.74076 6.68575 1.04938 13.37191 1.04938 20.00505z"/>
+</svg>

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;
+}