feat: Add hover style for chat button and fix left margin (#258)

casbin · Aug 2, 2024 · 3644f6a · 3644f6a
1 parent d6e905d
commit 3644f6a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/ChatWidget/ChatButton.jsx b/src/ChatWidget/ChatButton.jsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {
   chatButton,
+  chatButtonHover,
   chatButtonOpen,
   chatIframe,
   chatIframeContainer,
@@ -36,7 +37,7 @@ function ChatButton() {
         style={{
           ...chatButton,
           ...(isChatOpen ? chatButtonOpen : {}),
-          ...(isHovered ? {backgroundColor: "#2E2A57"} : {}),
+          ...(isHovered ? chatButtonHover : {}),
         }}
         onClick={handleClick}
         onMouseEnter={() => setIsHovered(true)}

diff --git a/src/ChatWidget/chatStyles.js b/src/ChatWidget/chatStyles.js
@@ -7,7 +7,6 @@ export const chatButton = {
   border: "none",
   borderRadius: "50px",
   padding: "10px 20px",
-  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
   cursor: "pointer",
   zIndex: 1000,
   display: "flex",
@@ -17,6 +16,11 @@ export const chatButton = {
   transition: "all 0.3s ease",
 };
 
+export const chatButtonHover = {
+  backgroundColor: "#2E2A57",
+  boxShadow: "0 6px 100px rgba(0, 0, 0, 0.5)",
+};
+
 export const chatButtonOpen = {
   borderRadius: "50%",
   width: "50px",
@@ -45,6 +49,7 @@ export const chatIframeContainer = {
   transition: "all 0.3s ease",
   transform: "translateY(30px)",
   opacity: 1,
+  boxShadow: "0 5px 60px rgba(0, 0, 0, 0.6)",
 };
 
 export const chatIframeContainerOpen = {
@@ -55,4 +60,5 @@ export const chatIframeContainerOpen = {
 export const chatIframe = {
   width: "100%",
   height: "100%",
+  marginLeft: "-5px",
 };