🌟 validate SignUp form and update colors for global variable colors

Author: LuciLua

src/components/Form/Buttons/Buttons.module.scss

@@ -28,8 +28,10 @@
 
  overflow: hidden;
 
+ outline: none;
+
  a {
- color: #0101018f;
+ color: var(--grayDarkPrimary90opacity);
  text-decoration: none;
  font-weight: 600;
  font-family: Poppins;
@@ -40,34 +42,41 @@
  cursor: default;
  user-select: none;
  pointer-events: none;
+
  }
 
  &.active {
- background-color: #ff9f19;
+ background-color: var(--yellowPrimary);
  color: #1e1e1e;
  cursor: pointer;
  user-select: none;
  pointer-events: all;
 
+ &:focus {
+ background-color: var(--yellowPastel);
+ outline: 1px solid var(--yellowPrimary);
+ }
+
  a {
  user-select: none;
  pointer-events: all;
- color: #1e1e1e;
+ color: var(--grayDarkPrimary);
  cursor: pointer;
 
  &:hover {
- background-color: #f2991d;
-
+ background-color: var(--yellowPastel);
  }
  }
  }
  }
 
  .c_btn_create {
- margin: 10px 0 30px 0;
+ margin: 15px 0 30px 0;
+ border: none;
+ background-color: transparent;
 
  span>a {
- color: #ffbe1899;
+ color: var(--yellowtDescriptions);
  font-weight: 300;
  font-size: 12px;
  }

src/components/Form/Buttons/Buttons.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import styles from "./Buttons.module.scss"
 
 function Buttons({ statusLogin }) {
@@ -45,13 +45,13 @@ function Buttons({ statusLogin }) {
  <span ref={c_btn_span} />
  </Link>
  </button>
- <div className={styles.c_btn_create}>
+ <button className={styles.c_btn_create}>
  <span>
  <Link href={hrefLinkByStateLogin}>
  <span ref={c_btn_create_span} />
  </Link>
  </span>
- </div>
+ </button>
  </div>
  )
 }

src/components/Form/Footer/Footer.module.scss

@@ -1,5 +1,5 @@
 .footer {
- background-color: #ffbd18;
+ background-color: var(--yellowLightPrimary);
  height: 24px;
  width: 100%;
 
@@ -18,8 +18,8 @@
  align-items: center;
 
  list-style: none;
- color: #1f1f1e;
- font-size: 1.2em;
+ color: var(--grayDarkPrimary);
+ font-size: 1.1em;
 
  margin: 0 2px;
  padding: 0 5px;

src/components/Form/Form.module.scss

@@ -7,7 +7,7 @@
  flex-direction: column;
  justify-content: space-between;
 
- background-color: #1e1e1e;
+ background-color: var(--grayDarkPrimary);
  border-radius: 4px;
 
  position: relative;

src/components/Form/Form.tsx

@@ -9,15 +9,30 @@ import SignUp from "./SignUp/SignUp"
 
 function Form({ state }) {
  const [statusLogin, setStatusLogin] = useState<Boolean>(false)
+ const [path, setPath] = useState<String>('/')
+
+ function verifyIfCanSubmit(e){
+ if(statusLogin){
+ setPath('/logged')
+ }
+ else {
+ setPath('/')
+ e.preventDefault()
+ }
+ }
+
 
  return (
- <div className={styles.container}>
+ <form className={styles.container} onSubmit={e => verifyIfCanSubmit(e)} action={`${path}`}>
  <div className={styles.tick} />
- {state == 'signIn' ? <SignIn setStatusLogin={setStatusLogin} /> : <SignUp setStatusLogin={setStatusLogin} />}
+ {state == 'signIn' ?
+ <SignIn setStatusLogin={setStatusLogin} />
+ :
+ <SignUp setStatusLogin={setStatusLogin} />}
  <Buttons statusLogin={statusLogin} />
  <Footer />
- </div>
+ </form>
  )
 }
 
-export default Form
+export default Form 

src/components/Form/Header/Header.module.scss

@@ -14,13 +14,13 @@
 
  h1 {
  font-size: 23px;
- color: rgb(236, 255, 255);
+ color: var(--grayLightH1);
  font-weight: 700;
  }
 
  h2 {
  font-size: 12px;
- color: rgb(121, 147, 148);
+ color: var(--grayLightH2);
  font-weight: 400;
  }
 }

src/components/Form/SignIn/SignIn.module.scss renamed to src/components/Form/Inputs.module.scss

@@ -11,7 +11,7 @@
 
  position: relative;
 
- gap: 20px;
+ gap: 15px;
 
  .input {
 
@@ -26,26 +26,30 @@
  position: relative;
 
  label{
- color: #fff;
+ color: var(--grayDarkLight);
  font-size: 13px;
  font-weight: 300;
- margin-bottom: 4px;
+ margin-bottom: 2px;
  }
 
  .icon{
  position: absolute;
- color: #fff;
+ color: var(--grayDarkMedium);
  top: 37px;
  left: 5px;
  }
 
  input {
- border: 1px solid rgba(255, 255, 255, 0.411);
- color: #fff;
+ border: 1px solid var(--grayDarkMedium);
+ color: var(--write);
  padding: 10px 28px;
  border-radius: 4px;
 
  background-color: transparent;
+
+ &:focus{
+ outline: 1px solid var(--yellow75opacity);
+ }
  }
  }
 

src/components/Form/SignIn/SignIn.tsx

@@ -1,4 +1,4 @@
-import styles from "./SignIn.module.scss"
+import styles from "../Inputs.module.scss"
 import { AiOutlineUser } from "react-icons/ai"
 import { RiLockPasswordLine } from "react-icons/ri"
 import { useEffect, useState } from "react"
@@ -51,16 +51,16 @@ function SignIn({ setStatusLogin }) {
  <Header title={'Login'} description={'Access your account now'} />
  <div className={styles.inputs}>
  <div className={styles.input}>
- <label htmlFor="login">Login</label>
+ <label htmlFor="email">Email</label>
  <div className={styles.icon}>
  <AiOutlineUser />
  </div>
  <input
  autoComplete="off"
  onInput={(e: any) => setEmail(e.target.value)}
- id="login"
+ id="email"
  type="text"
- placeholder="Login" />
+ placeholder="Email" />
  </div>
  <div className={styles.input}>
  <label htmlFor="pass">Senha</label>