TopBar component (#42)

2021-09-02 23:02:39 +02:00 · 2021-09-02 23:02:39 +02:00 · fbca38cf04
parent 763b704620
commit fbca38cf04
8 changed files with 235 additions and 128 deletions
--- 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 | JsonRpcSigner>(undefined)
@ -61,17 +34,12 @@ export function Polling() {

  return (
    <Wrapper>
-      <TopBar logo={pollingIcon} title={'Polling Dapp'} />
+      <TopBar logo={pollingIcon} title={'Polling Dapp'} theme={'orange'} />
      <WakuPolling appName={'testApp_'} signer={signer} />
    </Wrapper>
  )
 }

-const Wrapper = styled.div`
-  height: 100%;
-  width: 100%;
-`
-
 export function PollingPage() {
  return (
    <Page>
@ -82,3 +50,13 @@ export function PollingPage() {
    </Page>
  )
 }
+
+const Page = styled.div`
+  height: 100%;
+  width: 100%;
+`
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+`
--- a/packages/proposal-page/src/assets/assets.d.ts
+++ 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
+}
--- a/packages/proposal-page/src/assets/images/voting.svg
+++ b/packages/proposal-page/src/assets/images/voting.svg
@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M23.3333 31.9999H0.666667C0.298667 31.9999 0 31.7012 0 31.3332C0 30.9652 0.298667 30.6665 0.666667 30.6665H23.3333C23.7013 30.6665 24 30.9652 24 31.3332C24 31.7012 23.7013 31.9999 23.3333 31.9999Z" fill="black"/>
+<path d="M28.4908 12.9173C28.4881 12.9173 28.4868 12.9173 28.4841 12.9173C27.9481 12.9159 27.4455 12.7039 27.0681 12.3239L19.7028 4.8746C18.9321 4.0946 18.9361 2.82926 19.7121 2.0546L21.1788 0.58793C21.9575 -0.19207 23.2281 -0.19207 24.0068 0.58793L31.4148 7.9946C32.1948 8.7746 32.1948 10.0439 31.4148 10.8239L29.9055 12.3333C29.5268 12.7093 29.0255 12.9173 28.4908 12.9173ZM22.5921 1.33326C22.4215 1.33326 22.2508 1.39726 22.1201 1.52793L20.6535 2.9946C20.3948 3.25326 20.3935 3.6746 20.6495 3.9346L28.0148 11.3839C28.1401 11.5106 28.3081 11.5813 28.4868 11.5813C28.6415 11.5426 28.8335 11.5133 28.9601 11.3853L30.4695 9.87726C30.7295 9.61726 30.7295 9.1946 30.4695 8.93326L23.0615 1.5266C22.9335 1.3986 22.7628 1.33326 22.5921 1.33326ZM20.1841 2.52393H20.1975H20.1841Z" fill="black"/>
+<path d="M7.80551 16.7814C7.51885 16.7814 7.25351 16.5947 7.16685 16.3067C6.93618 15.5401 6.81885 14.7441 6.81885 13.9414C6.81885 12.6814 7.12018 11.4094 7.68685 10.2601C8.76018 8.11473 10.7162 6.54406 13.0548 5.94806L20.3482 4.09472C20.7082 3.99872 21.0668 4.22006 21.1575 4.57606C21.2482 4.93206 21.0322 5.29606 20.6762 5.38539L13.3828 7.23872C11.4202 7.74006 9.78018 9.05739 8.88151 10.8534C8.40551 11.8174 8.15218 12.8854 8.15218 13.9414C8.15218 14.6134 8.24951 15.2801 8.44285 15.9241C8.54951 16.2761 8.34951 16.6481 7.99618 16.7547C7.93218 16.7721 7.86818 16.7814 7.80551 16.7814Z" fill="black"/>
+<path d="M14.9786 25.9893C13.9066 25.9893 12.9386 25.4373 12.3879 24.5133C11.6852 23.332 11.9119 21.7853 12.9386 20.7533L17.6466 16.0373C17.0866 15.3667 16.2652 15 15.3639 15.0453C14.4132 15.0947 13.5626 15.6187 13.0906 16.4467C12.9052 16.768 12.4959 16.876 12.1799 16.6947C11.8612 16.512 11.7492 16.1053 11.9306 15.7853C12.6292 14.5627 13.8866 13.788 15.2932 13.7133C16.6946 13.6373 18.0319 14.2787 18.8559 15.4227L19.0639 15.712C19.2506 15.972 19.2266 16.3293 19.0052 16.5613L13.8799 21.6947C13.2932 22.2853 13.1452 23.184 13.5306 23.8307C14.0759 24.7493 15.4386 24.9027 16.1852 24.1573L21.9746 18.2773L26.6159 11.1253C26.8172 10.816 27.2306 10.7293 27.5372 10.9293C27.8452 11.1293 27.9332 11.5427 27.7319 11.8507L23.0532 19.06C23.0292 19.0987 23.0012 19.1333 22.9692 19.1667L17.1306 25.0973C16.5572 25.6733 15.7932 25.9893 14.9786 25.9893Z" fill="black"/>
+<path d="M20.6892 32H3.33317C2.96517 32 2.6665 31.7013 2.6665 31.3333V16.6667C2.6665 16.2987 2.96517 16 3.33317 16H17.9612C18.3292 16 18.6278 16.2987 18.6278 16.6667C18.6278 17.0347 18.3292 17.3333 17.9612 17.3333H3.99984V30.6667H20.0225V20.536C20.0225 20.168 20.3212 19.8693 20.6892 19.8693C21.0572 19.8693 21.3558 20.168 21.3558 20.536V31.3333C21.3558 31.7013 21.0572 32 20.6892 32Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- 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 (
-    <div>
+    <Wrapper>
+      <GlobalStyle />
+      <TopBar logo={votingIcon} title={'Proposals Dapp'} theme={'blue'} />
      <Proposal />
-    </div>
+    </Wrapper>
  )
 }
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+`
--- a/packages/react-components/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 ? (
          <AccountWrap>
            <Account
+              theme={theme}
              onClick={(e) => {
                e.stopPropagation()
                setIsOpened(!isOpened)
@ -38,7 +44,8 @@ export function TopBar({ logo, title }: TopBarProps) {
            </ButtonDisconnect>
          </AccountWrap>
        ) : (
-          <Button
+          <ConnectButton
+            theme={theme}
            onClick={() => {
              if ((window as any).ethereum) {
                activateBrowserWallet()
@ -46,7 +53,7 @@ export function TopBar({ logo, title }: TopBarProps) {
            }}
          >
            Connect
-          </Button>
+          </ConnectButton>
        )}
      </ContentWrapper>

@ -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;
--- 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)<ConnectButtonProps>`
+  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<AccountProps>`
+  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<DisconnectProps>`
+  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};
+`
--- 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,
--- a/packages/react-components/src/style/GlobalStyle.tsx
+++ 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;
+  }
+`