Merge pull request #325 from rajatsinghal02/master

Dark Theme of Website Updated Issue no #290 Resolved
Trisha-tech · Oct 6, 2024 · 79d2831 · 79d2831
2 parents 91f5a0c + b10f434
commit 79d2831
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 39 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -39,18 +39,6 @@ function App() {
     backgroundColor: darkMode ? '#333' : '#f4f4f4',
   };
 
-  // Optionally, fetch user data if logged in
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    fetch('http://localhost:5000/auth/current_user', {
-      credentials: 'include',
-    })
-      .then(response => response.json())
-      .then(data => setUser(data))
-      .catch(err => console.error(err));
-  }, []);
-
   return (
     <Router>
       <div className="App" style={appStyle}>
@@ -75,7 +63,7 @@ function App() {
           <Route path="*" element={<NotFound />} /> {/* Fallback route */}
         </Routes>
         <Toast position="bottom-right" />
-        <Footer />
+        <Footer darkMode={darkMode} /> {/* Pass darkMode prop here */}
         <Preloader /> {/* Ensure Preloader is correctly styled */}
         <GoToTop /> {/* Added GoToTop component */}
       </div>

diff --git a/client/src/Components/Footer/Footer.jsx b/client/src/Components/Footer/Footer.jsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Link } from "react-router-dom";
 import { GitHub, LinkedIn, Instagram } from '@mui/icons-material';
 import XIcon from '@mui/icons-material/X';
-import './Footer.css'; 
+import './Footer.css';
 
-function Footer() {
+function Footer({ darkMode }) {
     const [email, setEmail] = useState("");
     const [message, setMessage] = useState("");
 
@@ -14,8 +14,13 @@ function Footer() {
         setEmail("");
     };
 
+    const footerStyle = {
+        backgroundColor: darkMode ? '#1a1a1a' : '#003366', // Darker background in dark mode
+        color: darkMode ? '#f1f1f1' : '#ffffff'  // Light text color in dark mode
+    };
+
     return (
-        <footer className="bg-blue-900 text-white py-8">
+        <footer style={footerStyle} className="py-8">
             <div className="container mx-auto flex flex-wrap justify-between max-w-[90%]">
                 <div className="footer-section">
                     <h2 className="text-lg font-bold mb-4">ABOUT</h2>
@@ -25,7 +30,6 @@ function Footer() {
                         <li><Link to="/" className="hover:text-yellow-300 text-lg">Careers</Link></li>
                         <li><Link to="/" className="hover:text-yellow-300 text-lg">Gift Cards</Link></li>
                         <li><Link to="/contributors" className="hover:text-yellow-300 text-lg">Our Contributors</Link></li>
-
                     </ul>
                 </div>
                 <div className="footer-section">

diff --git a/client/src/Components/NavBar/NavBar.jsx b/client/src/Components/NavBar/NavBar.jsx
@@ -14,9 +14,9 @@ import sunIcon from '../../assets/sun.png'; // Adjust the path as necessary
 import moonIcon from '../../assets/moon.png'; // Adjust the path as necessary
 import logo from '../../assets/Logo.png'; // Adjust the path as necessary
 
-const StyledAppBar = styled(AppBar)({
-  backgroundColor: '#002147', // Adjust color to your preference
-});
+const StyledAppBar = styled(AppBar)(({ darkMode }) => ({
+  backgroundColor: darkMode ? 'black' : '#002147', // Change color based on darkMode
+}));
 
 const Logo = styled('img')({
   width: '220px',
@@ -25,42 +25,41 @@ const Logo = styled('img')({
 });
 
 const StyledButton = styled(Button)({
-  fontSize: '1rem', // Adjust font size
+  fontSize: '1rem',
   '&:hover': {
-    color: '#FFD700', // Adjust hover color
-    textDecoration: 'underline', // Underline on hover
+    color: '#FFD700',
+    textDecoration: 'underline',
   },
 });
 
 const MenuContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
   gap: '10px',
-  marginLeft: 'auto', // Move the menu items to the end (right-aligned)
+  marginLeft: 'auto',
 });
 
 const MobileMenu = styled('div')(({ open }) => ({
   display: open ? 'flex' : 'none',
   flexDirection: 'column',
   position: 'absolute',
-  top: '64px', // Adjust based on AppBar height
+  top: '64px',
   right: '0',
   backgroundColor: '#002147',
   width: '100%',
   padding: '10px',
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)',
-  zIndex: 1000, // Ensure it appears above other content
+  zIndex: 1000,
 }));
 
 const MobileMenuButton = styled(IconButton)({
-  fill: '#fff', // Adjust color as needed
+  fill: '#fff',
 });
 
 function Navbar({ darkMode, toggleDarkMode }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [openMenu, setOpenMenu] = useState(false);
-
   const { userLoggedIn, setUserLoggedIn } = useAuth();
   let navigate = useNavigate();
   const { showToast } = useToast();
@@ -73,30 +72,27 @@ function Navbar({ darkMode, toggleDarkMode }) {
     try {
       const token = sessionStorage.getItem('token');
       if (token) {
-        sessionStorage.removeItem('token'); // Remove the token from sessionStorage
+        sessionStorage.removeItem('token');
       }
     } catch (error) {
       console.error('Error removing token from sessionStorage:', error);
     }
 
     setUserLoggedIn(false);
-    localStorage.removeItem('token'); // Remove the token from localStorage
-     // Update the user logged-in state
-    navigate('/', { replace: true }); // Redirect to home page
+    localStorage.removeItem('token');
+    navigate('/', { replace: true });
     showToast("success", "", "Logged out successfully");
   };
 
   return (
-    <StyledAppBar position="sticky">
+    <StyledAppBar position="sticky" darkMode={darkMode}>
       <Toolbar style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <IconButton component={Link} to="/">
           <Logo src={logo} alt="Logo" />
         </IconButton>
 
-        {/* Desktop or Mobile Menu */}
         {isMobile ? (
           <>
-            {/* Theme Switcher on the left side of the hamburger icon */}
             <IconButton onClick={toggleDarkMode} style={{ marginRight: '10px' }}>
               <img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
             </IconButton>
@@ -106,7 +102,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
             </MobileMenuButton>
 
             <MobileMenu open={openMenu}>
-              {/* Menu Items */}
               <StyledButton color="inherit" component={Link} to="/" startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
                 Home
               </StyledButton>
@@ -123,7 +118,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 Orders
               </StyledButton>
 
-              {/* Login inside the menu */}
               <StyledButton
                 color="inherit"
                 component={Link}
@@ -154,7 +148,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
               Orders
             </StyledButton>
 
-            {/* Move these two to the end */}
             <IconButton onClick={toggleDarkMode} style={{ marginLeft: 'auto', marginRight: '10px' }}>
               <img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
             </IconButton>

diff --git a/client/src/Pages/Cart.jsx b/client/src/Pages/Cart.jsx
@@ -15,7 +15,7 @@ function Cart() {
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
   const [retryCount, setRetryCount] = useState(0);
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
   const isAuthenticated =!! localStorage.getItem('token');
   if(!isAuthenticated){
     navigate('/login')