From ad5d44520bee6b67122b2a2fbfa3f960501adfd6 Mon Sep 17 00:00:00 2001
From: pmoharana-cmd <pmoharana032474@gmail.com>
Date: Tue, 17 Dec 2024 21:52:46 -0500
Subject: [PATCH] Fix div td error in console

---
 compass/app/auth/login/page.tsx        |  2 ++
 compass/app/test/page.tsx              |  2 ++
 compass/components/Drawer/Drawer.tsx   | 45 ++++++++++----------------
 compass/components/auth/Loading.tsx    |  2 ++
 compass/components/auth/LoggingOut.tsx |  2 ++
 5 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx
index fa945c9..9dab449 100644
--- a/compass/app/auth/login/page.tsx
+++ b/compass/app/auth/login/page.tsx
@@ -77,6 +77,8 @@ export default function Page() {
                 alt="Compass Center logo."
                 width={100}
                 height={91}
+                style={{ height: "auto", width: "auto" }}
+                priority
             />
             <h1 className="font-bold text-2xl text-purple-800">Login</h1>
             <div className="mb-6">
diff --git a/compass/app/test/page.tsx b/compass/app/test/page.tsx
index 37271df..9ae938e 100644
--- a/compass/app/test/page.tsx
+++ b/compass/app/test/page.tsx
@@ -76,6 +76,8 @@ export default function Page() {
                 alt="Compass Center logo."
                 width={100}
                 height={91}
+                style={{ height: "auto", width: "auto" }}
+                priority
             />
             <h1 className="font-bold text-2xl text-purple-800">Login</h1>
             <div className="mb-6">
diff --git a/compass/components/Drawer/Drawer.tsx b/compass/components/Drawer/Drawer.tsx
index da6fd8c..57a95e9 100644
--- a/compass/components/Drawer/Drawer.tsx
+++ b/compass/components/Drawer/Drawer.tsx
@@ -137,7 +137,6 @@ const Drawer: FunctionComponent<DrawerProps> = ({
             >
                 Open
             </button>
-            <div className={drawerClassName}></div>
             <div className={drawerClassName}>
                 <div className="flex items-center justify-between p-4">
                     <div className="flex flex-row items-center justify-between space-x-2">
@@ -173,13 +172,11 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                     <table className="p-4">
                         <tbody className="items-center">
                             <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <UserIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Username</td>
-                                </div>
-                                <td className="w-3/4 w-3/4 p-2 pl-0">
+                                <td className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <UserIcon className="h-4 w-4" />
+                                    <span className="w-32">Username</span>
+                                </td>
+                                <td className="w-3/4 p-2 pl-0">
                                     <input
                                         type="text"
                                         name="username"
@@ -191,29 +188,24 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                                 </td>
                             </tr>
                             <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Role</td>
-                                </div>
+                                <td className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <ListBulletIcon className="h-4 w-4" />
+                                </td>
+                                <td className="w-32">Role</td>
                                 <td className="w-3/4 hover:bg-gray-50">
                                     <TagsInput
                                         presetValue={tempRowContent.role}
                                         presetOptions={presetOptions}
                                         setPresetOptions={setPresetOptions}
                                         getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
                                     />
                                 </td>
                             </tr>
                             <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <EnvelopeIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Email</td>
-                                </div>
+                                <td className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <EnvelopeIcon className="h-4 w-4" />
+                                </td>
+                                <td className="w-32">Email</td>
                                 <td className="w-3/4 p-2 pl-0">
                                     <input
                                         type="text"
@@ -226,12 +218,10 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                                 </td>
                             </tr>
                             <tr className="w-full text-xs items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500 items-center">
-                                    <td>
-                                        <ListBulletIcon className="h-4 w-4" />
-                                    </td>
-                                    <td className="w-32">Type of Program</td>
-                                </div>
+                                <td className="flex flex-row space-x-2 text-gray-500 items-center">
+                                    <ListBulletIcon className="h-4 w-4" />
+                                </td>
+                                <td className="w-32">Type of Program</td>
                                 <td className="w-3/4 hover:bg-gray-50">
                                     {/* {rowContent.program} */}
                                     <TagsInput
@@ -239,7 +229,6 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                                         presetOptions={rolePresetOptions}
                                         setPresetOptions={setRolePresetOptions}
                                         getTagColor={getTagColor}
-                                        setTagColors={setTagColors}
                                     />
                                 </td>
                             </tr>
diff --git a/compass/components/auth/Loading.tsx b/compass/components/auth/Loading.tsx
index a655fb3..a56537b 100644
--- a/compass/components/auth/Loading.tsx
+++ b/compass/components/auth/Loading.tsx
@@ -11,6 +11,8 @@ const Loading = () => {
                     alt="Compass Center logo."
                     width={100}
                     height={91}
+                    style={{ height: "auto", width: "auto" }}
+                    priority
                 />
                 <h1 className={styles.loadingTitle}>Loading...</h1>
                 <div className={styles.loadingSpinner}></div>
diff --git a/compass/components/auth/LoggingOut.tsx b/compass/components/auth/LoggingOut.tsx
index 8915e23..13b3877 100644
--- a/compass/components/auth/LoggingOut.tsx
+++ b/compass/components/auth/LoggingOut.tsx
@@ -11,6 +11,8 @@ const LoggingOut = () => {
                     alt="Compass Center logo."
                     width={100}
                     height={91}
+                    style={{ height: "auto", width: "auto" }}
+                    priority
                 />
                 <h1 className={styles.loadingTitle}>Signing out...</h1>
                 <div className={styles.loadingSpinner}></div>