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; padding: 11px 32px;
${buttonStyles} ${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; margin-right: 16px;
${buttonStyles} ${buttonStyles}
background: rgba(255, 45, 85, 0.1); background: ${({ theme }) => theme.buttonNoBg};
color: #ff2d55; color: ${({ theme }) => theme.redColor};
&:hover {
background: ${({ theme }) => theme.buttonNoBgHover};
}
`; `;
const ButtonYes = styled.button` const ButtonYes = styled.button`
padding: 11px 24px; padding: 11px 24px;
${buttonStyles} ${buttonStyles}
&:hover {
background: ${({ theme }) => theme.buttonBgHover};
}
`; `;

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

@ -1,9 +1,9 @@
export type Theme = { export type Theme = {
primary: string; primary: string;
secondary: string; secondary: string;
tertiary: string;
bodyBackgroundColor: string; bodyBackgroundColor: string;
sectionBackgroundColor: string; sectionBackgroundColor: string;
tertiary: string;
guestNameColor: string; guestNameColor: string;
iconColor: string; iconColor: string;
iconUserColor: string; iconUserColor: string;
@ -13,8 +13,12 @@ export type Theme = {
inputColor: string; inputColor: string;
border: string; border: string;
buttonBg: string; buttonBg: string;
buttonBgHover: string;
buttonNoBg: string;
buttonNoBgHover: string;
skeletonLight: string; skeletonLight: string;
skeletonDark: string; skeletonDark: string;
redColor: string;
}; };
export const lightTheme: Theme = { export const lightTheme: Theme = {
@ -31,9 +35,13 @@ export const lightTheme: Theme = {
notificationColor: "#4360DF", notificationColor: "#4360DF",
inputColor: "#EEF2F5", inputColor: "#EEF2F5",
border: "#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", skeletonLight: "#F6F8FA",
skeletonDark: "#E9EDF1", skeletonDark: "#E9EDF1",
redColor: "#FF2D55",
}; };
export const darkTheme: Theme = { export const darkTheme: Theme = {
@ -50,9 +58,13 @@ export const darkTheme: Theme = {
notificationColor: "#887AF9", notificationColor: "#887AF9",
inputColor: "#373737", inputColor: "#373737",
border: "#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", skeletonLight: "#2E2F31",
skeletonDark: "#141414", skeletonDark: "#141414",
redColor: "#FF5C7B",
}; };
export default { lightTheme, darkTheme }; export default { lightTheme, darkTheme };