From f2e4ac25757248529d012548a3738150e59523da Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <88056492+atridadl@users.noreply.github.com>
Date: Tue, 11 Jul 2023 18:19:45 -0600
Subject: [PATCH] Small UI adjustments

---
 src/components/Footer.tsx            |  14 ++--
 src/components/Navbar.tsx            |  34 ++++----
 src/components/RoomList.tsx          |  34 ++++----
 src/components/templates/Goodbye.tsx |  20 ++---
 src/components/templates/Welcome.tsx |  30 +++----
 src/pages/_app.tsx                   |   8 +-
 src/pages/admin/index.tsx            |  72 ++++++++--------
 src/pages/api/ping.ts                |   2 +-
 src/pages/api/trpc/[trpc].ts         |   8 +-
 src/pages/dashboard/index.tsx        |  26 +++---
 src/pages/index.tsx                  |  16 ++--
 src/pages/profile/index.tsx          |  72 ++++++++--------
 src/pages/room/[id].tsx              | 121 +++++++++++++--------------
 13 files changed, 229 insertions(+), 228 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6a7ba99..fafc297 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,9 +6,9 @@ const Footer: React.FC = () => {
     <footer className="footer footer-center h-12 p-2 bg-base-100 text-base-content">
       <div>
         <p>
-          Made with{" "}
-          <GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{" "}
-          by{" "}
+          Made with{ " " }
+          <GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{ " " }
+          by{ " " }
           <a
             className="link link-primary link-hover"
             href="https://atri.dad"
@@ -16,15 +16,15 @@ const Footer: React.FC = () => {
             target="_blank"
           >
             Atridad Lahiji
-          </a>{" "}
-          -{" "}
+          </a>{ " " }
+          -{ " " }
           <a
             className="link link-primary link-hover"
-            href={`https://github.com/atridadl/sprintpadawan/releases/tag/${packagejson.version}`}
+            href={ `https://github.com/atridadl/sprintpadawan/releases/tag/${packagejson.version}` }
             rel="noreferrer"
             target="_blank"
           >
-            v{packagejson.version}
+            v{ packagejson.version }
           </a>
         </p>
       </div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 61c0beb..162adeb 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -21,7 +21,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
       );
     } else if (sessionStatus === "unauthenticated") {
       return (
-        <button className="btn btn-secondary" onClick={() => void signIn()}>
+        <button className="btn btn-secondary" onClick={ () => void signIn() }>
           Sign In
         </button>
       );
@@ -40,40 +40,40 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
             className="md:mr-2"
             src="/logo.webp"
             alt="Nav Logo"
-            width={32}
-            height={32}
+            width={ 32 }
+            height={ 32 }
             priority
           />
           <span className="hidden md:inline-flex">
-            {title}
-            {env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging"}
+            { title }
+            { env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging" }
           </span>
         </Link>
       </div>
 
-      {sessionStatus === "loading" ? (
+      { sessionStatus === "loading" ? (
         <div className="flex items-center justify-center">
           <span className="loading loading-dots loading-lg"></span>
         </div>
       ) : (
         navigationMenu()
-      )}
+      ) }
 
-      {sessionData?.user.image && (
+      { sessionData?.user.image && (
         <div className="flex-none gap-2">
           <div className="dropdown dropdown-end">
-            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+            <label tabIndex={ 0 } className="btn btn-ghost btn-circle avatar">
               <div className="w-10 rounded-full">
                 <Image
-                  src={sessionData.user.image}
+                  src={ sessionData.user.image }
                   alt="Profile picture."
-                  height={32}
-                  width={32}
+                  height={ 32 }
+                  width={ 32 }
                 />
               </div>
             </label>
             <ul
-              tabIndex={0}
+              tabIndex={ 0 }
               className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box z-50"
             >
               <li>
@@ -85,7 +85,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
                   Profile
                 </Link>
               </li>
-              {sessionData.user.role === "ADMIN" && (
+              { sessionData.user.role === "ADMIN" && (
                 <li>
                   <Link
                     about="Admin Page"
@@ -95,16 +95,16 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
                     Admin
                   </Link>
                 </li>
-              )}
+              ) }
               <li>
-                <a onClick={() => void signOut({ callbackUrl: "/" })}>
+                <a onClick={ () => void signOut({ callbackUrl: "/" }) }>
                   Sign Out
                 </a>
               </li>
             </ul>
           </div>
         </div>
-      )}
+      ) }
     </nav>
   );
 };
diff --git a/src/components/RoomList.tsx b/src/components/RoomList.tsx
index 7472c4f..64a0d02 100644
--- a/src/components/RoomList.tsx
+++ b/src/components/RoomList.tsx
@@ -50,7 +50,7 @@ const RoomList: React.FC = () => {
 
   return (
     <div className="flex flex-col items-center justify-center gap-8">
-      {/* Modal for Adding Rooms */}
+      {/* Modal for Adding Rooms */ }
       <input type="checkbox" id="new-room-modal" className="modal-toggle" />
       <div className="modal modal-bottom sm:modal-middle">
         <div className="modal-box flex-col flex text-center justify-center items-center">
@@ -72,30 +72,30 @@ const RoomList: React.FC = () => {
               type="text"
               placeholder="Type here"
               className="input input-bordered w-full max-w-xs"
-              onChange={(event) => {
+              onChange={ (event) => {
                 setRoomName(event.target.value);
-              }}
+              } }
             />
           </div>
 
           <div className="modal-action">
-            {roomName.length > 0 && (
+            { roomName.length > 0 && (
               <label
                 htmlFor="new-room-modal"
                 className="btn btn-primary"
-                onClick={() => createRoomHandler()}
+                onClick={ () => createRoomHandler() }
               >
                 Submit
               </label>
-            )}
+            ) }
           </div>
         </div>
       </div>
 
-      {roomsFromDb && roomsFromDb.length > 0 && (
+      { roomsFromDb && roomsFromDb.length > 0 && (
         <div className="overflow-x-auto">
           <table className="table text-center">
-            {/* head */}
+            {/* head */ }
             <thead>
               <tr className="border-white">
                 <th>Room Name</th>
@@ -103,43 +103,43 @@ const RoomList: React.FC = () => {
               </tr>
             </thead>
             <tbody className="">
-              {roomsFromDb?.map((room) => {
+              { roomsFromDb?.map((room) => {
                 return (
-                  <tr key={room.id} className="hover border-white">
+                  <tr key={ room.id } className="hover border-white">
                     <td className="break-all max-w-[200px] md:max-w-[400px]">
-                      {room.roomName}
+                      { room.roomName }
                     </td>
                     <td>
                       <Link
                         className="m-2 no-underline"
-                        href={`/room/${room.id}`}
+                        href={ `/room/${room.id}` }
                       >
                         <IoEnterOutline className="text-xl inline-block hover:text-secondary" />
                       </Link>
 
                       <button
                         className="m-2"
-                        onClick={() => deleteRoomHandler(room.id)}
+                        onClick={ () => deleteRoomHandler(room.id) }
                       >
                         <IoTrashBinOutline className="text-xl inline-block hover:text-error" />
                       </button>
                     </td>
                   </tr>
                 );
-              })}
+              }) }
             </tbody>
           </table>
         </div>
-      )}
+      ) }
       <label htmlFor="new-room-modal" className="btn btn-secondary">
         New Room
       </label>
 
-      {roomsFromDb === undefined && (
+      { roomsFromDb === undefined && (
         <div className="flex items-center justify-center">
           <span className="loading loading-dots loading-lg"></span>
         </div>
-      )}
+      ) }
     </div>
   );
 };
diff --git a/src/components/templates/Goodbye.tsx b/src/components/templates/Goodbye.tsx
index b64a57d..cc25aa6 100644
--- a/src/components/templates/Goodbye.tsx
+++ b/src/components/templates/Goodbye.tsx
@@ -1,17 +1,17 @@
-import * as React from "react";
 import {
   Body,
   Container,
   Head,
   Heading,
-  Html,
-  Preview,
-  Text,
   Hr,
-  Tailwind,
-  Section,
+  Html,
   Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
 } from "@react-email/components";
+import * as React from "react";
 
 interface GoodbyeTemplateProps {
   name: string;
@@ -30,15 +30,15 @@ export const Goodbye: React.FC<Readonly<GoodbyeTemplateProps>> = ({ name }) => (
         <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
           <Section className="mt-[32px]">
             <Img
-              src={`${baseUrl}/logo.webp`}
+              src={ `${baseUrl}/logo.webp` }
               width="40"
               height="37"
-              alt={`Sprint Padawan Logo`}
+              alt={ `Sprint Padawan Logo` }
               className="my-0 mx-auto"
             />
           </Section>
-          <Heading className="text-4xl">Farewell, {name}...</Heading>
-          <Text>{"Were sorry to see you go."}</Text>
+          <Heading className="text-4xl">Farewell, { name }...</Heading>
+          <Text>{ "Were sorry to see you go." }</Text>
           <Text>
             Your data has been deleted, including all room history, user data,
             votes, etc.
diff --git a/src/components/templates/Welcome.tsx b/src/components/templates/Welcome.tsx
index eb5b1f2..a35d864 100644
--- a/src/components/templates/Welcome.tsx
+++ b/src/components/templates/Welcome.tsx
@@ -1,15 +1,15 @@
 import {
-    Body,
-    Container,
-    Head,
-    Heading,
-    Hr,
-    Html,
-    Img,
-    Preview,
-    Section,
-    Tailwind,
-    Text,
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
 } from "@react-email/components";
 import * as React from "react";
 
@@ -30,18 +30,18 @@ export const Welcome: React.FC<Readonly<WelcomeTemplateProps>> = ({ name }) => (
         <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
           <Section className="mt-[32px]">
             <Img
-              src={`${baseUrl}/logo.webp`}
+              src={ `${baseUrl}/logo.webp` }
               width="40"
               height="37"
-              alt={`Sprint Padawan Logo`}
+              alt={ `Sprint Padawan Logo` }
               className="my-0 mx-auto"
             />
           </Section>
           <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
-            🎉 Welcome to Sprint Padawan, <strong>{name}</strong>! 🎉
+            🎉 Welcome to Sprint Padawan, <strong>{ name }</strong>! 🎉
           </Heading>
           <Text className="text-black text-[14px] leading-[24px]">
-            Hello {name},
+            Hello { name },
           </Text>
           <Text>Thank you for signing up for Sprint Padawan!</Text>
           <Text>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 12af01a..0518f20 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -38,15 +38,15 @@ const MyApp: AppType<{ session: Session | null }> = ({
   }, [router.events]);
 
   return (
-    <SessionProvider session={session}>
+    <SessionProvider session={ session }>
       <div className="block h-[100%]">
         <Navbar title="Sprint Padawan" />
         <div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
-          {pageLoading ? (
+          { pageLoading ? (
             <span className="loading loading-dots loading-lg"></span>
           ) : (
-            <Component {...pageProps} />
-          )}
+            <Component { ...pageProps } />
+          ) }
         </div>
         <Footer />
       </div>
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 97b8e35..d66a1cd 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -158,70 +158,70 @@ const AdminBody: React.FC = () => {
         <div className="stat">
           <div className="stat-title">Users</div>
           <div className="stat-value">
-            {usersCountLoading || usersCountFetching ? (
+            { usersCountLoading || usersCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{usersCount ? usersCount : "0"}</>
-            )}
+              <>{ usersCount ? usersCount : "0" }</>
+            ) }
           </div>
         </div>
 
         <div className="stat">
           <div className="stat-title">Rooms</div>
           <div className="stat-value">
-            {roomsCountLoading || roomsCountFetching ? (
+            { roomsCountLoading || roomsCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{roomsCount ? roomsCount : "0"}</>
-            )}
+              <>{ roomsCount ? roomsCount : "0" }</>
+            ) }
           </div>
         </div>
 
         <div className="stat">
           <div className="stat-title">Votes</div>
           <div className="stat-value">
-            {votesCountLoading || votesCountFetching ? (
+            { votesCountLoading || votesCountFetching ? (
               <span className="loading loading-dots loading-lg"></span>
             ) : (
-              <>{votesCount ? votesCount : "0"}</>
-            )}
+              <>{ votesCount ? votesCount : "0" }</>
+            ) }
           </div>
         </div>
       </div>
 
-      {usersCountFetching ||
-      usersFetching ||
-      roomsCountFetching ||
-      votesCountFetching ? (
+      { usersCountFetching ||
+        usersFetching ||
+        roomsCountFetching ||
+        votesCountFetching ? (
         <span className="loading loading-dots loading-lg"></span>
       ) : (
         <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
           <button
             className="btn btn-primary m-2"
-            onClick={() => void clearSessionsHandler()}
+            onClick={ () => void clearSessionsHandler() }
           >
             Delete All Sessions
           </button>
 
           <button
             className="btn btn-primary"
-            onClick={() => void refetchData()}
+            onClick={ () => void refetchData() }
           >
             Re-fetch
           </button>
         </div>
-      )}
+      ) }
 
       <div className="card max-w-[80vw] bg-neutral shadow-xl m-4">
         <div className="card-body">
           <h2 className="card-title">Users:</h2>
 
-          {usersLoading || usersFetching ? (
+          { usersLoading || usersFetching ? (
             <span className="loading loading-dots loading-lg"></span>
           ) : (
             <div className="overflow-x-scroll">
               <table className="table text-center">
-                {/* head */}
+                {/* head */ }
                 <thead>
                   <tr className="border-white">
                     <th>ID</th>
@@ -233,55 +233,55 @@ const AdminBody: React.FC = () => {
                   </tr>
                 </thead>
                 <tbody className="">
-                  {users
+                  { users
                     ?.sort((user1, user2) =>
                       user2.createdAt > user1.createdAt ? 1 : -1
                     )
                     .map((user) => {
                       return (
-                        <tr key={user.id} className="hover">
+                        <tr key={ user.id } className="hover">
                           <td className="max-w-[100px] break-words">
-                            {user.id}
+                            { user.id }
                           </td>
 
                           <td className="max-w-[100px] break-normal">
-                            {user.name}
+                            { user.name }
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            {user.createdAt.toLocaleDateString()}
+                            { user.createdAt.toLocaleDateString() }
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            {user.sessions.length}
+                            { user.sessions.length }
                           </td>
                           <td className="max-w-[100px] break-normal">
-                            {getProviders(user).includes("google") && (
+                            { getProviders(user).includes("google") && (
                               <SiGoogle className="text-xl m-1 inline-block hover:text-secondary" />
-                            )}
-                            {getProviders(user).includes("github") && (
+                            ) }
+                            { getProviders(user).includes("github") && (
                               <SiGithub className="text-xl m-1 inline-block hover:text-secondary" />
-                            )}
+                            ) }
                           </td>
                           <td>
                             <button className="m-2">
-                              {user.role === "ADMIN" ? (
+                              { user.role === "ADMIN" ? (
                                 <FaShieldAlt
                                   className="text-xl inline-block text-primary"
-                                  onClick={() =>
+                                  onClick={ () =>
                                     void setUserRoleHandler(user.id, "USER")
                                   }
                                 />
                               ) : (
                                 <FaShieldAlt
                                   className="text-xl inline-block"
-                                  onClick={() =>
+                                  onClick={ () =>
                                     void setUserRoleHandler(user.id, "ADMIN")
                                   }
                                 />
-                              )}
+                              ) }
                             </button>
                             <button
                               className="m-2"
-                              onClick={() =>
+                              onClick={ () =>
                                 void clearSessionsByUserHandler(user.id)
                               }
                             >
@@ -289,18 +289,18 @@ const AdminBody: React.FC = () => {
                             </button>
                             <button
                               className="m-2"
-                              onClick={() => void deleteUserHandler(user.id)}
+                              onClick={ () => void deleteUserHandler(user.id) }
                             >
                               <IoTrashBinOutline className="text-xl inline-block hover:text-error" />
                             </button>
                           </td>
                         </tr>
                       );
-                    })}
+                    }) }
                 </tbody>
               </table>
             </div>
-          )}
+          ) }
         </div>
       </div>
     </>
diff --git a/src/pages/api/ping.ts b/src/pages/api/ping.ts
index cce0aeb..cde83a0 100644
--- a/src/pages/api/ping.ts
+++ b/src/pages/api/ping.ts
@@ -1,6 +1,6 @@
 
 import type { NextApiRequest, NextApiResponse } from "next";
-  
+
 export default function handler(req: NextApiRequest, res: NextApiResponse) {
   res.status(200).json({ result: "Pong!" }); 
 }
diff --git a/src/pages/api/trpc/[trpc].ts b/src/pages/api/trpc/[trpc].ts
index 634df1d..43deb52 100644
--- a/src/pages/api/trpc/[trpc].ts
+++ b/src/pages/api/trpc/[trpc].ts
@@ -11,9 +11,9 @@ export default createNextApiHandler({
   onError:
     env.NODE_ENV === "development"
       ? ({ path, error }) => {
-          console.error(
-            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
-          );
-        }
+        console.error(
+          `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
+        );
+      }
       : undefined,
 });
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 534483f..6ad31f0 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -57,20 +57,20 @@ const HomePageBody: React.FC = () => {
   return (
     <>
       <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
-        Hi, {sessionData?.user.name}!{" "}
-        {sessionData?.user.role === "ADMIN" && (
+        Hi, { sessionData?.user.name }!{ " " }
+        { sessionData?.user.role === "ADMIN" && (
           <FaShieldAlt className="inline-block text-primary" />
-        )}
+        ) }
       </h1>
       <div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
         <a
           className={
             tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={() => {
+          onClick={ () => {
             setTabIndex(0);
             localStorage.setItem("dashboardTabIndex", "0");
-          }}
+          } }
         >
           Join a Room
         </a>
@@ -78,36 +78,36 @@ const HomePageBody: React.FC = () => {
           className={
             tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
           }
-          onClick={() => {
+          onClick={ () => {
             setTabIndex(1);
             localStorage.setItem("dashboardTabIndex", "1");
-          }}
+          } }
         >
           Room List
         </a>
       </div>
 
-      {tabIndex === 0 && (
+      { tabIndex === 0 && (
         <>
           <input
             type="text"
             placeholder="Enter Room ID"
             className="input input-bordered input-primary mb-4"
-            onChange={(event) => {
+            onChange={ (event) => {
               console.log(event.target.value);
               setJoinRoomTextBox(event.target.value);
-            }}
+            } }
           />
           <Link
-            href={joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"}
+            href={ joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/" }
             className="btn btn-secondary"
           >
             Join Room
           </Link>
         </>
-      )}
+      ) }
 
-      {tabIndex === 1 && <RoomList />}
+      { tabIndex === 1 && <RoomList /> }
     </>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 57ac706..d63125e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -21,22 +21,22 @@ const HomePageBody: React.FC = () => {
   return (
     <>
       <h1 className="text-6xl font-bold">
-        Sprint{" "}
+        Sprint{ " " }
         <span className="bg-gradient-to-br from-pink-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
           Padawan
         </span>
       </h1>
 
       <h2 className="my-4 text-3xl font-bold">
-        A{" "}
+        A{ " " }
         <span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
-          scrum poker{" "}
-        </span>{" "}
-        tool that helps{" "}
+          scrum poker{ " " }
+        </span>{ " " }
+        tool that helps{ " " }
         <span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
-          agile teams{" "}
-        </span>{" "}
-        plan their sprints in{" "}
+          agile teams{ " " }
+        </span>{ " " }
+        plan their sprints in{ " " }
         <span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
           real-time
         </span>
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index c1c4f84..e7196e9 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,15 +1,14 @@
-import { type NextPage } from "next";
-import Image from "next/image";
+import { type GetServerSideProps, type NextPage } from "next";
 import Head from "next/head";
-import { type GetServerSideProps } from "next";
+import Image from "next/image";
 
-import { getServerAuthSession } from "../../server/auth";
-import { api } from "~/utils/api";
 import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { SiGoogle, SiGithub } from "react-icons/si";
 import { FaShieldAlt } from "react-icons/fa";
+import { SiGithub, SiGoogle } from "react-icons/si";
+import { api } from "~/utils/api";
+import { getServerAuthSession } from "../../server/auth";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerAuthSession(ctx);
@@ -104,7 +103,7 @@ const ProfileBody: React.FC = () => {
               <label
                 htmlFor="delete-user-modal"
                 className="btn btn-error"
-                onClick={() => void deleteCurrentUser()}
+                onClick={ () => void deleteCurrentUser() }
               >
                 I am sure!
               </label>
@@ -115,76 +114,79 @@ const ProfileBody: React.FC = () => {
         <div className="card w-90 bg-neutral shadow-xl">
           <div className="card-body">
             <h2 className="card-title">Profile:</h2>
-            {sessionData.user.image && (
+            { sessionData.user.image && (
               <div className="indicator mx-auto m-4">
-                <span className="indicator-item indicator-bottom badge badge-primary">
-                  <div className="tooltip tooltip-primary" data-tip="Admin">
-                    <FaShieldAlt className="text-xl" />
-                  </div>
-                </span>
+                { sessionData.user.role === "ADMIN" && (
+                  <span className="indicator-item indicator-bottom badge badge-primary">
+                    <div className="tooltip tooltip-primary" data-tip="Admin">
+                      <FaShieldAlt className="text-xl" />
+                    </div>
+                  </span>
+                ) }
+
                 <Image
                   className="mx-auto"
-                  src={sessionData.user.image}
+                  src={ sessionData.user.image }
                   alt="Profile picture."
-                  height={100}
-                  width={100}
+                  height={ 100 }
+                  width={ 100 }
                   priority
                 />
               </div>
-            )}
+            ) }
 
-            {providersLoading ? (
+            { providersLoading ? (
               <div className="mx-auto">
-                <span className="loading loading-dots loading-lg"></span>{" "}
+                <span className="loading loading-dots loading-lg"></span>{ " " }
               </div>
             ) : (
               <div className="mx-auto">
                 <button
-                  className={`btn btn-square btn-outline mx-2`}
-                  disabled={providers?.includes("github")}
-                  onClick={() => void signIn("github")}
+                  className={ `btn btn-square btn-outline mx-2` }
+                  disabled={ providers?.includes("github") }
+                  onClick={ () => void signIn("github") }
                 >
                   <SiGithub />
                 </button>
 
                 <button
-                  className={`btn btn-square btn-outline mx-2`}
-                  disabled={providers?.includes("google")}
-                  onClick={() => void signIn("google")}
+                  className={ `btn btn-square btn-outline mx-2` }
+                  disabled={ providers?.includes("google") }
+                  onClick={ () => void signIn("google") }
                 >
                   <SiGoogle />
                 </button>
               </div>
-            )}
+            ) }
 
-            {sessionData.user.name && (
+            { sessionData.user.name && (
               <input
                 type="text"
                 placeholder="Name"
                 className="input input-bordered"
-                value={nameText}
-                onChange={(event) => setNameText(event.target.value)}
+                value={ nameText }
+                onChange={ (event) => setNameText(event.target.value) }
               />
-            )}
+            ) }
 
-            {sessionData.user.email && (
+            { sessionData.user.email && (
               <input
                 type="text"
                 placeholder="Email"
                 className="input input-bordered"
-                value={sessionData.user.email}
+                value={ sessionData.user.email }
                 disabled
               />
-            )}
+            ) }
 
             <button
-              onClick={() => void saveUser()}
+              onClick={ () => void saveUser() }
               className="btn btn-secondary"
             >
               Save Account
             </button>
 
-            {/* <button className="btn btn-error">Delete Account</button> */}
+            {/* <button className="btn btn-error">Delete Account</button> */ }
 
             <label htmlFor="delete-user-modal" className="btn btn-error">
               Delete Account
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 028f8df..2d8794c 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -6,14 +6,14 @@ import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import {
-    IoCheckmarkCircleOutline,
-    IoCopyOutline,
-    IoDownloadOutline,
-    IoEyeOffOutline,
-    IoEyeOutline,
-    IoHourglassOutline,
-    IoReloadOutline,
-    IoSaveOutline,
+  IoCheckmarkCircleOutline,
+  IoCopyOutline,
+  IoDownloadOutline,
+  IoEyeOffOutline,
+  IoEyeOutline,
+  IoHourglassOutline,
+  IoReloadOutline,
+  IoSaveOutline,
 } from "react-icons/io5";
 import { z } from "zod";
 import { api } from "~/utils/api";
@@ -224,7 +224,7 @@ const RoomBody: React.FC = () => {
 
     if (visible) {
       if (!!matchedVote) {
-        return <p>{matchedVote.value}</p>;
+        return <p>{ matchedVote.value }</p>;
       } else {
         return <IoHourglassOutline className="text-xl mx-auto text-red-400" />;
       }
@@ -243,39 +243,39 @@ const RoomBody: React.FC = () => {
   if (roomFromDb === undefined) {
     return (
       <div className="flex flex-col items-center justify-center text-center">
-        <span className="loading loading-dots loading-lg"></span>{" "}
+        <span className="loading loading-dots loading-lg"></span>{ " " }
       </div>
     );
     // Room has been loaded
   } else if (roomFromDb) {
     return (
       <span className="text-center">
-        <div className="text-2xl">{roomFromDb.roomName}</div>
+        <div className="text-2xl">{ roomFromDb.roomName }</div>
         <div className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
           <div>ID:</div>
-          <div>{roomFromDb.id}</div>
+          <div>{ roomFromDb.id }</div>
 
           <button>
-            {copied ? (
+            { copied ? (
               <IoCheckmarkCircleOutline className="mx-1 text-green-400 animate-bounce" />
             ) : (
               <IoCopyOutline
                 className="mx-1 hover:text-primary"
-                onClick={copyRoomURLHandler}
+                onClick={ copyRoomURLHandler }
               ></IoCopyOutline>
-            )}
+            ) }
           </button>
         </div>
 
-        {roomFromDb && (
+        { roomFromDb && (
           <div className="card card-compact bg-neutral shadow-xl mx-auto m-4">
             <div className="card-body">
               <h2 className="card-title mx-auto">
-                Story: {roomFromDb.storyName}
+                Story: { roomFromDb.storyName }
               </h2>
 
               <ul className="p-0 mx-auto flex flex-row flex-wrap justify-center items-center text-ceter gap-4">
-                {presenceData &&
+                { presenceData &&
                   presenceData
                     .filter(
                       (value, index, self) =>
@@ -288,73 +288,72 @@ const RoomBody: React.FC = () => {
                     .map((presenceItem) => {
                       return (
                         <li
-                          key={presenceItem.clientId}
+                          key={ presenceItem.clientId }
                           className="flex flex-row items-center justify-center gap-2"
                         >
                           <div className="w-10 rounded-full avatar mx-auto">
                             <Image
-                              src={presenceItem.data.image}
-                              alt={`${presenceItem.data.name}'s Profile Picture`}
-                              height={32}
-                              width={32}
+                              src={ presenceItem.data.image }
+                              alt={ `${presenceItem.data.name}'s Profile Picture` }
+                              height={ 32 }
+                              width={ 32 }
                             />
                           </div>
 
                           <p className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
-                            {presenceItem.data.name}{" "}
-                            {presenceItem.data.role === "ADMIN" && (
+                            { presenceItem.data.name }{ " " }
+                            { presenceItem.data.role === "ADMIN" && (
                               <div
                                 className="tooltip tooltip-primary"
                                 data-tip="Admin"
                               >
                                 <FaShieldAlt className="inline-block text-primary" />
                               </div>
-                            )}{" "}
-                            {presenceItem.clientId === roomFromDb.userId && (
+                            ) }{ " " }
+                            { presenceItem.clientId === roomFromDb.userId && (
                               <div
                                 className="tooltip tooltip-warning"
                                 data-tip="Room Owner"
                               >
                                 <RiVipCrownFill className="inline-block text-yellow-500" />
                               </div>
-                            )}
-                            {" : "}
+                            ) }
+                            { " : " }
                           </p>
 
-                          {roomFromDb &&
+                          { roomFromDb &&
                             votesFromDb &&
                             voteString(
                               roomFromDb.visible,
                               votesFromDb,
                               presenceItem.data
-                            )}
+                            ) }
                         </li>
                       );
-                    })}
+                    }) }
               </ul>
 
               <div className="join md:btn-group-horizontal mx-auto">
-                {roomFromDb.scale.split(",").map((scaleItem, index) => {
+                { roomFromDb.scale.split(",").map((scaleItem, index) => {
                   return (
                     <button
-                      key={index}
-                      className={`join-item ${
-                        getVoteForCurrentUser()?.value === scaleItem
+                      key={ index }
+                      className={ `join-item ${getVoteForCurrentUser()?.value === scaleItem
                           ? "btn btn-active btn-primary"
                           : "btn"
-                      }`}
-                      onClick={() => setVote(scaleItem)}
+                        }` }
+                      onClick={ () => setVote(scaleItem) }
                     >
-                      {scaleItem}
+                      { scaleItem }
                     </button>
                   );
-                })}
+                }) }
               </div>
             </div>
           </div>
-        )}
+        ) }
 
