More front-end stuff

src/components/auth/No_Session.tsx

@@ -1,10 +1,14 @@
-import Sign_In from "./Sign_In";
+import Sign_In from "~/components/auth/Sign_In";
+import TT_Header from "~/components/ui/TT_Header";
 
 export default function No_Session() {
   return (
-    <div className="w-2/3 mx-auto text-center pt-10">
-      <h1 className="text-2xl font-semibold">Unauthorized. Please sign in first.</h1>
-      < Sign_In />
+    <main className="w-full min-h-screen mx-auto text-center pt-10
+      bg-gradient-to-b from-[#111111] to-[#212325]">
+      <div className="pt-8 pb-4">
+        <TT_Header />
       </div>
+      < Sign_In />
+    </main>
   );
 };

src/components/auth/Sign_In.tsx

@@ -1,13 +1,21 @@
+import Image from "next/image";
 import { signIn } from "~/auth";
 
 export default async function Sign_In() {
   return (
-    <form className="w-full"
+    <form className="items-center justify-center mx-auto"
       action={async () => {
         "use server";
         await signIn("microsoft-entra-id");
       }}>
-      <button type="submit" className="w-full">Sign In</button>
+      <button type="submit" className="flex flex-row mx-auto
+        bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl px-4 py-3 md:text-2xl
+        sm:text-xl font-semibold text-white hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]">
+        <Image src="/images/microsoft_logo.png" alt="Microsoft" width={35} height={35}
+          className="mr-2"
+        />
+        <h1 className="text-2xl my-auto font-semibold">Sign In</h1>
+      </button>
     </form>
   );
 }