🚧

apps/web/components/editor/pdf-signer.tsx

@@ -4,6 +4,8 @@ import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
 import SignatureDialog from "./signature-dialog";
 import { useState } from "react";
+import { Button } from "@documenso/ui";
+import { CheckBadgeIcon } from "@heroicons/react/24/outline";
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
@@ -28,10 +30,18 @@ export default function PDFSigner(props: any) {
             <Logo className="inline w-10"></Logo>
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-lg text-slate-700 align-baseline">
+            <p className="text-lg text-slate-700">
               Timur Ercan (timur.ercan31@gmail.com) would like you to sign this
               document.
             </p>
+            <Button
+              disabled
+              icon={CheckBadgeIcon}
+              color="secondary"
+              className="float-right"
+            >
+              Done
+            </Button>
           </div>
         </div>
       </div>

apps/web/components/editor/signature-dialog.tsx

@@ -20,6 +20,7 @@ const tabs = [
 
 export default function SignatureDialog(props: any) {
   const [currentTab, setCurrentTab] = useState(tabs[0]);
+  const [typedName, setTypedName] = useState("");
 
   return (
     <>
@@ -48,7 +49,7 @@ export default function SignatureDialog(props: any) {
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                <Dialog.Panel className="min-h-[300px] relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
                   <div className="">
                     <div className="border-b border-gray-200 mb-3">
                       <nav className="-mb-px flex space-x-8" aria-label="Tabs">
@@ -83,33 +84,53 @@ export default function SignatureDialog(props: any) {
                       </nav>
                     </div>
                     {isCurrentTab("Type") ? (
-                      <div className="my-8 min-h-[50px]">
+                      <div>
-                        <input
+                        <div className="my-8">
-                          type="email"
+                          <input
-                          name="email"
+                            type="email"
-                          id="email"
+                            name="email"
-                          className="mt-3 pb-1 text-center block border-b w-full border-gray-300 focus:border-neon focus:ring-neon text-2xl"
+                            id="email"
-                          placeholder="Kindly type your name"
+                            value={typedName}
-                        />
+                            onChange={(e) => {
+                              setTypedName(e.target.value);
+                            }}
+                            className="mt-3 p-1 text-center block border-b w-full border-gray-300 focus:border-neon focus:ring-neon text-2xl"
+                            placeholder="Kindly type your name"
+                          />
+                        </div>
+                        <div className="float-right">
+                          <Button
+                            color="secondary"
+                            onClick={() => props.setOpen(false)}
+                          >
+                            Cancel
+                          </Button>
+                          <Button className="ml-3" disabled={!typedName}>
+                            Sign
+                          </Button>
+                        </div>
                       </div>
                     ) : (
                       ""
                     )}
                     {isCurrentTab("Draw") ? (
-                      <div className="my-8 min-h-[50px]">draw</div>
+                      <div className="my-8">
+                        <div className="float-right">
+                          <Button
+                            color="secondary"
+                            onClick={() => props.setOpen(false)}
+                          >
+                            Cancel
+                          </Button>
+                          <Button className="ml-3" disabled={!typedName}>
+                            Sign
+                          </Button>
+                        </div>
+                      </div>
                     ) : (
                       ""
                     )}
                   </div>
-                  <div className="float-right">
-                    <Button
-                      color="secondary"
-                      onClick={() => props.setOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                    <Button className="ml-3">Sign</Button>
-                  </div>
                 </Dialog.Panel>
               </Transition.Child>
             </div>