Use themes object (#46)

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)

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 (
     <Wrapper>
-      <TopBar logo={pollingIcon} title={'Polling Dapp'} theme={'orange'} />
+      <TopBar logo={pollingIcon} title={'Polling Dapp'} theme={orangeTheme} />
       <WakuPolling appName={'testApp_'} signer={signer} />
     </Wrapper>
   )

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 (
     <Wrapper>
       <GlobalStyle />
-      <TopBar logo={votingIcon} title={'Proposals Dapp'} theme={'blue'} />
+      <TopBar logo={votingIcon} title={'Proposals Dapp'} theme={blueTheme} />
       <Proposal />
     </Wrapper>
   )

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) {
               <GreenDot />
               <>{shortenAddress(account)}</>
             </Account>
-            <ButtonDisconnect className={isOpened ? 'opened' : undefined} onClick={() => deactivate()}>
+            <ButtonDisconnect theme={theme} className={isOpened ? 'opened' : undefined} onClick={() => deactivate()}>
               Disconnect
             </ButtonDisconnect>
           </AccountWrap>

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)<ConnectButtonProps>`
@@ -73,24 +50,19 @@ export const ConnectButton = styled(Button)<ConnectButtonProps>`
     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<AccountProps>`
@@ -106,36 +78,13 @@ export const Account = styled.button<AccountProps>`
   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<DisconnectProps>`
@@ -150,7 +99,7 @@ export const ButtonDisconnect = styled.button<DisconnectProps>`
   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<DisconnectProps>`
     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};
+  }
 `

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

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 }