Form data retrieval and UI correction

MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css

@@ -2,7 +2,7 @@
   margin-top: 2rem;
   background-color: #caf0f8;
   font-size: 1.6rem;
-  padding: 1rem;
+  padding: 0rem 2rem;
   display: flex;
   flex-direction: row;
   gap: 2rem;
@@ -31,6 +31,7 @@
 .cezen_banner_top h1 {
   align-self: center;
   font-size: 2rem;
+  padding: 2rem 0rem;
   /* font-weight: 500; */
 }
 
@@ -61,14 +62,16 @@
   transition: all 0.3s;
 }
 
-.RHS_nav div img {
-  max-width: 2.2rem;
-  margin-right: 0.8rem;
-}
-
 .RHS_nav div:hover {
   padding-left: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 0.2rem solid rgba(0, 137, 133, 0.8);
   cursor: pointer;
+  margin-bottom: 0rem;
+}
+
+.RHS_nav div img {
+  max-width: 2.2rem;
+  margin-right: 0.6rem;
+  margin-bottom: -0.4rem;
 }

MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/form_styling.css

@@ -20,7 +20,7 @@ section {
 .LHS {
   background-color: #03045e;
   justify-items: center;
-  padding: 5rem;
+  padding: 2.4rem 5rem;
   text-transform: capitalize;
   color: #0096c7;
   border-top-left-radius: 2rem;
@@ -43,7 +43,7 @@ section {
   display: flex;
   flex-direction: column;
   gap: 4rem;
-  padding: 2rem;
+  padding: 3rem 0rem;
 }
 
 .form-elements div {
@@ -69,7 +69,7 @@ section {
 }
 
 form button {
-  margin-top: 4rem;
+  margin-top: 1rem;
   background-color: #90e0ef;
   color: #03045e;
   font-size: 2rem;
@@ -79,6 +79,7 @@ form button {
   border-radius: 0.5rem;
   transition: all 0.3s;
   border: 0.3rem solid #03045e;
+  margin-left: -3rem;
 }
 
 form button:hover {

MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/signUp.jsx

@@ -1,8 +1,19 @@
 export default function SignUp() {
+  function onSubmitLoginForm(event) {
+    event.preventDefault();
+
+    const formData = new FormData(event.target);
+    const data = Object.fromEntries(formData.entries());
+
+    console.log(data);
+
+    // event.target.reset();
+  }
+
   return (
     <div className="LHS">
       <h2>Sign Up</h2>
-      <form>
+      <form onSubmit={onSubmitLoginForm}>
         <div className="form-elements">
           <div>
             <label>user name</label>