From ce174fc1d0db74020bcd4dda9aa69e4091f8e7d3 Mon Sep 17 00:00:00 2001 From: U-jjwal Date: Sat, 3 Jan 2026 01:16:15 +0530 Subject: [PATCH 1/2] WIP: UI improvements in progress --- frontend/src/App.css | 23 +- frontend/src/App.js | 21 +- frontend/src/App.jsx | 2 +- frontend/src/components/Navbar.jsx | 170 +------ frontend/src/index.css | 1 + frontend/src/pages/Home.jsx | 220 ++++++++- frontend/src/pages/Loading_Screen.jsx | 94 ++++ frontend/src/pages/Login.jsx | 544 +++++++++++---------- frontend/src/pages/Register.jsx | 652 ++++++++++++-------------- 9 files changed, 928 insertions(+), 799 deletions(-) create mode 100644 frontend/src/pages/Loading_Screen.jsx diff --git a/frontend/src/App.css b/frontend/src/App.css index 01ba21b..3b22f7b 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -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; } diff --git a/frontend/src/App.js b/frontend/src/App.js index 3a1d812..a7e599a 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -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"; @@ -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"; @@ -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 @@ -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 ; + // } + return ( // Application settings context provider diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 534aae8..88ce172 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -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 ( diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index 65e562d..3931686 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -214,7 +214,7 @@ const Navbar = () => { }; return ( -