From 821e63953ba94481bcb9b238da0bebf94cd1811b Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sun, 11 Aug 2024 18:47:19 +0200
Subject: [PATCH] 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/verify_email/thank_you.tsx | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/verify_email/thank_you.tsx b/src/components/verify_email/thank_you.tsx
index c670bfd..8b84501 100644
--- a/src/components/verify_email/thank_you.tsx
+++ b/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>
-                    <tbody>
-                    {Object.entries(formData).map(([key, value]) => (
-                        <tr className="form-data-row" id={key}>
-                            <td className="form-data-key">{key}</td>
-                            <td className="form-data-value">{value}</td>
-                        </tr>
-                    ))}
-                    </tbody>
-                </table>
-            </div>
+                {Object.entries(formData).map(([key, value]) => (
+                    <div>
+                        <p><strong>{key}</strong></p>
+                        {
+                            value
+                                .split("\n")
+                                .filter(str => str.trim() !== "")
+                                .map((str, index) => <p style={{ wordWrap: 'break-word' }}>{str}</p>)
+                        }
+                    </div>
+            ))}
         </div>
-    );
+</div>
+)
+    ;
 }