From 78c9a93662eadc59c917c6c4345c5ead9136b938 Mon Sep 17 00:00:00 2001 From: your-username Date: Mon, 28 Jul 2025 19:46:25 +0530 Subject: [PATCH] Added dark theme toggle for home page (need improvements) --- front-end/src/pages/Home.jsx | 158 ++++++++++-------- front-end/src/styles/Home.css | 290 ++++++++++++++++++++++++++++++++++ 2 files changed, 385 insertions(+), 63 deletions(-) diff --git a/front-end/src/pages/Home.jsx b/front-end/src/pages/Home.jsx index 665c4c21..4a442ccf 100644 --- a/front-end/src/pages/Home.jsx +++ b/front-end/src/pages/Home.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Heart, MessageCircle, Share2, MapPin, Calendar, Users, DollarSign, Star, Verified, Plus, Filter,ArrowRight, TrendingUp,TentTree} from 'lucide-react'; +import { Heart, MessageCircle, Share2, MapPin, Calendar, Users, DollarSign, Star, Verified, Plus, Filter,ArrowRight, TrendingUp,TentTree, Moon, Sun} from 'lucide-react'; import useUsers from '../auth/useUser.jsx'; import '../styles/Home.css' import {Link} from 'react-router-dom' @@ -35,6 +35,7 @@ const TripFeed = () => { const [showSuccessMessage, setShowSuccessMessage] = useState(false); const [showErrorMessage, setShowErrorMessage] = useState(false); const [createTrip, setCreateTrip] = useState([]); + const [darkMode, setDarkMode] = useState(false); const [result, setResult] = useState(""); const [isLoading, setIsLoading] = useState(false); @@ -49,6 +50,28 @@ const TripFeed = () => { const value3= info?.age const value4= info?.budget + // Load dark mode preference from localStorage on component mount + useEffect(() => { + const savedDarkMode = localStorage.getItem('darkMode') === 'true'; + setDarkMode(savedDarkMode); + if (savedDarkMode) { + document.documentElement.classList.add('dark'); + } + }, []); + + // Toggle dark mode and save preference + const toggleDarkMode = () => { + const newDarkMode = !darkMode; + setDarkMode(newDarkMode); + localStorage.setItem('darkMode', newDarkMode.toString()); + + if (newDarkMode) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + }; + useEffect(() => { if (showSuccessMessage || showErrorMessage) { const timer = setTimeout(() => { @@ -128,25 +151,25 @@ const TripFeed = () => { } - const handleInputChange = (e) => { - const {name, value} = e.target; - setFilters((prev) => ({...prev, [name]: value})); - }; - // const CreateTripModal = () => ( - // - // ); - - const handleCreateTrip = () => { - setShowCreateTrip(true); - }; - - // const handleLike = (tripId) => { - // setTrips(trips.map(trip => - // trip.id === tripId - // ? {...trip, likes: trip.likes + 1} - // : trip - // )); - // }; + const handleInputChange = (e) => { + const {name, value} = e.target; + setFilters((prev) => ({...prev, [name]: value})); + }; + // const CreateTripModal = () => ( + // + // ); + + const handleCreateTrip = () => { + setShowCreateTrip(true); + }; + + // const handleLike = (tripId) => { + // setTrips(trips.map(trip => + // trip.id === tripId + // ? {...trip, likes: trip.likes + 1} + // : trip + // )); + // }; const predict = async () => { const inputData = { Language: value1, @@ -203,7 +226,16 @@ const TripFeed = () => { return ( -
+
+ {/* Dark Mode Toggle Button */} + +
{user &&

Hi

} @@ -213,11 +245,11 @@ const TripFeed = () => { Lanka

-
- - - -
+
+ + + +
{} {/*{user &&




}*/} @@ -238,53 +270,53 @@ const TripFeed = () => { {user&&

Having troubles deciding where to go .........

Let us decide it for you

-


-

- {result} -

+


+

+ {result} +

} {!user&& -
-
-
-

Why Choose Travago?

-

Your perfect travel companion

-
+
+
+
+

Why Choose Travago?

+

Your perfect travel companion

+
-
-
-
- +
+
+
+ +
+

Fast Trip Creation

+

+ You can create your own trip based on your preferences. +

-

Fast Trip Creation

-

- You can create your own trip based on your preferences. -

-
-
-
- +
+
+ +
+

Easy Joining

+

+ With just a few clicks, can join a trip. +

-

Easy Joining

-

- With just a few clicks, can join a trip. -

-
-
-
- +
+
+ +
+

24/7 Support

+

+ Our dedicated team is always ready to help you have the best travel experience. +

-

24/7 Support

-

- Our dedicated team is always ready to help you have the best travel experience. -

-
-
+
}
{!user &&
@@ -340,7 +372,7 @@ const TripFeed = () => { - + diff --git a/front-end/src/styles/Home.css b/front-end/src/styles/Home.css index f0e5e743..8a343ad6 100644 --- a/front-end/src/styles/Home.css +++ b/front-end/src/styles/Home.css @@ -1493,4 +1493,294 @@ .predict-section p { font-size: 1.1rem; } +} +/* Dark Mode Toggle Button */ +.dark-mode-toggle { + position: fixed; + top: 20px; + right: 20px; + z-index: 1000; + background: var(--toggle-bg, #fff); + border: 2px solid var(--toggle-border, #e1e5e9); + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.dark-mode-toggle:hover { + transform: scale(1.1); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} + +.dark-mode-toggle svg { + color: var(--toggle-icon, #333); + transition: color 0.3s ease; +} + +/* Dark Theme Styles */ +.dark-theme { + --bg-primary: #1a1a2e; + --bg-secondary: #16213e; + --bg-tertiary: #0f3460; + --text-primary: #ffffff; + --text-secondary: #b8c5d6; + --text-muted: #8892a6; + --border-color: #2a3441; + --card-bg: #16213e; + --modal-bg: #1a1a2e; + --input-bg: #0f3460; + --button-primary: #4f46e5; + --button-secondary: #374151; + --toggle-bg: #16213e; + --toggle-border: #2a3441; + --toggle-icon: #ffffff; +} + +.dark-theme, +.dark-theme * { + color: var(--text-primary); +} + +/* Container backgrounds */ +.dark-theme .trip-feed-container { + background: var(--bg-primary); + min-height: 100vh; +} + +/*.dark-theme .feed-header {*/ +/* background: var(--bg-secondary);*/ +/*}*/ + +.dark-theme .header-content-home { + color: var(--text-primary); +} + +.dark-theme .hi, +.dark-theme .name, +.dark-theme .description { + color: var(--text-primary); +} + +/* Cards and sections */ +.dark-theme .card { + background: var(--card-bg); + border: 1px solid var(--border-color); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); +} + +/*.dark-theme .section-container {*/ +/* background: var(--bg-secondary);*/ +/*}*/ + +.dark-theme .section-title, +.dark-theme .section-subtitle { + color: var(--text-primary); +} + +.dark-theme .feature-title { + color: var(--text-primary); +} + +.dark-theme .feature-description { + color: var(--text-secondary); +} + +/*.dark-theme .hero-section {*/ +/* background: var(--bg-tertiary);*/ +/*}*/ + +.dark-theme .hero-title, +.dark-theme .hero-description { + color: var(--text-primary); +} + +/* Buttons */ +.dark-theme .join, +.dark-theme .create-button, +.dark-theme .predict-button, +.dark-theme .cta-button { + background: var(--button-primary); + color: white; + border: none; +} + +.dark-theme .join:hover, +.dark-theme .create-button:hover, +.dark-theme .predict-button:hover, +.dark-theme .cta-button:hover { + background: #3730a3; + transform: translateY(-2px); +} + +.dark-theme .cancel-button { + background: var(--button-secondary); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.dark-theme .cancel-button:hover { + background: #4b5563; +} + +/* Trip creation sections */ +.dark-theme .join_create_trips { + background: var(--bg-secondary); + border: 1px solid var(--border-color); +} + +.dark-theme .join-trip, +.dark-theme .create-trip { + background: var(--card-bg); + border: 1px solid var(--border-color); +} + +.dark-theme .join-trip p, +.dark-theme .create-trip p { + color: var(--text-primary); +} + +.dark-theme .predict-section { + background: var(--bg-secondary); + border: 1px solid var(--border-color); +} + +.dark-theme .predict-section h2, +.dark-theme .predict-section p { + color: var(--text-primary); +} + +/* Modal styles */ +.dark-theme .modal-overlay { + background: rgba(0, 0, 0, 0.8); +} + +.dark-theme .modal-content { + background: var(--modal-bg); + border: 1px solid var(--border-color); +} + +.dark-theme .modal-header h2 { + color: var(--text-primary); +} + +.dark-theme .close-button { + color: var(--text-primary); + background: transparent; + border: none; +} + +.dark-theme .close-button:hover { + background: var(--bg-tertiary); +} + +/* Form elements */ +.dark-theme .form-group label { + color: var(--text-primary); +} + +.dark-theme .form-group input, +.dark-theme .form-group select, +.dark-theme .form-group textarea { + background: var(--input-bg); + border: 1px solid var(--border-color); + color: var(--text-primary); +} + +.dark-theme .form-group input::placeholder, +.dark-theme .form-group textarea::placeholder { + color: var(--text-muted); +} + +.dark-theme .form-group input:focus, +.dark-theme .form-group select:focus, +.dark-theme .form-group textarea:focus { + border-color: var(--button-primary); + box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); +} + +/* Trip details */ +.dark-theme .trip-details { + color: var(--text-secondary); +} + +.dark-theme .trip-detail span { + color: var(--text-secondary); +} + +.dark-theme .card-location, +.dark-theme .card-title { + color: var(--text-primary); +} + +.dark-theme .view-btn { + color: var(--button-primary); +} + +.dark-theme .view-btn:hover { + color: #3730a3; +} + +/* Prediction result */ +.dark-theme .pred { + color: var(--text-primary); + background: var(--bg-tertiary); + border: 1px solid var(--border-color); +} + +/* Success/Error messages */ +.dark-theme .success-message { + background: #065f46; + color: #d1fae5; + border: 1px solid #059669; +} + +.dark-theme .error-message { + background: #7f1d1d; + color: #fecaca; + border: 1px solid #dc2626; +} + +/* Scrollbar for dark mode */ +.dark-theme ::-webkit-scrollbar { + width: 8px; +} + +.dark-theme ::-webkit-scrollbar-track { + background: var(--bg-secondary); +} + +.dark-theme ::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; +} + +.dark-theme ::-webkit-scrollbar-thumb:hover { + background: #4b5563; +} + +/* Smooth transitions for theme switching */ +.trip-feed-container, +.trip-feed-container * { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +} + +/* Media queries for mobile */ +@media (max-width: 768px) { + .dark-mode-toggle { + top: 15px; + right: 15px; + width: 45px; + height: 45px; + } + + .dark-mode-toggle svg { + width: 18px; + height: 18px; + } } \ No newline at end of file