From 10632fa3e5cd62bb49811c823a009438a09ac038 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Fri, 3 Sep 2021 11:26:02 +0200 Subject: [PATCH] Use themes object (#46) --- .../core/test/models/TimedPollVoteMsg.test.ts | 1 - packages/polling-page/src/index.tsx | 3 +- packages/proposal-page/src/index.tsx | 3 +- .../src/components/TopBar.tsx | 5 +- .../src/components/misc/Buttons.tsx | 84 +++++-------------- packages/react-components/src/index.tsx | 4 +- packages/react-components/src/style/themes.ts | 22 +++++ 7 files changed, 52 insertions(+), 70 deletions(-) create mode 100644 packages/react-components/src/style/themes.ts 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 }