ui correction done
This commit is contained in:
parent
201c72a2d7
commit
517a4e4dd2
10
index.html
10
index.html
@ -4,7 +4,15 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> -->
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<title>thirukalyanam</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
body {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
button{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@ const NAV_LINKS = [
|
||||
{ label: "Home", path: "/" },
|
||||
{ label: "Matches", path: "/matches" },
|
||||
{ label: "Interest", path: "/interest" },
|
||||
{ label: "Horoscope", path: "/horoscoper-generate" },
|
||||
{ label: "Messages", path: "/chat" },
|
||||
{ label: "Search", path: "/matches" },
|
||||
{ label: "Notifications", path: "/notifications" }
|
||||
|
||||
15
src/components/common/ScrollToTop.jsx
Normal file
15
src/components/common/ScrollToTop.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
// ScrollToTop.js
|
||||
import { useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
const ScrollToTop = () => {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default ScrollToTop;
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { Crown, Bookmark } from "lucide-react";
|
||||
import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard } from "lucide-react";
|
||||
import CakeIcon from "@mui/icons-material/Cake";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
@ -94,14 +94,43 @@ function ProfileCard({ profile }) {
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Age: {profile.age}
|
||||
{profile.age} yr
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Height: {profile.height}
|
||||
{profile.height} cm
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Receipt className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
5 - 10 LPA
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MoonStar className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Aries
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Scorpio
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<IdCard className="w-4 h-4 text-gray-700" />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
Bramin
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,8 +147,8 @@ function ProfileCard({ profile }) {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// your decline logic
|
||||
}} className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
font-semibold text-base py-2 rounded-[20px] shadow-md
|
||||
}} className="gap-2 px-3 w-[fit-content] bg-red-50 border-1 border-red-200
|
||||
font-400 text-base py-1.5 rounded-[20px] shadow-md text-[14px]
|
||||
hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
@ -128,7 +157,7 @@ function ProfileCard({ profile }) {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-semibold text-base
|
||||
className="w-[fit-content] bg-green-50 border-1 border-green-200 font-400 text-base text-[14px]
|
||||
rounded-[20px] px-3 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={(e) =>{
|
||||
@ -316,27 +345,25 @@ export default function MatchesInterface() {
|
||||
|
||||
<>
|
||||
|
||||
<section
|
||||
className="h-[100vh] overflow-visible"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-[300px_auto] md:px-4 gap-2 md:gap-10" >
|
||||
{/* <style>{`
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
`}</style> */}
|
||||
{/* <div className="grid grid-cols-1 md:grid-cols-[300px_auto] md:px-4 gap-2 md:gap-10" > */}
|
||||
<div className="flex flex-col md:flex-row my-6" >
|
||||
|
||||
|
||||
{/* Left Sidebar - Fixed on desktop, scrollable on mobile */}
|
||||
|
||||
<div className="w-full md:w-80">
|
||||
<div
|
||||
style={{ top: "100px", alignSelf: "flex-start" }}
|
||||
className=" h-[fit-content] w-full rounded-[10px] border border-1 border-gray-200 md:w-80 bg-white md:my-6
|
||||
shadow-lg sticky self-start"
|
||||
className="rounded-[10px] border border-gray-200 bg-white my-6
|
||||
shadow-lg h-[400px] md:h-[600px] overflow-y-auto md:sticky md:top-[150px]"
|
||||
>
|
||||
<div className="py-6 px-4">
|
||||
|
||||
<div className="py-2 px-4 sticky top-0 bg-[#fff] ">
|
||||
<h2 className="text-xl font-bold text-green-900 mb-4 mt-6 first:mt-0">
|
||||
Filter Matches </h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="py-6 px-4 h-full" >
|
||||
{tabs.map((tab) => {
|
||||
const showCategory = tab.category !== currentCategory;
|
||||
if (showCategory) {
|
||||
@ -344,7 +371,7 @@ export default function MatchesInterface() {
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={tab.id}>
|
||||
<div key={tab.id}>
|
||||
{showCategory && (
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4 mt-6 first:mt-0">
|
||||
{tab.category}
|
||||
@ -403,14 +430,14 @@ export default function MatchesInterface() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Right Content Area - Scrollable */}
|
||||
<div className=" px-2 py-8 ">
|
||||
<div className=" px-2 py-8 w-full md:w-9/12 ">
|
||||
<div className="w-[100%] max-w-[1200px] mx-auto">
|
||||
<div className="flex justify-between gap-2 itemes-center mb-8">
|
||||
<h1 className="text-[24px] font-bold text-gray-900 ">
|
||||
@ -437,7 +464,7 @@ export default function MatchesInterface() {
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -66,7 +66,9 @@ const allSuggestions = [
|
||||
<div className="absolute -inset-1 bg-green-200/20 rounded-full blur-sm"></div>
|
||||
|
||||
{/* Main Search Bar */}
|
||||
<div className="relative flex items-center bg-white rounded-full shadow-sm overflow-hidden border-1 border-green-600">
|
||||
<div className="md:w-[100%] md:m-w-[400px] relative
|
||||
flex items-center justify-between
|
||||
bg-white md:rounded-full shadow-sm md:overflow-hidden border-1 border-green-600">
|
||||
{/* Search Input */}
|
||||
<input
|
||||
type="text"
|
||||
@ -82,7 +84,7 @@ const allSuggestions = [
|
||||
}
|
||||
}}
|
||||
placeholder="Search"
|
||||
className="flex-1 px-8 py-2 text-lg text-gray-700 placeholder-red-600 bg-transparent outline-none font-medium"
|
||||
className="md:flex-1 md:px-8 px-2 py-2 text-lg text-gray-700 placeholder-red-600 bg-transparent outline-none font-medium"
|
||||
/>
|
||||
|
||||
{/* Search Button */}
|
||||
|
||||
@ -64,7 +64,7 @@ const FilterForm = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-4 md:p-6 ">
|
||||
<div className="max-w-6xl mx-auto p-4 px-0 md:p-6 ">
|
||||
<div className="bg-white rounded-lg shadow-sm">
|
||||
{/* Header */}
|
||||
<div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
|
||||
@ -73,7 +73,7 @@ const FilterForm = () => {
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="py-4 md:p-6">
|
||||
{/* Basic Details Section */}
|
||||
<Accordion
|
||||
expanded={expandedSections.basic}
|
||||
|
||||
@ -27,7 +27,7 @@ const FilterModal = () => {
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
maxWidth="md" // adjust: "sm" | "md" | "lg"
|
||||
maxWidth="lg" // adjust: "sm" | "md" | "lg"
|
||||
>
|
||||
<DialogTitle sx={{background:"#f5fbff"}}>
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
|
||||
@ -5,7 +5,11 @@ const ProfileLayout = () => {
|
||||
return (
|
||||
<>
|
||||
<ProfileHeader/>
|
||||
<div className=" w-[100%] max-w-[1400px] mx-auto p-2" style={{ marginBottom:'10px', overflowX:"hidden" }}>
|
||||
<div className=" w-[100%] max-w-[1400px] mx-auto p-2"
|
||||
style={{
|
||||
marginBottom:'10px',
|
||||
// overflowX:"hidden"
|
||||
}}>
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
|
||||
@ -208,9 +208,9 @@ const ChatUI = () => {
|
||||
const [chatMessages, setChatMessages] = useState({
|
||||
1: [
|
||||
{ id: 1, sender: 'other', text: "Let's do it! I'm in a meeting until noon.", time: '10 Nov', isDate: false , read: false },
|
||||
{ id: 2, sender: 'me', text: "That's perfect! There's a new place...", time: '07:21', isDate: false , read: false },
|
||||
{ id: 2, sender: 'me', text: "That's perfect! There's a new place...", time: '07:21 am', isDate: false , read: false },
|
||||
{ id: 3, sender: 'date', text: 'Today', isDate: true, read: true | false },
|
||||
{ id: 4, sender: 'me', text: "Can's get lunch. How about tomorrow?", time: '09:42', isDate: false , read: true },
|
||||
{ id: 4, sender: 'me', text: "Can's get lunch. How about tomorrow?", time: '09:42 am', isDate: false , read: true },
|
||||
{ id: 5, sender: 'other', text: "Let's do it! I'm in a meeting until noon.", time: '', isDate: false, read: true },
|
||||
{ id: 6, sender: 'me', text: "That's perfect! There's a new place...", time: '', isDate: false, read: true },
|
||||
],
|
||||
@ -486,7 +486,7 @@ const ChatUI = () => {
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 md:h-[400px]">
|
||||
{chatMessages[selectedChat]?.map((msg) => (
|
||||
<div key={msg.id}>
|
||||
{msg.isDate ? (
|
||||
@ -543,7 +543,7 @@ const ChatUI = () => {
|
||||
</div>
|
||||
|
||||
{/* Message Input */}
|
||||
<div className="p-4 border-t border-gray-200 bg-white">
|
||||
<div className="p-4 border-t border-gray-200 bg-white sticky bottom-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Crown, Bookmark } from "lucide-react";
|
||||
import { Crown, Bookmark, IdCard, Sparkles, MoonStar, Receipt } from "lucide-react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Tab from "@mui/material/Tab";
|
||||
import TabContext from "@mui/lab/TabContext";
|
||||
@ -342,17 +342,47 @@ const renderMenu = () => {
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Age: {profile.age}
|
||||
{profile.age} yr
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Height: {profile.height}
|
||||
{profile.height} cm
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Receipt className="w-4 h-4 text-gray-700 font-semibold" />
|
||||
<span className="text-[14px] font-400 text-gray-900">
|
||||
5 - 10 LPA
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MoonStar className="w-4 h-4 text-gray-700 font-semibold" />
|
||||
<span className="text-[14px] font-400 text-gray-900">
|
||||
Aries
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4 text-gray-700 font-semibold" />
|
||||
<span className="text-[14px] font-400 text-gray-900">
|
||||
Scorpio
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<IdCard className="w-4 h-4 text-gray-700 font-bold" />
|
||||
<span className="text-[14px] font-400 text-gray-900">
|
||||
Bramin
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationIcon className="text-red-900" />
|
||||
@ -372,19 +402,19 @@ const renderMenu = () => {
|
||||
e.stopPropagation();
|
||||
// your decline logic
|
||||
}}
|
||||
className="gap-1 px-2 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
className="gap-1 px-2 w-[fit-content] bg-red-50 border-1 border-red-200
|
||||
font-600 text-[12px] py-2 rounded-[20px] shadow-md
|
||||
hover:shadow-lg transition-all duration-300
|
||||
flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
Reject Request
|
||||
Reject
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-600 text-[12px]
|
||||
rounded-[20px] px-2 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
className="w-[fit-content] bg-green-50 border-1 border-green-200 font-600 text-[12px]
|
||||
rounded-[20px] px-3 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={(e) =>{
|
||||
|
||||
@ -402,7 +432,7 @@ const renderMenu = () => {
|
||||
</svg>
|
||||
)}
|
||||
|
||||
Accepted Request
|
||||
Accept
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -427,7 +457,7 @@ const renderMenu = () => {
|
||||
|
||||
<Button variant="contained" color="#f5fbff" onClick={(e) =>{ e.stopPropagation();
|
||||
navigate(`/profile-details/${profile.id}`)}
|
||||
} sx={{color:"#000000", background:"#f5fbff",fontWeight:"600", borderRadius:"30px"}}>
|
||||
} sx={{fontSize:"12px",color:"#000000", background:"#f5fbff",fontWeight:"500", borderRadius:"5px", padding:"5px 8px"}}>
|
||||
|
||||
View Details
|
||||
</Button>
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import { Route, Routes } from 'react-router-dom';
|
||||
import UserRoutes from './UserRoutes';
|
||||
import PublicRoutes from './PublicRoutes';
|
||||
import ScrollToTop from '../components/common/ScrollToTop';
|
||||
|
||||
|
||||
const AppRoutes = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<ScrollToTop />
|
||||
{/* Wrap UserRoutes inside AuthProvider separately */}
|
||||
<Routes>
|
||||
{UserRoutes()}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user