Skip to content

Commit

Permalink
Merge pull request #240 from AadiJain06/lightanddarktheme
Browse files Browse the repository at this point in the history
Light and dark theme
  • Loading branch information
hustlerZzZ authored Jun 6, 2024
2 parents e3fce44 + 7306e35 commit f9564a1
Show file tree
Hide file tree
Showing 9 changed files with 106 additions and 80 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"@testing-library/user-event": "^13.5.0",
"aos": "^2.3.4",
"axios": "^1.5.1",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
41 changes: 18 additions & 23 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import React from 'react';
import './App.css';
import { Route, Routes } from 'react-router-dom';
Expand All @@ -11,39 +10,35 @@ import SectionPage from './pages/SectionPage';
import News from './pages/News';
import NotFound from './pages/NotFound';
import Loader from './components/Loader/Loader';
import PrivacyPolicy from './pages/PrivacyPolicy';
import TermsandConditions from './pages/TermsandConditions';
import Licensing from './pages/Licensing';
import { ThemeProvider } from './themeContext';

const Layout = ({ children }) => {
return (
<div className="bg-cover bg-center min-h-screen bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat " >
<div className="bg-cover bg-center min-h-screen bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat dark:bg-none">
{children}
</div>
);
};

function App() {
return (
<div className=''>
<Routes>
<Route path='/' element={<Login />} />
<Route path='/home' element={<Layout><Home /></Layout>} />
<Route path='/login' element={<Login />} />
<Route path='/signup' element={<Signup />} />
<Route path='/about' element={<Layout><About /></Layout>} />
<Route path='/section/:_id' element={<Layout><SectionPage /></Layout>} />
<Route path="/menu/:_id" element={<Layout><MenuPage /></Layout>} />
<Route path='/news' element={<Layout><News/></Layout>}/>
<Route path='/privacypolicy' element={<Layout><PrivacyPolicy/></Layout>}/>
<Route path='/termsandconditions' element={<Layout><TermsandConditions/></Layout>}/>
<Route path='/licensing' element={<Layout><Licensing/></Layout>}/>
<Route path='/loader' element={<Layout><Loader/></Layout>}/>
<Route path="*" element={<Layout><NotFound /></Layout>} />
</Routes>
</div>
<ThemeProvider>
<div className=''>
<Routes>
<Route path='/' element={<Login />} />
<Route path='/home' element={<Layout><Home /></Layout>} />
<Route path='/login' element={<Login />} />
<Route path='/signup' element={<Signup />} />
<Route path='/about' element={<Layout><About /></Layout>} />
<Route path='/section/:_id' element={<Layout><SectionPage /></Layout>} />
<Route path="/menu/:_id" element={<Layout><MenuPage /></Layout>} />
<Route path='/news' element={<Layout><News /></Layout>} />
<Route path='/loader' element={<Layout><Loader /></Layout>} />
<Route path="*" element={<Layout><NotFound /></Layout>} />
</Routes>
</div>
</ThemeProvider>
);
}

export default App;

57 changes: 22 additions & 35 deletions src/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,23 @@
import React from 'react';
import { Link } from "react-router-dom"

const Footer = () => {
return (
<div className='bg-blue-950 text-white p-10'>
<div className='md:flex'>
<div className='md:w-1/2 flex mb-8 md:mb-0 items-top'>
<img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="" className='h-16 w-48'/>
</div>
<div className='md:w-1/2 md:flex'>
<div className='md:w-1/2'>
<p className='text-gray-200 underline'>Company</p>
<ul className='text-gray-300 py-4'>
<a href="/about"><li className='py-1 cursor-pointer'>About Us</li></a>
<a href="/news"><li className='py-1 cursor-pointer'>News</li></a>
<li className='py-1 cursor-pointer'>Contact Us</li>
</ul>
</div>
<div className='md:w-1/2'>
<p className='text-gray-200 underline'>Legal Pages</p>
<ul className='text-gray-300 py-4 cursor-pointer'>
<a href="/privacypolicy"><li className='py-1 cursor-pointer'>Privacy Policy</li></a>
<a href="/termsandconditions"><li className='py-1 cursor-pointer'>Terms and Conditions</li></a>
<a href="/licensing"><li className='py-1 cursor-pointer'>Licensing</li></a>
</ul>
</div>
</div>
</div>
<div className='mt-20 text-gray-400 xl:flex justify-center text-xs lg:text-sm xl:text-md'>
<span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
</div>
</div>
)
}

