feat(new autocomplete): making aiMessage appear and disappear smoothl…

…y, deleted negative margins
Sefaria · Mar 27, 2024 · 177d8ec · 177d8ec
1 parent 4b76674
commit 177d8ec
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -2083,7 +2083,6 @@ div.interfaceLinks-row a {
   font-family: "Cardo", "Meltho", "HebrewInEnglish Serif Font", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif, "Noto Sans Samaritan";
   font-size: 16px;
   margin-inline-start: 10px;
-  margin-top: -10px;
   min-width: 150px;
   overflow-x: hidden;
   overflow-y: hidden;
@@ -2129,9 +2128,16 @@ div.interfaceLinks-row a {
   font-size: 14px;
   height: 23px;
 }
-.ai-message{
+.ai-message {
   z-index: 1;
   position: absolute;
+  opacity: 0;
+  transition: opacity 2s ease;
+}
+
+.ai-message.visible {
+  opacity: 1;
+  transition: opacity 0.5s ease;
 }
 
 .ai-info-tooltip .ai-info-icon{

diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
@@ -1534,11 +1534,9 @@ const AiInfoTooltip = () => {
   return (
     <div className="ai-info-tooltip" onMouseEnter={() => setShowMessage(true)} onMouseLeave={() => setShowMessage(false)}>
       {aiInfoIcon}
-      {showMessage && (
-        <div className="ai-message">
+        <div className={`ai-message ${showMessage ? 'visible' : ''}`}>
             {aiMessage}
         </div>
-      )}
     </div>
   );
 };