Merge pull request #330 from vaskocuturilo/dv000285_fix_ui_sign_in_si…

…gn_up_forms DV-000285: Fix ui sign in and sign up forms.
vaskocuturilo · Oct 8, 2023 · 43c8157 · 43c8157
2 parents 9db8ee7 + 233e141
commit 43c8157
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 151 deletions.
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
@@ -16,11 +16,11 @@ function Header() {
         <Navbar.Brand href="#home">
           <p>Regions Service</p>
         </Navbar.Brand>
-        <button className={styles.primaryBtn} onClick={() => signIsOpen(true)} data-cy="signIn">
+        <button className={styles.primaryBtn} onClick={() => {signInSignUp(false); signIsOpen(true)}} data-cy="signIn">
         Sign In
       </button>
       {isOpen1 && <SignIn signIsOpen={signIsOpen} />}
-      <button className={styles.primaryBtn} onClick={() => signInSignUp(true)} data-cy="signUp">
+      <button className={styles.primaryBtn} onClick={() => {signIsOpen(false); signInSignUp(true)}} data-cy="signUp">
         Sign Up
       </button>
       {isOpen2 && <SignUp signInSignUp={signInSignUp} />}

diff --git a/frontend/src/components/Modal.module.css b/frontend/src/components/Modal.module.css
@@ -160,122 +160,6 @@
     margin-bottom: 5px;
   }
 
