From a3899325b85465a5eed8b8f885c7b1843597e5ec Mon Sep 17 00:00:00 2001
From: oonyeje <oonyeje@bsidesol.com>
Date: Tue, 28 Nov 2023 23:01:23 -0500
Subject: [PATCH] - fixed form styling for contact form

---
 components/form/ContactForm/index.tsx | 40 ++++++++++++++++++++-------
 package.json                          |  1 +
 pages/index.tsx                       |  4 +--
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/components/form/ContactForm/index.tsx b/components/form/ContactForm/index.tsx
index 86f4fb6..91d7781 100644
--- a/components/form/ContactForm/index.tsx
+++ b/components/form/ContactForm/index.tsx
@@ -16,19 +16,39 @@ const ContactForm = () => {
   };
 
   return (
-    <div>
-        <form className="flex flex-row justify-center w-full" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
+    <div className='w-full flex flex-row justify-center'>
+        <form className=" w-1/2" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
           <div className="flex flex-col justify-center h-full">
             <div className=' flex flex-col justify-between space-y-4 w-full'>
-              <div className='flex flex-row space-x-2'>
-                <input placeholder='First Name' className='w-1/2' {...register('firstName', { required: true })} />
-                <input placeholder='Last Name' className='w-1/2' {...register('lastName', { required: true })} />
-                {errors.firstName && <p>First name is required.</p>}
-                {errors.lastName && <p>Last name is required.</p>}
+              <div className='flex flex-row justify-between space-x-2'>
+                <div className='w-1/2'>
+                  <input placeholder='First Name' className='w-full' {...register('firstName', { required: true })} />
+                  {errors.firstName && <p>First name is required.</p>}
+                </div>
+                <div className='w-1/2'>
+                  <input placeholder='Last Name' className='w-full' {...register('lastName', { required: true })} />
+                  {errors.lastName && <p>Last name is required.</p>}
+                </div>
               </div>
-              <div className="flex flex-row w-full">
-                <textarea placeholder='Summary...' className="flex grow h-52" {...register('summary')} />
-                {errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
+              <div className='flex flex-col space-y-4 w-full'>
+                <div>
+                  <input placeholder='Email' type="email" className='w-full' {...register('email', { required: true })} />
+                  {errors.email && <p>Email is required.</p>}
+                </div>
+                <div>
+                  <select placeholder='Subject...' className='w-full' {...register('subject', { required: true })}>
+                    <option>Subject...</option>
+                    <option>Inquiry</option>
+                    <option>Consultations</option>
+                    <option>Want To Hire For Potential Job/Contract</option>
+                  </select>
+                  {errors.subject && <p>Subject is required.</p>}
+                </div>
+                <div className="flex flex-col w-full">
+                  <textarea placeholder='Summary...' className="flex grow h-52" {...register('summary')} />
+                  {errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
+                </div>
+
               </div>
               <input className="bg-blue-600" type="submit" />
             </div>
diff --git a/package.json b/package.json
index e97fefc..b1a2aaa 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "iframe-resizer-react": "^1.1.0",
     "next": "latest",
+    "nodemailer": "^6.9.7",
     "pdfjs-dist": "^4.0.269",
     "react": "latest",
     "react-dom": "latest",
diff --git a/pages/index.tsx b/pages/index.tsx
index e540891..2bc3506 100755
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -120,13 +120,13 @@ export default function Home() {
             <div className='flex flex-col h-full w-full justify-center'>
               <ContactForm/>
             </div>
-            <span className="cursor-pointer" onClick={() => {
+            <span className="cursor-pointer self-end" onClick={() => {
               executeScrollToLandiing();
               setTimeout(() => {
                 setContactClicked(false);
               }, 10);
             }}>
-                <FontAwesomeIcon width={25} height={50} icon={faChevronCircleUp} className="fas fa-chevron-circle-up" style={{ color: "white" }} />
+                <FontAwesomeIcon width={25} height={200} icon={faChevronCircleUp} className="fas fa-chevron-circle-up" style={{ color: "white" }} />
             </span>
           </div>
         </div>