diff --git a/packages/core/test/models/TimedPollVoteMsg.test.ts b/packages/core/test/models/TimedPollVoteMsg.test.ts
index c4f7cf1..bd303a6 100644
--- a/packages/core/test/models/TimedPollVoteMsg.test.ts
+++ b/packages/core/test/models/TimedPollVoteMsg.test.ts
@@ -16,7 +16,6 @@ describe('TimedPollVoteMsg', () => {
pollId,
0
)
- console.log(alice.address)
if (vote) {
expect(vote.voter).to.eq(alice.address)
diff --git a/packages/polling-page/src/index.tsx b/packages/polling-page/src/index.tsx
index 6d4e158..009fd75 100644
--- a/packages/polling-page/src/index.tsx
+++ b/packages/polling-page/src/index.tsx
@@ -7,6 +7,7 @@ import { TopBar, GlobalStyle } from '@status-waku-voting/react-components'
import pollingIcon from './assets/images/pollingIcon.svg'
import { JsonRpcSigner } from '@ethersproject/providers'
import { useEthers } from '@usedapp/core'
+import { orangeTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
const config = {
readOnlyChainId: ChainId.Ropsten,
@@ -34,7 +35,7 @@ export function Polling() {
return (
-
+
)
diff --git a/packages/proposal-page/src/index.tsx b/packages/proposal-page/src/index.tsx
index 6d15aef..c3360bb 100644
--- a/packages/proposal-page/src/index.tsx
+++ b/packages/proposal-page/src/index.tsx
@@ -4,13 +4,14 @@ import { Proposal } from '@status-waku-voting/proposal-components'
import { TopBar, GlobalStyle } from '@status-waku-voting/react-components'
import votingIcon from './assets/images/voting.svg'
import styled from 'styled-components'
+import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
export function ProposalPage() {
useTest()
return (
-
+
)
diff --git a/packages/react-components/src/components/TopBar.tsx b/packages/react-components/src/components/TopBar.tsx
index bda4b0e..cc6ff4e 100644
--- a/packages/react-components/src/components/TopBar.tsx
+++ b/packages/react-components/src/components/TopBar.tsx
@@ -4,11 +4,12 @@ import { useEthers, shortenAddress } from '@usedapp/core'
import { Modal } from './Modal'
import { ConnectButton, Account, ButtonDisconnect } from './misc/Buttons'
import { Networks } from './Networks'
+import { Theme } from '../style/themes'
type TopBarProps = {
logo: string
title: string
- theme: string
+ theme: Theme
}
export function TopBar({ logo, title, theme }: TopBarProps) {
@@ -37,7 +38,7 @@ export function TopBar({ logo, title, theme }: TopBarProps) {
<>{shortenAddress(account)}>
- deactivate()}>
+ deactivate()}>
Disconnect
diff --git a/packages/react-components/src/components/misc/Buttons.tsx b/packages/react-components/src/components/misc/Buttons.tsx
index a4bcfd7..a58be2c 100644
--- a/packages/react-components/src/components/misc/Buttons.tsx
+++ b/packages/react-components/src/components/misc/Buttons.tsx
@@ -1,5 +1,5 @@
import styled, { css } from 'styled-components'
-
+import { Theme } from '../../style/themes'
export const Button = styled.button`
height: 44px;
border-radius: 8px;
@@ -31,31 +31,8 @@ export const SmallButton = styled(Button)`
}
`
-const orangeStyles = css`
- background-color: #ffb571;
-
- &:not(:disabled):hover {
- background: #a53607;
- }
-
- &:not(:disabled):active {
- background: #f4b77e;
- }
-`
-
-const blueStyles = css`
- background-color: #5d7be2;
-
- &:not(:disabled):hover {
- background: #0f3595;
- }
-
- &:not(:disabled):active {
- background: #7e98f4;
- }
-`
interface ConnectButtonProps {
- theme: string
+ theme: Theme
}
export const ConnectButton = styled(Button)`
@@ -73,24 +50,19 @@ export const ConnectButton = styled(Button)`
padding: 3px 28px;
}
- ${({ theme }) => theme === 'orange' && orangeStyles};
- ${({ theme }) => theme === 'blue' && blueStyles};
-`
+ background-color: ${({ theme }) => theme.primaryColor};
-const orangeAccountStyles = css`
- &:hover {
- border: 1px solid #ffb571;
+ &:not(:disabled):hover {
+ background: ${({ theme }) => theme.secondaryColor};
}
-`
-const blueAccountStyles = css`
- &:hover {
- border: 1px solid #5d7be2;
+ &:not(:disabled):active {
+ background: ${({ theme }) => theme.activeBackgroundColor};
}
`
interface AccountProps {
- theme: string
+ theme: Theme
}
export const Account = styled.button`
@@ -106,36 +78,13 @@ export const Account = styled.button`
font-size: 13px;
line-height: 22px;
- ${({ theme }) => theme === 'orange' && orangeAccountStyles};
- ${({ theme }) => theme === 'blue' && blueAccountStyles};
-`
-
-const orangeDisconnectStyles = css`
&:hover {
- background: #a53607;
- color: #ffffff;
- }
-
- &:active {
- background: #f4b77e;
- color: #ffffff;
- }
-`
-
-const blueDisconnectStyles = css`
- &:hover {
- background: #0f3595;
- color: #ffffff;
- }
-
- &:active {
- background: #f4b77e;
- color: #7e98f4;
+ border: 1px solid ${({ theme }) => theme.primaryColor};
}
`
interface DisconnectProps {
- theme: string
+ theme: Theme
}
export const ButtonDisconnect = styled.button`
@@ -150,7 +99,7 @@ export const ButtonDisconnect = styled.button`
line-height: 22px;
text-align: center;
padding: 15px 32px;
- color: #a53607;
+ color: ${({ theme }) => theme.secondaryColor};
background: #ffffff;
border: 1px solid #eef2f5;
border-radius: 16px 4px 16px 16px;
@@ -165,6 +114,13 @@ export const ButtonDisconnect = styled.button`
z-index: 10;
}
- ${({ theme }) => theme === 'orange' && orangeDisconnectStyles};
- ${({ theme }) => theme === 'blue' && blueDisconnectStyles};
+ &:hover {
+ background: ${({ theme }) => theme.secondaryColor};
+ color: #ffffff;
+ }
+
+ &:active {
+ background: #f4b77e;
+ color: ${({ theme }) => theme.activeTextColor};
+ }
`
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index 6816863..f794ebc 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -13,7 +13,7 @@ import closeIcon from './assets/svg/close.svg'
import dappIcon from './assets/svg/dapp.svg'
import metamaskIcon from './assets/metamask.png'
import statusIcon from './assets/svg/status.svg'
-
+import themes, { Theme } from './style/themes'
export {
Modal,
Input,
@@ -34,4 +34,6 @@ export {
dappIcon,
metamaskIcon,
statusIcon,
+ themes,
+ Theme,
}
diff --git a/packages/react-components/src/style/themes.ts b/packages/react-components/src/style/themes.ts
new file mode 100644
index 0000000..0faa4ac
--- /dev/null
+++ b/packages/react-components/src/style/themes.ts
@@ -0,0 +1,22 @@
+export type Theme = {
+ primaryColor: string
+ secondaryColor: string
+ activeTextColor: string
+ activeBackgroundColor: string
+}
+
+export const orangeTheme: Theme = {
+ primaryColor: '#ffb571',
+ secondaryColor: '#a53607',
+ activeTextColor: '#ffffff',
+ activeBackgroundColor: '#f4b77e',
+}
+
+export const blueTheme: Theme = {
+ primaryColor: '#5d7be2',
+ secondaryColor: '#0f3595',
+ activeTextColor: '#7e98f4',
+ activeBackgroundColor: '#7e98f4',
+}
+
+export default { orangeTheme, blueTheme }