Merge pull request #10 from DrumondPedro/main

fix bugs
Green-Cycle · Jun 3, 2024 · 4e3ed33 · 4e3ed33
2 parents 65bbaf2 + d75614d
commit 4e3ed33
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 125 deletions.
diff --git a/Frontend/src/components/Featured.css b/Frontend/src/components/Featured.css
@@ -1,18 +1,17 @@
 @keyframes cardsIn {
-  from{
+  from {
     opacity: 0;
     transform: translateY(10px);
   }
   to {
     transform: translateY(0px);
     opacity: 1;
   }
-
 }
 
 .featured {
   padding: 1rem;
-  background-color: #d3d2cd;
+  background-color: #dfddd2;
 }
 
 .featured__title {
@@ -24,38 +23,35 @@
 
 .featured__card-list {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
+  justify-content: space-evenly;
+  column-gap: 2rem;
+  row-gap: 2rem;
+  flex-wrap: wrap;
+  overflow: hidden;
   margin-bottom: 2rem;
 }
 
-
-.featured__icon {
-  width: 25px;
-  height: 25px;
+.fetureed__store-link {
+  text-decoration: none;
+  color: #454545;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: center;
+  margin: auto;
 }
 
-
-
 @media screen and (min-width: 880px) {
-  .featured {
-    padding: 3rem;
-  }
-
-  .featured__title {
-    font-size: 2rem;
-    margin-bottom: 4rem;
+  .fetureed__store-link {
+    justify-content: end;
+    max-width: 970px;
   }
 
   .featured__card-list {
     flex-direction: row;
-    justify-content: space-around;
     gap: 2rem;
     max-width: 1000px;
     margin: auto;
-    margin-bottom: 4rem;
-    flex-wrap: wrap;
+    margin-bottom: 2.5rem;
   }
 }
diff --git a/Frontend/src/components/Featured.jsx b/Frontend/src/components/Featured.jsx
@@ -1,22 +1,23 @@
 import './Featured.css';
 import Cart from './Cart';
-import Loading from './Loading'
+import Loading from './Loading';
 import ProductCard from './ProductCard';
 import { getFeaturedProducts } from '../utils/api';
 import { useEffect, useState } from 'react';
 import { useCart } from '../contexts/CartContext';
+import { Link } from 'react-router-dom';
 
 function Featured() {
   const [featured, setFeatured] = useState([]);
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(true);
   const { addItemToCart } = useCart();
 
   // FETCH FEATURED PRODUCTS DATA
   useEffect(() => {
     async function fetchData() {
-      setIsLoading(true) // SET LOADING TEXT TO TRUE
+      setIsLoading(true); // SET LOADING TEXT TO TRUE
       const products = await getFeaturedProducts();
-      setIsLoading(false) // SET LOADING TEXT TO FALSE
+      setIsLoading(false); // SET LOADING TEXT TO FALSE
       setFeatured(products);
     }
     fetchData();
@@ -28,9 +29,17 @@ function Featured() {
       {isLoading && <Loading />}
       <div className='featured__card-list'>
         {featured.map((item) => (
-          <ProductCard item={item} addItemToCart={addItemToCart} key={item._id} />
+          <ProductCard
+            item={item}
+            addItemToCart={addItemToCart}
+            key={item._id}
+          />
         ))}
       </div>
+      <Link to='/store' className='fetureed__store-link'>
+        <p>IR PARA LOJA</p>
+        <img src='/assets/arrowIcon.svg' alt='Arrow icon' />
+      </Link>
     </div>
   );
 }

diff --git a/Frontend/src/components/Header.css b/Frontend/src/components/Header.css
@@ -28,22 +28,19 @@
 .header__icons {
   display: flex;
   align-items: center;
-  gap: 40px
 }
 
-.header__corner-menu{
+.header__corner-menu {
   display: flex;
-  gap: 40px;
-  align-items:center;
+  gap: 24px;
+  align-items: center;
 }
 
-
 .header__login-box {
   display: flex;
   align-items: center;
   justify-content: space-around;
   flex-direction: column;
-  margin-right: 1.5rem;
 }
 
 .header__login-button {
@@ -58,13 +55,13 @@
   transition: 250ms ease-in-out;
 }
 
-.header__login-button:hover{
-  background-color: #5F6368;
+.header__login-button:hover {
+  background-color: #5f6368;
   color: white;
   border: none;
 }
 
-.header__signup-link{
+.header__signup-link {
   margin-top: 0.4rem;
   font-size: 14px;
   color: black;
@@ -73,17 +70,19 @@
 .header__hamburguer {
   display: none;
 }
+
 .header__menu {
   display: none;
 }
+
 .header__line {
   margin: 0 auto;
   width: 100%;
   height: 1px;
   background: #545454;
 }
 
-.header__user-wrapper{
+.header__user-wrapper {
   background-color: white;
   position: fixed;
   top: 0;
@@ -97,34 +96,69 @@
   z-index: 1;
 }
 
-.header__close-button{
+.header__close-button {
   color: black;
   position: absolute;
   top: 20px;
   left: 20px;
-  font-size: 1.5rem;;
+  font-size: 1.5rem;
 }
 
-.header__logout-button{
-  background-color:black;
+.header__logout-button {
+  background-color: black;
   width: 150px;
   height: 40px;
   border-radius: 12px;
   margin-inline: auto;
   transition: 250ms ease-in-out;
 }
 
-.header__logout-button:hover{
-  background-color: #5F6368;
-  color: white
+.header__logout-button:hover {
+  background-color: #5f6368;
+  color: white;
 }
 
 @media screen and (max-width: 880px) {
   .header__hamburguer {
     display: flex;
   }
+
+  .header__hamburger {
+    padding-top: 10px;
+  }
+
   .header__menu_open {
     display: flex;
     justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .header__logo {
+    position: static;
+  }
+
+  .header__icons {
+    gap: 24px;
+  }
+}
+
+@media screen and (max-width: 580px) {
+  .header__top {
+    flex-direction: column;
+  }
+
+  .header__icons {
+    padding-top: 16px;
+    display: flex;
+    align-items: center;
+  }
+
+  .header__login-box {
+    margin: auto;
+  }
+
+  .header__corner-menu {
+    margin: auto;
   }
 }
diff --git a/Frontend/src/components/Header.jsx b/Frontend/src/components/Header.jsx
@@ -1,4 +1,4 @@
-import { useState , useEffect} from 'react';
+import { useState, useEffect } from 'react';
 import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
 import './Header.css';
 import Cart from './Cart';
@@ -14,7 +14,7 @@ import { checkToken } from '../utils/auth';
 function Header() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [isCartOpen, setIsCartOpen] = useState(false);
-  const [userWindow, setUserWindow] = useState(false)
+  const [userWindow, setUserWindow] = useState(false);
 
   const location = useLocation();
   const isLoginPage = location.pathname === '/login';
@@ -31,25 +31,27 @@ function Header() {
     addItemToCart,
   } = useCart();
 
-  const [token, setToken] = useState(localStorage.getItem('token'))
+  const [token, setToken] = useState(localStorage.getItem('token'));
 
   // CHECK IF THERE'S A TOKEN
   async function tokenCheck() {
-    token ? handleLogin() : console.log('no token')
+    token ? handleLogin() : console.log('no token');
   }
 
   // Handle successful login
   const handleLogin = async () => {
     try {
-      const data = await checkToken(token)
-      console.log(data)
-      login(data)
-    } catch (err) {console.log(err)}
-  }
+      const data = await checkToken(token);
+      console.log(data);
+      login(data);
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
-  useEffect(() =>{
+  useEffect(() => {
     tokenCheck();
-  },[])
+  }, []);
 
   const toggleMenu = () => {
     setMenuOpen(!menuOpen);
@@ -60,11 +62,11 @@ function Header() {
   };
 
   const onLogout = () => {
-    localStorage.removeItem('token')
-    setUserWindow(false)
+    localStorage.removeItem('token');
+    setUserWindow(false);
     logout();
-    navigate('/')
-  }
+    navigate('/');
+  };
 
   return (
     <div className='header'>
@@ -87,18 +89,33 @@ function Header() {
                   className='account-icon'
                 />
               </button>
-              <button onClick={()=> {setUserWindow(true)}}>
+              <button
+                onClick={() => {
+                  setUserWindow(true);
+                }}
+              >
                 <img
                   src='/assets/accountIcon.svg'
                   alt='account icon'
                   className='account-icon'
                 />
               </button>
-              {userWindow && <div className='header__user-wrapper'>
-                <button className='header__close-button' onClick={() => {setUserWindow(false)}}>X</button>
-                <span className='header__username'>Olá, {user?.name}</span>
-                <button className='header__logout-button' onClick={onLogout}>LOGOUT</button>
-              </div>}
+              {userWindow && (
+                <div className='header__user-wrapper'>
+                  <button
+                    className='header__close-button'
+                    onClick={() => {
+                      setUserWindow(false);
+                    }}
+                  >
+                    X
+                  </button>
+                  <span className='header__username'>Olá, {user?.name}</span>
+                  <button className='header__logout-button' onClick={onLogout}>
+                    LOGOUT
+                  </button>
+                </div>
+              )}
             </>
           )}
           {!isLoggedIn && !isLoginPage && !isRegisterPage && (
@@ -115,7 +132,10 @@ function Header() {
                   LOGIN
                 </Link>
                 <p className='header__signup-link'>
-                  ou <Link to={'/register'} className='header__signup-link'>crie sua conta</Link>
+                  ou{' '}
+                  <Link to={'/register'} className='header__signup-link'>
+                    crie sua conta
+                  </Link>
                 </p>
               </div>
             </div>