Skip to content

UI/new Login register page updated (SWOC'26) #50

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

Open
U-jjwal wants to merge 3 commits into
base: main
Choose a base branch
from
Open

UI/new Login register page updated (SWOC'26) #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce174fc
WIP: UI improvements in progress
U-jjwal Jan 2, 2026
1919340
WIP: UI changes
U-jjwal Jan 2, 2026
84eae4b
WIP
U-jjwal Jan 2, 2026
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
23 changes: 19 additions & 4 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,36 @@
/* Main styling is handled by Tailwind CSS */
/* This file contains only custom styles not covered by Tailwind */

/* Custom scrollbar */
/* Smooth scrolling for the entire page */
html {
scroll-behavior: smooth;
}

/* Smooth momentum scrolling for iOS devices */
body {
-webkit-overflow-scrolling: touch;
}

/* Custom scrollbar styling for webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
height: 8px;
width: 10px;
height: 10px;
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
border-radius: 10px;
transition: background 0.3s ease;
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Expand Down
21 changes: 20 additions & 1 deletion frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// Layout component that wraps all pages
import Layout from "./components/Layout";
Expand Down Expand Up @@ -34,6 +34,8 @@ import PropertyMap from "./pages/PropertyMap";
import ProtectedRoute from "./components/ProtectedRoute";
// Import ScrollToTop component
import ScrollToTop from "./components/ScrollToTop";
// Import Loading Screen
import LoadingScreen from "./pages/Loading_Screen";
// Context providers
import { AppSettingsProvider } from "./contexts/AppSettingsContext";
import { AuthProvider } from "./contexts/AuthContext";
Expand All @@ -42,6 +44,9 @@ import PaymentPage from "./pages/PaymentPage";
// import ForgotPassword from "./pages/ForgotPassword";

function App() {

const [loading, setLoading] = useState(true);

// Set browser's scrollRestoration to manual to take control of scrolling
useEffect(() => {
// Take control of scroll restoration
Expand Down Expand Up @@ -77,6 +82,20 @@ function App() {
};
}, []);

// Handle loading screen
// useEffect(() => {
// // Hide loading screen after 3 seconds
// const timer = setTimeout(() => {
// setLoading(false);
// }, 3000);

// return () => clearTimeout(timer);
// }, []);

// if (loading) {
// return <LoadingScreen />;
// }

return (
// Application settings context provider
<AppSettingsProvider>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import PaymentPage from "./pages/PaymentPage";
import ResetPassword from "./pages/ResetPassword";
import ApiTest from "./pages/ApiTest";
import ProtectedRoute from "./components/ProtectedRoute";

import "./App.css";
function App() {
return (
<Router>
Expand Down
170 changes: 3 additions & 167 deletions frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ const Navbar = () => {
};

return (
<nav className="bg-white py-4 px-4 md:px-6 sticky top-0 z-20 shadow-sm">
<nav className="absolute top-0 left-0 w-full bg-white/10 backdrop-blur-sm py-4 px-4 md:px-6 z-50">
<div className="container mx-auto">
{/* Main navigation bar with logo and menu items */}
<div className="flex justify-between items-center">
Expand All @@ -223,7 +223,7 @@ const Navbar = () => {

{/* Explore Button - Added next to the logo */}
{location.pathname === "/" && (
<div className="hidden md:block ml-12">
<div className="hidden md:block ml-auto">
<Link
to="/listings"
className="flex items-center px-4 py-2.5 bg-primary-500 hover:bg-primary-600 text-white rounded-full transition duration-300 shadow-sm hover:shadow-md gap-2"
Expand All @@ -235,90 +235,6 @@ const Navbar = () => {
</div>
)}

{/* Center search bar - Responsive for all screens */}
{location.pathname === "/" && (
<div
ref={searchRef}
className="flex relative mx-auto max-w-md w-full rounded-full border border-neutral-200 shadow-search hover:shadow-md transition duration-200"
>
<form onSubmit={handleSearchSubmit} className="w-full">
<input
type="text"
placeholder={getText("common", "search")}
value={searchQuery}
onChange={handleSearchChange}
onFocus={() => setIsSearchFocused(true)}
className="w-full px-8 py-2.5 rounded-full focus:outline-none text-sm text-neutral-700 pr-12"
/>
{/* Search Button */}

<button
type="submit"
className="absolute right-1.5 top-[40%] transform -translate-y-1/2 bg-[#FF4C6D] text-white rounded-full hover:bg-[#E03F5A] transition duration-200 flex items-center justify-center w-8 h-8 m-1"
>
<i className="fas fa-search text-sm"></i>
</button>
</form>

{/* Search Dropdown - appears when search is focused */}
{isSearchFocused && (
<div className="absolute w-full mt-1 top-full left-0 bg-white rounded-xl shadow-lg border border-neutral-200 overflow-hidden z-20">
{/* Recent Searches Section */}
{recentSearches.length > 0 && (
<div className="p-4">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-semibold text-neutral-800">
Recent Searches
</h3>
<button
onClick={clearRecentSearches}
className="text-xs text-neutral-500 hover:text-neutral-700"
>
Clear all
</button>
</div>
<div className="space-y-2">
{recentSearches.map((search, index) => (
<div
key={index}
onClick={() => handleSuggestionClick(search)}
className="flex items-center p-2 hover:bg-neutral-50 rounded-md cursor-pointer"
>
<i className="fas fa-history text-neutral-400 mr-3"></i>
<span className="text-sm text-neutral-700">
{search}
</span>
</div>
))}
</div>
</div>
)}

{/* Popular Destinations Section */}
<div className="p-4 border-t border-neutral-100">
<h3 className="text-sm font-semibold text-neutral-800">
Popular Destinations
</h3>
<div className="space-y-2">
{suggestions.map((suggestion, index) => (
<div
key={index}
onClick={() => handleSuggestionClick(suggestion)}
className="flex items-center p-2 hover:bg-neutral-50 rounded-md cursor-pointer"
>
<i className="fas fa-map-marker-alt text-neutral-400 mr-3"></i>
<span className="text-sm text-neutral-700">
{suggestion}
</span>
</div>
))}
</div>
</div>
</div>
)}
</div>
)}

{/* Navigation - Responsive */}
<div className="flex items-center space-x-2">
{/* Become a host link */}
Expand Down Expand Up @@ -746,88 +662,8 @@ const Navbar = () => {
</div>
</div>
</div>

{/* Mobile Search Overlay */}
{isSearchFocused && location.pathname === "/" && (
<div className="fixed inset-0 bg-white z-50 md:hidden p-4">
<div className="flex items-center mb-4">
<button
onClick={() => setIsSearchFocused(false)}
className="p-2 hover:bg-neutral-100 rounded-full"
>
<i className="fas fa-arrow-left text-neutral-700"></i>
</button>
<span className="ml-4 text-lg font-semibold">Search</span>
</div>

<div className="relative">
<form onSubmit={handleSearchSubmit} className="w-full">
<input
type="text"
placeholder={getText("common", "search")}
value={searchQuery}
onChange={handleSearchChange}
className="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
autoFocus
/>
</form>

{/* Recent Searches */}
{recentSearches.length > 0 && (
<div className="mt-4">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-semibold">Recent Searches</h3>
<button
onClick={clearRecentSearches}
className="text-xs text-neutral-500"
>
Clear all
</button>
</div>
<div className="space-y-2">
{recentSearches.map((search, index) => (
<div
key={index}
onClick={() => {
handleSuggestionClick(search);
setIsSearchFocused(false);
}}
className="flex items-center p-2 hover:bg-neutral-50 rounded-lg"
>
<i className="fas fa-history text-neutral-400 mr-3"></i>
<span className="text-sm">{search}</span>
</div>
))}
</div>
</div>
)}

{/* Popular Destinations */}
<div className="mt-4">
<h3 className="text-sm font-semibold mb-2">
Popular Destinations
</h3>
<div className="space-y-2">
{suggestions.map((suggestion, index) => (
<div
key={index}
onClick={() => {
handleSuggestionClick(suggestion);
setIsSearchFocused(false);
}}
className="flex items-center p-2 hover:bg-neutral-50 rounded-lg"
>
<i className="fas fa-map-marker-alt text-neutral-400 mr-3"></i>
<span className="text-sm">{suggestion}</span>
</div>
))}
</div>
</div>
</div>
</div>
)}
</div>
</nav>
);
};
export default Navbar;
export default Navbar;
1 change: 1 addition & 0 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

Loading