Merge pull request #558 from Amruta7203/new

Hover effect for ChatBot logo on opening and closing
HimanshuNarware · May 30, 2024 · 3eff368 · 3eff368
2 parents c7a7046 + 1638036
commit 3eff368
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -65,9 +65,15 @@
   height: 45px;
 }
 
+.Logo{
+  cursor: pointer;
+  height:50px;
+  width:50px;
+
 .Logo {
   height: 50px;
   width: 50px;
+
   border-radius: 50px;
   right: 12px;
 }

diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -6,6 +6,7 @@ import ActionProvider from '../ChatBot/ActionProvider';
 import "./ChatAssistant.css"
 import React, { useState } from 'react';
 import chatbotLogo from '../assets/chatbotLogo.jpeg'
+import chatbotLogo1 from '../assets/logo1.png'
 
 const ChatAssistant = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -15,6 +16,12 @@ const ChatAssistant = () => {
   };
     return (
       <div className="chatbot">
+        <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} 
+        onMouseEnter={() => (document.querySelector(".Logo").src = chatbotLogo1)} 
+        onMouseLeave={() => (document.querySelector(".Logo").src = chatbotLogo)}
+        />
+      {isOpen && 
+
         <img className="Logo" src={chatbotLogo} alt="Logo" onClick={toggleChatbot} />
         <div className={`${isOpen?"chatbot-animation":"chatbot-close-animation"}`}>
 

diff --git a/frontend/src/assets/logo1.png b/frontend/src/assets/logo1.png