status-im
/
dappconnect-vote-poll-sdk
mirror of https://github.com/status-im/dappconnect-vote-poll-sdk.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add top bar (#22)

This commit is contained in:
Szymon Szlachtowicz 2021-08-24 12:10:11 +02:00 committed by GitHub
parent 40d4414607
commit e9a609840b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 101 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/example/src/assets/assets.d.ts vendored Normal file
View File

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

16
packages/example/src/assets/images/pollingIcon.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75 1.875C1.68756 1.875 0 3.56244 0 5.625C0 7.68744 1.68756 9.375 3.75 9.375C5.81244 9.375 7.5 7.68744 7.5 5.625C7.5 3.56244 5.81244 1.875 3.75 1.875Z" fill="#FF6C6C"/>
<path d="M0 5.625H7.5C7.5 7.68744 5.81244 9.375 3.75 9.375C1.68756 9.375 0 7.68744 0 5.625Z" fill="#E63950"/>
<path d="M10.3125 1.875H32V9.375H10.3125V1.875Z" fill="#FF6C6C"/>
<path d="M10.3125 5.625H32V9.375H10.3125V5.625Z" fill="#E63950"/>
<path d="M10.3125 11.25H20.75V18.75H10.3125V11.25Z" fill="#97DE3D"/>
<path d="M3.75 11.25C1.68756 11.25 0 12.9374 0 15C0 17.0624 1.68756 18.75 3.75 18.75C5.81244 18.75 7.5 17.0624 7.5 15C7.5 12.9374 5.81244 11.25 3.75 11.25Z" fill="#97DE3D"/>
<path d="M0 15H7.5C7.5 17.0624 5.81244 18.75 3.75 18.75C1.68756 18.75 0 17.0624 0 15Z" fill="#59C36A"/>
<path d="M10.3125 15H20.75V18.75H10.3125V15Z" fill="#59C36A"/>
<path d="M10.3125 20.625H28.25V28.125H10.3125V20.625Z" fill="#FED843"/>
<path d="M3.75 20.625C1.68756 20.625 0 22.3124 0 24.375C0 26.4374 1.68756 28.125 3.75 28.125C5.81244 28.125 7.5 26.4374 7.5 24.375C7.5 22.3124 5.81244 20.625 3.75 20.625Z" fill="#FED843"/>
<path d="M0 24.375H7.5C7.5 26.4374 5.81244 28.125 3.75 28.125C1.68756 28.125 0 26.4374 0 24.375Z" fill="#FABE2C"/>
<path d="M10.3125 24.375H28.25V28.125H10.3125V24.375Z" fill="#FABE2C"/>
<path d="M9.375 0H11.25V30H9.375V0Z" fill="#474F54"/>
<path d="M9.375 15H11.25V30H9.375V15Z" fill="#32393F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

56
packages/example/src/components/TopBar.tsx Normal file
View File

@ -0,0 +1,56 @@
import React from 'react'
import styled from 'styled-components'
type TopBarProps = {
logo: string
title: string
}
export function TopBar({ logo, title }: TopBarProps) {
return (
<Wrapper>
<Logo style={{ backgroundImage: `url(${logo})` }} />
<TitleWrapper>
{title.split(' ').map((text) => (
<div>{text}</div>
))}
</TitleWrapper>
<Button>Connect</Button>
</Wrapper>
)
}
const TitleWrapper = styled.div`
display: flex;
flex-direction: column;
margin: auto;
margin-left: 8px;
font-family: Inter;
font-style: italic;
font-weight: 600;
font-size: 20px;
line-height: 17px;
`
const Button = styled.button`
border-radius: 8px;
border: 0px;
margin: auto;
margin-right: 40px;
height: 44px;
width: 117px;
`
const Logo = styled.div`
height: 30px;
width: 32px;
margin-left: 40px;
margin-top: auto;
margin-bottom: auto;
`
const Wrapper = styled.div`
height: 96px;
background: #fbfcfe;
display: flex;
`

1
packages/example/src/index.html
View File

@ -5,6 +5,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<title>waku voting example</title>
</head>
<body>

16
packages/example/src/pages/Poling.tsx
View File

@ -1,6 +1,18 @@
import React from 'react'
import { WakuPolling } from '@status-waku-voting/react-components'
import styled from 'styled-components'
import { TopBar } from '../components/TopBar'
import pollingIcon from '../assets/images/pollingIcon.svg'
export function Polling() {
return <WakuPolling appName={'testApp_'} />
return (
<Wrapper>
<TopBar logo={pollingIcon} title={'Polling Dapp'} />
<WakuPolling appName={'testApp_'} />
</Wrapper>
)
}
const Wrapper = styled.div`
height: 100%;
width: 100%;
`

1
packages/react-components/src/components/radioGroup/RadioGroup.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'
import styled from 'styled-components'
import { RadioButton } from './RadioButton'
type RadioGroupProps = {