-        {sessionData &&
+        { sessionData &&
           !!roomFromDb &&
           roomFromDb.userId === sessionData.user.id && (
             <>
@@ -363,38 +362,38 @@ const RoomBody: React.FC = () => {
                   <h2 className="card-title mx-auto">Room Settings</h2>
 
                   <label className="label mx-auto">
-                    {"Vote Scale (Comma Separated):"}{" "}
+                    { "Vote Scale (Comma Separated):" }{ " " }
                   </label>
 
                   <input
                     type="text"
                     placeholder="Scale (Comma Separated)"
                     className="input input-bordered m-auto"
-                    value={roomScale}
-                    onChange={(event) => {
+                    value={ roomScale }
+                    onChange={ (event) => {
                       setRoomScale(event.target.value);
-                    }}
+                    } }
                   />
 
-                  <label className="label mx-auto">{"Story Name:"} </label>
+                  <label className="label mx-auto">{ "Story Name:" } </label>
 
                   <input
                     type="text"
                     placeholder="Story Name"
                     className="input input-bordered m-auto"
-                    value={storyNameText}
-                    onChange={(event) => {
+                    value={ storyNameText }
+                    onChange={ (event) => {
                       setStoryNameText(event.target.value);
-                    }}
+                    } }
                   />
 
                   <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
                     <div>
                       <button
-                        onClick={() => saveRoom(!roomFromDb.visible, false)}
+                        onClick={ () => saveRoom(!roomFromDb.visible, false) }
                         className="btn btn-primary inline-flex"
                       >
-                        {roomFromDb.visible ? (
+                        { roomFromDb.visible ? (
                           <>
                             <IoEyeOffOutline className="text-xl mr-1" />
                             Hide
@@ -404,13 +403,13 @@ const RoomBody: React.FC = () => {
                             <IoEyeOutline className="text-xl mr-1" />
                             Show
                           </>
-                        )}
+                        ) }
                       </button>
                     </div>
 
                     <div>
                       <button
-                        onClick={() =>
+                        onClick={ () =>
                           saveRoom(
                             false,
                             true,
@@ -427,8 +426,8 @@ const RoomBody: React.FC = () => {
                           ).length <= 1
                         }
                       >
-                        {roomFromDb.storyName === storyNameText ||
-                        votesFromDb?.length === 0 ? (
+                        { roomFromDb.storyName === storyNameText ||
+                          votesFromDb?.length === 0 ? (
                           <>
                             <IoReloadOutline className="text-xl mr-1" /> Reset
                           </>
@@ -436,16 +435,16 @@ const RoomBody: React.FC = () => {
                           <>
                             <IoSaveOutline className="text-xl mr-1" /> Save
                           </>
-                        )}
+                        ) }
                       </button>
                     </div>
 
-                    {votesFromDb &&
+                    { votesFromDb &&
                       (roomFromDb.logs.length > 0 ||
                         votesFromDb.length > 0) && (
                         <div>
                           <button
-                            onClick={() => downloadLogs()}
+                            onClick={ () => downloadLogs() }
                             className="btn btn-primary inline-flex hover:animate-pulse"
                           >
                             <>
@@ -453,12 +452,12 @@ const RoomBody: React.FC = () => {
                             </>
                           </button>
                         </div>
-                      )}
+                      ) }
                   </div>
                 </div>
               </div>
             </>
-          )}
+          ) }
       </span>
     );
     // Room does not exist