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

@@ -1,14 +1,14 @@
-.fields {
+/*.fields {*/
-    display: flex;
+/*    display: flex;*/
-    flex-direction: column;
+/*    flex-direction: column;*/
-    align-items: flex-start;
+/*    align-items: flex-start;*/
-    max-width: 1020px;
+/*    max-width: 1020px;*/
-    width: 80%
+/*    width: 80%*/
-}
+/*}*/
 
-.field {
+/*.field {*/
-    margin-bottom: -10px
+/*    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;
 }

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]) => (
+                <table>
-                    <div className="field" id={key}>
+                    <tbody>
-                        <p className="key">{key}</p>
+                    {Object.entries(formData).map(([key, value]) => (
-                        <p className="value">{value}</p>
+                        <tr className="form-data-row" id={key}>
-                    </div>
+                            <td className="form-data-key">{key}</td>
-                ))}
+                            <td className="form-data-value">{value}</td>
+                        </tr>
+                    ))}
+                    </tbody>
+                </table>
             </div>
         </div>
     );

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 => {