From 32d4daf02a3945a6ee2fe93e3e95ebc3521a105d Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Mon, 17 Jun 2024 16:13:53 +0530 Subject: [PATCH 1/5] Created dark Mode --- src/Content/context.js | 30 ++++++++++++++++++++++++ src/components/about/About.jsx | 7 +++++- src/components/login/LoginSignup.css | 32 ++++++++++++++++++++++++++ src/components/login/LoginSignup.jsx | 7 +++--- src/components/page1/Home.css | 34 ++++++++++++++++++++++++++++ src/components/page1/Home.js | 34 +++++++++++++++++++++++----- src/components/review/review.css | 29 +++++++++++++++++++++++- src/components/review/review.jsx | 11 +++++---- src/index.js | 4 ++++ src/pages/header.js | 18 ++++++++++++--- 10 files changed, 187 insertions(+), 19 deletions(-) create mode 100644 src/Content/context.js diff --git a/src/Content/context.js b/src/Content/context.js new file mode 100644 index 0000000..6118903 --- /dev/null +++ b/src/Content/context.js @@ -0,0 +1,30 @@ +// ThemeContext.js +import React, { createContext, useState, useEffect } from 'react'; + +export const ThemeContext = createContext(); + +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState(() => { + return localStorage.getItem('theme') || 'light'; + }); + + useEffect(() => { + localStorage.setItem('theme',theme) + if(theme=='light'){ + document.getElementsByTagName('body')[0].className=''; + } else{ + + document.getElementsByTagName('body')[0].className='active'; + } + }, [theme]); + + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + return ( + + {children} + + ); +}; diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx index d587fdd..5c40f9c 100644 --- a/src/components/about/About.jsx +++ b/src/components/about/About.jsx @@ -1,16 +1,21 @@ // src/About.js -import React from 'react'; +import React, { useContext } from 'react'; import './about.css'; import Header from '../../pages/header'; import image from '../../assets/book.png' import resource from '../../assets/resource.png' import benefit from '../../assets/benefits.png' import { Link } from 'react-router-dom'; +import { ThemeContext } from '../../Content/context'; // import sun from './images/sun.png'; // Example image import // import moon from './images/moon.png'; // Example image import const About = () => { + let {theme}=useContext(ThemeContext) + if(theme=='dark'){ + document.getElementsByTagName('body')[0].classList.toggle('active') + } return ( <>
diff --git a/src/components/login/LoginSignup.css b/src/components/login/LoginSignup.css index 117834e..1ca0f09 100644 --- a/src/components/login/LoginSignup.css +++ b/src/components/login/LoginSignup.css @@ -4,6 +4,38 @@ background: #E6E6FA; padding: 50px; } +.active{ + background-color: #000016 !important; + color: white !important; + } + .active div , .active button{ + background-color: #000016 !important; + color: white !important; + + } + .active .card , .active .book ,.active .box , .active .ag-courses-item_title, .active .ag-courses_item { + background-color: #000000 !important; + color: white !important; + box-shadow: 0px 0px 15px lightblue; + + } + .active .text-box-in , .active div{ + color: white !important; + } + .active .ag-courses-item_bg{ + background-color: #f9b234 !important; + } + .active .loginsignup-cointainer{ + border: white solid 2px ; + box-shadow: 0px 0px 15px white; + } + .active button{ + border: solid 1px white; + box-shadow: 0px 0px 15px lightblue; + } + .active h1, .active h2 , .active p,.active b{ + color: white !important; + } .loginsignup-cointainer{ width: 580px; height: auto; diff --git a/src/components/login/LoginSignup.jsx b/src/components/login/LoginSignup.jsx index ab529b6..573cb4f 100644 --- a/src/components/login/LoginSignup.jsx +++ b/src/components/login/LoginSignup.jsx @@ -1,10 +1,11 @@ -import React, { useState } from "react"; +import React, { useContext, useState } from "react"; import { Link } from "react-router-dom"; // Import Link import { FaArrowLeft } from "react-icons/fa"; // Import Font Awesome arrow left icon import "./LoginSignup.css"; import { FaEye, FaEyeSlash } from 'react-icons/fa6' +import { ThemeContext } from "../../Content/context"; const LoginSignup = () => { - + let {theme}=useContext(ThemeContext) const [state, setState] = useState("Sign Up"); const [isVisible, setIsVisible] = useState(false); @@ -94,7 +95,7 @@ const LoginSignup = () => { } }; return ( -
+
{ + return localStorage.getItem('mode'); + }); + useEffect(() => { + const handleStorageChange = (event) => { + if (event.key === 'mode') { + setValue(event.newValue); + } + console.log('mpde') + }; + + window.addEventListener('storage', ()=>console.log('dfdfdf')); + + return () => { + window.removeEventListener('storage', handleStorageChange); + }; + }); + return (

Visit your year

-
+
- - @@ -30,13 +52,13 @@ function Home() {
- - diff --git a/src/components/review/review.css b/src/components/review/review.css index 46b6af6..99d92d6 100644 --- a/src/components/review/review.css +++ b/src/components/review/review.css @@ -6,7 +6,34 @@ section background-size: cover; height:auto; } - +.active{ + background-color: #000016 !important; + color: white !important; + } + .active div , .active button{ + background-color: #000016 !important; + color: white !important; + + } + .active .card , .active .book ,.active .box , .active .ag-courses-item_title, .active .ag-courses_item { + background-color: #000000 !important; + color: white !important; + box-shadow: 0px 0px 15px lightblue; + + } + .active .text-box-in , .active div{ + color: white !important; + } + .active .ag-courses-item_bg{ + background-color: #f9b234 !important; + } + .active button{ + border: solid 1px white; + box-shadow: 0px 0px 15px lightblue; + } + .active h1, .active h2 , .active p,.active b{ + color: white !important; + } .review-container { diff --git a/src/components/review/review.jsx b/src/components/review/review.jsx index 163e30f..35c3cb2 100644 --- a/src/components/review/review.jsx +++ b/src/components/review/review.jsx @@ -1,21 +1,22 @@ -import React, { useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { ToastContainer, toast } from 'react-toastify'; import { Link } from "react-router-dom"; // Import Link import 'react-toastify/dist/ReactToastify.css'; import './review.css'; +import { ThemeContext } from "../../Content/context"; const ReviewPage = () => { + const {theme}=useContext(ThemeContext) const [formData, setFormData] = useState({ name: '', email: '', rating: '', review: '' }); - const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; - +console.log(theme) const handleSubmit = (e) => { e.preventDefault(); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -51,7 +52,7 @@ const ReviewPage = () => { }; return ( -
+
{ -
+
{/* Review info section */} diff --git a/src/index.js b/src/index.js index c485772..60757c5 100644 --- a/src/index.js +++ b/src/index.js @@ -33,6 +33,7 @@ import { import "./index.css"; import LoginSignup from './components/login/LoginSignup.jsx'; import ReviewPage from './components/review/review.jsx'; +import { ThemeContext, ThemeProvider } from './Content/context.js'; // const ThemeContext = createContext(); @@ -160,7 +161,10 @@ ReactDOM.createRoot(document.getElementById("root")).render( + + + {/* {children} diff --git a/src/pages/header.js b/src/pages/header.js index 4a2e4e0..1c0bd0a 100644 --- a/src/pages/header.js +++ b/src/pages/header.js @@ -1,13 +1,21 @@ -import React from 'react' +import React, { useContext } from 'react' import './header.css'; import {Link} from "react-router-dom"; import { colors } from '@mui/material'; +import { ThemeContext } from '../Content/context'; // import { useTheme } from '../index'; - +import {HiSun,HiMoon} from 'react-icons/hi2' function Header() { - + let {theme,toggleTheme} =useContext(ThemeContext) + function handleClick(e){ + if(theme=="dark"){ + toggleTheme('light') + }else{ + toggleTheme('dark') + } + } // const {isDarkMode, togglerDarkMode} =useTheme(); return ( @@ -28,6 +36,10 @@ function Header() { About Us + { + + theme=='dark'? : + }
From bddf06ea8b80ef72aa629213358f0e7cd81f9f2d Mon Sep 17 00:00:00 2001 From: Ayushmaan Agarwal <118350936+Ayushmaanagarwal1211@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:26:17 +0530 Subject: [PATCH 2/5] Update review.jsx --- src/components/review/review.jsx | 44 +++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/src/components/review/review.jsx b/src/components/review/review.jsx index 35c3cb2..0b1f01a 100644 --- a/src/components/review/review.jsx +++ b/src/components/review/review.jsx @@ -1,22 +1,29 @@ -import React, { useContext, useEffect, useState } from "react"; +import React, { useState, useEffect } from "react"; import { ToastContainer, toast } from 'react-toastify'; import { Link } from "react-router-dom"; // Import Link +import { FaStar } from "react-icons/fa"; import 'react-toastify/dist/ReactToastify.css'; import './review.css'; -import { ThemeContext } from "../../Content/context"; const ReviewPage = () => { - const {theme}=useContext(ThemeContext) + const [rating, setRating] = useState(null); + const [hover, setHover] = useState(null); + const [formData, setFormData] = useState({ name: '', email: '', rating: '', review: '' }); + + useEffect(() => { + setFormData({ ...formData, rating: rating }); + }, [rating]); + const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; -console.log(theme) + const handleSubmit = (e) => { e.preventDefault(); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -49,10 +56,11 @@ console.log(theme) rating: '', review: '' }); + setRating(null); }; return ( -
+
-
+
{/* Review info section */} @@ -97,9 +105,27 @@ console.log(theme)
+
- - Rating (1-5) + {[...Array(5)].map((star, index) => { + const currentRating = index + 1; + return ( + + ); + })}
@@ -116,4 +142,4 @@ console.log(theme)
); }; -export default ReviewPage; \ No newline at end of file +export default ReviewPage; From 6f0479cbf3555a07eec079c3321eeeec8b137df6 Mon Sep 17 00:00:00 2001 From: Ayushmaan Agarwal <118350936+Ayushmaanagarwal1211@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:26:36 +0530 Subject: [PATCH 3/5] Update review.css --- src/components/review/review.css | 41 ++++++++++---------------------- 1 file changed, 13 insertions(+), 28 deletions(-) diff --git a/src/components/review/review.css b/src/components/review/review.css index 99d92d6..1f93e69 100644 --- a/src/components/review/review.css +++ b/src/components/review/review.css @@ -6,34 +6,7 @@ section background-size: cover; height:auto; } -.active{ - background-color: #000016 !important; - color: white !important; - } - .active div , .active button{ - background-color: #000016 !important; - color: white !important; - - } - .active .card , .active .book ,.active .box , .active .ag-courses-item_title, .active .ag-courses_item { - background-color: #000000 !important; - color: white !important; - box-shadow: 0px 0px 15px lightblue; - - } - .active .text-box-in , .active div{ - color: white !important; - } - .active .ag-courses-item_bg{ - background-color: #f9b234 !important; - } - .active button{ - border: solid 1px white; - box-shadow: 0px 0px 15px lightblue; - } - .active h1, .active h2 , .active p,.active b{ - color: white !important; - } + .review-container { @@ -356,3 +329,15 @@ section width: 100%; } } + +input[type=radio]{ + display: none; +} + +.star{ + cursor: pointer; +} + +label{ + margin-bottom: 0.4rem; +} From c1f0b703b8f87bde8abd7995c21ab644fb660026 Mon Sep 17 00:00:00 2001 From: Ayushmaan Agarwal <118350936+Ayushmaanagarwal1211@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:28:47 +0530 Subject: [PATCH 4/5] Update review.jsx From a7ac36b6d076fbc2bd6d83cc4ef38f052f9a0ab7 Mon Sep 17 00:00:00 2001 From: Ayushmaan Agarwal <118350936+Ayushmaanagarwal1211@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:33:23 +0530 Subject: [PATCH 5/5] Update review.css