From ea10e1f3350c714c17897f97d0b4be97fda0be01 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 19 Oct 2021 17:22:40 +0200
Subject: [PATCH] Add btn hover styles (#85)

---
 .../src/components/Buttons/DownloadButton.tsx  |  4 ++++
 .../src/components/Modals/LinkModal.tsx        | 12 ++++++++++--
 packages/react-chat/src/styles/themes.ts       | 18 +++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

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 };