Updated login, navbar, and assets

.env

@@ -0,0 +1,3 @@
+NODE_ENV=development
+PORT=5000
+MONGO_URI=mongodb://localhost:27017/

client/src/app/App.js

@@ -1,6 +1,5 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
 import { useState, useEffect } from "react";
-
 import Loader from "../components/Loader/loader.js";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -19,7 +18,10 @@ import Login from '../components/Authentication/Login/Login';
 import Register from '../components/Authentication/Register/Register';
 import Wishlist from '../components/Wishlist';
 import WishItemsProvider from '../Context/WishItemsProvider';
+<<<<<<< HEAD
+=======
 // import Checkout from '../components/Checkout/Checkout';
+>>>>>>> upstream/main
 import SearchProvider from '../Context/SearchProvider';
 import Toaster from '../components/Toaster/toaster';
 import { ThemeProvider } from '../Context/ThemeContext';
@@ -31,8 +33,77 @@ import ShippingPage from '../Pages/Footer/Shipping/Shipping.js';
 import TermsConditions from '../components/Legal/TermsConditions/TermsConditions';
 import PrivacyPolicy from '../components/Legal/PrivacyPolicy/PrivacyPolicy';
 
+<<<<<<< HEAD
+// Minimal Header for login/register (logo left aligned)
+const MinimalHeader = () => (
+  <div style={{ padding: "1rem", display: "flex", alignItems: "center" }}>
+    {/* Make sure logo.png is in public folder */}
+    <img src="/logo.png" alt="TrendHora Logo" style={{ height: "50px" }} />
+  </div>
+);
+
+function AppContent() {
+  const location = useLocation();
+
+  // Detect if we are on login or register page
+  const isAuthPage =
+    location.pathname.startsWith("/account/login") ||
+    location.pathname.startsWith("/account/register");
+
+  return (
+    <div className="app__container">
+      {/* Show minimal header on auth pages, full header elsewhere */}
+      {isAuthPage ? <MinimalHeader /> : <Header />}
+
+      <main className="app__content">
+        <Routes>
+          <Route index element={<Home />} />
+          <Route path="/account">
+            <Route path="me" element={<MyAccount />} />
+            <Route path="manage" element={<ManageAccount />} />
+            <Route path="login" element={<Login />} />
+            <Route path="register" element={<Register />} />
+            <Route path="*" element={<Login />} />
+          </Route>
+          <Route path="/shop" element={<Shop />} />
+          <Route path="/category">
+            <Route path=":id" element={<CategoryView />} />
+          </Route>
+          <Route path="/item">
+            <Route path="/item/men">
+              <Route path=":id" element={<ItemView />} />
+            </Route>
+            <Route path="/item/women">
+              <Route path=":id" element={<ItemView />} />
+            </Route>
+            <Route path="/item/kids">
+              <Route path=":id" element={<ItemView />} />
+            </Route>
+            <Route path="/item/featured">
+              <Route path=":id" element={<ItemView />} />
+            </Route>
+          </Route>
+          <Route path="/wishlist" element={<Wishlist />} />
+          <Route path="/search/*" element={<SearchView />} />
+          <Route path="/terms" element={<TermsConditions />} />
+          <Route path="/privacy" element={<PrivacyPolicy />} />
+          <Route path="/faq" element={<FaqList />} />
+          <Route path="/accessibility" element={<AccessiblityPage />} />
+          <Route path="/shipping" element={<ShippingPage />} />
+          <Route path="/refund" element={<RefundPage />} />
+          <Route path="/admin" element={<Wishlist />} />
+        </Routes>
+      </main>
+
+      {/* Footer visible on all pages */}
+      <Footer />
+    </div>
+  );
+}
+=======
 // ✅ Import RecentlyViewedSection
 import RecentlyViewedSection from '../components/RecentlyViewedSection';
