From f0efb98e6786a338da8b1c9858c826912b230bc2 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 31 Aug 2022 20:17:42 -0700
Subject: [PATCH] Make editor tooltips not animate

---
 web/components/editor.tsx  | 6 +++---
 web/components/tooltip.tsx | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 9802385e..c15d17b1 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -166,7 +166,7 @@ export function TextEditor(props: {
           <EditorContent editor={editor} />
           {/* Toolbar, with buttons for images and embeds */}
           <div className="flex h-9 items-center gap-5 pl-4 pr-1">
-            <Tooltip className="flex items-center" text="Add image" noTap>
+            <Tooltip text="Add image" noTap noFade>
               <FileUploadButton
                 onFiles={upload.mutate}
                 className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
@@ -174,7 +174,7 @@ export function TextEditor(props: {
                 <PhotographIcon className="h-5 w-5" aria-hidden="true" />
               </FileUploadButton>
             </Tooltip>
-            <Tooltip className="flex items-center" text="Add embed" noTap>
+            <Tooltip text="Add embed" noTap noFade>
               <button
                 type="button"
                 onClick={() => setIframeOpen(true)}
@@ -188,7 +188,7 @@ export function TextEditor(props: {
                 <CodeIcon className="h-5 w-5" aria-hidden="true" />
               </button>
             </Tooltip>
-            <Tooltip className="flex items-center" text="Add market" noTap>
+            <Tooltip text="Add market" noTap noFade>
               <button
                 type="button"
                 onClick={() => setMarketOpen(true)}
diff --git a/web/components/tooltip.tsx b/web/components/tooltip.tsx
index 4dd1f6e2..418be88e 100644
--- a/web/components/tooltip.tsx
+++ b/web/components/tooltip.tsx
@@ -21,8 +21,9 @@ export function Tooltip(props: {
   className?: string
   placement?: Placement
   noTap?: boolean
+  noFade?: boolean
 }) {
-  const { text, children, className, placement = 'top', noTap } = props
+  const { text, children, className, placement = 'top', noTap, noFade } = props
 
   const arrowRef = useRef(null)
 
@@ -64,10 +65,10 @@ export function Tooltip(props: {
       {/* conditionally render tooltip and fade in/out */}
       <Transition
         show={open}
-        enter="transition ease-out duration-200"
-        enterFrom="opacity-0 "
+        enter="transition ease-out duration-50"
+        enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition ease-in duration-150"
+        leave={noFade ? '' : 'transition ease-in duration-150'}
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         // div attributes