status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add btn hover styles (#85)

This commit is contained in:
Maria Rushkova 2021-10-19 17:22:40 +02:00 committed by GitHub
parent bb710034c3
commit ea10e1f335
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-chat/src/components/Buttons/DownloadButton.tsx
View File

@ -63,4 +63,8 @@ const Link = styled.a`
padding: 11px 32px;
${buttonStyles}
&:hover {
background: ${({ theme }) => theme.buttonBgHover};
}
`;

12
packages/react-chat/src/components/Modals/LinkModal.tsx
View File

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

18
packages/react-chat/src/styles/themes.ts
View File

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