mageshwaran/thirukalyanamweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui correction done

Browse Source
This commit is contained in:
Meenadeveloper 2025-12-15 17:12:56 +05:30
parent 201c72a2d7
commit 517a4e4dd2
12 changed files with 145 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -4,7 +4,15 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" /> <link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <title>thirukalyanam</title>
</head> </head>
<body> <body>

7
src/App.css
View File

@ -1,3 +1,10 @@
body {
font-family: 'Outfit', sans-serif;
}
button{ button{
cursor: pointer; cursor: pointer;
} }

1
src/components/common/ProfileHeader.jsx
View File

@ -27,6 +27,7 @@ const NAV_LINKS = [
{ label: "Home", path: "/" }, { label: "Home", path: "/" },
{ label: "Matches", path: "/matches" }, { label: "Matches", path: "/matches" },
{ label: "Interest", path: "/interest" }, { label: "Interest", path: "/interest" },
{ label: "Horoscope", path: "/horoscoper-generate" },
{ label: "Messages", path: "/chat" }, { label: "Messages", path: "/chat" },
{ label: "Search", path: "/matches" }, { label: "Search", path: "/matches" },
{ label: "Notifications", path: "/notifications" } { label: "Notifications", path: "/notifications" }

15
src/components/common/ScrollToTop.jsx Normal file
View 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;

83
src/components/matches/MatchesProfilesTab.jsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react"; 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 CakeIcon from "@mui/icons-material/Cake";
import GroupsIcon from "@mui/icons-material/Groups"; import GroupsIcon from "@mui/icons-material/Groups";
import SchoolIcon from "@mui/icons-material/School"; import SchoolIcon from "@mui/icons-material/School";
@ -94,14 +94,43 @@ function ProfileCard({ profile }) {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CakeIcon className="w-4 h-4 text-gray-700" /> <CakeIcon className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-semibold text-gray-900"> <span className="text-[14px] font-semibold text-gray-900">
Age: {profile.age} {profile.age} yr
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AccessibilityNewIcon className="w-4 h-4 text-gray-700" /> <AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
<span className="text-[14px] font-semibold text-gray-900"> <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> </span>
</div> </div>
</div> </div>
@ -118,8 +147,8 @@ function ProfileCard({ profile }) {
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
// your decline logic // your decline logic
}} className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white }} className="gap-2 px-3 w-[fit-content] bg-red-50 border-1 border-red-200
font-semibold text-base py-2 rounded-[20px] shadow-md 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"> 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"> <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"/> <path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
@ -128,7 +157,7 @@ function ProfileCard({ profile }) {
</button> </button>
<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 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" transform hover:scale-105 flex items-center justify-center"
onClick={(e) =>{ onClick={(e) =>{
@ -316,27 +345,25 @@ export default function MatchesInterface() {
<> <>
<section {/* <div className="grid grid-cols-1 md:grid-cols-[300px_auto] md:px-4 gap-2 md:gap-10" > */}
className="h-[100vh] overflow-visible" <div className="flex flex-col md:flex-row my-6" >
>
<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> */}
{/* Left Sidebar - Fixed on desktop, scrollable on mobile */} {/* Left Sidebar - Fixed on desktop, scrollable on mobile */}
<div className="w-full md:w-80">
<div <div
style={{ top: "100px", alignSelf: "flex-start" }} className="rounded-[10px] border border-gray-200 bg-white my-6
className=" h-[fit-content] w-full rounded-[10px] border border-1 border-gray-200 md:w-80 bg-white md:my-6 shadow-lg h-[400px] md:h-[600px] overflow-y-auto md:sticky md:top-[150px]"
shadow-lg sticky self-start"
> >
<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) => { {tabs.map((tab) => {
const showCategory = tab.category !== currentCategory; const showCategory = tab.category !== currentCategory;
if (showCategory) { if (showCategory) {
@ -344,7 +371,7 @@ export default function MatchesInterface() {
} }
return ( return (
<React.Fragment key={tab.id}> <div key={tab.id}>
{showCategory && ( {showCategory && (
<h2 className="text-xl font-bold text-gray-900 mb-4 mt-6 first:mt-0"> <h2 className="text-xl font-bold text-gray-900 mb-4 mt-6 first:mt-0">
{tab.category} {tab.category}
@ -403,14 +430,14 @@ export default function MatchesInterface() {
</div> </div>
</div> </div>
</div> </div>
</React.Fragment> </div>
); );
})} })}
</div> </div>
</div> </div>
</div>
{/* Right Content Area - Scrollable */} {/* 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="w-[100%] max-w-[1200px] mx-auto">
<div className="flex justify-between gap-2 itemes-center mb-8"> <div className="flex justify-between gap-2 itemes-center mb-8">
<h1 className="text-[24px] font-bold text-gray-900 "> <h1 className="text-[24px] font-bold text-gray-900 ">
@ -437,7 +464,7 @@ export default function MatchesInterface() {
</section>

6
src/components/matches/SearchUI.jsx
View File

@ -66,7 +66,9 @@ const allSuggestions = [
<div className="absolute -inset-1 bg-green-200/20 rounded-full blur-sm"></div> <div className="absolute -inset-1 bg-green-200/20 rounded-full blur-sm"></div>
{/* Main Search Bar */} {/* 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 */} {/* Search Input */}
<input <input
type="text" type="text"
@ -82,7 +84,7 @@ const allSuggestions = [
} }
}} }}
placeholder="Search" 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 */} {/* Search Button */}

4
src/feature/FilterForm.jsx
View File

@ -64,7 +64,7 @@ const FilterForm = () => {
}; };
return ( 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"> <div className="bg-white rounded-lg shadow-sm">
{/* Header */} {/* Header */}
<div className="border-b border-pink-200 p-4 bg-[#fff5ed]"> <div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
@ -73,7 +73,7 @@ const FilterForm = () => {
</Typography> </Typography>
</div> </div>
<div className="p-4 md:p-6"> <div className="py-4 md:p-6">
{/* Basic Details Section */} {/* Basic Details Section */}
<Accordion <Accordion
expanded={expandedSections.basic} expanded={expandedSections.basic}

2
src/feature/FilterModal.jsx
View File

@ -27,7 +27,7 @@ const FilterModal = () => {
open={open} open={open}
onClose={handleClose} onClose={handleClose}
fullWidth fullWidth
maxWidth="md" // adjust: "sm" | "md" | "lg" maxWidth="lg" // adjust: "sm" | "md" | "lg"
> >
<DialogTitle sx={{background:"#f5fbff"}}> <DialogTitle sx={{background:"#f5fbff"}}>
<Box display="flex" alignItems="center" justifyContent="space-between"> <Box display="flex" alignItems="center" justifyContent="space-between">

6
src/layout/ProfileLayout.jsx
View File

@ -5,7 +5,11 @@ const ProfileLayout = () => {
return ( return (
<> <>
<ProfileHeader/> <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 /> <Outlet />
</div> </div>

8
src/pages/ChatPage.jsx
View File

@ -208,9 +208,9 @@ const ChatUI = () => {
const [chatMessages, setChatMessages] = useState({ const [chatMessages, setChatMessages] = useState({
1: [ 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: 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: 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: 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 }, { 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> </div>
{/* Messages */} {/* 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) => ( {chatMessages[selectedChat]?.map((msg) => (
<div key={msg.id}> <div key={msg.id}>
{msg.isDate ? ( {msg.isDate ? (
@ -543,7 +543,7 @@ const ChatUI = () => {
</div> </div>
{/* Message Input */} {/* 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"> <div className="flex items-center gap-2">
<input <input
type="text" type="text"

48
src/pages/InterestSendPage.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react"; 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 Box from "@mui/material/Box";
import Tab from "@mui/material/Tab"; import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext"; import TabContext from "@mui/lab/TabContext";
@ -342,17 +342,47 @@ const renderMenu = () => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CakeIcon /> <CakeIcon />
<span className="text-[14px] text-gray-900"> <span className="text-[14px] text-gray-900">
Age: {profile.age} {profile.age} yr
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AccessibilityIcon /> <AccessibilityIcon />
<span className="text-[14px] text-gray-900"> <span className="text-[14px] text-gray-900">
Height: {profile.height} {profile.height} cm
</span> </span>
</div> </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>
<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"> <div className="flex items-center gap-2">
<LocationIcon className="text-red-900" /> <LocationIcon className="text-red-900" />
@ -372,19 +402,19 @@ const renderMenu = () => {
e.stopPropagation(); e.stopPropagation();
// your decline logic // 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 font-600 text-[12px] py-2 rounded-[20px] shadow-md
hover:shadow-lg transition-all duration-300 hover:shadow-lg transition-all duration-300
flex items-center justify-center transform hover:scale-95"> 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"> <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"/> <path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
</svg> </svg>
Reject Request Reject
</button> </button>
<button <button
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-600 text-[12px] className="w-[fit-content] bg-green-50 border-1 border-green-200 font-600 text-[12px]
rounded-[20px] px-2 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300 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" transform hover:scale-105 flex items-center justify-center"
onClick={(e) =>{ onClick={(e) =>{
@ -402,7 +432,7 @@ const renderMenu = () => {
</svg> </svg>
)} )}
Accepted Request Accept
</button> </button>
</div> </div>
@ -427,7 +457,7 @@ const renderMenu = () => {
<Button variant="contained" color="#f5fbff" onClick={(e) =>{ e.stopPropagation(); <Button variant="contained" color="#f5fbff" onClick={(e) =>{ e.stopPropagation();
navigate(`/profile-details/${profile.id}`)} 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 View Details
</Button> </Button>

3
src/routes/AppRoutes.jsx
View File

@ -1,11 +1,14 @@
import { Route, Routes } from 'react-router-dom'; import { Route, Routes } from 'react-router-dom';
import UserRoutes from './UserRoutes'; import UserRoutes from './UserRoutes';
import PublicRoutes from './PublicRoutes'; import PublicRoutes from './PublicRoutes';
import ScrollToTop from '../components/common/ScrollToTop';
const AppRoutes = () => { const AppRoutes = () => {
return ( return (
<> <>
<ScrollToTop />
{/* Wrap UserRoutes inside AuthProvider separately */} {/* Wrap UserRoutes inside AuthProvider separately */}
<Routes> <Routes>
{UserRoutes()} {UserRoutes()}