styling

projects/mybyte/pages/qrRead.tsx

@@ -1,13 +1,12 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import OrganizerRoute from "../components/OrganizerRoute";
-import {useAuth} from "../context/AuthContext";
-import {QrReader} from 'react-qr-reader';
-
+import { useAuth } from "../context/AuthContext";
+import { QrReader } from "react-qr-reader";
 
 const initialUser = {
   name: "N/A",
-  shirtSize: "N/A"
-}
+  shirtSize: "N/A",
+};
 
 export default function QrRead(props: any) {
   const {
@@ -19,14 +18,19 @@ export default function QrRead(props: any) {
     getNameOfUser,
     getRegisteredEventsForUser,
     getTShirtSizeOfUser,
-    user_type
+    user_type,
   } = useAuth();
   const [scannedUID, setScannedUID] = useState("");
   const [user, setUser] = useState(initialUser);
   const [status, setStatus] = useState("Waiting for scan");
 
   const selectWhich: JSX.Element = (
-    <select id="what-for" className={"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"}>
+    <select
+      id="what-for"
+      className={
+        "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      }
+    >
       <option value="checkin-first-day">Check in (Day 1)</option>
       <option value="checkin-other">Check in (Other)</option>
       <option value="checkout">Check out</option>
@@ -49,7 +53,7 @@ export default function QrRead(props: any) {
 
   const determineAction = async (uid: string) => {
     let outcomeMessage = "";
-    console.log(user_type)
+    console.log(user_type);
     try {
       if (!uid) throw "No QR Code has been scanned!";
       // action state kept resetting to its default state for some reason
@@ -62,16 +66,16 @@ export default function QrRead(props: any) {
         .getElementsByTagName("select")
         .namedItem("what-for")?.value;
 
-      const name = await getNameOfUser(uid)
+      const name = await getNameOfUser(uid);
       if (!name) {
         throw "User not found!";
       }
-      const tShirtSize = await getTShirtSizeOfUser(uid)
-      setUser({name: name, shirtSize: tShirtSize})
+      const tShirtSize = await getTShirtSizeOfUser(uid);
+      setUser({ name: name, shirtSize: tShirtSize });
       outcomeMessage = `Successfully completed ${selectedOption} for ${name}`;
       switch (selectedOption) {
         case "checkin-first-day":
-          if (!("HACKS9" in await getRegisteredEventsForUser(uid))) {
+          if (!("HACKS9" in (await getRegisteredEventsForUser(uid)))) {
             throw `${name} is not registered for UGAHacks 9!`;
           }
           if (await isUserCheckedIn(uid)) {
@@ -82,7 +86,7 @@ export default function QrRead(props: any) {
           outcomeMessage = `Checked in ${name}!`;
           break;
         case "checkin-other":
-          if (!("HACKS9" in await getRegisteredEventsForUser(uid))) {
+          if (!("HACKS9" in (await getRegisteredEventsForUser(uid)))) {
             throw `${name} is not registered for UGAHacks 9!`;
           }
           if (await isUserCheckedIn(uid)) {
@@ -162,39 +166,51 @@ export default function QrRead(props: any) {
       }
     } finally {
       setStatus(outcomeMessage);
-      setScannedUID("")
+      setScannedUID("");
     }
   };
   return (
     <OrganizerRoute>
-      <div className={"flex flex-row justify-center items-center space-x-10"}>
+      <div className={"flex flex-col justify-center items-center space-x-10"}>
         <QrReader
-          className={"w-1/3 h-full"}
-          videoStyle={{"height": "100%", "width" : "100%"}}
-          constraints={{facingMode: 'back'}}
+          className={"w-full h-full"}
+          videoStyle={{ height: "100%", width: "100%" }}
+          constraints={{ facingMode: "back" }}
           scanDelay={0}
           onResult={async (result, _) => {
             if (!result) return;
-            setScannedUID(result.getText())
+            setScannedUID(result.getText());
           }}
         />
         <div className={"flex flex-col space-y-2"}>
           <div>
-            Scanned UID: {scannedUID} <br/> <br/>
+            Scanned UID: {scannedUID} <br /> <br />
             <line></line>
-            Name: {user.name} <br/>
-            Shirt Size: {user.shirtSize} <br/>
+            Name: {user.name} <br />
+            Shirt Size: {user.shirtSize} <br />
           </div>
           <div>Previous Status: {status} </div>
-          <label className={"block mb-2 text-sm font-medium text-gray-900 dark:text-white"}>Scanner Options:</label>
+          <label
+            className={
+              "block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            }
+          >
+            Scanner Options:
+          </label>
           {selectWhich}
           <div>
             <button
-              className={`py-2.5 px-5 me-2 mb-2 text-sm font-medium focus:outline-none bg-white rounded-lg border border-gray-200 ${scannedUID === "" ? 'text-gray-600' : 'text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700'} focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600`}
+              className={`py-2.5 px-5 me-2 mb-2 text-sm font-medium focus:outline-none bg-white rounded-lg border border-gray-200 ${
+                scannedUID === ""
+                  ? "text-gray-600"
+                  : "text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700"
+              } focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600`}
               onClick={async () => await determineAction(scannedUID)}
               disabled={scannedUID === ""}
             >
-              {scannedUID === "" ? 'Please Scan a QR Code' : 'Run Selected Action'}
+              {scannedUID === ""
+                ? "Please Scan a QR Code"
+                : "Run Selected Action"}
             </button>
           </div>
         </div>