UI changes

package.json

@@ -43,7 +43,7 @@
     "next-themes": "^0.3.0",
     "pm2": "^5.4.2",
     "react": "^18.3.1",
-    "react-day-picker": "^9.0.2",
+    "react-day-picker": "^9.0.3",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "server-only": "^0.0.1",
@@ -55,12 +55,12 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/eslint": "^8.56.10",
+    "@types/eslint": "^8.56.11",
-    "@types/node": "^20.14.11",
+    "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/parser": "^7.17.0",
     "drizzle-kit": "^0.21.4",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
@@ -69,7 +69,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.6",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "ct3aMetadata": {
     "initVersion": "7.36.1"

src/components/auth/client/Sign_Out.tsx

@@ -1,7 +1,14 @@
 import { signOut } from "next-auth/react";
 import { useSession } from "next-auth/react";
 import Image from "next/image";
-import { Button } from "~/components/ui/shadcn/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/shadcn/dropdown-menu";
 
 export default function Sign_Out() {
   const { data: session } = useSession();
@@ -9,17 +16,30 @@ export default function Sign_Out() {
     return <div/>;
   } else {
     const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
+    const name = session?.user?.name ? session.user.name : "Profile";
     return (
-      <div className="flex flex-row">
+      <div className="m-auto mt-1">
+        <DropdownMenu>
+          <DropdownMenuTrigger>
             <Image src={pfp} alt="" width={35} height={35}
               className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
               max-w-[25px] md:max-w-[35px]"
             />
-        <Button onClick={() => signOut()} variant="secondary"
+          </DropdownMenuTrigger>
-          className="w-full p-2 rounded-xl text-sm md:text-lg"
+          <DropdownMenuContent>
+            <DropdownMenuLabel>
+              {name}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <button onClick={() => signOut()}
+                className="w-full"
               >
                 Sign Out
-        </Button>
+              </button>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     );
   }

src/components/ui/History_Drawer.tsx

@@ -1,4 +1,7 @@
+import Image from "next/image";
 import {
+  Drawer,
+  DrawerTrigger,
   DrawerClose,
   DrawerContent,
   DrawerFooter,
@@ -22,12 +25,13 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "~/components/ui/shadcn/pagination";
-//import { Button } from "~/components/ui/shadcn/button";
-import Image from "next/image";
 
 export default function History_Drawer() {
-  //const 
   return (
+    <Drawer>
+      <DrawerTrigger>
+        Status
+      </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader>
           <DrawerTitle>
@@ -83,5 +87,6 @@ export default function History_Drawer() {
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
+    </Drawer>
       );
 };

src/components/ui/No_Session.tsx

@@ -7,30 +7,23 @@ export default function No_Session() {
   return (
     <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="w-2/3 pt-4 pb-2 md:pt-8 md:pb-4 m-auto">
+      <div className="md:w-2/3 pt-4 pb-2 md:pt-10 md:pb-4 m-auto">
         < Header />
       </div>
+      <div className="mx-auto flex flex-col">
+        <div className="py-4">
           < Sign_In />
-      <div className="w-5/6 mx-auto flex flex-col">
+        </div>
-        <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"
+          mx-auto flex flex-row"
         >
         <Image src="/images/gitea_logo.svg" alt="Gitea" width={35} height={35}
           className="mr-2"
         />
-          <h3 className="my-auto">View Source Code</h3>
+        <h3 className="my-auto">Source Code</h3>
       </Link>
     </div>
     </main>

src/components/ui/Tech_Table.tsx

@@ -3,7 +3,6 @@ import { useState, useEffect, useCallback } from 'react';
 import { useSession } from "next-auth/react";
 import Loading from "~/components/ui/Loading";
 import { useTVMode } from "~/components/context/TVModeContext";
-import { Drawer, DrawerTrigger } from "~/components/ui/shadcn/drawer";
 import History_Drawer from "~/components/ui/History_Drawer";
 
 type Employee = {
@@ -168,10 +167,7 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
               )}
               <th className="border border-[#3e4446] py-3">Name</th>
               <th className="border border-[#3e4446] py-3">
-                <Drawer>
-                  <DrawerTrigger>Status</DrawerTrigger>
                 <History_Drawer />
-                </Drawer>
               </th>
               <th className="border border-[#3e4446] py-3">Updated At</th>
             </tr>

src/styles/globals.css

@@ -122,7 +122,7 @@
 
 .content-fullscreen {
   width: 90vw;
-  height: 90vh;
+  height: 80vh;
   margin: auto;
 }
 
@@ -132,5 +132,5 @@
 }
 
 .tablefill {
-  height: 5vh;
+  height: 10vh;
 }