-  form {
-    background-color: #15172b;
-    border-radius: 20px;
-    box-sizing: border-box;
-    height: 500px;
-    padding: 20px;
-    width: 320px;
-  }
-
-  title {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 36px;
-    font-weight: 600;
-    margin-top: 30px;
-  }
-
-  .subtitle {
-    color: #eee;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    margin-top: 10px;
-  }
-
-  .input-container {
-    height: 50px;
-    position: relative;
-    width: 100%;
-  }
-
-  .ic1 {
-    margin-top: 40px;
-  }
-
-  .ic2 {
-    margin-top: 30px;
-  }
-
-  .input {
-    background-color: #303245;
-    border-radius: 12px;
-    border: 0;
-    box-sizing: border-box;
-    color: #eee;
-    font-size: 18px;
-    height: 100%;
-    outline: 0;
-    padding: 4px 20px 0;
-    width: 100%;
-  }
-
-  .cut {
-    background-color: #15172b;
-    border-radius: 10px;
-    height: 20px;
-    left: 20px;
-    position: absolute;
-    top: -20px;
-    transform: translateY(0);
-    transition: transform 200ms;
-    width: 76px;
-  }
-
-  .cut-short {
-    width: 50px;
-  }
-
-  .input:focus ~ .cut,
-  .input:not(:placeholder-shown) ~ .cut {
-    transform: translateY(8px);
-  }
-
-  .placeholder {
-    color: #65657b;
-    font-family: sans-serif;
-    left: 20px;
-    line-height: 14px;
-    pointer-events: none;
-    position: absolute;
-    transform-origin: 0 50%;
-    transition: transform 200ms, color 200ms;
-    top: 20px;
-  }
-
-  .input:focus ~ .placeholder,
-  .input:not(:placeholder-shown) ~ .placeholder {
-    transform: translateY(-30px) translateX(10px) scale(0.75);
-  }
-
-  .input:not(:placeholder-shown) ~ .placeholder {
-    color: #808097;
-  }
-
-  .input:focus ~ .placeholder {
-    color: #dc2f55;
-  }
-
-  .submit {
-    background-color: #08d;
-    border-radius: 12px;
-    border: 0;
-    box-sizing: border-box;
-    color: #eee;
-    cursor: pointer;
-    font-size: 18px;
-    height: 50px;
-    margin-top: 38px;
-    text-align: center;
-    width: 100%;
-  }
-
-  .submit:active {
-    background-color: #06b;
-  }
-
   .form {
     background-color: #15172b;
     border-radius: 20px;

diff --git a/frontend/src/components/SignIn.js b/frontend/src/components/SignIn.js
@@ -1,34 +1,26 @@
-import React, { useState } from "react";
+import styles from "./Modal.module.css";
 
 const SignIn = ({ signIsOpen }) => {
-  const [showForm, setShowForm] = useState(false);
-
   return (
-    <>
       <div>
       <form>
-      <div className="title">Welcome</div>
-      <div className="subtitle">Let's login!</div>
+      <div className={styles.title}>Welcome</div>
+      <div className={styles.subtitle}>Let's login!</div>
       <div className="input-container ic1">
-        <input id="login" className="input" type="text" placeholder="Login" data-cy="loginInput"/>
+        <input id="login" className={styles.input} type="text" placeholder="Login" data-cy="loginInput"/>
         <div className="cut"></div>
         <label for="login" className="placeholder">Login:</label>
       </div>
       <div className="input-container ic2">
-        <input id="password" className="input" type="text" placeholder="Password" data-cy="passwordInput"/>
+        <input id="password" className={styles.input} type="text" placeholder="Password" data-cy="passwordInput"/>
         <div className="cut"></div>
         <label for="password" className="placeholder">Password:</label>
       </div>
-      <button type="text" className="submit" data-cy="loginButton">Login</button>
+      <button type="text" className={styles.submit} data-cy="loginButton" onClick={() => alert('Soon')}>Login</button>
       &nbsp;&nbsp;
-     <button type="text" className="submit" data-cy="cancelButton">Cancel</button>
+     <button type="text" className={styles.submit} data-cy="cancelButton">Cancel</button>
       </form>
-      {showForm && (
-        <form>
-        </form>
-      )}
     </div>
-    </>
   );
 };
 

diff --git a/frontend/src/components/SignUp.js b/frontend/src/components/SignUp.js
@@ -1,44 +1,36 @@
-import React, { useState } from "react";
+import styles from "./Modal.module.css";
 
 const SignUp = ({ signInSignUp }) => {
-
-  const [showForm, setShowForm] = useState(false);
-
- return (
-   <>
+return (
      <div>
      <form>
-     <div className="title">Welcome</div>
-     <div className="subtitle">Let's create your account!</div>
+     <div className={styles.title}>Welcome</div>
+     <div className={styles.subtitle}>Let's create your account!</div>
      <div className="input-container ic1">
-       <input id="firstname" className="input" type="text" placeholder="First Name" data-cy="firstNameInput"/>
+       <input id="firstname" className={styles.input} type="text" placeholder="First Name" data-cy="firstNameInput"/>
        <div className="cut"></div>
        <label for="firstname" className="placeholder">First name</label>
      </div>
      <div className="input-container ic2">
-       <input id="lastname" className="input" type="text" placeholder="Last Name" data-cy="lastNameInput"/>
+       <input id="lastname" className={styles.input} type="text" placeholder="Last Name" data-cy="lastNameInput"/>
        <div className="cut"></div>
        <label for="lastname" className="placeholder">Last name</label>
      </div>
      <div className="input-container ic2">
-       <input id="email" className="input" type="text" placeholder="Login" data-cy="loginInput"/>
+       <input id="email" className={styles.input} type="text" placeholder="Login" data-cy="loginInput"/>
        <div className="cut cut-short"></div>
        <label for="email" className="placeholder">Login</label>
      </div>
      <div className="input-container ic2">
-       <input id="email" className="input" type="text" placeholder="Password" data-cy="passwordInput"/>
+       <input id="email" className={styles.input} type="text" placeholder="Password" data-cy="passwordInput"/>
        <div className="cut cut-short"></div>
        <label for="email" className="placeholder">Password</label>
      </div>
-     <button type="text" className="submit" data-cy="createAccountButton">Create Account</button>
+     <button type="text" className={styles.submit} data-cy="createAccountButton" onClick={() => alert('Soon')}>Create Account</button>
      &nbsp;&nbsp;
-     <button type="text" className="submit" data-cy="cancelButton">Cancel</button>
+     <button type="text" className={styles.submit} data-cy="cancelButton">Cancel</button>
      </form>
-     {showForm && (
-       <form></form>
-     )}
    </div>
-   </>
   );
 };