From 7564d142ab306b3fae92dd9820299f4b9869348d Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Mon, 23 Aug 2021 15:28:22 +0200 Subject: [PATCH] Fix styling (#20) --- packages/core/src/index.ts | 4 +- packages/example/src/index.html | 4 +- packages/example/src/index.tsx | 22 ++- .../react-components/src/WakuPolling/Poll.tsx | 12 +- .../src/WakuPolling/PollCreation.tsx | 172 +++++++++--------- .../src/WakuPolling/PollResults.tsx | 38 +++- .../src/WakuPolling/index.tsx | 2 +- .../src/assets/svg/addIcon.svg | 4 + .../src/assets/svg/checkCircle.svg | 3 + .../react-components/src/components/Input.tsx | 41 +++++ 10 files changed, 199 insertions(+), 103 deletions(-) create mode 100644 packages/react-components/src/assets/svg/addIcon.svg create mode 100644 packages/react-components/src/assets/svg/checkCircle.svg create mode 100644 packages/react-components/src/components/Input.tsx diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 20b1138..00730e9 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -139,8 +139,8 @@ class WakuVoting { let updated = false if (!this.asyncUpdating) { this.asyncUpdating = true - const { polls, updatedPolls } = await this.getTimedPolls() - const { votes, updatedVotes } = await this.getTimedPollsVotes() + const { updatedPolls } = await this.getTimedPolls() + const { updatedVotes } = await this.getTimedPollsVotes() updated = updatedPolls || updatedVotes this.asyncUpdating = false } diff --git a/packages/example/src/index.html b/packages/example/src/index.html index 834f24d..74087fc 100644 --- a/packages/example/src/index.html +++ b/packages/example/src/index.html @@ -1,9 +1,9 @@ - - + + waku voting example diff --git a/packages/example/src/index.tsx b/packages/example/src/index.tsx index c0d7960..bd15254 100644 --- a/packages/example/src/index.tsx +++ b/packages/example/src/index.tsx @@ -1,10 +1,28 @@ import React from 'react' import ReactDOM from 'react-dom' import { WakuPolling } from '@status-waku-voting/react-components' +import styled, { createGlobalStyle } from 'styled-components' + +export const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + } + + body, html, #root { + margin: 0; + width: 100%; + height: 100%; + } +` + +const Page = styled.div` + height: 100%; +` ReactDOM.render( -
+ + -
, + , document.getElementById('root') ) diff --git a/packages/react-components/src/WakuPolling/Poll.tsx b/packages/react-components/src/WakuPolling/Poll.tsx index fd6024e..612c483 100644 --- a/packages/react-components/src/WakuPolling/Poll.tsx +++ b/packages/react-components/src/WakuPolling/Poll.tsx @@ -5,7 +5,6 @@ import React, { useEffect, useState } from 'react' import { JsonRpcSigner } from '@ethersproject/providers' import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType' import styled from 'styled-components' -import checkIcon from '../assets/svg/checkIcon.svg' import { RadioGroup } from '../components/radioGroup' import { SmallButton } from '../components/misc/Buttons' import { PollResults } from './PollResults' @@ -20,21 +19,22 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) { const [selectedAnswer, setSelectedAnswer] = useState(undefined) const [tokenAmount, setTokenAmount] = useState(0) const [address, setAddress] = useState('') - const [userInVoters, setUserInVoters] = useState(false) + const [userInVoters, setUserInVoters] = useState(-1) useEffect(() => { signer.getAddress().then((e) => setAddress(e)) }, [signer]) useEffect(() => { - setUserInVoters(!!poll.votesMessages.find((vote) => vote.voter === address)) + const msg = poll.votesMessages.find((vote) => vote.voter === address) + setUserInVoters(msg?.answer ?? -1) }, [poll, address]) return ( {poll.poll.question} - {!userInVoters && ( + {userInVoters < 0 && ( )} - {userInVoters && } + {userInVoters > -1 && } - {!userInVoters && ( + {userInVoters < 0 && ( { if (wakuVoting) { diff --git a/packages/react-components/src/WakuPolling/PollCreation.tsx b/packages/react-components/src/WakuPolling/PollCreation.tsx index 65f6a5a..6e888ac 100644 --- a/packages/react-components/src/WakuPolling/PollCreation.tsx +++ b/packages/react-components/src/WakuPolling/PollCreation.tsx @@ -4,6 +4,9 @@ import { JsonRpcSigner } from '@ethersproject/providers' import styled from 'styled-components' import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType' import WakuVoting from '@status-waku-voting/core' +import { Input } from '../components/Input' +import addIcon from '../assets/svg/addIcon.svg' +import { SmallButton } from '../components/misc/Buttons' function getLocaleIsoTime(dateTime: Date) { const MS_PER_MINUTE = 60000 @@ -19,122 +22,123 @@ type PollCreationProps = { } export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCreationProps) { - const [answers, setAnswers] = useState(['']) + const [answers, setAnswers] = useState(['', '']) const [question, setQuestion] = useState('') - const [selectedType, setSelectedType] = useState(PollType.WEIGHTED) + const [selectedType, setSelectedType] = useState(PollType.NON_WEIGHTED) const [endTimePicker, setEndTimePicker] = useState(new Date(new Date().getTime() + 10000000)) return ( e.stopPropagation()}> - - - Question - setShowPollCreation(false)}>X - - setQuestion(e.target.value)} /> - Poll end time - setEndTimePicker(new Date(e.target.value))} - /> - Answers - - {answers.map((answer, idx) => ( - - - setAnswers((answers) => { - const newAnswers = [...answers] - newAnswers[idx] = e.target.value - return newAnswers - }) - } - /> - - setAnswers((answers) => { - const newAnswers = [...answers] - if (newAnswers.length > 1) { - newAnswers.splice(idx, 1) - } - return newAnswers - }) - } - > - - - - - ))} -
setSelectedType(Number.parseInt((e.target as any).value))}> - Weighted - Non weighted -
- { - await wakuVoting?.createTimedPoll( - signer, - question, - answers, - selectedType, - undefined, - endTimePicker.getTime() - ) - setAnswers(['']) - setShowPollCreation(false) - }} - > - Send - - + + + + Create a poll + setShowPollCreation(false)}>X + + setQuestion(e.target.value)} + /> + + + {answers.map((answer, idx) => ( + + setAnswers((answers) => { + const newAnswers = [...answers] + newAnswers[idx] = e.target.value + return newAnswers + }) + } + /> + ))} + + setAnswers((answers) => [...answers, ''])}> + Add another option + + + { + await wakuVoting?.createTimedPoll( + signer, + question, + answers, + selectedType, + undefined, + endTimePicker.getTime() + ) + setShowPollCreation(false) + }} + > + Send + + + ) } + +const AddIcon = styled.div` + width: 20px; + height: 20px; + background-image: url(${addIcon}); + margin-left: 10px; +` + const CloseNewPollBoxButton = styled.div` width: 5px; margin-right: 5px; margin-left: auto; font-weight: bold; + color: red; ` const NewPollBoxTitle = styled.div` display: flex; + font-style: normal; + font-weight: bold; + font-size: 17px; + line-height: 24px; ` -const AnswerInput = styled.input` - margin-right: 5px; - width: 200px; -` - -const RemoveAnswerButton = styled.button` - margin-right: 5px; +const NewOptionButton = styled.div` + margin-top: 33px; + margin-bottom: 33px; margin-left: auto; -` - -const SendButton = styled.button` - margin: 10px; -` - -const AnswerWraper = styled.div` + margin-right: auto; display: flex; - margin: 5px; - width: 250px; + font-family: 'Inter, sans-serif'; + font-style: normal; + font-weight: normal; + font-size: 15px; + line-height: 22px; +` + +const AnswersWraper = styled.div` + margin-left: 64px; + margin-right: 64px; ` const NewPollBox = styled.div` display: flex; flex-direction: column; background-color: white; - margin: 20px; padding: 20px; box-shadow: 10px 10px 31px -2px #a3a1a1; border-radius: 5px; overflow: auto; - z-index: 1; - width: 300px; - height: 300px; + z-index: 5; + width: 468px; +` + +const BoxWrapper = styled.div` position: absolute; + marign-bottom: 100px; left: 0px; top: 0px; ` diff --git a/packages/react-components/src/WakuPolling/PollResults.tsx b/packages/react-components/src/WakuPolling/PollResults.tsx index 58ebcb5..3338af3 100644 --- a/packages/react-components/src/WakuPolling/PollResults.tsx +++ b/packages/react-components/src/WakuPolling/PollResults.tsx @@ -2,12 +2,14 @@ import React from 'react' import { DetailedTimedPoll } from '@status-waku-voting/core/dist/esm/src/models/DetailedTimedPoll' import styled from 'styled-components' import { colorRouletteGenerator } from '../style/colors' +import checkCircle from '../assets/svg/checkCircle.svg' type PollResultsProps = { poll: DetailedTimedPoll + selectedVote: number } -export function PollResults({ poll }: PollResultsProps) { +export function PollResults({ poll, selectedVote }: PollResultsProps) { const colors = colorRouletteGenerator() return ( @@ -21,6 +23,7 @@ export function PollResults({ poll }: PollResultsProps) { {answer.text} + {selectedVote === idx && } {`${percentage}%`} @@ -35,6 +38,15 @@ export function PollResults({ poll }: PollResultsProps) { ) } +const CheckCircle = styled.div` + width: 14px; + height: 14px; + margin-top: auto; + margin-bottom: auto; + margin-left: 8px; + background-image: url(${checkCircle}); +` + const Transparent = styled.div` width: 100%; height: 100%; @@ -63,26 +75,40 @@ const ResultInfoWrapper = styled.div` 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: 12px; + font-size: 16px; + line-height: 16px; font-family: 'Inter, sans-serif'; ` const PollAnswer = styled.div` display: flex; - margin-bottom: 8px; + margin-bottom: 16px; + height: 40px; position: relative; font-family: 'Inter, sans-serif'; ` const PollAnswerText = styled.div` - width: 200px; - font-weight: 700; - font-size: 10px; + height: 100%; + margin-top: 12px; + margin-bottom: 12px; + margin-left: 8px; + font-weight: 500; + font-size: 16px; + line-height: 16px; + align-items: center; + letter-spacing: 1.5px; + text-transform: uppercase; ` diff --git a/packages/react-components/src/WakuPolling/index.tsx b/packages/react-components/src/WakuPolling/index.tsx index 816946a..d0b6e61 100644 --- a/packages/react-components/src/WakuPolling/index.tsx +++ b/packages/react-components/src/WakuPolling/index.tsx @@ -55,7 +55,7 @@ const Wrapper = styled.div` display: flex; flex-direction: column; overflow: auto; - min-height: 500px; + height: 100%; ` export default WakuPolling diff --git a/packages/react-components/src/assets/svg/addIcon.svg b/packages/react-components/src/assets/svg/addIcon.svg new file mode 100644 index 0000000..736ad66 --- /dev/null +++ b/packages/react-components/src/assets/svg/addIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/react-components/src/assets/svg/checkCircle.svg b/packages/react-components/src/assets/svg/checkCircle.svg new file mode 100644 index 0000000..094f8bf --- /dev/null +++ b/packages/react-components/src/assets/svg/checkCircle.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/react-components/src/components/Input.tsx b/packages/react-components/src/components/Input.tsx new file mode 100644 index 0000000..4c7598a --- /dev/null +++ b/packages/react-components/src/components/Input.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import styled from 'styled-components' +type InputProps = { + label: string + value: string + onChange: (e: any) => void + placeholder?: string +} + +export function Input({ label, value, onChange, placeholder }: InputProps) { + return ( + + {label} + + + ) +} + +const StyledInput = styled.input` + background-color: #eef2f5; + border-radius: 8px; + border: 0px; + height: 44px; + padding-left: 20px; + font-weight: 400px; + font-size: 15px; + font-family: 'Inter, sans-serif'; +` + +const LabelWrapper = styled.div` + font-weight: 400px; + font-size: 15px; + font-family: 'Inter, sans-serif'; + margin-bottom: 10px; +` + +const InputWrapper = styled.div` + display: flex; + flex-direction: column; + margin-top: 32px; +`