BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

signature-modal-mobile-view-V2

This commit is contained in:
JaiPandey425 2025-08-22 17:48:59 +05:30
parent c5043cccb1
commit 4a6895aca4
7 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
View File

@ -535,13 +535,13 @@ const DocumentSubmissionOptions = () => {
</div> </div>
</div> */} </div> */}
<div className="text-center pt-2 max-h-[25vh]"> <div className="text-center pt-1 max-h-[25vh]">
<div className="w-20 h-20 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg "> <div className="w-20 h-20 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
<FaCheck className="text-white text-4xl" /> <FaCheck className="text-white text-4xl" />
</div> </div>
<div> </div>
<h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3> <div className='text-center py-1'>
</div> <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
</div> </div>
<div className='border border-b border-gray-50'></div> <div className='border border-b border-gray-50'></div>
<div className=' min-h-[30vh]'> <div className=' min-h-[30vh]'>

2
src/components/setting/AsideSection.tsx
View File

@ -37,7 +37,7 @@ const AsideSection = ({
e.preventDefault(); // Prevent default anchor behavior e.preventDefault(); // Prevent default anchor behavior
onSubSectionClick(subSection.id); onSubSectionClick(subSection.id);
}} }}
className={`block w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${ className={`block w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
activeSubSection === subSection.id activeSubSection === subSection.id
? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm" ? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm"
: "text-gray-600 hover:text-gray-800 hover:bg-gray-50" : "text-gray-600 hover:text-gray-800 hover:bg-gray-50"

2
src/components/setting/ContactForm.tsx
View File

@ -130,7 +130,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
}; };
return ( return (
<div className="ms-2 space-y-2 max-w-[60vw]"> <div className="px-3 py-3 space-y-2 max-w-[60vw] bg-white rounded-lg">
<h2 className="text-lg font-medium text-slate-500">Add Contact</h2> <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">

6
src/components/setting/CreateAndInvite.tsx
View File

@ -158,9 +158,9 @@ const CreateAndInvite = ({
); );
return ( return (
<div className="ms-2 space-y-3"> <div className=" space-y-1.5">
{/* Create Section */} {/* Create Section */}
<section className="border-gray-200 border-b"> <section className="border-gray-200 border-b bg-white px-3 py-3 rounded-md">
<h2 className="text-lg font-medium mb-2 text-slate-500">Create Account</h2> <h2 className="text-lg font-medium mb-2 text-slate-500">Create Account</h2>
<div className="flex flex-col mb-6"> <div className="flex flex-col mb-6">
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1"> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
@ -197,7 +197,7 @@ const CreateAndInvite = ({
</section> </section>
{/* Invite Section */} {/* Invite Section */}
<section className="border-gray-300"> <section className="border-gray-200 border-b bg-white px-3 py-3 rounded-lg">
<h2 className="text-lg font-medium mb-2 text-slate-500">Invite</h2> <h2 className="text-lg font-medium mb-2 text-slate-500">Invite</h2>
<div className="grid grid-cols-2 gap-4 mb-6"> <div className="grid grid-cols-2 gap-4 mb-6">
{/* Account Name Dropdown */} {/* Account Name Dropdown */}

10
src/components/setting/Setting.tsx
View File

@ -226,7 +226,7 @@ const Setting = () => {
} }
return ( return (
<div className="space-y-8"> <div className="space-y-2">
{currentSubSections.map((subSection) => ( {currentSubSections.map((subSection) => (
<div <div
key={subSection.id} key={subSection.id}
@ -417,7 +417,7 @@ const Setting = () => {
<div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2"> <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
{/* Tabs */} {/* Tabs */}
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4"> <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4">
<div className="flex flex-wrap gap-4 md:gap-6"> <div className="flex flex-wrap gap-4 md:gap-6 ">
{tabs.map((tab) => {tabs.map((tab) =>
tab.type === page1 && ( tab.type === page1 && (
<button <button
@ -437,7 +437,7 @@ const Setting = () => {
</div> </div>
{/* Responsive Layout */} {/* Responsive Layout */}
<div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-8 mt-3 gap-6"> <div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-7 pt-2 lg:gap-6 ">
{/* Sidebar (hidden on small, shown on lg) */} {/* Sidebar (hidden on small, shown on lg) */}
{activeTab === 'userProfile' && ( {activeTab === 'userProfile' && (
@ -455,8 +455,8 @@ const Setting = () => {
{/* Sidebar as horizontal nav (only on mobile) */} {/* Sidebar as horizontal nav (only on mobile) */}
{activeTab === 'userProfile' && ( {activeTab === 'userProfile' && (
<section className="lg:hidden mb-4"> <section className="lg:hidden mb-2">
<div className="flex overflow-x-auto no-scrollbar gap-4 border-b pb-2"> <div className="flex overflow-x-auto no-scrollbar gap-4 border-b border-gray-200 pb-2">
{getSubSections(activeTab).map((sub) => ( {getSubSections(activeTab).map((sub) => (
<button <button
key={sub.id} key={sub.id}

22
src/components/setting/Signature/DrawSignatureCanvas.tsx
View File

@ -106,7 +106,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
const point = { x: e.clientX - rect.left, y: e.clientY - rect.top }; const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
const newPath = [...currentPath, point]; const newPath = [...currentPath, point];
setCurrentPath(newPath); setCurrentPath(newPath);
// Draw immediately for smooth experience // Draw immediately for smooth experience
drawCurrentPath(e.currentTarget as HTMLCanvasElement, newPath); drawCurrentPath(e.currentTarget as HTMLCanvasElement, newPath);
}; };
@ -149,7 +149,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
} }
setCurrentPath([]); setCurrentPath([]);
// Export both canvases and notify parent // Export both canvases and notify parent
const fullSignature = exportCanvasAsImage(canvasRef1.current); const fullSignature = exportCanvasAsImage(canvasRef1.current);
const initials = exportCanvasAsImage(canvasRef2.current); const initials = exportCanvasAsImage(canvasRef2.current);
@ -238,10 +238,11 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
<canvas <canvas
ref={canvasRef1} ref={canvasRef1}
className="w-full h-51 cursor-crosshair" className="w-full h-51 cursor-crosshair"
onMouseDown={handleMouseDown} onPointerDown={handleMouseDown}
onMouseMove={handleMouseMove} onPointerMove={handleMouseMove}
onMouseUp={handleMouseUp} onPointerUp={handleMouseUp}
onMouseLeave={handleMouseUp} onPointerLeave={handleMouseUp}
/> />
</div> </div>
</div> </div>
@ -253,10 +254,11 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
<canvas <canvas
ref={canvasRef2} ref={canvasRef2}
className="w-full h-51 cursor-crosshair" className="w-full h-51 cursor-crosshair"
onMouseDown={handleMouseDown} onPointerDown={handleMouseDown}
onMouseMove={handleMouseMove} onPointerMove={handleMouseMove}
onMouseUp={handleMouseUp} onPointerUp={handleMouseUp}
onMouseLeave={handleMouseUp} onPointerLeave={handleMouseUp}
/> />
</div> </div>
</div> </div>

2
src/components/setting/UserProfile.tsx
View File

@ -20,7 +20,7 @@ interface UserProfileProps {
const UserProfile: React.FC<UserProfileProps> = ({ userData }) => { const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
return ( return (
<div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6"> <div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 lg:gap-6 ">
{/* Profile Picture */} {/* Profile Picture */}
<div className="flex-shrink-0 text-center"> <div className="flex-shrink-0 text-center">
<div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg"> <div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">