Fix dark mode styling for wishlist item overview page

- Added dark mode support to ItemOverview component with darker backgrounds (#0f1629, #0a0f1a)
- Improved text contrast with brighter white colors (#ffffff, #e8eaed) for better visibility
- Updated ImageCarousel component to accept and handle darkMode prop
- Fixed dark mode styling for:
  - Main content area (darker background)
  - All text elements (headings, descriptions, amenities, form labels)
  - Input fields (date, text, number) with dark backgrounds and proper calendar popup styling
  - Buttons (Save, Chat with Host) with darker backgrounds
  - Links with brighter blue for visibility
  - Image carousel navigation arrows and indicators
- Added dark mode CSS classes with !important flags to ensure proper override

Author: Test

src/components/LBDashboard/Components/ImageCarousel.jsx

@@ -1,10 +1,17 @@
 import { useState } from 'react';
+import PropTypes from 'prop-types';
 import styles from './ImageCarousel.module.css';
 
-export default function ImageCarousel({ images }) {
+const getClassNames = (baseClass, darkClass, darkMode) =>
+  `${baseClass} ${darkMode ? darkClass : ''}`;
+
+export default function ImageCarousel({ images, darkMode = false }) {
   const [currentIndex, setCurrentIndex] = useState(0);
 
-  if (!images || images.length === 0) return <p>No images available</p>;
+  if (!images || images.length === 0)
+    return (
+      <p className={getClassNames('', styles['no-images--dark'], darkMode)}>No images available</p>
+    );
 
   const handleNext = () => {
     setCurrentIndex(prev => (prev + 1) % images.length);
@@ -19,7 +26,13 @@ export default function ImageCarousel({ images }) {
   };
 
   return (
-    <div className={styles.carouselContainer}>
+    <div
+      className={getClassNames(
+        styles.carouselContainer,
+        styles['carouselContainer--dark'],
+        darkMode,
+      )}
+    >
       <div className={styles.carouselWrapper}>
         <div
           className={styles.carouselTrack}
@@ -35,10 +48,22 @@ export default function ImageCarousel({ images }) {
           ))}
         </div>
       </div>
-      <button type="button" className={`${styles.imgArrow} ${styles.left}`} onClick={handlePrev}>
+      <button
+        type="button"
+        className={`${getClassNames(styles.imgArrow, styles['imgArrow--dark'], darkMode)} ${
+          styles.left
+        }`}
+        onClick={handlePrev}
+      >
         ❮
       </button>
-      <button type="button" className={`${styles.imgArrow} ${styles.right}`} onClick={handleNext}>
+      <button
+        type="button"
+        className={`${getClassNames(styles.imgArrow, styles['imgArrow--dark'], darkMode)} ${
+          styles.right
+        }`}
+        onClick={handleNext}
+      >
         ❯
       </button>
       <div className={styles.carouselIndicators}>
@@ -47,7 +72,11 @@ export default function ImageCarousel({ images }) {
             key={image}
             role="button"
             tabIndex={0}
-            className={`${styles.indicator} ${index === currentIndex ? styles.active : ''}`}
+            className={`${getClassNames(styles.indicator, styles['indicator--dark'], darkMode)} ${
+              index === currentIndex
+                ? getClassNames(styles.active, styles['active--dark'], darkMode)
+                : ''
+            }`}
             onClick={() => handleIndicatorClick(index)}
             onKeyDown={e => {
               if (e.key === 'Enter' || e.key === ' ') {
@@ -60,3 +89,8 @@ export default function ImageCarousel({ images }) {
     </div>
   );
 }
+
+ImageCarousel.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.string),
+  darkMode: PropTypes.bool,
+};

src/components/LBDashboard/Components/ImageCarousel.module.css

@@ -65,4 +65,34 @@
 
 .indicator.active {
   background-color: #333;
+}
+
+/* Dark mode styles */
+.carouselContainer--dark {
+  /* Container dark mode styles if needed */
+}
+
+.imgArrow--dark {
+  background-color: rgba(255, 255, 255, 0.7) !important;
+  color: #000 !important;
+}
+
+.imgArrow--dark:hover {
+  background-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.indicator--dark {
+  background-color: #666 !important;
+}
+
+.indicator--dark:hover {
+  background-color: #888 !important;
+}
+
+.active--dark {
+  background-color: #fff !important;
+}
+
+.no-images--dark {
+  color: #e1e1e1 !important;
 }