Dark and light mode bug fixed

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",

src/App.css

@@ -43,4 +43,78 @@
 }
 .dark_app{
   background: white;
-}
+}
+/* Popular Component Styling */
+.popular {
+  width: 90%; /* Prevents stretching to full width */
+  max-width: 1200px; /* Keeps it within a manageable size */
+  margin: auto; /* Centers the div */
+  padding: 20px;
+  box-sizing: border-box; /* Ensures padding doesn’t increase width */
+  text-align: center; /* Aligns text centrally */
+}
+
+/* Title Styling */
+.h1p_light {
+  color: black;
+}
+
+.h1p_dark {
+  color: white;
+}
+
+.h1p_light, .h1p_dark {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+/* Horizontal Line Styling */
+.hrp_light {
+  border: 2px solid black;
+  width: 60px;
+  margin: 0 auto 20px;
+}
+
+.hrp_dark {
+  border: 2px solid white;
+  width: 60px;
+  margin: 0 auto 20px;
+}
+
+/* Container for Items */
+.popular-item {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
+  gap: 20px; /* Space between items */
+  justify-content: center; /* Centers content */
+  padding: 10px;
+}
+
+/* Individual Item Styling */
+.item {
+  background-color: white;
+  padding: 15px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease-in-out;
+}
+
+.item:hover {
+  transform: scale(1.05); /* Slight zoom effect on hover */
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .popular {
+      width: 95%;
+  }
+
+  .h1p_light, .h1p_dark {
+      font-size: 24px;
+  }
+
+  .popular-item {
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjusts for smaller screens */
+  }
+}

src/App.js

@@ -14,7 +14,7 @@ import About from "./Pages/About";
 import Contact from "./Pages/Contact";
 import NotFound from "./Pages/NotFound";
 import ScrollToTop from "react-scroll-to-top";
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { ShopContext } from "./Context/ShopContext";
 import Collections from "./Pages/Collections";
 import Offers from "./Pages/Offers";

src/Components/Item/Item.jsx

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import './Item.css';
 import { Link } from 'react-router-dom';
-import { ShopContext } from '../../Context/ShopContext';
+// import { ShopContext } from '../../Context/ShopContext';
 
 const Item = (props) => {
-  const { theme } = useContext(ShopContext);
+  // const {  } = useContext(ShopContext);
 
   return (
     <div className="product-card">

src/Components/Navbar/Navbar.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import './Navbar.css';
 import logo from '../Assets/logo.png';
 import cart_icon from '../Assets/cart_icon.png';
@@ -13,17 +13,31 @@ const Navbar = () => {
     const [menu, setMenu] = useState("shop");
     const { getTotalCartItems, theme, setTheme } = useContext(ShopContext);
 
+    // ✅ Retrieve Theme from Local Storage on Page Load
+    useEffect(() => {
+        const savedTheme = localStorage.getItem("theme") || "light"; 
+        setTheme(savedTheme); 
+        if (savedTheme === "dark") {
+            setIcon(cart_icon_dark);
+            document.getElementById("nav").classList.add("dark");
+        } else {
+            setIcon(cart_icon);
+            document.getElementById("nav").classList.remove("dark");
+        }
+    }, [setTheme]);
+
+    // ✅ Toggle Theme & Save to Local Storage
     const toggle = () => {
-        if (theme === "dark") {
-            setTheme("light");
+        const newTheme = theme === "dark" ? "light" : "dark";
+        setTheme(newTheme);
+        localStorage.setItem("theme", newTheme);  // ✅ Store theme in localStorage
+
+        if (newTheme === "dark") {
             setIcon(cart_icon_dark);
-            const dnav = document.getElementById("nav");
-            dnav.classList.add("dark");
+            document.getElementById("nav").classList.add("dark");
         } else {
-            setTheme("dark");
             setIcon(cart_icon);
-            const dnav = document.getElementById("nav");
-            dnav.classList.remove("dark");
+            document.getElementById("nav").classList.remove("dark");
         }
     };
 
@@ -55,11 +69,11 @@ const Navbar = () => {
             </ul>
             <div className="nav-login-cart">
                 <Link to='/login'><button className='log_btn'>Login</button></Link>
-                <Link to='/cart'><img src={icon} alt="" className='cart' /></Link>
+                <Link to='/cart'><img src={icon} alt="Cart Icon" className='cart' /></Link>
                 <div className="nav-cart-count">{getTotalCartItems()}</div>
                 <div className='dark_btn'>
                     <button onClick={toggle} className={`toggle_${theme} change`}>
-                        {theme === 'light' ? <img src={sunIcon}  /> : <img src={moonIcon}  />}
+                        {theme === 'light' ? <img src={sunIcon} alt="Light Mode" /> : <img src={moonIcon} alt="Dark Mode" />}
                     </button>
                 </div>
             </div>

src/Components/Popular/Popular.jsx

@@ -7,7 +7,7 @@ import { ShopContext } from '../../Context/ShopContext'
 const Popular = () => {
     const{theme}=useContext(ShopContext);
     return (
-        <div className='popular'>
+        <div className='popular p-4 '>
             <h1 className={`h1p_${theme}`}>POPULAR IN WOMEN</h1>
             <hr className={`hrp_${theme}`} />
             <div className="popular-item">

src/index.js

@@ -4,6 +4,8 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import ShopContextProvider from './Context/ShopContext';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(