diff --git a/packages/proposal-components/src/components/Proposal.tsx b/packages/proposal-components/src/components/Proposal.tsx index 3a791a1..0639af3 100644 --- a/packages/proposal-components/src/components/Proposal.tsx +++ b/packages/proposal-components/src/components/Proposal.tsx @@ -11,6 +11,7 @@ export function Proposal() { + {/* */} ) } @@ -20,10 +21,10 @@ const ProposalWrapper = styled.div` flex-direction: column; align-items: center; max-width: 1000px; - // position: relative; margin: 0 auto; padding: 150px 32px 50px; width: 100%; + min-height: 100vh; @media (max-width: 600px) { padding: 132px 16px 32px; diff --git a/packages/proposal-components/src/components/ProposalHeader.tsx b/packages/proposal-components/src/components/ProposalHeader.tsx index 371cb8a..e9f8b88 100644 --- a/packages/proposal-components/src/components/ProposalHeader.tsx +++ b/packages/proposal-components/src/components/ProposalHeader.tsx @@ -3,6 +3,8 @@ import styled from 'styled-components' import { useEthers } from '@usedapp/core' import { Modal, Networks, CreateButton } from '@status-waku-voting/react-components' import { Theme } from '@status-waku-voting/react-components/dist/esm/src/style/themes' +import { ProposeModal } from './ProposeModal' +import { ProposeVoteModal } from './ProposeVoteModal' type ProposalHeaderProps = { theme: Theme @@ -10,8 +12,16 @@ type ProposalHeaderProps = { export function ProposalHeader({ theme }: ProposalHeaderProps) { const { activateBrowserWallet, account } = useEthers() - const [showProposeCreation, setShowProposeCreation] = useState(false) const [selectConnect, setSelectConnect] = useState(false) + const [showProposeModal, setShowProposeModal] = useState(false) + const [showProposeVoteModal, setShowProposeVoteModal] = useState(false) + const [title, setTitle] = useState('') + const [text, setText] = useState('') + + const setNext = (val: boolean) => { + setShowProposeVoteModal(val) + setShowProposeModal(false) + } return ( @@ -21,8 +31,33 @@ export function ProposalHeader({ theme }: ProposalHeaderProps) { Take part in a decentralised governance by voting on proposals provided by community or creating your own. + {showProposeModal && ( + + + + )} + {showProposeVoteModal && ( + + + + )} + {account ? ( - setShowProposeCreation(true)}> + setShowProposeModal(true)}> Create proposal ) : ( diff --git a/packages/proposal-components/src/components/VotingEmpty.tsx b/packages/proposal-components/src/components/VotingEmpty.tsx index 81c7c97..07460f3 100644 --- a/packages/proposal-components/src/components/VotingEmpty.tsx +++ b/packages/proposal-components/src/components/VotingEmpty.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import { useEthers } from '@usedapp/core' import styled from 'styled-components' -import { CreateButton, Modal, Theme } from '@status-waku-voting/react-components' +import { CreateButton, Modal, Networks, Theme } from '@status-waku-voting/react-components' import { ProposeModal } from './ProposeModal' import { ProposeVoteModal } from './ProposeVoteModal' @@ -15,7 +15,6 @@ export function VotingEmpty({ theme }: VotingEmptyProps) { const [selectConnect, setSelectConnect] = useState(false) const [showProposeModal, setShowProposeModal] = useState(false) const [showProposeVoteModal, setShowProposeVoteModal] = useState(false) - const [mobileVersion, setMobileVersion] = useState(false) const [title, setTitle] = useState('') const [text, setText] = useState('') @@ -24,19 +23,6 @@ export function VotingEmpty({ theme }: VotingEmptyProps) { setShowProposeModal(false) } - useEffect(() => { - const handleResize = () => { - if (window.innerWidth < 600) { - setMobileVersion(true) - } else { - setMobileVersion(false) - } - } - handleResize() - window.addEventListener('resize', handleResize) - return () => window.removeEventListener('resize', handleResize) - }, []) - return ( @@ -53,7 +39,7 @@ export function VotingEmpty({ theme }: VotingEmptyProps) { text={text} setText={setText} setTitle={setTitle} - availableAmount={6524} + availableAmount={6524354} setShowProposeVoteModal={setNext} /> @@ -63,7 +49,7 @@ export function VotingEmpty({ theme }: VotingEmptyProps) { )} - {!mobileVersion && ( -
- {account ? ( - setShowProposeModal(true)}> - Create proposal - - ) : ( - { - if ((window as any).ethereum) { - activateBrowserWallet() - } else setSelectConnect(true) - }} - > - Connect to vote - - )} -
+ {account ? ( + setShowProposeModal(true)}> + Create proposal + + ) : ( + { + if ((window as any).ethereum) { + activateBrowserWallet() + } else setSelectConnect(true) + }} + > + Connect to vote + + )} + + {selectConnect && ( + + + )}
) } const VotingEmptyWrap = styled.div` - position: absolute; - top: 96px; - left: 50%; - transform: translateX(-50%); - padding: 0 32px; + width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; - width: 100%; - height: calc(100vh - 96px); - background: #fffff; - z-index: 99; + background: #fff; + margin-top: 20vh; + padding: 0 32px; @media (max-width: 600px) { height: 250px; @@ -134,12 +117,9 @@ const EmptyHeading = styled.h1` text-align: center; @media (max-width: 600px) { - font-size: 22px; - line-height: 22px; - padding: 0 16px; - } - @media (max-width: 375px) { - font-size: 20px; + font-size: 17px; + line-height: 24px; + margin-bottom: 16px; } ` @@ -151,13 +131,8 @@ const EmptyText = styled.p` margin-bottom: 24px; @media (max-width: 600px) { - font-size: 13px; - line-height: 18px; - margin: 0; - padding: 0 16px; - } - - @media (max-width: 340px) { - font-size: 12px; + font-size: 15px; + line-height: 22px; + margin-bottom: 20px; } `