Add proposing (#58)

packages/proposal-components/src/components/Proposal.tsx

@@ -11,6 +11,7 @@ export function Proposal() {
       <VotingEmpty theme={blueTheme} />
       <ProposalHeader theme={blueTheme} />
       <ProposalList theme={blueTheme} />
+      {/* <VotingEmpty theme={blueTheme} /> */}
     </ProposalWrapper>
   )
 }
@@ -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;

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 (
     <Wrapper>
@@ -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.
         </HeaderText>
       </Header>
+      {showProposeModal && (
+        <Modal heading="Create proposal" theme={theme} setShowModal={setShowProposeModal}>
+          <ProposeModal
+            title={title}
+            text={text}
+            setText={setText}
+            setTitle={setTitle}
+            availableAmount={6524354}
+            setShowProposeVoteModal={setNext}
+          />
+        </Modal>
+      )}
+      {showProposeVoteModal && (
+        <Modal heading="Create proposal" theme={theme} setShowModal={setShowProposeVoteModal}>
+          <ProposeVoteModal
+            title={title}
+            text={text}
+            availableAmount={6524354}
+            setShowModal={setShowProposeVoteModal}
+            setText={setText}
+            setTitle={setTitle}
+          />
+        </Modal>
+      )}
+
       {account ? (
-        <CreateButton theme={theme} onClick={() => setShowProposeCreation(true)}>
+        <CreateButton theme={theme} onClick={() => setShowProposeModal(true)}>
           Create proposal
         </CreateButton>
       ) : (

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 (
     <VotingEmptyWrap>
       <EmptyWrap>
@@ -53,7 +39,7 @@ export function VotingEmpty({ theme }: VotingEmptyProps) {
             text={text}
             setText={setText}
             setTitle={setTitle}
-            availableAmount={6524}
+            availableAmount={6524354}
             setShowProposeVoteModal={setNext}
           />
         </Modal>
@@ -63,7 +49,7 @@ export function VotingEmpty({ theme }: VotingEmptyProps) {
           <ProposeVoteModal
             title={title}
             text={text}
-            availableAmount={6524}
+            availableAmount={6524354}
             setShowModal={setShowProposeVoteModal}
             setText={setText}
             setTitle={setTitle}
@@ -71,8 +57,6 @@ export function VotingEmpty({ theme }: VotingEmptyProps) {
         </Modal>
       )}
 
-      {!mobileVersion && (
-        <div>
       {account ? (
         <CreateButton theme={theme} onClick={() => setShowProposeModal(true)}>
           Create proposal
@@ -89,26 +73,25 @@ export function VotingEmpty({ theme }: VotingEmptyProps) {
           Connect to vote
         </CreateButton>
       )}
-        </div>
+
+      {selectConnect && (
+        <Modal heading="Connect" setShowModal={setSelectConnect} theme={theme}>
+          <Networks />
+        </Modal>
       )}
     </VotingEmptyWrap>
   )
 }
 
 const VotingEmptyWrap = styled.div`
-  position: absolute;
+  width: 100%;
-  top: 96px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0 32px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100%;
+  background: #fff;
-  height: calc(100vh - 96px);
+  margin-top: 20vh;
-  background: #fffff;
+  padding: 0 32px;
-  z-index: 99;
 
   @media (max-width: 600px) {
     height: 250px;
@@ -134,12 +117,9 @@ const EmptyHeading = styled.h1`
   text-align: center;
 
   @media (max-width: 600px) {
-    font-size: 22px;
+    font-size: 17px;
-    line-height: 22px;
+    line-height: 24px;
-    padding: 0 16px;
+    margin-bottom: 16px;
-  }
-  @media (max-width: 375px) {
-    font-size: 20px;
   }
 `
 
@@ -151,13 +131,8 @@ const EmptyText = styled.p`
   margin-bottom: 24px;
 
   @media (max-width: 600px) {
-    font-size: 13px;
+    font-size: 15px;
-    line-height: 18px;
+    line-height: 22px;
-    margin: 0;
+    margin-bottom: 20px;
-    padding: 0 16px;
-  }
-
-  @media (max-width: 340px) {
-    font-size: 12px;
   }
 `