Add Feature modal (#51)

* Add Feature modal

* Move Feature modal to FeatureBtn

packages/DApp/src/components/Card.tsx

@@ -103,6 +103,7 @@ interface CardVoteProps {
 export const CardVote = ({ community }: CardVoteProps) => {
   const [showVoteModal, setShowVoteModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
+
   const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for)
 
   const setNext = (val: boolean) => {

packages/DApp/src/components/card/CardFeature.tsx

@@ -1,12 +1,17 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Colors } from '../../constants/styles'
 import { addCommas } from '../../helpers/addCommas'
 import { LinkInternal } from '../Link'
 import rightIcon from '../../assets/images/arrowRight.svg'
 import { CardHeading, CardVoteBlock, VoteBtn } from '../Card'
+import { CommunityDetail } from '../../models/community'
+import { Modal } from '../Modal'
+import { FeatureModal } from './FeatureModal'
+import { VoteConfirmModal } from './VoteConfirmModal'
 
 interface CardFeatureProps {
+  community: CommunityDetail
   heading: string
   text: string
   icon: string
@@ -15,26 +20,48 @@ interface CardFeatureProps {
   voting?: boolean
 }
 
-export const CardFeature = ({ heading, text, icon, sum, timeLeft, voting }: CardFeatureProps) => (
-  <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
-    <FeatureTop>
-      <CardHeading>{heading}</CardHeading>
-      {voting && <CardLinkFeature>Ongoing vote for removal</CardLinkFeature>}
-    </FeatureTop>
+export const CardFeature = ({ community, heading, text, icon, sum, timeLeft, voting }: CardFeatureProps) => {
+  const [showFeatureModal, setShowFeatureModal] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
 
-    <FeatureVote>
-      <p>{text}</p>
-      <p style={{ fontSize: '24px' }}>{icon}</p>
+  const setNewModal = (val: boolean) => {
+    setShowConfirmModal(val)
+    setShowFeatureModal(false)
+  }
 
-      {timeLeft && <span>{timeLeft}</span>}
+  return (
+    <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
+      <FeatureTop>
+        <CardHeading>{heading}</CardHeading>
+        {voting && <CardLinkFeature>Ongoing vote for removal</CardLinkFeature>}
+      </FeatureTop>
 
-      {sum && <span style={{ fontWeight: 'normal' }}>{addCommas(sum)} SNT</span>}
-    </FeatureVote>
-    <FeatureBtn disabled={Boolean(timeLeft)}>
-      Feature this community! <span style={{ fontSize: '20px' }}>⭐️</span>
-    </FeatureBtn>
-  </CardVoteBlock>
-)
+      <FeatureVote>
+        <p>{text}</p>
+        <p style={{ fontSize: '24px' }}>{icon}</p>
+
+        {timeLeft && <span>{timeLeft}</span>}
+
+        {sum && <span style={{ fontWeight: 'normal' }}>{addCommas(sum)} SNT</span>}
+      </FeatureVote>
+      <div>
+        {showFeatureModal && (
+          <Modal heading="Feature in “Weekly Featured”?" setShowModal={setShowFeatureModal}>
+            <FeatureModal community={community} availableAmount={549739700} setShowConfirmModal={setNewModal} />{' '}
+          </Modal>
+        )}
+        {showConfirmModal && (
+          <Modal setShowModal={setShowConfirmModal}>
+            <VoteConfirmModal community={community} selectedVote={{ verb: 'to feature' }} setShowModal={setNewModal} />
+          </Modal>
+        )}
+        <FeatureBtn disabled={Boolean(timeLeft)} onClick={() => setShowFeatureModal(true)}>
+          Feature this community! <span style={{ fontSize: '20px' }}>⭐️</span>
+        </FeatureBtn>
+      </div>
+    </CardVoteBlock>
+  )
+}
 
 const CardLinkFeature = styled(LinkInternal)`
   padding-right: 28px;

packages/DApp/src/components/card/FeatureModal.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { CommunityDetail } from '../../models/community'
+import { CardCommunity } from '../Card'
+import { ButtonPrimary } from '../Button'
+import { VotePropose } from '../votes/VotePropose'
+
+interface FeatureModalProps {
+  community: CommunityDetail
+  availableAmount: number
+  setShowConfirmModal: (val: boolean) => void
+}
+
+export function FeatureModal({ community, availableAmount, setShowConfirmModal }: FeatureModalProps) {
+  const [proposingAmount, setProposingAmount] = useState(availableAmount)
+  const disabled = proposingAmount === 0
+
+  return (
+    <CommunityProposing>
+      <CardCommunity community={community} />
+      <VoteProposeWrap>
+        <VotePropose
+          availableAmount={availableAmount}
+          setProposingAmount={setProposingAmount}
+          proposingAmount={proposingAmount}
+          disabled={disabled}
+        />
+        <VoteConfirmBtn disabled={disabled} onClick={() => setShowConfirmModal(true)}>
+          Confirm vote to feature community
+        </VoteConfirmBtn>
+      </VoteProposeWrap>
+    </CommunityProposing>
+  )
+}
+
+const CommunityProposing = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const VoteProposeWrap = styled.div`
+  margin-top: 32px;
+  width: 100%;
+`
+
+const VoteConfirmBtn = styled(ButtonPrimary)`
+  width: 100%;
+  padding: 11px 0;
+`

packages/DApp/src/components/card/ProposeModal.tsx

@@ -18,6 +18,7 @@ interface ProposeModalProps {
 export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKey, publicKey }: ProposeModalProps) {
   const [proposingAmount, setProposingAmount] = useState(availableAmount)
   const communityFound = getCommunityDetails(publicKey)
+  const disabled = proposingAmount === 0
 
   return (
     <CommunityProposing>
@@ -41,6 +42,7 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe
                 availableAmount={availableAmount}
                 setProposingAmount={setProposingAmount}
                 proposingAmount={proposingAmount}
+                disabled={disabled}
               />
             </VoteProposeWrap>
           ) : (

packages/DApp/src/components/card/RemoveAmountPicker.tsx

@@ -17,6 +17,7 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
   const [proposingAmount, setProposingAmount] = useState(availableAmount)
   const lastVote = community.votingHistory[community.votingHistory.length - 1]
   const lastVoteDate = lastVote.date
+  const disabled = proposingAmount === 0
 
   if (community.votingHistory && timespan(lastVoteDate) < 30) {
     return (
@@ -60,6 +61,7 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
         availableAmount={availableAmount}
         setProposingAmount={setProposingAmount}
         proposingAmount={proposingAmount}
+        disabled={disabled}
       />
       <VoteConfirmBtn onClick={() => setShowConfirmModal(true)}>Confirm vote to remove community</VoteConfirmBtn>
     </VoteProposeWrap>

packages/DApp/src/components/card/RemoveModal.tsx

@@ -23,7 +23,7 @@ export function RemoveModal({ community, availableAmount, setShowConfirmModal }:
   )
 }
 
-const CommunityProposing = styled.form`
+const CommunityProposing = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

packages/DApp/src/components/directory/DirectoryCards.tsx

@@ -32,6 +32,7 @@ function DirectoryCard({ community }: DirectoryCardProps) {
         <CardCommunity community={community} showRemoveButton={true} />
       </CardCommunityWrap>
       <CardFeature
+        community={community}
         heading="Feature this community?"
         text={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
         icon={timeLeft ? '⏳' : '⭐'}

packages/DApp/src/components/votes/VotePropose.tsx

@@ -15,7 +15,7 @@ export interface VoteProposingProps {
   availableAmount: number
   setProposingAmount: (show: number) => void
   proposingAmount: number
-  disabled?: boolean
+  disabled: boolean
 }
 
 export function VotePropose({