Make sign in with apple button look acceptable

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>
   )
 }