Update styling and header of 'Thank you' page

Refactored the 'Thank you' page for email verification feature by enhancing the display layout and typography. This includes the introduction of a header with dynamic page title provided by 'Helmet', the adoption of a flexbox-based layout for the display of form data, as well as the adjustment of font sizes and margins across elements for improved readability.

src/components/verify_email/ThankYou.css

@@ -1,7 +1,28 @@
+.fields {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 1020px;
+    width: 80%
+}
+
 .field {
-    margin-bottom: 20px
+    margin-bottom: -10px
 }
 
 .header {
-    font-size: 20px;
+    font-size: 30px;
+    font-weight: bolder;
+    margin: 30px
+}
+
+.key {
+    margin: 1px;
+    font-size: 30px;
+    font-weight: bold;
+    text-align: left;
+}
+
+.value {
+
 }

src/components/verify_email/thank_you.tsx

@@ -1,9 +1,10 @@
-import {FC, useState} from "react";
+import {FC} from "react";
 import {useLocation} from "react-router-dom";
+import {Helmet} from "react-helmet";
+import './ThankYou.css';
 
 const ThankYou: FC = () => {
     const location = useLocation();
-    const [code, setCode] = useState('000000');
     type DynamicFormData = {
         [key: string]: string;
     };
@@ -20,12 +21,15 @@ const ThankYou: FC = () => {
 
     return (
         <div className="container">
-            <p>Thank you for completing the form and verifying your email! This is the data you entered:</p>
+            <Helmet>
-            <div>
+                <title>Thank you!</title>
+            </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">
+                    <div className="field" id={key}>
-                        <p className="header">{key}</p>
+                        <p className="key">{key}</p>
-                        <p>{value}</p>
+                        <p className="value">{value}</p>
                     </div>
                 ))}
             </div>