Merge branch 'main' into bugfix/long_filename

apps/web/pages/documents/[id]/recipients.tsx

@@ -4,7 +4,7 @@ import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib";
 import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
 import { getDocument } from "@documenso/lib/query";
 import { getUserFromToken } from "@documenso/lib/server";
-import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
+import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
 import {
@@ -264,6 +264,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                         </div>
                         {props.document.status !== DocumentStatus.COMPLETED && (
                           <div className="mr-1 flex">
+                            <Tooltip label="Resend">
                               <IconButton
                                 icon={PaperAirplaneIcon}
                                 disabled={
@@ -272,30 +273,37 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                   item.signingStatus === "SIGNED" ||
                                   loading
                                 }
-                              color="secondary"
-                              className="my-auto mr-4 h-9"
-                              onClick={() => {
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
                                   if (confirm("Resend this signing request?")) {
                                     setLoading(true);
                                     sendSigningRequests(props.document, [item.id]).finally(() => {
                                       setLoading(false);
                                     });
                                   }
-                              }}>
-                              Resend
-                            </IconButton>
+                                }}
+                                className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                              />
+                            </Tooltip>
+                            <Tooltip label="Delete">
                               <IconButton
                                 icon={TrashIcon}
                                 disabled={!item.id || item.sendStatus === "SENT" || loading}
-                              onClick={() => {
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Delete this signing request?")) {
                                     const removedItem = { ...fields }[index];
                                     remove(index);
                                     deleteRecipient(item)?.catch((err) => {
                                       append(removedItem);
                                     });
+                                  }
                                 }}
-                              className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                                className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400"
                               />
+                            </Tooltip>
                           </div>
                         )}
                       </div>

packages/ui/components/tooltip/Tooltip.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { classNames } from "@documenso/lib";
+
+export function Tooltip(props: any) {
+  let timeout: NodeJS.Timeout;
+  const [active, setActive] = useState(false);
+
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, props.delay || 40);
+  };
+
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+
+  return (
+    <div className="relative" onPointerEnter={showTip} onPointerLeave={hideTip}>
+      {props.children}
+      <div
+        className={classNames(
+          "absolute left-1/4 -translate-x-1/2 transform px-4 transition-all delay-50 duration-120",
+          active && "bottom-9 opacity-100",
+          !active && "pointer-events-none bottom-6 opacity-0"
+        )}>
+        <span className="text-neon-800 bg-neon-200 inline-block rounded py-1 px-2 text-xs">
+          {props.label}
+        </span>
+      </div>
+    </div>
+  );
+};

packages/ui/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip } from "./Tooltip";

packages/ui/index.ts

@@ -2,3 +2,4 @@ export { Button, IconButton } from "./components/button/index";
 export { SelectBox } from "./components/selectBox/index";
 export { Breadcrumb } from "./components/breadcrumb/index";
 export { Dialog } from "./components/dialog/index";
+export { Tooltip } from "./components/tooltip/index";