diff --git a/packages/react-components/src/WakuPolling/PollCreation.tsx b/packages/react-components/src/WakuPolling/PollCreation.tsx index d10b4c7..ad20aca 100644 --- a/packages/react-components/src/WakuPolling/PollCreation.tsx +++ b/packages/react-components/src/WakuPolling/PollCreation.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { Wallet } from 'ethers' import { JsonRpcSigner } from '@ethersproject/providers' import styled from 'styled-components' @@ -25,65 +25,100 @@ type PollCreationProps = { export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCreationProps) { const [answers, setAnswers] = useState(['', '']) const [question, setQuestion] = useState('') + const [showCreateConfirmation, setShowCreateConfirmation] = useState(false) const [selectedType, setSelectedType] = useState(PollType.NON_WEIGHTED) const [endTimePicker, setEndTimePicker] = useState(new Date(new Date().getTime() + 10000000)) + const body = document.getElementById('root') + + useEffect(() => { + if (body) { + body.style.position = 'fixed' + return () => { + body.style.position = 'static' + } + } + }, []) return ( - e.stopPropagation()}> - + { + setShowPollCreation(false) + }} + > + e.stopPropagation()}> Create a poll setShowPollCreation(false)} /> - - setQuestion(e.target.value)} - /> + {!showCreateConfirmation && ( + + setQuestion(e.target.value)} + /> - - {answers.map((answer, idx) => ( - - setAnswers((answers) => { - const newAnswers = [...answers] - newAnswers[idx] = e.target.value - return newAnswers - }) - } - /> - ))} - - { - e.preventDefault() - setAnswers((answers) => [...answers, '']) - }} - > - Add another option - - { - e.preventDefault() - await wakuVoting?.createTimedPoll( - signer, - question, - answers, - selectedType, - undefined, - endTimePicker.getTime() - ) - setShowPollCreation(false) - }} - > - Create a poll - - + + {answers.map((answer, idx) => ( + + setAnswers((answers) => { + const newAnswers = [...answers] + newAnswers[idx] = e.target.value + return newAnswers + }) + } + /> + ))} + + { + e.preventDefault() + setAnswers((answers) => [...answers, '']) + }} + > + Add another option + + { + e.preventDefault() + await wakuVoting?.createTimedPoll( + signer, + question, + answers, + selectedType, + undefined, + endTimePicker.getTime() + ) + setShowCreateConfirmation(true) + }} + > + Create a poll + + + )} + + {showCreateConfirmation && ( + + + Your poll has been created! +
+ It will appear at the top of the poll list. +
+ { + e.preventDefault() + setShowPollCreation(false) + }} + > + Close + +
+ )}
) @@ -156,16 +191,20 @@ const NewPollBox = styled.div` display: flex; flex-direction: column; justify-content: space-between; + width: 468px; + max-height: 90vh; background-color: white; + margin: 20vh auto 2vh; padding: 24px 24px 32px; box-shadow: 10px 10px 31px -2px #a3a1a1; border-radius: 5px; - overflow: auto; + overflow: scroll; z-index: 9998; width: 468px; @media (max-width: 600px) { padding: 16px 16px 32px; + margin: 0; } ` @@ -175,16 +214,16 @@ const NewPollBoxWrapper = styled.div` position: fixed; display: flex; justify-content: center; - align-items: center; + align-items: flex-start; 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; + align-items: center; } ` const PollForm = styled.form` @@ -194,3 +233,13 @@ const PollForm = styled.form` font-size: 15px; line-height: 22px; ` +const Confirmation = styled.div` + display: flex; + flex-direction: column; + align-items: center; +` + +const ConfirmationText = styled.div` + text-align: center; + margin: 32px 0; +` diff --git a/packages/react-components/src/WakuPolling/index.tsx b/packages/react-components/src/WakuPolling/index.tsx index 9b43811..432ab9e 100644 --- a/packages/react-components/src/WakuPolling/index.tsx +++ b/packages/react-components/src/WakuPolling/index.tsx @@ -21,7 +21,7 @@ function WakuPolling({ appName, signer }: WakuPollingProps) { }, []) return ( - showPollCreation && setShowPollCreation(false)}> + {showPollCreation && signer && ( )}