export default Footer
export default function Footer(){
return (
<footer className="p-4 bg-blue-950 md:p-8 lg:p-10 dark:bg-teal-700">
<div className="mx-auto max-w-screen-xl text-center">
<a href="#" className="flex justify-center items-center text-2xl font-semibold text-pink-800 ">
<img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="title" width={"200px"}/>
</a>
<p className="my-6 text-white ">Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.</p>
<ul className="flex flex-wrap justify-center items-center mb-6 text-gray-400 ">
<li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
<Link to="/about">About</Link>
</li>
<li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
<Link to="/news">News</Link>
</li>
</ul>
<span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
</div>
</footer>
)
}
22 changes: 16 additions & 6 deletions src/components/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React, { useState } from "react";
import React, { useState,useContext } from "react";
import { Link } from "react-router-dom";
import logo from "../assets/logo2.png";
import { motion, AnimatePresence,useScroll} from "framer-motion";
import { IoClose } from "react-icons/io5";
import { GiHamburgerMenu } from "react-icons/gi";

import { MdDarkMode } from "react-icons/md";
import { ThemeContext } from '../themeContext';
const Navbar = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
const [isOpen, setIsOpen] = useState(false);
const {scrollYProgress} = useScroll();
const toggleMenu = () => {
setIsOpen(!isOpen);
};
return (
<nav className="text-white p-3 font-semibold shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40">
<nav className="text-white p-3 font-semibold shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
<motion.div
className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
style={{ scaleX: scrollYProgress }}
Expand All @@ -33,16 +35,24 @@ const Navbar = () => {
</div>
</div>
</div>
<div className="hidden md:block">
<div className="hidden md:flex items-center gap-5">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
{theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
</button>
<div>
<Link to="/">
<button
className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110"
>
>
Log out
</button>
</Link>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
{theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
</button>
<button
onClick={toggleMenu}
className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
Expand All @@ -65,7 +75,7 @@ const Navbar = () => {
exit={{ opacity: 0, y: -50 }}
className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
>
<div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-3">
<div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-3 dark:bg-teal-900">
<MobileNavItem to="/home">Home</MobileNavItem>
<MobileNavItem to="/about">About us</MobileNavItem>
<MobileNavItem to="/news">News</MobileNavItem>
Expand Down
24 changes: 12 additions & 12 deletions src/pages/About.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,20 @@ const About = () => {
<Loader/>
):
(
<div className="text-white min-h-screen from-blue-950 via-blue-950 to-gray-900 bg-no-repeat w-full overflow-hidden flex flex-col justify-center mx-auto">
<div className=" text-white min-h-screen from-blue-950 via-blue-950 to-gray-900 bg-no-repeat w-full overflow-hidden flex flex-col justify-center mx-auto dark:bg-white">
<Navbar />

<div className="container mx-auto mt-[7rem] lg:p-2 w-full">
<div className="mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[10%]">
<div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[10%] dark:bg-white">
<div
data-aos="fade-right"
className="md:w-1/2 order-2 md:order-1 md:px-20 px-10 text-center md:text-start"
>
<h2 className="text-2xl sm:text-2xl md:text-3xl font-bold text-green-500 mb-4">
Welcome to Foodies
</h2>
<p className="text-lg leading-relaxed mb-4 p-4 sm:p-0">
<p className="text-lg leading-relaxed mb-4 p-4 sm:p-0 dark:text-slate-900">
Hey there, lovely Foodies! We're the passionate minds behind the
scenes, and we're thrilled to tell you a little bit about who we
are and why we created Foodies.
Expand All @@ -53,7 +53,7 @@ const About = () => {
</div>
</div>

<div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-[10%]">
<div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-[10%] dark:bg-white dark:bg-none">
<div
data-aos="fade-right"
className="md:w-1/2 order-1 md:order-1 md:px-10 md:pl-16 mt-[5rem] flex justify-center"
Expand All @@ -71,7 +71,7 @@ const About = () => {
<h2 className="text-2xl md:text-3xl font-bold text-green-500 mb-4">
Our Journey
</h2>
<p className="text-lg leading-relaxed mb-4 p-4 sm:p-0">
<p className="text-lg leading-relaxed mb-4 p-4 sm:p-0 dark:text-slate-900">
Picture a bustling college campus, students on the move, and the
delightful aroma of food wafting from the canteens. That's where
our story begins. We're a group of college students just like
Expand All @@ -85,7 +85,7 @@ const About = () => {
</div>
</div>

<div className="w-full flex-col justify-center py-[7rem] bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 md:bg-gray-900">
<div className="w-full flex-col justify-center py-[7rem] bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 md:bg-gray-900 dark:bg-aliceblue dark:bg-none">
<h2
data-aos="fade-up"
className="text-3xl font-bold text-green-500 mb-2 md:mb-4 text-center"
Expand All @@ -96,7 +96,7 @@ const About = () => {
data-aos="fade-up"
className="w-full flex flex-col md:flex-row justify-center py-[5rem] text-center"
>
<div className="w-[95%] lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0">
<div className="w-[95%] lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0 dark:bg-cadetblue">
<img
src="https://plus.unsplash.com/premium_photo-1661476060301-265248d32b94?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8ZGluaW5nJTIwY29sbGVnZSUyMGlubm92YXRpb258ZW58MHwwfDB8fHww"
alt="Food"
Expand All @@ -110,7 +110,7 @@ const About = () => {
busy college days with our efficient service.
</span>
</div>
<div className="w-[95%] lg:w-[25%] bg-gray-900 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0">
<div className="w-[95%] lg:w-[25%] bg-gray-900 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] mx-auto rounded-xl shadow-2xl shadow-slate-800 mb-[5rem] md:mb-0 dark:bg-lightcadetblue">
<img
src="https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Food"
Expand All @@ -124,7 +124,7 @@ const About = () => {
your food journey on campus.
</span>
</div>
<div className="w-[95%] mx-auto lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] rounded-xl shadow-xl shadow-slate-800">
<div className="w-[95%] mx-auto lg:w-[25%] bg-gray-950 p-[2rem] hover:translate-y-2 items-center md:mx-[1rem] rounded-xl shadow-xl shadow-slate-800 dark:bg-cadetblue">
<img
src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Food"
Expand Down Expand Up @@ -159,7 +159,7 @@ const About = () => {
<h2 className="text-2xl md:text-3xl font-bold text-green-500 mb-4">
Why Foodies?
</h2>
<p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0">
<p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0 dark:text-black">
Foodies is more than just a web app; it's our way of giving back
to the student community. We've been in your shoes, so we
understand the challenges you face when deciding where to eat.
Expand All @@ -169,15 +169,15 @@ const About = () => {
</div>
</div>

<div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[12%]">
<div className="flex flex-col md:flex-row justify-between items-center md:space-x-8 bg-gray-900 py-[12%] dark:bg-white">
<div
data-aos="fade-right"
className="md:w-1/2 order-2 md:order-2 md:px-20 md:text-start text-center"
>
<h2 className="text-xl md:text-3xl font-bold text-green-500 mb-4">
Our Team
</h2>
<p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0">
<p className="text-md md:text-xl leading-relaxed mb-4 p-[2rem] sm:p-0 dark:text-slate-900">
We're the API Alchemists, a bunch of creative and tech-savvy
students who believe in the power of innovation. We've combined
our skills and knowledge to bring Foodies to life, and we
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function Home() {
loading ? (
<Loader/>
):(
<div className=" min-h-screen">
<div className=" min-h-screen dark:bg-teal-700">
<Navbar />
<div className="text-center">
<CanteenList canteenData = {canteenData}/>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/News.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ function News() {
(
<div className="text-gray-900 min-h-screen">
<Navbar />
<h1 className="text-3xl font-bold text-center mt-10 mb-10 text-white p-6">
<h1 className="text-3xl font-bold text-center mt-20 text-white p-6 dark:text-slate-900">
Trending Food and Health News
</h1>
<main className="p-4 flex justify-center items-center">
<main className="mt-24 p-4">
<div className="container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{articles.map((article, index) => (
<NewsCard key={index} article={article} />
Expand Down
28 changes: 28 additions & 0 deletions src/themeContext.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { createContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

useEffect(() => {
if (theme === 'light') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', theme);
}, [theme]);

const toggleTheme = () => {
setTheme(theme === 'dark' ? 'light' : 'dark');
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};

export { ThemeProvider, ThemeContext };
7 changes: 7 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors:{
customColor: '#484b6a',
aliceblue: '#f0f8ff',
cadetblue: '#5f9ea0',
lightcadetblue: '#84bbbd'
},
boxShadow: {
green: '0 0 4px rgba(0, 255, 0, 0.5)',
},
Expand Down

0 comments on commit f9564a1

Please sign in to comment.