diff --git a/packages/polling-page/src/index.tsx b/packages/polling-page/src/index.tsx index ce53aaa..6d4e158 100644 --- a/packages/polling-page/src/index.tsx +++ b/packages/polling-page/src/index.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from 'react' -import styled, { createGlobalStyle } from 'styled-components' +import styled from 'styled-components' import { DAppProvider, ChainId } from '@usedapp/core' import { DEFAULT_CONFIG } from '@usedapp/core/dist/cjs/src/model/config/default' import { WakuPolling } from './components/WakuPolling' -import { TopBar } from './components/TopBar' +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' @@ -24,33 +24,6 @@ const config = { }, } -export const GlobalStyle = createGlobalStyle` - * { - box-sizing: border-box; - } - - body, html, #root { - margin: 0; - width: 100%; - height: 100%; - } - - html { - font-family: Inter; - font-style: normal; - } - - a, - button { - cursor: pointer; - } -` - -const Page = styled.div` - height: 100%; - width: 100%; -` - export function Polling() { const { account, library } = useEthers() const [signer, setSigner] = useState(undefined) @@ -61,17 +34,12 @@ export function Polling() { return ( - + ) } -const Wrapper = styled.div` - height: 100%; - width: 100%; -` - export function PollingPage() { return ( @@ -82,3 +50,13 @@ export function PollingPage() { ) } + +const Page = styled.div` + height: 100%; + width: 100%; +` + +const Wrapper = styled.div` + height: 100%; + width: 100%; +` diff --git a/packages/proposal-page/src/assets/assets.d.ts b/packages/proposal-page/src/assets/assets.d.ts new file mode 100644 index 0000000..4ce4da1 --- /dev/null +++ b/packages/proposal-page/src/assets/assets.d.ts @@ -0,0 +1,14 @@ +declare module '*.svg' { + const url: string + export default url +} + +declare module '*.jpg' { + const url: string + export default url +} + +declare module '*.png' { + const url: string + export default url +} diff --git a/packages/proposal-page/src/assets/images/voting.svg b/packages/proposal-page/src/assets/images/voting.svg new file mode 100644 index 0000000..f7481db --- /dev/null +++ b/packages/proposal-page/src/assets/images/voting.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/proposal-page/src/index.tsx b/packages/proposal-page/src/index.tsx index b9d4d87..6d15aef 100644 --- a/packages/proposal-page/src/index.tsx +++ b/packages/proposal-page/src/index.tsx @@ -1,12 +1,22 @@ import React from 'react' import { useTest } from '@status-waku-voting/proposal-hooks' 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' export function ProposalPage() { useTest() return ( -
+ + + -
+ ) } + +const Wrapper = styled.div` + height: 100%; + width: 100%; +` diff --git a/packages/polling-page/src/components/TopBar.tsx b/packages/react-components/src/components/TopBar.tsx similarity index 64% rename from packages/polling-page/src/components/TopBar.tsx rename to packages/react-components/src/components/TopBar.tsx index f1b26d5..13ccb16 100644 --- a/packages/polling-page/src/components/TopBar.tsx +++ b/packages/react-components/src/components/TopBar.tsx @@ -1,14 +1,19 @@ import React, { useState } from 'react' import styled from 'styled-components' import { useEthers, shortenAddress } from '@usedapp/core' -import { Modal, metamaskIcon, statusIcon, dappIcon } from '@status-waku-voting/react-components' +import metamaskIcon from '../assets/svg/metamask.svg' +import statusIcon from '../assets/svg/status.svg' +import dappIcon from '../assets/svg/dapp.svg' +import { Modal } from './Modal' +import { ConnectButton, Account, ButtonDisconnect } from './misc/Buttons' type TopBarProps = { logo: string title: string + theme: string } -export function TopBar({ logo, title }: TopBarProps) { +export function TopBar({ logo, title, theme }: TopBarProps) { const { activateBrowserWallet, deactivate, account } = useEthers() const [isOpened, setIsOpened] = useState(false) const [selectConnect, setSelectConnect] = useState(false) @@ -25,6 +30,7 @@ export function TopBar({ logo, title }: TopBarProps) { {account ? ( { e.stopPropagation() setIsOpened(!isOpened) @@ -38,7 +44,8 @@ export function TopBar({ logo, title }: TopBarProps) { ) : ( - + )} @@ -74,24 +81,6 @@ const AccountWrap = styled.div` position: relative; ` -const Account = styled.button` - display: flex; - flex-direction: row; - align-items: center; - background: #ffffff; - border: 1px solid #eef2f5; - box-sizing: border-box; - border-radius: 21px; - padding: 11px 12px 11px 17px; - font-weight: 500; - font-size: 13px; - line-height: 22px; - - &:hover { - border: 1px solid #ffb571; - } -` - const TitleWrapper = styled.div` display: flex; flex-direction: column; @@ -104,73 +93,6 @@ const TitleWrapper = styled.div` line-height: 17px; ` -const Button = styled.button` - padding: 10px 28px; - background-color: #ffb571; - color: #ffffff; - font-weight: bold; - font-size: 15px; - line-height: 24px; - border-radius: 8px; - border: 0px; - outline: none; - - &:not(:disabled):hover { - background: #a53607; - } - - &:not(:disabled):active { - background: #f4b77e; - } - - &:disabled { - background: #888888; - filter: grayscale(1); - } - - @media (max-width: 600px) { - padding: 3px 28px; - } -` - -const ButtonDisconnect = styled.button` - position: absolute; - top: calc(100% + 4px); - right: 0; - opacity: 0; - visibility: hidden; - pointer-events: none; - font-weight: 500; - font-size: 15px; - line-height: 22px; - text-align: center; - padding: 15px 32px; - color: #a53607; - background: #ffffff; - border: 1px solid #eef2f5; - border-radius: 16px 4px 16px 16px; - box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12); - transition: all 0.3s; - outline: none; - - &:hover { - background: #a53607; - color: #ffffff; - } - - &:active { - background: #f4b77e; - color: #ffffff; - } - - &.opened { - opacity: 1; - visibility: visible; - pointer-events: auto; - z-index: 10; - } -` - const Logo = styled.div` height: 30px; width: 32px; diff --git a/packages/react-components/src/components/misc/Buttons.tsx b/packages/react-components/src/components/misc/Buttons.tsx index 0ec64f9..a4bcfd7 100644 --- a/packages/react-components/src/components/misc/Buttons.tsx +++ b/packages/react-components/src/components/misc/Buttons.tsx @@ -1,10 +1,11 @@ -import styled from 'styled-components' +import styled, { css } from 'styled-components' export const Button = styled.button` height: 44px; border-radius: 8px; font-size: 15px; border: 0px; + outline: none; ` export const SmallButton = styled(Button)` @@ -29,3 +30,141 @@ export const SmallButton = styled(Button)` color: #939ba1; } ` + +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 +} + +export const ConnectButton = styled(Button)` + padding: 10px 28px; + color: #ffffff; + font-weight: bold; + line-height: 24px; + + &:disabled { + background: #888888; + filter: grayscale(1); + } + + @media (max-width: 600px) { + padding: 3px 28px; + } + + ${({ theme }) => theme === 'orange' && orangeStyles}; + ${({ theme }) => theme === 'blue' && blueStyles}; +` + +const orangeAccountStyles = css` + &:hover { + border: 1px solid #ffb571; + } +` + +const blueAccountStyles = css` + &:hover { + border: 1px solid #5d7be2; + } +` + +interface AccountProps { + theme: string +} + +export const Account = styled.button` + display: flex; + flex-direction: row; + align-items: center; + background: #ffffff; + border: 1px solid #eef2f5; + box-sizing: border-box; + border-radius: 21px; + padding: 11px 12px 11px 17px; + font-weight: 500; + 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; + } +` + +interface DisconnectProps { + theme: string +} + +export const ButtonDisconnect = styled.button` + position: absolute; + top: calc(100% + 4px); + right: 0; + opacity: 0; + visibility: hidden; + pointer-events: none; + font-weight: 500; + font-size: 15px; + line-height: 22px; + text-align: center; + padding: 15px 32px; + color: #a53607; + background: #ffffff; + border: 1px solid #eef2f5; + border-radius: 16px 4px 16px 16px; + box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12); + transition: all 0.3s; + outline: none; + + &.opened { + opacity: 1; + visibility: visible; + pointer-events: auto; + z-index: 10; + } + + ${({ theme }) => theme === 'orange' && orangeDisconnectStyles}; + ${({ theme }) => theme === 'blue' && blueDisconnectStyles}; +` diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index c4deeb9..57809dd 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -1,9 +1,11 @@ import { Modal } from './components/Modal' import { Input } from './components/Input' import { Networks } from './components/Networks' +import { TopBar } from './components/TopBar' import { RadioGroup } from './components/radioGroup' -import { Button, SmallButton } from './components/misc/Buttons' +import { Button, SmallButton, ConnectButton, ButtonDisconnect, Account } from './components/misc/Buttons' import { colorRouletteGenerator } from './style/colors' +import { GlobalStyle } from './style/GlobalStyle' import checkCircleIcon from './assets/svg/checkCircle.svg' import addIcon from './assets/svg/addIcon.svg' import checkIcon from './assets/svg/checkIcon.svg' @@ -16,10 +18,15 @@ export { Modal, Input, Networks, + TopBar, RadioGroup, Button, SmallButton, + ConnectButton, + ButtonDisconnect, + Account, colorRouletteGenerator, + GlobalStyle, checkCircleIcon, addIcon, checkIcon, diff --git a/packages/react-components/src/style/GlobalStyle.tsx b/packages/react-components/src/style/GlobalStyle.tsx new file mode 100644 index 0000000..44acd39 --- /dev/null +++ b/packages/react-components/src/style/GlobalStyle.tsx @@ -0,0 +1,23 @@ +import { createGlobalStyle } from 'styled-components' + +export const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + } + + body, html, #root { + margin: 0; + width: 100%; + height: 100%; + } + + html { + font-family: Inter; + font-style: normal; + } + + a, + button { + cursor: pointer; + } +`