Merge pull request #365 from StubberG3/balancer/359/chat-animation

feat: #359 - Add animation to chat button

Author: taichan03

frontend/src/components/Header/Chat.tsx

@@ -475,12 +475,9 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
       ) : (
         <div
           onClick={() => setShowChat(true)}
-          className="fixed bottom-9 left-10 h-16 w-16 inline-block cursor-pointer flex items-center justify-center rounded-full bg-blue-500 object-contain hover:cursor-pointer hover:bg-blue-300 md:bottom-20 md:right-20 no-print"
+          className="chat_button no-print"
         >
-          <FaComments className="text-white h-10 w-10" />
-          <div className="absolute bottom-20 mt-2 hidden w-32 rounded bg-gray-700 px-2 py-1 text-sm text-white before:absolute before:-top-2 before:left-1/2 before:-translate-x-1/2 before:transform before:border-8 before:border-transparent before:border-b-gray-700 group-hover:block">
-            Any questions? Click here to to chat!
-          </div>
+          <FaComments className="relative text-white w-10 h-10 z-10" />
         </div>
       )}
     </>

frontend/src/components/Header/chat.css

@@ -1,3 +1,11 @@
+.chat_button {
+  @apply fixed bottom-9 left-10 h-16 w-16 cursor-pointer rounded-full bg-blue-500 hover:cursor-pointer hover:bg-blue-300 md:bottom-20 md:right-20 flex items-center justify-center animate-pulse-bounce;
+}
+
+.chat_button_animations {
+  @apply flex justify-center items-center;
+}
+
 .inside_chat {
   @apply grow px-2 py-2 bg-neutral-100 overflow-y-auto overflow-x-hidden;
 }
@@ -87,4 +95,15 @@ ul.chat_suggestion_list {
 
 .scroll_down {
   @apply z-40 absolute bottom-[90px] left-[45%] text-3xl text-gray-400 hover:text-blue-500 rounded-full border-2 border-white bg-white;
+}
+
+@keyframes pulse-bounce {
+  0%, 100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: .5;
+    transform: translateY(-25%);
+  }
 }

frontend/tailwind.config.js

@@ -10,6 +10,10 @@ export default {
         lora: "'Lora', serif",
         'quicksand': ['Quicksand', 'sans-serif']
       },
+      animation: {
+        'pulse-bounce': 'pulse-bounce 2s infinite', // Adjust duration and iteration as needed
+      },
+      plugins: [],
     },
   },
   plugins: [],