favorites and cart themes have been changed

0MeMo07 · Feb 21, 2024 · 5365495 · 5365495
1 parent c08793e
commit 5365495
Show file tree

Hide file tree

Showing 8 changed files with 402 additions and 321 deletions.
diff --git a/src/app/Cart.jsx b/src/app/Cart.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { BsChevronCompactRight,  BsChevronCompactLeft } from "react-icons/bs";
 import { FaLongArrowAltLeft } from "react-icons/fa";
 import classNames from 'classnames';
+import Header from '../components/Search'
 import '../css/Cart.css';
 import '../css/newCart.css'
 export default function Cart() {
@@ -150,7 +151,6 @@ export default function Cart() {
 
   return (
     <>
-
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" />
@@ -174,7 +174,7 @@ export default function Cart() {
                   <div className="row">{product.title}</div>
                 </div>
                 <div className="col">
-                  <a href="#" onClick={() => RemoveQuantity(product.id)}>-</a><a className="border">{product.quantity}</a><a href="#" onClick={() => AddQuantity(product.id)}>+</a>
+                  <Link className='cartLinks' onClick={() => RemoveQuantity(product.id)}>-</Link><Link className="border" id='cartLinks'>{product.quantity}</Link><Link className='cartLinks' onClick={() => AddQuantity(product.id)}>+</Link>
                 </div>
                 <div className="col">${product.price * product.quantity} <span className="close" onClick={() => DeleteProduct(product.id)}>&#10005;</span></div>
               </div>

diff --git a/src/app/Favorites.jsx b/src/app/Favorites.jsx
@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import FavNotFound from '../components/FavNotFound';
 import { FaRegTrashCan } from "react-icons/fa6";
+import Header from '../components/Search'
 import Button from "@mui/material/Button";
-import '../css/FavoritesD.css'
+import { IoIosHeart, IoMdHeartEmpty } from "react-icons/io";
+import '../css/Favorites.css'
 
 export default function Favorites({ product, total, money, basket, setBasket, value }) {
   const [favoritesCount, setFavoritesCount] = useState(0);
@@ -81,29 +83,27 @@ export default function Favorites({ product, total, money, basket, setBasket, va
     }
 
     localStorage.setItem('Products', JSON.stringify(ProductItems));
-    setProductItem(!ProductItem);
+    setProductItem(!ProductItem)
 
-  };
+  }
+
   return (
     <>
-      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
-      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" />
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" />
-      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
-
-      <h6 className="mb-0">Shopping Favorites</h6>
-      <div className="d-flex justify-content-between">
+      <Header/>
+      <div className="FavTitle">
+      <h6 className="mb-0">Shopping Favorites <IoIosHeart className='FavHeart'/></h6>
+      <div className="FavİtemCount">
         <span>You have {favoritesCount} items in your Favorites</span>
         {favoritesCount === 0 && <FavNotFound />}
       </div>
+      </div>
       {productDetails.map((product, index) => (
-      <div className="container page-wrapper" key={index}>
+      <div className="FavoritesContainer page-wrapper" key={index}>
         <div className="page-inner">
           <div className="row">
             <div className="el-wrapper">
               <div className="box-up">
-              <i className="fa fa-trash-o ml-3 text-black-50" id="Trash" onClick={() => DeleteFavorite(product.id)}></i>
-                <img className="img" src={product.thumbnail} alt="" />
+                <img className="img" id="Favİtemİmage" src={product.thumbnail} alt="" />
                 <div className="img-info">
                   <div className="info-inner">
                     <span className="p-name">{product.title}</span>
@@ -117,12 +117,15 @@ export default function Favorites({ product, total, money, basket, setBasket, va
                 <div className="h-bg">
                   <div className="h-bg-inner"></div>
                 </div>
-                <a className="cart" href="#" onClick={() => toggleProduct(product.id)}>
+                <Link className="cart" onClick={() => toggleProduct(product.id)}>
                   <span className="price">${product.price}</span>
                   <span className="add-to-cart">
-                    <span className="txt" ><Link to="/cart" className='FavİconLinks'>Go To Cart </Link></span>
+                    <span className="txt" >
+                      <Link to="/cart" className='GoToCartLink'>Go To Cart </Link>
+                      <FaRegTrashCan id="FTrash" onClick={() => DeleteFavorite(product.id)}></FaRegTrashCan>
+                    </span>
                   </span>
-                </a>
+                </Link>
               </div>
             </div>
           </div>

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -153,7 +153,7 @@ export default function PrimarySearchAppBar({ product, total, money, basket, set
           color="inherit"
         >
           <Badge badgeContent={favoritesCount} color="error">
-            <IoIosHeart />
+            <IoIosHeart  className="IoHeart"/>
           </Badge>
         </IconButton>
         <Link to="/Favorites" className='MobilMenuİconLinks'>Favorites</Link>
@@ -208,8 +208,12 @@ export default function PrimarySearchAppBar({ product, total, money, basket, set
                 inputProps={{ 'aria-label': 'search' }}
                 value={value}
                 onChange={(e) => {
-                  setValue(e.target.value);
-                  onSearch(e.target.value);
+                  try {
+                    setValue(e.target.value);
+                    onSearch(e.target.value);
+                  } catch (error) {
+                    console.error("Error:", error);
+                  }
                 }}
               />
             </Search>

diff --git a/src/css/FavNotFound.css b/src/css/FavNotFound.css
@@ -1,7 +1,7 @@
 .not-found-container {
     text-align: center;
     position: fixed;
-    top: 50%;
+    top: 65%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 20px;
@@ -11,6 +11,20 @@
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+@media (max-width: 767px) {
+    .not-found-container {
+        text-align: center;
+        position: fixed;
+        top: 65%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 20px;
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        background-color: #f9f9f9;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+}
 .empty-image {
     width: 100px; 
     height: auto;