From 011fb9a2828955a73e3103dc829ea7d536880c16 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sun, 28 Apr 2024 17:59:17 +0200
Subject: [PATCH] Refactor CSS and modify data display layout

The commit includes modification to the CSS of the verify email component and changes how form data is displayed. The form data that was previously shown in a standard div is now presented in a table format for better readability. Also, it contains minor debug changes in verify_mail.tsx to handle invalid responses.
---
 src/components/verify_email/ThankYou.css    | 34 ++++++++++++++-------
 src/components/verify_email/thank_you.tsx   | 16 ++++++----
 src/components/verify_email/verify_mail.tsx |  3 +-
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/verify_email/ThankYou.css b/src/components/verify_email/ThankYou.css
index 5acd5fb..dd3d1f8 100644
--- a/src/components/verify_email/ThankYou.css
+++ b/src/components/verify_email/ThankYou.css
@@ -1,14 +1,14 @@
-.fields {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 1020px;
-    width: 80%
-}
+/*.fields {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    align-items: flex-start;*/
+/*    max-width: 1020px;*/
+/*    width: 80%*/
+/*}*/
 
-.field {
-    margin-bottom: -10px
-}
+/*.field {*/
+/*    margin-bottom: -10px*/
+/*}*/
 
 .header {
     font-size: 30px;
@@ -23,6 +23,18 @@
     text-align: left;
 }
 
-.value {
+table {
+    width: 50%;
+    margin: 0 auto;
+    border-collapse: collapse;
+}
 
+.form-data-row {
+    border: 1px solid #ddd;
+}
+
+.form-data-key,
+.form-data-value {
+    border: 1px solid #ddd;
+    padding: 10px;
 }
\ No newline at end of file
diff --git a/src/components/verify_email/thank_you.tsx b/src/components/verify_email/thank_you.tsx
index a5d660d..c670bfd 100644
--- a/src/components/verify_email/thank_you.tsx
+++ b/src/components/verify_email/thank_you.tsx
@@ -26,12 +26,16 @@ 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">
-                {Object.entries(formData).map(([key, value]) => (
-                    <div className="field" id={key}>
-                        <p className="key">{key}</p>
-                        <p className="value">{value}</p>
-                    </div>
-                ))}
+                <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>
         </div>
     );
diff --git a/src/components/verify_email/verify_mail.tsx b/src/components/verify_email/verify_mail.tsx
index dde091b..9edeb1e 100644
--- a/src/components/verify_email/verify_mail.tsx
+++ b/src/components/verify_email/verify_mail.tsx
@@ -52,13 +52,14 @@ const VerifyMail: FC = () => {
             .then(response => {
                 if (!response.ok) {
                     //TODO fix error and make message here?
-                    response.json().then(result => console.log(result))
+                    console.log(response)
                     throw new Error('Invalid code');
                 }
                 //TODO check if its json if not its just text we need to handle and put in a p tag
                 return response.json()
             })
             .then((data: DynamicFormData) => {
+                console.log(data);
                 setFormData(data);
             })
             .catch(error => {