Merge pull request #232 from Sourabh782/dark-mode-applied

Applied Dark Mode Option to Entire Website

client/src/Components/SearchBar.js

@@ -13,7 +13,7 @@ const SearchBar = ({ onSearch }) => {
     <form onSubmit={handleSearch} className="w-full max-w-lg mx-auto my-8">
       <div className="flex items-center border-b-2 border-teal-500 py-2">
         <input
-          className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
+          className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none dark:text-white"
           type="text"
           placeholder="Search for books..."
           value={query}

client/src/Pages/AboutUs.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import Preloader from '../Components/Preloader';
+import { Link } from 'react-router-dom';
 
 const AboutUs = () => {
   useEffect(() => {
@@ -9,39 +10,39 @@ const AboutUs = () => {
   return (
     <>
     <Preloader />
-    <div className="bg-blue-50 py-5">
+    <div className="bg-blue-50 py-5 dark:bg-[rgb(51,51,51)]">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="bg-blue-100 rounded-lg overflow-hidden shadow-lg">
+        <div className="bg-blue-100 rounded-lg overflow-hidden shadow-lg dark:bg-[rgb(40,40,40)]">
           <div className="p-6">
-            <h2 className="text-3xl font-extrabold text-gray-900 mb-6 text-center">About Us</h2>
-            <p className="text-lg text-gray-800 leading-relaxed  font-semibold">
+            <h2 className="text-3xl font-extrabold text-gray-900 mb-6 text-center dark:text-white">About Us</h2>
+            <p className="text-lg text-gray-800 leading-relaxed  font-semibold dark:text-white">
               Online Book Sales is an e-commerce platform dedicated to providing book lovers with a
               convenient way to browse and purchase a wide variety of books online. Our goal is to
               offer an extensive catalog of books across various genres, including Fiction,
               Non-fiction, Science Fiction, Romance, Mystery & Thriller, Biographies, Self-help,
               Children's Books, and Academic & Educational Books.
             </p>
-            <p className="text-lg text-gray-800 leading-relaxed mt-4 font-semibold">
+            <p className="text-lg text-gray-800 leading-relaxed mt-4 font-semibold dark:text-white">
               At Online Book Sales, we prioritize customer satisfaction and aim to provide a seamless shopping experience. From browsing our curated catalog to securely checking out and tracking your order, we ensure that your journey with us is enjoyable and hassle-free.
             </p>
-            <p className="text-lg text-gray-800 leading-relaxed mt-4 font-semibold">
+            <p className="text-lg text-gray-800 leading-relaxed mt-4 font-semibold dark:text-white">
               Our team is dedicated to maintaining high standards of service and reliability. Should you have any questions or need assistance, our customer support team is readily available to help. Visit our FAQ page for answers to common queries or reach out to us directly through our Contact Us page.
             </p>
-            <p className="text-lg text-gray-800 leading-relaxed mt-4 font-semibold">
+            <p className="text-lg text-gray-800 leading-relaxed mt-4 font-semibold dark:text-white">
               Thank you for choosing Online Book Sales. Happy reading!
             </p>
-            <h3 className="text-xl text-center font-bold text-gray-900 mt-8">Our Mission</h3>
-            <p className="text-gray-700 leading-relaxed font-semibold">
+            <h3 className="text-xl text-center font-bold text-gray-900 mt-8 dark:text-white">Our Mission</h3>
+            <p className="text-gray-700 leading-relaxed font-semibold dark:text-white">
               Our mission is to make reading accessible and enjoyable for everyone by offering a
               seamless online shopping experience for books of all kinds. We aim to connect readers
               with their favorite authors and discover new books that inspire and entertain.
             </p>
-            <h3 className="text-xl text-center font-bold text-gray-900 mt-8">Contact Us</h3>
-            <p className="text-gray-700 leading-relaxed font-semibold">
+            <h3 className="text-xl text-center font-bold text-gray-900 mt-8 dark:text-white">Contact Us</h3>
+            <p className="text-gray-700 leading-relaxed font-semibold dark:text-white">
               For any inquiries, suggestions, or support, please visit our{' '}
-              <a href="/contact" className="text-blue-500 hover:underline">
+              <Link to="/contactus" className="text-blue-500 hover:underline ">
                 Contact Us
-              </a>{' '}
+              </Link>{' '}
               page. Our dedicated support team is available to assist you.
             </p>
           </div>

client/src/Pages/Cart.css

@@ -5,7 +5,6 @@
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 8px;
-    background-color: #fff;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
 
@@ -44,7 +43,7 @@
   }
 
   .cart-table th {
-    background-color: #f2f2f2;
+    /* background-color: #f2f2f2; */
   }
 
   .item-image {

client/src/Pages/Cart.jsx

@@ -61,7 +61,7 @@ function Cart() {
     if (!data || !data.items || data.items.length === 0) {
       return (
         <tr>
-          <td colSpan="5">Your cart is empty.</td>
+          <td colSpan="5" className="dark:text-white">Your cart is empty.</td>
         </tr>
       );
     }
@@ -108,11 +108,11 @@ function Cart() {
     // Replace with actual suggested products logic
     return (
       <div className="suggested-products">
-        <h2>Suggested Products</h2>
+        <h2 className="dark:text-white">Suggested Products</h2>
         <ul>
-          <li>Suggested Product 1</li>
-          <li>Suggested Product 2</li>
-          <li>Suggested Product 3</li>
+          <li className="dark:text-white">Suggested Product 1</li>
+          <li className="dark:text-white">Suggested Product 2</li>
+          <li className="dark:text-white">Suggested Product 3</li>
         </ul>
       </div>
     );
@@ -126,30 +126,30 @@ function Cart() {
     return (
     <>
       <Preloader/>
-      <div className="cart-container">
-        <h1 className="cart-header">Shopping Cart</h1>
+      <div className="cart-container dark:bg-[rgb(40,40,40)]">
+        <h1 className="cart-header dark:text-white">Shopping Cart</h1>
         <p className="error-message">{error}</p>
-        <button onClick={handleRetry} className="retry-button">
+        <button onClick={handleRetry} className="retry-button dark:text-white">
           Retry
         </button>
-        <hr />
+        {/* <hr /> */}
         <table className="cart-table">
           <thead>
-            <tr>
-              <th>Image</th>
-              <th>Name</th>
-              <th>Price</th>
-              <th>Quantity</th>
-              <th>Action</th>
+            <tr className="dark:bg-[rgb(40,40,40)]">
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Image</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Name</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Price</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Quantity</th>
+              <th className="dark:text-white dark:bg-[rgb(40,40,40)]">Action</th>
             </tr>
           </thead>
           <tbody>
             {renderCartItems()}
           </tbody>
         </table>
         <div className="cart-summary">
-          <div className="cart-total">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
-          <button className="checkout-button">Proceed to Checkout</button>
+          <div className="cart-total dark:text-white">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
+          <button className="checkout-button dark:text-white">Proceed to Checkout</button>
         </div>
         <hr />
         {renderSuggestedProducts()}
@@ -160,8 +160,8 @@ function Cart() {
 
   return (
     <><Preloader/>
-    <div className="cart-container">
-      <h1 className="cart-header">Shopping Cart</h1>
+    <div className="cart-container dark:bg-[rgb(40,40,40)]">
+      <h1 className="cart-header dark:text-white">Shopping Cart</h1>
       <table className="cart-table">
         <thead>
           <tr>
@@ -177,10 +177,10 @@ function Cart() {
         </tbody>
       </table>
       <div className="cart-summary">
-        <div className="cart-total">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
-        <button className="checkout-button">Proceed to Checkout</button>
+        <div className="cart-total dark:text-white">Total: ${data ? data.total.toFixed(2) : "0.00"}</div>
+        <button className="checkout-button dark:text-white">Proceed to Checkout</button>
       </div>
-      <hr />
+      {/* <hr /> */}
       {renderSuggestedProducts()}
     </div>
     </>

client/src/Pages/Contact.jsx

@@ -9,22 +9,22 @@ function Contact() {
   return (
     <>
     <Preloader/>
-    <div className="w-96 max-w-5xl p-5 bg-slate-900 shadow-md rounded-lg mx-auto my-10">
-      <h1 className="text-center text-white text-4xl mb-10">Contact Us</h1>
+    <div className="w-96 max-w-5xl p-5 shadow-md rounded-lg mx-auto my-10 dark:bg-[rgb(40,40,40)]">
+      <h1 className="text-center dark:text-white text-4xl mb-10">Contact Us</h1>
       <div className="flex flex-col items-center gap-5">
-        <div className="w-full max-w-2xl p-5 bg-gray-800 text-white rounded-lg">
+        <div className="w-full max-w-2xl p-5  dark:text-white rounded-lg">
           <form className="flex flex-col gap-4">
             <div className="flex flex-col">
-              <label htmlFor="name" className="font-bold mb-1 text-white">Name:</label>
-              <input type="text" id="name" name="name" className="w-full p-2 border border-gray-400 rounded-md text-gray-900" required />
+              <label htmlFor="name" className="font-bold mb-1  dark:text-white">Name:</label>
+              <input type="text" id="name" name="name" className="w-full p-2 border border-gray-400 rounded-md text-gray-900 dark:bg-[rgb(51,51,51)] dark:text-white" required />
             </div>
             <div className="flex flex-col">
-              <label htmlFor="email" className="font-bold mb-1 text-white">Email:</label>
-              <input type="email" id="email" name="email" className="w-full p-2 border border-gray-400 rounded-md text-gray-900" required />
+              <label htmlFor="email" className="font-bold mb-1  dark:text-white">Email:</label>
+              <input type="email" id="email" name="email" className="w-full p-2 border border-gray-400 rounded-md text-gray-900 dark:bg-[rgb(51,51,51)] dark:text-white" required />
             </div>
             <div className="flex flex-col">
-              <label htmlFor="message" className="font-bold mb-1 text-white">Message:</label>
-              <textarea id="message" name="message" rows="5" className="w-full p-2 border border-gray-400 rounded-md text-gray-900" required></textarea>
+              <label htmlFor="message" className="font-bold mb-1  dark:text-white">Message:</label>
+              <textarea id="message" name="message" rows="5" className="w-full p-2 border border-gray-400 rounded-md text-gray-900 dark:bg-[rgb(51,51,51)] dark:text-white" required></textarea>
             </div>
             <div className="flex justify-center">
               <button type="submit" className="p-2 bg-blue-600 text-white rounded-md self-start hover:bg-blue-700">Submit</button>

client/src/Pages/Faq.jsx

@@ -72,22 +72,22 @@ const FAQ = () => {
     <>
     <Preloader />
     <div className="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-      <h2 className="text-3xl font-extrabold text-gray-900 mb-6 text-center">FAQ</h2>
+      <h2 className="text-3xl font-extrabold text-gray-900 mb-6 text-center dark:text-white">FAQ</h2>
       <dl className="space-y-6">
         {faqs.map((faq, index) => (
           <div
             key={index}
-            className="bg-white border border-gray-300 rounded-lg shadow-sm"
+            className="bg-white border border-gray-300 rounded-lg shadow-sm dark:bg-[rgb(40,40,40)]"
           >
             <button
               onClick={() => toggleFAQ(index)}
-              className="w-full p-4 text-left focus:outline-none"
+              className="w-full p-4 text-left focus:outline-none dark:bg-[rgb(40,40,40)]"
               aria-expanded={openIndex === index}
             >
-              <div className="flex justify-between items-center">
-                <span className="text-lg font-medium text-gray-900">{faq.question}</span>
+              <div className="flex justify-between items-center ">
+                <span className="text-lg font-medium text-gray-900 dark:text-white">{faq.question}</span>
                 <svg
-                  className={`h-6 w-6 transition-transform duration-500 transform ${
+                  className={`h-6 w-6 transition-transform dark:text-white duration-600 transform ${
                     openIndex === index ? 'rotate-180' : ''
                   }`}
                   xmlns="http://www.w3.org/2000/svg"
@@ -105,7 +105,7 @@ const FAQ = () => {
               </div>
             </button>
             {openIndex === index && (
-              <p className="p-4 text-base text-gray-500">{faq.answer}</p>
+              <p className="p-4 text-base text-gray-200">{faq.answer}</p>
             )}
           </div>
         ))}