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 styles & disconnect (#25)

This commit is contained in:
Maria Rushkova 2021-08-30 09:29:46 +02:00 committed by GitHub
parent e52d3f9119
commit b8514f972a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 348 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
packages/example/src/components/TopBar.tsx
View File

@ -1,4 +1,4 @@
import React from 'react' import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { useEthers, shortenAddress } from '@usedapp/core' import { useEthers, shortenAddress } from '@usedapp/core'
type TopBarProps = { type TopBarProps = {
@ -7,24 +7,37 @@ type TopBarProps = {
} }
export function TopBar({ logo, title }: TopBarProps) { export function TopBar({ logo, title }: TopBarProps) {
const { activateBrowserWallet, account } = useEthers() const { activateBrowserWallet, deactivate, account } = useEthers()
const [isOpened, setIsOpened] = useState(false)
return ( return (
<Wrapper> <Wrapper>
<Logo style={{ backgroundImage: `url(${logo})` }} /> <ContentWrapper>
<TitleWrapper> <Logo style={{ backgroundImage: `url(${logo})` }} />
{title.split(' ').map((text) => ( <TitleWrapper>
<div>{text}</div> {title.split(' ').map((text) => (
))} <div>{text}</div>
</TitleWrapper> ))}
{account ? ( </TitleWrapper>
<AccountDiv> {account ? (
<GreenDot /> <AccountWrap>
<>{shortenAddress(account)}</> <Account
</AccountDiv> onClick={(e) => {
) : ( e.stopPropagation()
<Button onClick={() => activateBrowserWallet()}>Connect</Button> setIsOpened(!isOpened)
)} }}
>
<GreenDot />
<>{shortenAddress(account)}</>
</Account>
<ButtonDisconnect className={isOpened ? 'opened' : undefined} onClick={() => deactivate()}>
Disconnect
</ButtonDisconnect>
</AccountWrap>
) : (
<Button onClick={() => activateBrowserWallet()}>Connect</Button>
)}
</ContentWrapper>
</Wrapper> </Wrapper>
) )
} }
@ -36,25 +49,26 @@ const GreenDot = styled.div`
background: #4ebc60; background: #4ebc60;
margin-right: 5px; margin-right: 5px;
` `
const AccountWrap = styled.div`
position: relative;
`
const AccountDiv = styled.div` const Account = styled.button`
width: 130px; display: flex;
height: 44px; flex-direction: row;
align-items: center;
background: #ffffff; background: #ffffff;
border: 1px solid #eef2f5; border: 1px solid #eef2f5;
box-sizing: border-box; box-sizing: border-box;
border-radius: 21px; border-radius: 21px;
display: flex; padding: 11px 12px 11px 17px;
flex-direction: row;
align-items: center;
padding: 0px 12px;
margin: auto;
margin-right: 40px;
font-family: Inter;
font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
line-height: 22px; line-height: 22px;
&:hover {
border: 1px solid #ffb571;
}
` `
const TitleWrapper = styled.div` const TitleWrapper = styled.div`
@ -70,24 +84,97 @@ const TitleWrapper = styled.div`
` `
const Button = styled.button` 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-radius: 8px;
border: 0px; border: 0px;
margin: auto; outline: none;
margin-right: 40px;
height: 44px; &:not(:disabled):hover {
width: 117px; 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` const Logo = styled.div`
height: 30px; height: 30px;
width: 32px; width: 32px;
margin-left: 40px;
margin-top: auto;
margin-bottom: auto;
` `
const Wrapper = styled.div` const Wrapper = styled.div`
height: 96px; height: 96px;
background: #fbfcfe; background: #fbfcfe;
display: flex; display: flex;
@media (max-width: 600px) {
height: 64px;
}
`
const ContentWrapper = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 40px;
max-width: 1440px;
margin: 0 auto;
width: 100%;
@media (max-width: 600px) {
padding: 16px;
padding-left: 24px;
}
` `

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

@ -4,9 +4,9 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" /> <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 rel="icon" type="image/svg+xml" sizes="any" href="../src/assets/images/pollingIcon.svg" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<title>waku voting example</title> <title>Polling Dapp</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

12
packages/example/src/index.tsx
View File

@ -27,13 +27,23 @@ const config = {
export const GlobalStyle = createGlobalStyle` export const GlobalStyle = createGlobalStyle`
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body, html, #root { body, html, #root {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
html {
font-family: 'Inter', 'sans-serif';
font-style: normal;
}
a,
button {
cursor: pointer;
}
` `
const Page = styled.div` const Page = styled.div`

16
packages/react-components/src/WakuPolling/Poll.tsx
View File

@ -82,29 +82,33 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
} }
const VotingWrapper = styled.div` const VotingWrapper = styled.div`
margin-left: 46px; width: 100%;
margin-top: 38px; margin-top: 40px;
` `
const PollWrapper = styled.div` const PollWrapper = styled.div`
display: flex; display: flex;
width: 442px; width: 344px;
flex-direction: column; flex-direction: column;
box-shadow: 0px 2px 12px 0px #000000; align-items: center;
border-radius: 5px; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
border-radius: 6px;
background-color: #fbfbfe; background-color: #fbfbfe;
margin-bottom: 24px; margin-bottom: 24px;
padding: 32px;
` `
const PollTitle = styled.div` const PollTitle = styled.div`
margin-top: 32px;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
line-height: 24px;
` `
const PollAnswersWrapper = styled.div` const PollAnswersWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: flex-start;
width: 100%;
` `

136
packages/react-components/src/WakuPolling/PollCreation.tsx
View File

@ -6,6 +6,7 @@ import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType'
import WakuVoting from '@status-waku-voting/core' import WakuVoting from '@status-waku-voting/core'
import { Input } from '../components/Input' import { Input } from '../components/Input'
import addIcon from '../assets/svg/addIcon.svg' import addIcon from '../assets/svg/addIcon.svg'
import closeButton from '../assets/svg/close.svg'
import { SmallButton } from '../components/misc/Buttons' import { SmallButton } from '../components/misc/Buttons'
function getLocaleIsoTime(dateTime: Date) { function getLocaleIsoTime(dateTime: Date) {
@ -29,12 +30,12 @@ export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCr
return ( return (
<NewPollBoxWrapper onClick={(e) => e.stopPropagation()}> <NewPollBoxWrapper onClick={(e) => e.stopPropagation()}>
<BoxWrapper> <NewPollBox>
<NewPollBox> <NewPollBoxTitle>
<NewPollBoxTitle> Create a poll
Create a poll <CloseNewPollBoxButton onClick={() => setShowPollCreation(false)} />
<CloseNewPollBoxButton onClick={() => setShowPollCreation(false)}>X</CloseNewPollBoxButton> </NewPollBoxTitle>
</NewPollBoxTitle> <PollForm>
<Input <Input
label={'Question or title of the poll'} label={'Question or title of the poll'}
placeholder={'E.g. What is your favourite color?'} placeholder={'E.g. What is your favourite color?'}
@ -58,12 +59,17 @@ export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCr
/> />
))} ))}
</AnswersWraper> </AnswersWraper>
<NewOptionButton onClick={() => setAnswers((answers) => [...answers, ''])}> <NewOptionButton
onClick={(e) => {
e.preventDefault()
setAnswers((answers) => [...answers, ''])
}}
>
Add another option Add another option
<AddIcon />
</NewOptionButton> </NewOptionButton>
<SmallButton <SmallButton
onClick={async () => { onClick={async (e) => {
e.preventDefault()
await wakuVoting?.createTimedPoll( await wakuVoting?.createTimedPoll(
signer, signer,
question, question,
@ -75,76 +81,116 @@ export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCr
setShowPollCreation(false) setShowPollCreation(false)
}} }}
> >
Send Create a poll
</SmallButton> </SmallButton>
</NewPollBox> </PollForm>
</BoxWrapper> </NewPollBox>
</NewPollBoxWrapper> </NewPollBoxWrapper>
) )
} }
const AddIcon = styled.div` const CloseNewPollBoxButton = styled.button`
width: 20px; width: 24px;
height: 20px; height: 24px;
background-image: url(${addIcon}); background-image: url(${closeButton});
margin-left: 10px; background-color: transparent;
` border: none;
const CloseNewPollBoxButton = styled.div`
width: 5px;
margin-right: 5px;
margin-left: auto;
font-weight: bold;
color: red;
` `
const NewPollBoxTitle = styled.div` const NewPollBoxTitle = styled.div`
display: flex; display: flex;
justify-content: space-between;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
font-size: 17px; font-size: 17px;
line-height: 24px; line-height: 24px;
` `
const NewOptionButton = styled.div` const NewOptionButton = styled.button`
margin-top: 33px;
margin-bottom: 33px;
margin-left: auto;
margin-right: auto;
display: flex; display: flex;
font-family: 'Inter, sans-serif'; position: relative;
font-style: normal;
font-weight: normal;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
margin: 32px 0;
padding-right: 30px;
color: #a53607;
background-color: transparent;
border: none;
&:hover {
color: #f4b77e;
}
&:active {
color: #a53607;
}
&:after {
content: '';
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
background-color: #a53607;
-webkit-mask-size: cover;
mask-size: cover;
background-image: none;
-webkit-mask-image: url(${addIcon});
mask-image: ${addIcon};
}
&:hover::after {
background-color: #f4b77e;
}
` `
const AnswersWraper = styled.div` const AnswersWraper = styled.div`
margin-left: 64px; max-width: 340px;
margin-right: 64px; width: 100%;
` `
const NewPollBox = styled.div` const NewPollBox = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
background-color: white; background-color: white;
padding: 20px; padding: 24px 24px 32px;
box-shadow: 10px 10px 31px -2px #a3a1a1; box-shadow: 10px 10px 31px -2px #a3a1a1;
border-radius: 5px; border-radius: 5px;
overflow: auto; overflow: auto;
z-index: 8; z-index: 8;
width: 468px; width: 468px;
`
const BoxWrapper = styled.div` @media (max-width: 600px) {
position: absolute; padding: 16px 16px 32px;
marign-bottom: 100px; }
left: 0px;
top: 0px;
` `
const NewPollBoxWrapper = styled.div` const NewPollBoxWrapper = styled.div`
position: relative; height: 100vh;
top: 50px; width: 100%;
left: calc(50% - 234px); position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999;
transition: all 0.3s;
overflow: auto;
@media (max-width: 600px) {
padding: 16px;
}
`
const PollForm = styled.form`
display: flex;
flex-direction: column;
align-items: center;
font-size: 15px;
line-height: 22px;
` `

2
packages/react-components/src/WakuPolling/PollList.tsx
View File

@ -55,7 +55,7 @@ export function PollList({ wakuVoting, signer }: PollListProps) {
} }
const PollListWrapper = styled.div` const PollListWrapper = styled.div`
display: flex; display: flex;
margin: 10px; width: 100%;
` `
const ColumnWrapper = styled.div` const ColumnWrapper = styled.div`

