Front end stuff for mobile & page when not signed in.

src/components/auth/No_Session.tsx

@@ -1,14 +1,38 @@
+import Link from "next/link";
+import Image from "next/image";
 import Sign_In from "~/components/auth/Sign_In";
 import TT_Header from "~/components/ui/TT_Header";
 
 export default function No_Session() {
   return (
-    <main className="w-full min-h-screen mx-auto text-center pt-10
+    <main className="w-full min-h-screen mx-auto text-center pt-2 md:pt-10
       bg-gradient-to-b from-[#111111] to-[#212325]">
-      <div className="pt-8 pb-4">
+      <div className="w-2/3 pt-4 pb-2 md:pt-8 md:pb-4 m-auto">
         <TT_Header />
       </div>
       < Sign_In />
+      <div className="w-5/6 mx-auto flex flex-col">
+        <h3 className="text-center text-[16px] md:text-lg italic pt-4">
+          You must have a Gulfport Microsoft 365 Account to sign in.
+        </h3>
+        <Link href="https://authjs.dev/getting-started/providers/microsoft-entra-id"
+          className="text-center text-[16px] md:text-lg italic pt-4 pb-4 text-sky-200
+          hover:text-sky-300"
+        >
+          Tech Tracker uses Auth.js and Microsoft Entra ID for Authentication
+        </Link>
+        <Link href="https://git.gibbyb.com/gib/Tech_Tracker_Web"
+          className="text-center text-[16px] md:text-lg px-4 py-2 md:py-2.5 font-semibold
+          bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl hover:text-sky-200 
+          hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]
+          mx-auto flex flex-row mt-4"
+        >
+          <Image src="/images/gitea_logo.svg" alt="Gitea" width={35} height={35}
+            className="mr-2"
+          />
+          <h3 className="my-auto">View Source Code</h3>
+        </Link>
+    </div>
     </main>
   );
 };

src/components/auth/Sign_In.tsx

@@ -9,12 +9,12 @@ export default async function Sign_In() {
         await signIn("microsoft-entra-id");
       }}>
       <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]">
+        bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl px-4 py-2 md:py-2.5
+        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>
+        <h1 className="md:text-2xl my-auto font-semibold">Sign In</h1>
       </button>
     </form>
   );

src/components/auth/Sign_Out.tsx

@@ -10,15 +10,21 @@ export default async function Sign_Out() {
     // Add User profile picture next to Sign Out button
     const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
     return (
-      <form className="w-full flex flex-row pt-4 pr-8"
+      <form className="w-full flex flex-row pt-2 pr-0 md:pt-4 md:pr-8"
         action={async () => {
           "use server"
           await signOut()
         }}>
         <Image src={pfp} alt="" width={35} height={35}
-          className="rounded-full border-2 border-white m-auto mr-4"
+          className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
+          max-w-[25px] md:max-w-[35px]"
         />
-        <button type="submit" className="w-full">Sign Out</button>
+        <button type="submit" className="w-full p-2 rounded-xl text-sm md:text-lg
+          bg-gradient-to-tl from-[#35363F] to=[#24191A]
+          hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]"
+        >
+          Sign Out
+        </button>
       </form>
     );
   }

src/components/ui/TT_Header.tsx

@@ -2,12 +2,14 @@ import Image from "next/image";
 
 export default function TT_Header() {
   return (
-    <header className="w-full py-5">
-      <div className="flex flex-row items-center text-center justify-center p-8">
+    <header className="w-full py-2 pt-6 md:py-5">
+      <div className="flex flex-row items-center text-center sm:justify-center
+        ml-4 sm:ml-0 p-4">
         <Image src="/images/tech_tracker_logo.png"
           alt="Tech Tracker Logo" width={100} height={100}
+          className="max-w-[40px] md:max-w-[120px]"
         />
-        <h1 className="title-text text-8xl font-bold pl-12
+        <h1 className="title-text text-sm md:text-4xl lg:text-8xl font-bold pl-2 md:pl-12
           bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
           text-transparent bg-clip-text">
           Tech Tracker

src/components/ui/Table.tsx

@@ -149,9 +149,9 @@ export default function Table({ employees }: { employees: Employee[] }) {
                   onChange={() => handleCheckboxChange(employee.id)}
                 />
               </td>
-              <td className="n-column px-1 py-5 border border-[#3e4446]">{employee.name}</td>
-              <td className="s-column px-1 py-5 border border-[#3e4446]">{employee.status}</td>
-              <td className="ua-column px-1 py-5 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
+              <td className="n-column px-1 md:py-5 border border-[#3e4446]">{employee.name}</td>
+              <td className="s-column px-1 md:py-5 border border-[#3e4446]">{employee.status}</td>
+              <td className="ua-column px-1 md:py-5 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
             </tr>
           ))}
         </tbody>