Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Dark Mode Toggle Button #340

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added Dark Mode Toggle Button #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 62 additions & 5 deletions frontend/src/Components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
faBell,
faBars,
faTimes,
faSun,
faMoon,
} from "@fortawesome/free-solid-svg-icons";
import axios from "axios";

Expand All @@ -19,6 +21,30 @@ const Navbar = () => {
const [isSticky, setIsSticky] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);

// Add dark mode state
const [isDark, setIsDark] = useState(() => {
if (typeof window !== 'undefined') {
const savedMode = localStorage.getItem('darkMode');
if (savedMode !== null) {
return JSON.parse(savedMode);
}
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
return false;
});

// Add dark mode effect
useEffect(() => {
if (isDark) {
document.documentElement.classList.add('dark');
document.body.style.backgroundColor = '#1a1a1a';
} else {
document.documentElement.classList.remove('dark');
document.body.style.backgroundColor = '#ffffff';
}
localStorage.setItem('darkMode', JSON.stringify(isDark));
}, [isDark]);

useEffect(() => {
let token = localStorage.getItem("tastytoken");
if (token) {
Expand Down Expand Up @@ -67,13 +93,18 @@ const Navbar = () => {
setMenuOpen(false);
};

// Add dark mode toggle function
const toggleDark = () => {
setIsDark(!isDark);
};

return (
<nav
className={`z-50 relative navbar ${
isSticky ? "fixed top-0 left-0 w-full bg-white shadow-md" : ""
isSticky ? `fixed top-0 left-0 w-full ${isDark ? 'bg-gray-900 shadow-gray-800' : 'bg-white shadow-md'}` : ""
}`}
>
<header className="text-gray-600 body-font">
<header className={`${isDark ? 'text-gray-200' : 'text-gray-600'} body-font`}>
<div className="container mx-auto flex items-center justify-between p-5">
{/* Mobile menu button */}
<div className="md:hidden flex items-center">
Expand All @@ -86,7 +117,7 @@ const Navbar = () => {
<div
className={`fixed inset-0 z-40 transition-all duration-300 transform ${
menuOpen ? "translate-x-0" : "-translate-x-full"
} flex flex-col top-0 left-0 bg-white w-[250px] h-full p-5`}
} flex flex-col top-0 left-0 ${isDark ? 'bg-gray-900' : 'bg-white'} w-[250px] h-full p-5`}
>
{/* Close button inside the menu */}
<div className="flex justify-end">
Expand Down Expand Up @@ -233,7 +264,20 @@ const Navbar = () => {

{/* User profile actions */}
{user === null ? (
<div className="flex items-center">
<div className="flex items-center space-x-4">
{/* Add dark mode toggle button */}
<button
onClick={toggleDark}
className={`p-2 rounded-lg ${
isDark ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-gray-200'
}`}
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
>
<FontAwesomeIcon
icon={isDark ? faSun : faMoon}
className={isDark ? 'text-yellow-300' : 'text-gray-600'}
/>
</button>
<Link
to={path === "/" || path === "/signup" ? "/login" : "/signup"}
>
Expand All @@ -245,6 +289,19 @@ const Navbar = () => {
</div>
) : (
<div className="flex justify-center items-center">
{/* Add dark mode toggle button */}
<button
onClick={toggleDark}
className={`p-2 rounded-lg mr-4 ${
isDark ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-gray-200'
}`}
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
>
<FontAwesomeIcon
icon={isDark ? faSun : faMoon}
className={isDark ? 'text-yellow-300' : 'text-gray-600'}
/>
</button>
<div
onClick={() =>
navigator(`/user/${user._id}`, { state: { user } })
Expand All @@ -255,7 +312,7 @@ const Navbar = () => {
icon={faUserCircle}
className="mx-2 text-red-700 text-lg"
/>
<span className="text-black font-semibold">Profile</span>
<span className={`${isDark ? 'text-white' : 'text-black'} font-semibold`}>Profile</span>
</div>
<div
onClick={() =>
Expand Down
38 changes: 19 additions & 19 deletions frontend/src/Components/PrivacyPolicy.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,63 +6,63 @@ const PrivacyPolicy = () => {
return (
<div className="max-w-4xl mx-auto p-6 overflow-auto h-full">
<p className='text-xl mb-2 font-bold text-gray-500'>Legal Terms</p>
<h1 className="text-3xl font-bold mb-4">
<h1 className="text-3xl font-bold mb-4 dark:text-gray-300">
Privacy Policy for
<span className="block sm:inline lg:mx-2 md:mx-2 text-red-700">TastyTrails 😋</span>
<span className="block sm:inline lg:mx-2 md:mx-2 text-red-700 dark:text-red-500">TastyTrails 😋</span>
</h1>

<section className="mb-6">
<h2 className="text-2xl font-semibold mb-2">1. Introduction</h2>
<p>
Welcome to <strong className='text-red-700'>TastyTrails</strong>! We value your privacy and are committed to protecting your personal information. This Privacy Policy outlines how we collect, use, and safeguard your data when you use our website <a href="http://www.tastytrails.com" className="text-blue-500 underline">www.tastytrails.com</a>.
<h2 className="text-2xl font-semibold mb-2 dark:text-gray-300">1. Introduction</h2>
<p className='dark:text-gray-500'>
Welcome to <strong className='text-red-700 dark:text-red-500'>TastyTrails</strong>! We value your privacy and are committed to protecting your personal information. This Privacy Policy outlines how we collect, use, and safeguard your data when you use our website <a href="http://www.tastytrails.com" className="text-blue-500 underline">www.tastytrails.com</a>.
</p>
</section>

<section className="mb-6">
<h2 className="text-2xl font-semibold mb-2">2. Information We Collect</h2>
<h2 className="text-2xl font-semibold mb-2 dark:text-gray-300">2. Information We Collect</h2>

<h3 className="text-xl font-semibold">a. Registration Data:</h3>
<ul className="list-disc list-inside mb-4">
<h3 className="text-xl font-semibold dark:text-gray-300">a. Registration Data:</h3>
<ul className="list-disc list-inside mb-4 dark:text-gray-500">
<li><strong>Name:</strong> Collected during account creation.</li>
<li><strong>Email Address:</strong> Used for account management and communication.</li>
</ul>

<h3 className="text-xl font-semibold">b. Feedback Messages:</h3>
<ul className="list-disc list-inside mb-4">
<h3 className="text-xl font-semibold dark:text-gray-300">b. Feedback Messages:</h3>
<ul className="list-disc list-inside mb-4 dark:text-gray-500">
<li><strong>Feedback Content:</strong> Information you provide through our feedback form to help us improve our services.</li>
</ul>
</section>

<section className="mb-6">
<h2 className="text-2xl font-semibold mb-2">3. How We Use Your Information</h2>
<ul className="list-disc list-inside mb-4">
<h2 className="text-2xl font-semibold mb-2 dark:text-gray-300">3. How We Use Your Information</h2>
<ul className="list-disc list-inside mb-4 dark:text-gray-500">
<li><strong>For Registration:</strong> To create and manage your user account, allowing you to access personalized features.</li>
<li><strong>For Feedback Improvement:</strong> To analyze and enhance the user experience based on your feedback.</li>
<li><strong>For Communication:</strong> To send you updates or necessary information related to your account or feedback.</li>
</ul>
</section>

<section className="mb-6">
<h2 className="text-2xl font-semibold mb-2">4. Data Security</h2>
<p>
<h2 className="text-2xl font-semibold mb-2 dark:text-gray-300">4. Data Security</h2>
<p className='dark:text-gray-500'>
We implement robust security measures to protect your personal information from unauthorized access, alteration, disclosure, or destruction. Your data is stored securely using industry-standard practices, and session management is employed to ensure safe authentication processes.
</p>
</section>

<section className="mb-6">
<h2 className="text-2xl font-semibold mb-2">5. User Rights</h2>
<ul className="list-disc list-inside mb-4">
<h2 className="text-2xl font-semibold mb-2 dark:text-gray-300">5. User Rights</h2>
<ul className="list-disc list-inside mb-4 dark:text-gray-500">
<li><strong>Access and Update:</strong> You can view and update your account information at any time through your profile settings.</li>
<li><strong>Account Deletion:</strong> Currently, we do not offer the option to delete user accounts. If you wish to have your data removed, please contact us directly at <a href="mailto:[email protected]" className="text-blue-500 underline">[email protected]</a>.</li>
</ul>
</section>

<section className="mb-6">
<h2 className="text-2xl font-semibold mb-2">6. Contact Us</h2>
<p>
<h2 className="text-2xl font-semibold mb-2 dark:text-gray-300">6. Contact Us</h2>
<p className='dark:text-gray-500'>
If you have any questions or concerns about this Privacy Policy or our data practices, please contact us:
</p>
<ul className="list-disc list-inside">
<ul className="list-disc list-inside dark:text-gray-500">
<li><strong>Email:</strong> <a href="mailto:[email protected]" className="text-blue-500 underline">[email protected]</a></li>
</ul>
</section>
Expand Down
26 changes: 13 additions & 13 deletions frontend/src/Pages/Landing.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,23 @@ const Landing = () => {

{/* -------------------------- Features Section ---------------------- */}
<section id="Fetaure" className="sm:py-4 mt-[-36vh] sm:my-20 mx-8">
<h1 className="text-center font-semibold text-4xl text-red-700 sm:my-4 font-[Merriweather]">
<h1 className="text-center font-semibold text-4xl text-red-700 sm:my-4 font-[Merriweather] dark:text-red-500">
Features
</h1>
<div className="grid sm:grid-cols-1 md:grid-cols-3">
<div className="p-4 sm:mb-0 mb-6 text-center">
<div className="rounded-lg overflow-hidden ">
<img
alt="content"
className="object-center w-[30%] h-[30%] m-auto"
className="object-center w-[30%] h-[30%] m-auto dark:filter dark:brightness-90"
src={Foods}
loading="lazy"
/>
</div>
<h2 className="text-xl title-font text-gray-900 mt-5 font-semibold">
<h2 className="text-xl title-font text-gray-900 dark:text-white mt-5 font-semibold">
Array of Delights
</h2>
<p className="text-base leading-relaxed mt-2 text-left">
<p className="text-base leading-relaxed mt-2 text-left text-gray-700 dark:text-gray-300">
Indulge in our diverse array of culinary delights from across the
globe. Discover a rich assortment of recipes that cater to every
palate, from comforting classics to innovative flavors, providing
Expand All @@ -109,15 +109,15 @@ const Landing = () => {
<div className="rounded-lg overflow-hidden ">
<img
alt="content"
className="object-center w-[30%] h-[30%] m-auto"
className="object-center w-[30%] h-[30%] m-auto dark:filter dark:brightness-90"
src={Search}
loading="lazy"
/>
</div>
<h2 className="text-xl title-font text-gray-900 mt-5 font-semibold">
<h2 className="text-xl title-font text-gray-900 dark:text-white mt-5 font-semibold">
Customized Recipe Search
</h2>
<p className="text-base leading-relaxed mt-2 text-left">
<p className="text-base leading-relaxed mt-2 text-left text-gray-700 dark:text-gray-300">
Explore the art of personalized recipe discovery with our
intuitive search tools. Tailor your culinary exploration by
filtering recipes based on ingredients, cuisine types, dietary
Expand All @@ -129,15 +129,15 @@ const Landing = () => {
<div className="rounded-lg overflow-hidden ">
<img
alt="content"
className="object-center w-[30%] h-[30%] m-auto"
className="object-center w-[30%] h-[30%] m-auto dark:filter dark:brightness-90"
src={Cooking}
loading="lazy"
/>
</div>
<h2 className="text-xl title-font text-gray-900 mt-5 font-semibold">
<h2 className="text-xl title-font text-gray-900 dark:text-white mt-5 font-semibold">
Create Your Own Masterpiece
</h2>
<p className="text-base leading-relaxed mt-2 text-left">
<p className="text-base leading-relaxed mt-2 text-left text-gray-700 dark:text-gray-300">
Unleash your inner chef and craft your culinary masterpieces.
Share your unique recipes, secret ingredients, and personal
touches with our community, fostering a space where creativity
Expand Down Expand Up @@ -176,14 +176,14 @@ const Landing = () => {
<div className="container m-auto">
<div className=" w-[80vw] mx-auto grid md:grid-cols-2 sm:grid-cols-1">
<div className="w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0 flex flex-col justify-center items-center">
<h2 className="text-sm title-font text-gray-500 tracking-widest">
<h2 className="text-sm title-font text-gray-500 tracking-widest dark:text-gray-300">
TastyTrails
</h2>
<h1 className="font-bold text-3xl title-font mb-4 font-[Merriweather] text-red-700">
<h1 className="font-bold text-3xl title-font mb-4 font-[Merriweather] text-red-700 dark:text-red-500">
About Us
</h1>

<p className="leading-relaxed mb-4">
<p className="leading-relaxed mb-4 text-gray-700 dark:text-gray-300">
Welcome to TastyTrails, your passport to a world of delectable flavors and culinary adventures! At TastyTrails, we are passionate about bringing together food enthusiasts, aspiring chefs, and seasoned cooks on a flavorful journey. Our platform curates a diverse collection of recipes, from time-honored classics to innovative creations, catering to every taste bud. Whether you are a novice in the kitchen or a seasoned pro, TastyTrails is your companion in exploring, sharing, and celebrating the art of cooking. Join us in discovering, creating, and savoring delightful dishes that inspire and unite food lovers worldwide
</p>
</div>
Expand Down
1 change: 1 addition & 0 deletions frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export default {
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {
animation: {
Expand Down