diff --git a/frontend/src/components/Header/Chat.tsx b/frontend/src/components/Header/Chat.tsx index 54e965f8..df11f68b 100644 --- a/frontend/src/components/Header/Chat.tsx +++ b/frontend/src/components/Header/Chat.tsx @@ -475,12 +475,9 @@ const Chat: React.FC = ({ showChat, setShowChat }) => { ) : (
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" > - -
- Any questions? Click here to to chat! -
+
)} diff --git a/frontend/src/components/Header/chat.css b/frontend/src/components/Header/chat.css index 0d0d1f8e..65e5e07f 100644 --- a/frontend/src/components/Header/chat.css +++ b/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%); + } } \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 7ca214a8..bcc1e693 100644 --- a/frontend/tailwind.config.js +++ b/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: [],