Merge branch 'Green-Cycle:main' into main

Green-Cycle · Jun 3, 2024 · d75614d · d75614d
2 parents 4c479f3 + 389d177
commit d75614d
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 64 deletions.
diff --git a/Frontend/src/components/Footer.css b/Frontend/src/components/Footer.css
@@ -14,9 +14,16 @@
   row-gap: 10px;
 }
 
+.footer__link {
+  color: white;
+  text-decoration: none;
+  padding-left: 0.5rem;
+}
+
 .footer__column {
   display: flex;
   column-gap: 5px;
+  align-items: center;
 }
 
 .footer__column-social {

diff --git a/Frontend/src/components/Footer.jsx b/Frontend/src/components/Footer.jsx
@@ -1,7 +1,8 @@
+import { Link } from 'react-router-dom';
 import './Footer.css';
 function Footer() {
   return (
-    <footer className='footer'>
+    <footer className='footer' id='footer'>
       <div className='footer__columns'>
         {' '}
         <div className='footer__column'>
@@ -10,7 +11,9 @@ function Footer() {
             alt='icone de folha'
             className='footer__icon'
           />
-          <p>Sobre</p>
+          <Link to={'/sobre'} className='footer__link'>
+            Sobre
+          </Link>
         </div>
       </div>
 

diff --git a/Frontend/src/components/Nav.jsx b/Frontend/src/components/Nav.jsx
@@ -1,26 +1,32 @@
 import './Nav.css';
 import { Link } from 'react-router-dom';
 function Nav({ menuOpen }) {
+  const handleClick = () => {
+    const footer = document.getElementById('footer');
+    footer.scrollIntoView({ behavior: 'smooth' });
+  };
   return (
     <nav>
       <ul className={menuOpen ? 'header__hamburger' : 'nav'}>
         <li className='nav__li'>
           <Link className='nav__link' to={'/store'}>
-            Loja
+            LOJA
           </Link>
         </li>
         <li className='nav__li'>
           <Link className='nav__link' to={'/sobre'}>
-            Sobre nós
+            SOBRE
           </Link>
         </li>
         <li className='nav__li'>
           <Link className='nav__link' to={'/maps'}>
-            Pontos de coleta
+            PONTOS DE COLETA
           </Link>
         </li>
         <li className='nav__li'>
-          <a className='nav__link'>Contato</a>
+          <a onClick={handleClick} className='nav__link'>
+            CONTATO
+          </a>
         </li>
       </ul>
     </nav>

diff --git a/Frontend/src/components/ProductCard.jsx b/Frontend/src/components/ProductCard.jsx
@@ -2,27 +2,53 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './ProductCard.css';
 
-function ProductCard({item, addItemToCart}) {
-  const [itemAdded, setItemAdded] = useState(false)
+function ProductCard({ item, addItemToCart }) {
+  const [itemAdded, setItemAdded] = useState(false);
 
   const navigate = useNavigate();
 
   // ADD VISUAL FEEDBACK WHEN USER ADDS ITEM TO CART
   const onAddingItem = () => {
-    setItemAdded(true)
-    addItemToCart(item)
-    setTimeout(()=>{setItemAdded(false)},1000)
-  }
+    setItemAdded(true);
+    addItemToCart(item);
+    setTimeout(() => {
+      setItemAdded(false);
+    }, 1000);
+  };
 
   return (
     <div className='featured__card'>
-      {itemAdded && <div style={{position: 'fixed', height: '100%', width: '100%', top: 0, right: 0, backgroundColor: 'rgba(255,255,255,0.9)', borderRadius: '12px'}}>
-        <div style={{height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
-          <p style={{fontSize: '2rem'}}>Item added to cart!</p>
+      {itemAdded && (
+        <div
+          style={{
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            top: 0,
+            right: 0,
+            backgroundColor: 'rgba(255,255,255,0.9)',
+            borderRadius: '12px',
+          }}
+        >
+          <div
+            style={{
+              height: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <p style={{ fontSize: '2rem' }}>Item adicionado à sacola!</p>
+          </div>
         </div>
-      </div>}
-      <img src={item.cover} alt={item.name} onClick={()=>{
-        navigate(`/product/${item._id}`)}}/>
+      )}
+      <img
+        src={item.cover}
+        alt={item.name}
+        onClick={() => {
+          navigate(`/product/${item._id}`);
+        }}
+      />
       <div className='featured__container'>
         <div className='featured__description-wrapper'>
           <p className='featured__text'>{item.name}</p>
@@ -31,9 +57,10 @@ function ProductCard({item, addItemToCart}) {
 
         <button
           className='featured__button'
-          style={{color: 'black'}}
+          style={{ color: 'black' }}
           onClick={onAddingItem}
-          >+
+        >
+          +
           {/* <img
             src='/assets/addToCart.svg'
             alt='add to cart icon'
@@ -42,7 +69,7 @@ function ProductCard({item, addItemToCart}) {
         </button>
       </div>
     </div>
-  )
+  );
 }
 
-export default ProductCard
+export default ProductCard;
diff --git a/Frontend/src/pages/Login.css b/Frontend/src/pages/Login.css
@@ -1,13 +1,13 @@
 @keyframes errorPopupAnimation {
-  0%{
+  0% {
     opacity: 0;
   }
 
-  50%{
+  50% {
     opacity: 1;
   }
 
-  100%{
+  100% {
     display: none;
   }
 }
@@ -17,64 +17,65 @@
   height: 70vh;
 }
 
-.login__wrapper{
+.login__wrapper {
   width: 350px;
   border: 1px solid gray;
   margin: auto;
   border-radius: 8px;
   padding-block: 1.5rem;
 }
 
-.login__title{
+.login__title {
   font-weight: 400;
   font-size: 24px;
 }
 
-.login form{
+.login form {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   margin-top: 1.5rem;
   width: 90%;
-  margin-inline: auto
+  margin-inline: auto;
 }
 
-.login__input-wrapper{
-  position: relative
+.login__input-wrapper {
+  position: relative;
 }
 
-.login__input{
+.login__input {
   width: 100%;
   position: relative;
 }
 
-.login button{
-  background-color: #5F6368;
+.login button {
+  background-color: #5f6368;
   padding-block: 0.5rem;
   border-radius: 8px;
   width: 100%;
   transition: 250ms ease-out;
 }
 
-.login button:hover{
+.login button:hover {
   background-color: gray;
 }
 
-.login__input-error{
+.login__input-error {
   color: red;
   font-size: 11px;
   text-align: right;
   margin-top: 0.5rem;
 }
 
-.login__button-wrapper{
+.login__button-wrapper {
   width: 100%;
   position: relative;
 }
 
-.login__register{
+.login__register {
   margin-top: 1rem;
   font-size: 12px;
+  color: black;
 }
 
 .login__register-link {
@@ -83,7 +84,7 @@
   text-underline-offset: 5px;
 }
 
-.errorPopup{
+.errorPopup {
   position: fixed;
   top: 20px;
   right: 30px;
@@ -97,4 +98,4 @@
   color: white;
   text-transform: uppercase;
   animation: errorPopupAnimation 1s forwards;
-}
+}
diff --git a/Frontend/src/pages/Login.jsx b/Frontend/src/pages/Login.jsx
@@ -58,11 +58,10 @@ function Login() {
     setEmailError({ error: false, message: '' });
 
     const loginData = { email, password };
-    console.log(loginData);
+
     const result = await login(loginData);
 
     if (result && typeof result === 'string') {
-      console.log('Resultado do login:', result);
       localStorage.setItem('token', result);
       const userData = await getUserData(result);
       if (userData) {
@@ -73,7 +72,6 @@ function Login() {
         setMessage('Failed to fetch user data');
       }
     } else {
-      console.log('Falha no login. Resultado:', result);
       setMessage(
         'Falha ao fazer login. Verifique suas credenciais e tente novamente.'
       );
@@ -104,7 +102,7 @@ function Login() {
               className='login__input'
               name='password'
               type='password'
-              placeholder='password'
+              placeholder='Senha'
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required

diff --git a/Frontend/src/pages/Maps.css b/Frontend/src/pages/Maps.css
@@ -1,8 +1,9 @@
 .maps__container {
   display: flex;
   flex-direction: column;
-  background-color: #d3d2cd;
+  background-color: #dfddd2;
   padding: 5%;
+  align-items: center;
 }
 
 .maps {
@@ -34,13 +35,13 @@
 
 .maps__title {
   margin-right: 15px;
-  font-size: 2rem; /* Ajustando o tamanho da fonte para dispositivos móveis */
+  font-size: 2rem;
   font-weight: 400;
 }
 
 .maps__subtitle {
   display: flex;
-  text-align: center;
+  text-align: justify;
 }
 
 @media screen and (min-width: 500px) {
@@ -55,4 +56,7 @@
     width: 966px;
     height: 544px;
   }
+  .maps__info {
+    width: 50%;
+  }
 }
diff --git a/Frontend/src/pages/Maps.jsx b/Frontend/src/pages/Maps.jsx
@@ -77,7 +77,7 @@ function Maps() {
           </p>
         </div>
         <p className='maps__subtitle'>
-          Encontre um ponto de coleta perto de você:
+          ENCONTRE UM PONTO DE COLETA PERTO DE VOCÊ:
         </p>
       </div>
       <div className='maps'>

diff --git a/Frontend/src/pages/Register.css b/Frontend/src/pages/Register.css
@@ -75,7 +75,8 @@
   font-size: 12px;
 }
 
-.register__login > Link {
+.register__link {
+  color: black;
   text-decoration: underline;
   text-underline-offset: 5px;
 }
@@ -102,6 +103,7 @@
   }
   .register form {
     width: 80%;
+    height: 500px;
   }
   .register button {
     width: 45%;

diff --git a/Frontend/src/pages/Register.jsx b/Frontend/src/pages/Register.jsx
@@ -1,8 +1,9 @@
 import './Register.css';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { register } from '../utils/auth';
 function Register() {
+  const navigate = useNavigate();
   const [regData, setRegData] = useState({
     name: '',
     email: '',
@@ -63,6 +64,7 @@ function Register() {
     try {
       const data = await register(regData);
       setMessage(data.msg);
+      navigate('/login');
       return;
     } catch (error) {
       setMessage(error.message);
@@ -161,7 +163,7 @@ function Register() {
 
           <span className='register__login '>
             Já é um membro?
-            <Link to='/login' className='auth__link'>
+            <Link to='/login' className='register__link'>
               Faça o login aqui!!
             </Link>
           </span>