+>>>>>>> upstream/main
 
 function App() {
   const [loading, setLoading] = useState(true);
@@ -70,6 +141,9 @@ function App() {
         <WishItemsProvider>
           <SearchProvider>
             <Router>
+<<<<<<< HEAD
+              <AppContent />
+=======
               <Header />
               <Routes>
                 <Route index element={<Home />} />
@@ -105,6 +179,7 @@ function App() {
               <RecentlyViewedSection />
 
               <Footer />
+>>>>>>> upstream/main
             </Router>
           </SearchProvider>
         </WishItemsProvider>

client/src/components/Authentication/Login/Login.css

@@ -1,11 +1,11 @@
 /* ==== Container for the entire login page ==== */
 .login__auth__container {
-  min-height: calc(120vh - 20px); /* subtract header height */
+  min-height: calc(100vh - 80px); /* Subtract header height */
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; /* Vertically center */
   padding: 2rem;
-  background-color: var(--bg-primary);
+background: url('c:\Users\nandh\AppData\Local\Packages\5319275A.WhatsAppDesktop_cv1g1gvanyjgm\TempState\95D40515D78B92D75F485224D51A7EA6\WhatsApp Image 2025-08-08 at 14.02.31_1a0af9da.jpg') no-repeat center center/cover;   
   box-sizing: border-box;
 }
 
@@ -19,9 +19,11 @@
   width: 100%;
   max-width: 400px;
   padding: 2.5rem;
-  background-color: var(--bg-secondary);
+  background: rgba(255, 255, 255, 0.15); /* Transparent background */
+  backdrop-filter: blur(10px); /* Glass effect */
   border-radius: 10px;
   box-shadow: var(--shadow);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   transition: transform 0.3s ease;
 }
 
@@ -74,6 +76,23 @@
   border-color: var(--accent-color);
 }
 
+/* ==== Password field with eye icon ==== */
+.password__container {
+  position: relative;
+}
+
+.toggle-password {
+  position: absolute;
+  top: 35px;
+  right: 12px;
+  cursor: pointer;
+  color: var(--text-muted);
+}
+
+.toggle-password:hover {
+  color: var(--accent-color);
+}
+
 /* ==== Login Button Container ==== */
 .login__button__container {
   margin-top: 1.5rem;
@@ -151,4 +170,3 @@
   color: inherit;
   text-decoration: none;
 }
-

client/src/components/Authentication/Login/Login.js

@@ -3,30 +3,29 @@ import LoginCard from '../../Card/LoginCard/LoginCard';
 import './Login.css';
 import { FcGoogle } from 'react-icons/fc';
 import { FaGithub } from 'react-icons/fa';
+import { FaEye, FaEyeSlash } from 'react-icons/fa';
 import { supabase } from '../../../lib/supabase';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 
 const Login = () => {
-
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
 
   const handleLogin = async (e) => {
-        e.preventDefault();
-        try {
-            const response = await axios.post(`${process.env.REACT_APP_BACKEND_URL}/api/auth/login`, { email, password });
-            localStorage.setItem('token', response.data.token); // Store JWT token
-            alert('Login successful!');
-            navigate('/account/me'); // Navigate to account page after login
-        } catch (error) {
-            const errorMessage = error.response ? error.response.data.message : error.message;
-            alert(`Login failed: ${errorMessage}`);
-        }
-    };
-
-
+    e.preventDefault();
+    try {
+      const response = await axios.post(`${process.env.REACT_APP_BACKEND_URL}/api/auth/login`, { email, password });
+      localStorage.setItem('token', response.data.token); // Store JWT token
+      alert('Login successful!');
+      navigate('/account/me'); // Navigate to account page after login
+    } catch (error) {
+      const errorMessage = error.response ? error.response.data.message : error.message;
+      alert(`Login failed: ${errorMessage}`);
+    }
+  };
 
   const handleOAuthLogin = async (provider) => {
     const { error } = await supabase.auth.signInWithOAuth({
@@ -47,14 +46,18 @@ const Login = () => {
       <div className="login__auth">
 
         {/* OAuth icons row */}
+        {/* <img
+        src="/bg.png"
+        alt="Website Logo"
+        className="navbrand__logo"
+      /> */}
         <div className="oauth__icon__row">
           <button className="oauth-icon-btn" onClick={() => handleOAuthLogin('google')}>
             <FcGoogle size={30} />
           </button>
           <button className="oauth-icon-btn" onClick={() => handleOAuthLogin('github')}>
             <FaGithub size={30} />
           </button>
-
         </div>
 
         <div className="oauth__divider">
@@ -63,18 +66,43 @@ const Login = () => {
 
         {/* Email/password form */}
         <form onSubmit={handleLogin}>
-          <LoginCard
-            email={email}
-            password={password}
-            setEmail={setEmail}
-            setPassword={setPassword}
-          />
+          <div className="input__container">
+            <label className="input__label">Email</label>
+            <input
+              type="email"
+              className="login__input"
+              placeholder="[email protected]"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="input__container password__container">
+            <label className="input__label">Password</label>
+            <input
+              type={showPassword ? "text" : "password"}
+              className="login__input"
+              placeholder="**********"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            <span
+              className="toggle-password"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? <FaEyeSlash /> : <FaEye />}
+            </span>
+          </div>
+
+          <div className="login__button__container">
+            <button type="submit" className="login__button">LOGIN</button>
+          </div>
         </form>
       </div>
     </div>
   );
 };
 
 export default Login;
-
-

client/src/components/Nav/Container/Container.css

@@ -4,15 +4,15 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
-  flex-wrap: wrap; /* allow wrapping instead of pushing off-screen */
+  height: auto !important; /* allow logo to grow */
 }
-.mbox{
+.nav__container {
   display: flex;
-  margin-right: 0.8rem;
-  padding-top: 6px;
-  padding-bottom: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
-/* Search form container adjustments */
+
 .form__container {
   flex: 1;
   min-width: 150px; /* prevent search bar from shrinking too far */
@@ -25,15 +25,19 @@
   flex-shrink: 0; /* prevent it from being squeezed out */
 }
 
-/* Mobile-specific tweaks */
+/* Mobile adjustments */
 @media (max-width: 768px) {
   .top__container {
     padding: 6px;
     flex-wrap: nowrap; /* keep them in one line */
   }
   .form__container {
-    flex: 1;
-    padding: 2px;
-    margin: 0 10px;
+    padding: 10px 0;
+  }
+  .drawer {
+    margin-left: auto;  
+  }
+  .top__container {
+    padding: 8px;
   }
 }

client/src/components/Nav/Container/Container.js

@@ -3,7 +3,6 @@ import DrawerNav from '../DrawerNav/DrawerNav';
 import NavBrand from '../Nav-Brand/Navbrand';
 import Form from '../Search-Bar/Form';
 import './Container.css';
-import Box from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 const Navtop = () => {
@@ -28,6 +27,16 @@ const Navtop = () => {
             <Control />
           </div>
         )}
+<<<<<<< HEAD
+
+        {/* Mobile Search */}
+        {isSmallScreen && (
+          <div className="form__container">
+            <Form />
+          </div>
+        )}
+=======
+>>>>>>> upstream/main
 
         {/* Mobile Hamburger */}
         {isSmallScreen && (
@@ -36,6 +45,8 @@ const Navtop = () => {
           </div>
         )}
       </div>
+<<<<<<< HEAD
+=======
       {isSmallScreen && (
         <div className='mbox'>
           <div className="form__container">
@@ -48,6 +59,7 @@ const Navtop = () => {
         )}
 
 
+>>>>>>> upstream/main
     </div>
   );
 };