84
packages/react-components/src/WakuPolling/PollResults.tsx
View File

@ -27,8 +27,10 @@ export function PollResults({ poll, selectedVote }: PollResultsProps) {
} ${percentage}%, rgba(255,255,255,0) ${percentage}%)`, } ${percentage}%, rgba(255,255,255,0) ${percentage}%)`,
}} }}
> >
<PollAnswerText>{answer.text}</PollAnswerText> <PollAnswerWrapper>
{selectedVote === idx && <CheckCircle />} <PollAnswerText>{answer.text}</PollAnswerText>
{selectedVote === idx && <CheckCircle />}
</PollAnswerWrapper>
<VoteCount>{`${percentage}%`}</VoteCount> <VoteCount>{`${percentage}%`}</VoteCount>
</PollAnswer> </PollAnswer>
) )
@ -42,59 +44,51 @@ export function PollResults({ poll, selectedVote }: PollResultsProps) {
) )
} }
const CheckCircle = styled.div`
width: 14px;
height: 14px;
margin-top: auto;
margin-bottom: auto;
margin-left: 8px;
background-image: url(${checkCircle});
`
const Wrapper = styled.div` const Wrapper = styled.div`
margin-left: 77px;
margin-top: 32px; margin-top: 32px;
width: 288px;
`
const ResultInfoWrapper = styled.div`
margin-left: auto;
margin-right: auto;
margin-bottom: 32px;
margin-top: 32px;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 22px;
text-align: center;
`
const VoteCount = styled.div`
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
font-weight: 400;
font-size: 16px;
line-height: 16px;
font-family: 'Inter, sans-serif';
` `
const PollAnswer = styled.div` const PollAnswer = styled.div`
display: flex; display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
height: 40px; padding: 8px 0 8px 8px;
font-family: 'Inter, sans-serif';
`
const PollAnswerText = styled.div`
height: 100%;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 8px;
font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
&:last-child {
margin-bottom: 0;
}
`
const PollAnswerWrapper = styled.div`
display: flex;
`
const PollAnswerText = styled.div`
display: inline-block;
height: 100%;
font-weight: 500;
align-items: center; align-items: center;
letter-spacing: 1.5px; letter-spacing: 1.5px;
text-transform: uppercase; text-transform: uppercase;
` `
const VoteCount = styled.div`
font-weight: 400;
`
const CheckCircle = styled.div`
display: inline-block;
width: 14px;
height: 14px;
margin-left: 8px;
background-image: url(${checkCircle});
`
const ResultInfoWrapper = styled.div`
margin-top: 32px;
font-size: 15px;
line-height: 22px;
text-align: center;
`

