diff --git a/packages/react-chat/src/components/Buttons/DownloadButton.tsx b/packages/react-chat/src/components/Buttons/DownloadButton.tsx index eb1ffbbf..95979845 100644 --- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx +++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx @@ -63,4 +63,8 @@ const Link = styled.a` padding: 11px 32px; ${buttonStyles} + + &:hover { + background: ${({ theme }) => theme.buttonBgHover}; + } `; diff --git a/packages/react-chat/src/components/Modals/LinkModal.tsx b/packages/react-chat/src/components/Modals/LinkModal.tsx index 60c25c3b..0b722474 100644 --- a/packages/react-chat/src/components/Modals/LinkModal.tsx +++ b/packages/react-chat/src/components/Modals/LinkModal.tsx @@ -67,12 +67,20 @@ const ButtonNo = styled.button` margin-right: 16px; ${buttonStyles} - background: rgba(255, 45, 85, 0.1); - color: #ff2d55; + background: ${({ theme }) => theme.buttonNoBg}; + color: ${({ theme }) => theme.redColor}; + + &:hover { + background: ${({ theme }) => theme.buttonNoBgHover}; + } `; const ButtonYes = styled.button` padding: 11px 24px; ${buttonStyles} + + &:hover { + background: ${({ theme }) => theme.buttonBgHover}; + } `; diff --git a/packages/react-chat/src/styles/themes.ts b/packages/react-chat/src/styles/themes.ts index 17d7e566..2f26e5e7 100644 --- a/packages/react-chat/src/styles/themes.ts +++ b/packages/react-chat/src/styles/themes.ts @@ -1,9 +1,9 @@ export type Theme = { primary: string; secondary: string; + tertiary: string; bodyBackgroundColor: string; sectionBackgroundColor: string; - tertiary: string; guestNameColor: string; iconColor: string; iconUserColor: string; @@ -13,8 +13,12 @@ export type Theme = { inputColor: string; border: string; buttonBg: string; + buttonBgHover: string; + buttonNoBg: string; + buttonNoBgHover: string; skeletonLight: string; skeletonDark: string; + redColor: string; }; export const lightTheme: Theme = { @@ -31,9 +35,13 @@ export const lightTheme: Theme = { notificationColor: "#4360DF", inputColor: "#EEF2F5", border: "#EEF2F5", - buttonBg: "rgba(67, 96, 223, 0.2)", + buttonBg: "rgba(67, 96, 223, 0.1)", + buttonBgHover: "rgba(67, 96, 223, 0.2)", + buttonNoBg: "rgba(255, 45, 85, 0.1)", + buttonNoBgHover: "rgba(255, 45, 85, 0.2)", skeletonLight: "#F6F8FA", skeletonDark: "#E9EDF1", + redColor: "#FF2D55", }; export const darkTheme: Theme = { @@ -50,9 +58,13 @@ export const darkTheme: Theme = { notificationColor: "#887AF9", inputColor: "#373737", border: "#373737", - buttonBg: "rgba(134, 158, 255, 0.3)", + buttonBg: "rgba(134, 158, 255, 0.2)", + buttonBgHover: "rgba(67, 96, 223, 0.3)", + buttonNoBg: "rgba(255, 92, 123, 0.2)", + buttonNoBgHover: "rgba(255, 45, 85, 0.3)", skeletonLight: "#2E2F31", skeletonDark: "#141414", + redColor: "#FF5C7B", }; export default { lightTheme, darkTheme };