Jobformstyle

.gitignore

@@ -3,6 +3,7 @@
 # dependencies
 /node_modules
 /.pnp
+.env
 .pnp.js
 
 # testing

src/components/LoginForm/LoginForm.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import styles from './LoginForm.module.css'
+import './loginform.css'
 import * as authService from '../../services/authService'
 
 const LoginForm = props => {
@@ -30,36 +30,44 @@ const LoginForm = props => {
     <form
       autoComplete="off"
       onSubmit={handleSubmit}
-      className={styles.container}
+      className="signin-form-container"
     >
-      <div className={styles.inputContainer}>
-        <label htmlFor="email" className={styles.label}>Email</label>
+      {/* email field */}
+      <div className="signin-input-container">
+        <label htmlFor="email"></label>
         <input
           type="text"
           autoComplete="off"
           id="email"
           value={formData.email}
           name="email"
+          placeholder='Email'
           onChange={handleChange}
+          className="sign-in-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="password" className={styles.label}>Password</label>
+      {/* sign in field */}
+      <div className="signin-input-container">
+        <label htmlFor="password"></label>
         <input
           type="password"
           autoComplete="off"
           id="password"
           value={formData.pw}
           name="pw"
+          placeholder='Password'
           onChange={handleChange}
+          className="sign-in-input"
         />
       </div>
+      {/* forget password */}
+      <Link to="/"><p className="forgot-password">Forgot Password?</p></Link>
+      {/* sign in button */}
       <div>
-        <button className={styles.button}>Log In</button>
-        <Link to="/">
-          <button>Cancel</button>
-        </Link>
+        <button className="signin-button">Sign In</button>
       </div>
+      {/* link to make an account */}
+      <p className="need-account">Don't have an account? <Link to="/signup">Sign Up</Link></p>
     </form>
   )
 }

src/components/LoginForm/loginform.css

@@ -0,0 +1,41 @@
+.sign-in-input{
+    background-color: #EEEEEE;
+    border-radius: 10px;
+    border: 5px solid #EEEEEE;
+    color: black;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 75%;
+}
+
+.forgot-password {
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-left: 10%;
+    font-size: 10px;
+}
+
+.signin-button {
+    background-color: #0050A3;
+    color: white;
+    font-weight: bold;
+    border: 0px;
+    border-radius: 15px;
+    padding-left: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-bottom: 80%;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 80%;
+}
+
+.need-account {
+    font-size: 10px;
+    text-align: center;
+    padding-bottom: 10%;
+}

src/components/SignupForm/SignupForm.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import styles from './SignupForm.module.css'
+import './signupform.css'
 import * as authService from '../../services/authService'
 
 const SignupForm = props => {
@@ -41,62 +41,71 @@ const SignupForm = props => {
     <form
       autoComplete="off"
       onSubmit={handleSubmit}
-      className={styles.container}
+      className="sign-up-form-container"
     >
-      <div className={styles.inputContainer}>
-        <label htmlFor="name" className={styles.label}>Name</label>
+      {/* name field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="name"></label>
         <input
           type="text"
           autoComplete="off"
           id="name"
           value={name}
           name="name"
           onChange={handleChange}
+          placeholder="Name"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="email" className={styles.label}>Email</label>
+      {/* email field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="email"></label>
         <input
           type="text"
           autoComplete="off"
           id="email"
           value={email}
           name="email"
           onChange={handleChange}
+          placeholder="Email"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="password" className={styles.label}>Password</label>
+      {/* password field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="password"></label>
         <input
           type="password"
           autoComplete="off"
           id="password"
           value={password}
           name="password"
           onChange={handleChange}
+          placeholder="Password"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="confirm" className={styles.label}>
-          Confirm Password
-        </label>
+      {/* password confirm field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="confirm"></label>
         <input
           type="password"
           autoComplete="off"
           id="confirm"
           value={passwordConf}
           name="passwordConf"
           onChange={handleChange}
+          placeholder="Confirm Password"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <button disabled={isFormInvalid()} className={styles.button}>
-          Sign Up
+      <div className="sign-up-button-container">
+        <button disabled={isFormInvalid()} className="sign-up-button">
+          Create account
         </button>
-        <Link to="/">
-          <button>Cancel</button>
-        </Link>
       </div>
+      {/* link to make an account */}
+      <p className="have-account">Already have an account?<Link to="/login">Sign In</Link></p>
     </form>
   )
 }

src/components/SignupForm/signupform.css

@@ -0,0 +1,39 @@
+.sign-up-input-container {
+    margin-bottom: 1rem;
+    width:100%;
+}
+
+.sign-up-input {
+    background-color: #EEEEEE;
+    border-radius: 10px;
+    border: 5px solid #EEEEEE;
+    color: black;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 75%;
+}
+
+.sign-up-button {
+    background-color: #0050A3;
+    color: white;
+    font-weight: bold;
+    border: 0px;
+    border-radius: 15px;
+    padding-left: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-bottom: 50%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 50px;
+    width: 80%;
+}
+
+.have-account {
+    font-size: 10px;
+    text-align: center;
+    padding-bottom: 10%;
+}