From 5c3131f3c3cdf66727345da1e2b0fff9fce1289e Mon Sep 17 00:00:00 2001
From: JaiPandey425 <jai.p@hicglobalsolutions.com>
Date: Tue, 15 Jul 2025 16:12:17 +0530
Subject: [PATCH] completion-screen-2

---
 .../DocumentCompletionScreen.tsx              | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
index 17c961c..fe91fa2 100644
--- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
+++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
@@ -32,7 +32,7 @@ type Signer = {
 // Signers List Component
 const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
     return (
-        <div className="bg-white rounded-md shadow-sm border border-gray-200">
+        <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
             <div className="p-6">
                 <div className="flex items-center justify-between mb-4">
                     <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
@@ -46,7 +46,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
 
                 <div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar">
                     {signers.map((signer) => (
-                        <div key={signer.id} className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
+                        <div key={signer.id} className="flex items-center gap-4 p-3 bg-white/40 rounded-lg">
                             <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
                                 {signer.name.split(" ").map(n => n[0].toUpperCase()).join("")}
                             </div>
@@ -107,10 +107,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
         ) || -1;
 
     return (
-        <div className="bg-white rounded-md shadow-sm border border-gray-200">
+        <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
             <div className="p-6">
                 <h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
-                <div className="overflow-x-auto overflow-y-auto max-h-96 no-scrollbar ">
+                <div className="overflow-x-auto overflow-y-auto h-[69vh] no-scrollbar flex justify-center items-center">
                     <div className="flex justify-center items-center gap-4 min-w-max">
                         {/* Mail icon */}
                         <div className="flex flex-col items-center">
@@ -280,23 +280,23 @@ const DocumentCompletionScreen = () => {
             <div className="min-h-screen bg-[var(--mainViewBg)]">
                 {/* Top Banner */}
 
-                <div className="bg-[var(--primary)] text-white shadow-lg">
+                <div className="w-full px-6 py-2  bg-white border-b rounded-sm border-gray-200">
                     <div className="max-w-[97vw] mx-auto px-2 py-2.5">
                         <div className="flex items-center justify-between">
                             <div className="flex items-center gap-3">
-                                <Link to='/' className="w-5 h-5  rounded-full flex items-center justify-center">
-                                    <IoMdHome className="text-xl" />
+                                <Link to='/' className="w-5 h-5 text-green-700  rounded-full flex items-center justify-center">
+                                    <IoMdHome className="h-10 w-10" />
                                 </Link>
-                                <div className="w-5 h-5 bg-white/20 rounded-full flex items-center justify-center">
+                                {/* <div className="w-5 h-5 bg-white text-green-800 rounded-full flex items-center justify-center">
                                     <FaCheck className="text-sm" />
-                                </div>
+                                </div> */}
                                 <div>
-                                    <h2 className="text-lg font-bold text-white/80">Awesome! Your document is sent for signature</h2>
+                                    <h2 className="text-md font-semibold text-gray-900">Awesome! Your document is sent for signature</h2>
                                 </div>
                             </div>
-                            <Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-1 cursor-pointer bg-white text-green-600 px-2.5 py-1 rounded-md font-semibold hover:bg-gray-100 transition-colors">
-                                <FaPen className="text-[10px]" />
-                                <span className="text-[13px]">Edit</span>
+                            <Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
+                                <FaPen className=" text-white text-md" />
+                                <span className="tracking-wide text-white">Edit</span>
                             </Link>
                         </div>
                     </div>
@@ -307,12 +307,12 @@ const DocumentCompletionScreen = () => {
                             {/* Header */}
                             <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
                                 {/* Left Section - Document Details */}
-                                <div className="lg:col-span-5 space-y-3">
+                                <div className="lg:col-span-6 space-y-2">
                                     {/* Document Preview Card */}
-                                    <div className="bg-white rounded-md shadow-sm border border-gray-200 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto">
+                                    <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto">
                                         <div className="p-3 ">
                                             {selectedDocuments?.map((item, index) => (
-                                                <div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3  bg-gray-50">
+                                                <div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3">
                                                     <div className="flex items-center gap-4">
                                                         <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                                             {/* <FaFileAlt className="text-blue-600 text-xl" /> */}
@@ -332,15 +332,17 @@ const DocumentCompletionScreen = () => {
                                             ))}
                                         </div>
                                     </div>
+
+                                    <div><SignersList signers={selectedRecipients} /></div>
                                 </div>
 
                                 {/* Right Section - Signer Components */}
-                                <div className="lg:col-span-7 space-y-1.5">
+                                <div className="lg:col-span-6 space-y-1.5">
                                     {/* Signing Order Diagram */}
                                     <SigningOrderDiagram signers={selectedRecipients} />
 
                                     {/* Signers List */}
-                                    <SignersList signers={selectedRecipients} />
+                                    
                                 </div>
                             </div>
                         </div>