Made hint look very nice

StampyAI · Jun 6, 2024 · 1a6b91b · 1a6b91b
1 parent 8e6e557
commit 1a6b91b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
@@ -32,8 +32,12 @@ const AnswerInfo = ({
       <span className="small grey">
         {answerType === 'human' ? 'Human-written' : 'Bot-generated'} response
       </span>
-      <QuestionMarkIcon className="hint" />
-      <div className="hint-contents bordered xs">{hint}</div>
+      <div className="icon-container leading-0">
+        <QuestionMarkIcon className="hint" />
+        <div className="hint-contents-container">
+          <div className="hint-contents xs">{hint}</div>
+        </div>
+      </div>
     </span>
   )
 }

diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
@@ -20,20 +20,30 @@ article.stampy {
   align-items: center;
 }
 
-.chat-entry .hint-contents {
+.chat-entry .icon-container {
+  position: relative;
+}
+
+.chat-entry .hint-contents-container {
   position: absolute;
-  top: -10px;
+  top: 0;
   right: 0;
-  transform: translateX(-50%);
+  transform: translateX(50%);
   visibility: hidden;
   width: 256px;
-  background: var(--colors-cool-grey-800);
+  padding-top: 120%;
+  z-index: 100;
+}
+
+.chat-entry .hint-contents {
+  background: var(--colors-cool-grey-900);
   color: white;
   padding: var(--spacing-16);
+  border-radius: var(--border-radius);
 }
 
-.chat-entry .hint-contents:hover,
-.chat-entry .hint:hover + .hint-contents {
+.chat-entry .hint-contents-container:hover,
+.chat-entry .hint:hover + .hint-contents-container {
   visibility: visible;
 }