40
packages/react-components/src/WakuPolling/index.tsx
View File

@ -35,23 +35,49 @@ function WakuPolling({ appName, signer }: WakuPollingProps) {
const CreatePollButton = styled(Button)` const CreatePollButton = styled(Button)`
width: 343px; width: 343px;
margin-left: auto;
margin-right: auto;
margin-bottom: 44px;
margin-top: 49px;
background-color: #ffb571; background-color: #ffb571;
color: #ffffff; color: #ffffff;
font-weight: bold;
font-size: 15px;
line-height: 24px;
padding: 10px 125.5px;
margin-bottom: 48px;
&:hover { &:not(:disabled):hover {
border: 1px solid #a53607; background: #a53607;
}
&:not(:disabled):active {
background: #f4b77e;
}
&:disabled {
background: #888888;
filter: grayscale(1);
}
@media (max-width: 425px) {
position: absolute;
bottom: 0;
z-index: 10;
margin-bottom: 16px;
width: calc(100% - 32px);
padding: 0;
} }
` `
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; align-items: center;
max-width: 1082px;
height: 100%; height: 100%;
margin: 0 auto;
padding: 50px 0;
@media (max-width: 600px) {
padding: 32px 16px;
}
` `
export default WakuPolling export default WakuPolling

3
packages/react-components/src/assets/svg/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.4697 17.5303C16.7626 17.8232 17.2374 17.8232 17.5303 17.5303C17.8232 17.2374 17.8232 16.7626 17.5303 16.4697L13.4142 12.3536C13.219 12.1583 13.219 11.8417 13.4142 11.6464L17.5303 7.53033C17.8232 7.23744 17.8232 6.76256 17.5303 6.46967C17.2374 6.17678 16.7626 6.17678 16.4697 6.46967L12.3536 10.5858C12.1583 10.781 11.8417 10.781 11.6464 10.5858L7.53033 6.46967C7.23744 6.17678 6.76256 6.17678 6.46967 6.46967C6.17678 6.76256 6.17678 7.23744 6.46967 7.53033L10.5858 11.6464C10.781 11.8417 10.781 12.1583 10.5858 12.3536L6.46967 16.4697C6.17678 16.7626 6.17678 17.2374 6.46967 17.5303C6.76256 17.8232 7.23744 17.8232 7.53033 17.5303L11.6464 13.4142C11.8417 13.219 12.1583 13.219 12.3536 13.4142L16.4697 17.5303Z" fill="#A53607"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 844 B

19
packages/react-components/src/components/Input.tsx
View File

@ -22,15 +22,25 @@ const StyledInput = styled.input`
border: 0px; border: 0px;
height: 44px; height: 44px;
padding-left: 20px; padding-left: 20px;
font-weight: 400px;
font-size: 15px; font-size: 15px;
font-family: 'Inter, sans-serif'; border: 1px solid #eef2f5;
outline: none;
&::placeholder {
font-size: 15px;
line-height: 22px;
}
&:active,
&:focus {
border: 1px solid #ffb571;
caret-color: #ffb571;
}
` `
const LabelWrapper = styled.div` const LabelWrapper = styled.div`
font-weight: 400px;
font-size: 15px; font-size: 15px;
font-family: 'Inter, sans-serif'; line-height: 22px;
margin-bottom: 10px; margin-bottom: 10px;
` `
@ -38,4 +48,5 @@ const InputWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 32px; margin-top: 32px;
width: 100%;
` `

20
packages/react-components/src/components/misc/Buttons.tsx
View File

@ -11,11 +11,21 @@ export const SmallButton = styled(Button)`
width: 187px; width: 187px;
background-color: #fff7ed; background-color: #fff7ed;
color: #a53607; color: #a53607;
margin-left: auto; font-weight: 500;
margin-right: auto; font-size: 15px;
margin-bottom: 32px; line-height: 22px;
transition: all 0.3s;
&:hover { &:not(:disabled):hover {
border: 1px solid #a53607; background: #ffe4db;
}
&:not(:disabled):active {
background: #fffcf7;
}
&:disabled {
background: #f3f3f3;
color: #939ba1;
} }
` `

11
packages/react-components/src/components/radioGroup/RadioButton.tsx
View File

@ -28,20 +28,23 @@ const Circle = styled.div`
border-radius: 50%; border-radius: 50%;
width: 24px; width: 24px;
height: 24px; height: 24px;
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
flex-shrink: 0;
&.icon { &.icon {
border: 1px solid rgba(255, 255, 255, 1);
background-image: url(${checkIcon}); background-image: url(${checkIcon});
background-size: cover; background-size: cover;
border: 1px solid #ffb571;
} }
&:hover { &:hover {
border: 1px solid #a53607; border: 1px solid #ffb571;
border-radius: 50%;
} }
` `
const TextWrapper = styled.div` const TextWrapper = styled.div`
margin-left: 20px; margin-left: 16px;
width: 300px;
font-size: 22px; font-size: 22px;
line-height: 24px;
` `