Refactor email verification UI to enhance data display

Replaced table with div and paragraph elements to improve readability of user-submitted data. Added logic to handle multiline form data and remove empty lines, ensuring cleaner and more user-friendly presentation.

src/components/form/data/apply.tsx

@@ -89,6 +89,7 @@ export const apply: FormData = {
             min_length: 3,
             max_length: 256,
             required: true,
+            additional_info: "Please include your timezone."
         },
         {
             label: "Do you have any previous experience being staff?",
@@ -163,6 +164,7 @@ export const apply: FormData = {
 
         age: Yup.number()
             .typeError('Input must be a number')
+            .integer('Please enter a whole number')
             .min(0, 'Please enter a valid age')
             .max(999, 'We do not accept players older than 999 years old sorry!')
             .required('You are required to fill out your age'),
@@ -175,6 +177,7 @@ export const apply: FormData = {
 
         avg_time: Yup.number()
             .typeError('Please enter a number')
+            .integer('Please enter a whole number')
             .min(0, 'Please enter a positive number')
             .max(168, 'There are only 168 hours in a week')
             .required('Please enter the average time you will be available each week'),

src/components/home/home.tsx

@@ -11,6 +11,7 @@ const Home: FunctionComponent = () => {
             <header className="App-header">
                 <h1>Welcome to the Altitude forms page</h1>
                 <h2><a href="/contact">Contact us.</a></h2>
+                <h2><a href="/apply">Apply for staff.</a></h2>
             </header>
         </div>
     );

src/components/verify_email/thank_you.tsx

@@ -26,19 +26,21 @@ const ThankYou: FC = () => {
             </Helmet>
             <header className="header">Thank you for completing the form and verifying your email!<br></br>This is the data you entered:</header>
             <div className="fields">
-                <table>
+                {Object.entries(formData).map(([key, value]) => (
-                    <tbody>
+                    <div>
-                    {Object.entries(formData).map(([key, value]) => (
+                        <p><strong>{key}</strong></p>
-                        <tr className="form-data-row" id={key}>
+                        {
-                            <td className="form-data-key">{key}</td>
+                            value
-                            <td className="form-data-value">{value}</td>
+                                .split("\n")
-                        </tr>
+                                .filter(str => str.trim() !== "")
-                    ))}
+                                .map((str, index) => <p style={{ wordWrap: 'break-word' }}>{str}</p>)
-                    </tbody>
+                        }
-                </table>
+                    </div>
-            </div>
+            ))}
         </div>
-    );
+</div>
+)
+    ;
 }