Add OngoingVoteModal (#56)

packages/DApp/src/components/Card.tsx

@@ -98,9 +98,10 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
 
 interface CardVoteProps {
   community: CommunityDetail
+  hideModalFunction?: (val: boolean) => void
 }
 
-export const CardVote = ({ community }: CardVoteProps) => {
+export const CardVote = ({ community, hideModalFunction }: CardVoteProps) => {
   const [showVoteModal, setShowVoteModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
 
@@ -111,6 +112,13 @@ export const CardVote = ({ community }: CardVoteProps) => {
     setShowVoteModal(false)
   }
 
+  const hideConfirm = (val: boolean) => {
+    if (hideModalFunction) {
+      hideModalFunction(false)
+    }
+    setShowConfirmModal(val)
+  }
+
   const vote = community.currentVoting
 
   if (!vote) {
@@ -125,6 +133,21 @@ export const CardVote = ({ community }: CardVoteProps) => {
 
   return (
     <CardVoteBlock>
+      {showVoteModal && (
+        <Modal heading={`${vote?.type} ${community.name}?`} setShowModal={setShowVoteModal}>
+          <VoteModal
+            vote={vote}
+            selectedVote={selectedVoted}
+            availableAmount={65245346}
+            setShowConfirmModal={setNext}
+          />{' '}
+        </Modal>
+      )}
+      {showConfirmModal && (
+        <Modal setShowModal={hideConfirm}>
+          <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={hideConfirm} />
+        </Modal>
+      )}
       {winner ? (
         <CardHeadingEndedVote>
           SNT holders have decided{' '}
@@ -133,6 +156,8 @@ export const CardVote = ({ community }: CardVoteProps) => {
           </b>{' '}
           this community to the directory!
         </CardHeadingEndedVote>
+      ) : hideModalFunction ? (
+        <CardHeading />
       ) : (
         <CardHeading>{voteConstants.question}</CardHeading>
       )}
@@ -145,21 +170,6 @@ export const CardVote = ({ community }: CardVoteProps) => {
           </VoteBtnFinal>
         ) : (
           <VotesBtns>
-            {showVoteModal && (
-              <Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowVoteModal}>
-                <VoteModal
-                  vote={vote}
-                  selectedVote={selectedVoted}
-                  availableAmount={65245346}
-                  setShowConfirmModal={setNext}
-                />{' '}
-              </Modal>
-            )}
-            {showConfirmModal && (
-              <Modal setShowModal={setShowConfirmModal}>
-                <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} />
-              </Modal>
-            )}
             <VoteBtn
               onClick={() => {
                 setSelectedVoted(voteConstants.against)
@@ -184,9 +194,9 @@ export const CardVote = ({ community }: CardVoteProps) => {
 }
 
 export const Card = styled.div`
-  margin: 20px;
   display: flex;
   align-items: stretch;
+  margin: 20px;
 `
 export const CardCommunityWrap = styled.div`
   width: 50%;
@@ -195,6 +205,14 @@ export const CardCommunityWrap = styled.div`
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 6px 0px 0px 6px;
 `
+export const CardVoteWrap = styled.div`
+  width: 50%;
+  display: flex;
+  align-items: stretch;
+  padding: 24px 24px 32px;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 6px 0px 0px 6px;
+`
 const CardInfoBlock = styled.div`
   display: flex;
   flex-direction: column;
@@ -278,16 +296,13 @@ export const CardLinks = styled.div`
 `
 
 export const CardVoteBlock = styled.div`
-  width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 24px 24px 32px;
+  width: 100%;
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
 `
 
-const VotesBtns = styled.div`
+export const VotesBtns = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;

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

@@ -9,6 +9,7 @@ import { CommunityDetail } from '../../models/community'
 import { Modal } from '../Modal'
 import { FeatureModal } from './FeatureModal'
 import { VoteConfirmModal } from './VoteConfirmModal'
+import { OngoingVote } from './OngoingVote'
 
 interface CardFeatureProps {
   community: CommunityDetail
@@ -23,6 +24,7 @@ interface CardFeatureProps {
 export const CardFeature = ({ community, heading, text, icon, sum, timeLeft, voting }: CardFeatureProps) => {
   const [showFeatureModal, setShowFeatureModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
+  const [showOngoingVote, setShowOngoingVote] = useState(false)
 
   const setNewModal = (val: boolean) => {
     setShowConfirmModal(val)
@@ -33,7 +35,12 @@ export const CardFeature = ({ community, heading, text, icon, sum, timeLeft, vot
     <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
       <FeatureTop>
         <CardHeading>{heading}</CardHeading>
-        {voting && <CardLinkFeature>Ongoing vote for removal</CardLinkFeature>}
+        {voting && (
+          <div>
+            {showOngoingVote && <OngoingVote community={community} setShowOngoingVote={setShowOngoingVote} />}
+            <CardLinkFeature onClick={() => setShowOngoingVote(true)}>Ongoing vote for removal</CardLinkFeature>
+          </div>
+        )}
       </FeatureTop>
 
       <FeatureVote>

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { CommunityDetail } from '../../models/community'
+import { CardVote, CardVoteBlock } from '../Card'
+import { Modal } from '../Modal'
+
+export interface OngoingVoteProps {
+  community: CommunityDetail
+  setShowOngoingVote: (show: boolean) => void
+}
+
+export function OngoingVote({ community, setShowOngoingVote }: OngoingVoteProps) {
+  const vote = community.currentVoting
+  if (!vote) {
+    return <CardVoteBlock />
+  }
+
+  return (
+    <Modal heading={`${vote?.type} ${community.name}?`} setShowModal={setShowOngoingVote}>
+      <CardVote community={community} hideModalFunction={setShowOngoingVote} />
+    </Modal>
+  )
+}

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

@@ -43,7 +43,7 @@ export function VoteModal({ vote, selectedVote, availableAmount, setShowConfirmM
   )
 }
 
-const CardProposing = styled.div`
+export const CardProposing = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Card, CardCommunity, CardCommunityWrap } from '../Card'
+import { Card, CardCommunity, CardCommunityWrap, CardVoteWrap } from '../Card'
 import { CardFeature } from '../card/CardFeature'
 import styled from 'styled-components'
 import { CommunityDetail, DirectorySortingEnum } from '../../models/community'
@@ -11,6 +11,7 @@ import { PageBar } from '../PageBar'
 import { DirectorySortingOptions } from '../../constants/SortingOptions'
 import { SpinnerIcon } from '../../assets/animatedIcons/spinnerIcon'
 import { useConfig } from '../../providers/config'
+import { Colors } from '../../constants/styles'
 
 interface DirectoryCardProps {
   community: CommunityDetail
@@ -31,15 +32,17 @@ function DirectoryCard({ community }: DirectoryCardProps) {
         {' '}
         <CardCommunity community={community} showRemoveButton={true} />
       </CardCommunityWrap>
-      <CardFeature
+      <CardVoteWrap style={{ backgroundColor: `${Colors.GrayLight}` }}>
-        community={community}
+        <CardFeature
-        heading="Feature this community?"
+          community={community}
-        text={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
+          heading="Feature this community?"
-        icon={timeLeft ? '⏳' : '⭐'}
+          text={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
-        sum={community.directoryInfo.featureVotes?.toNumber()}
+          icon={timeLeft ? '⏳' : '⭐'}
-        voting={Boolean(community.currentVoting)}
+          sum={community.directoryInfo.featureVotes?.toNumber()}
-        timeLeft={timeLeft}
+          voting={Boolean(community.currentVoting)}
-      />
+          timeLeft={timeLeft}
+        />
+      </CardVoteWrap>
     </Card>
   )
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CommunityDetail } from '../../models/community'
-import { Card, CardCommunity, CardCommunityWrap, CardVote } from '../Card'
+import { Card, CardCommunity, CardCommunityWrap, CardVote, CardVoteWrap } from '../Card'
 
 interface VotingCardProps {
   community: CommunityDetail
@@ -12,8 +12,10 @@ export const VotingCard = ({ community }: VotingCardProps) => {
         {' '}
         <CardCommunity community={community} />
       </CardCommunityWrap>
-
+      <CardVoteWrap>
-      <CardVote community={community} />
+        {' '}
+        <CardVote community={community} />
+      </CardVoteWrap>
     </Card>
   )
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Card, CardCommunityWrap, CardLinks, CardVoteBlock } from '../Card'
+import { Card, CardCommunityWrap, CardLinks, CardVoteBlock, CardVoteWrap } from '../Card'
 import { LinkExternal, LinkInternal } from '../Link'
 import { Skeleton } from '../skeleton/Skeleton'
 import { TagsSkeletonList } from '../skeleton/TagSkeleton'
@@ -24,29 +24,31 @@ export const VotingCardSkeleton = () => {
           <StyledInternalink>Voting history </StyledInternalink>
         </CardLinks>
       </CardCommunityWrap>
-      <CardVoteBlock>
+      <CardVoteWrap>
-        <CardHeader>
+        <CardVoteBlock>
-          <Skeleton width="50%" />
+          <CardHeader>
-        </CardHeader>
+            <Skeleton width="50%" />
-        <Row>
+          </CardHeader>
-          <div>
+          <Row>
-            <span>❓</span>
+            <div>
-            <Skeleton width="90px" height="16px" />
+              <span>❓</span>
-          </div>
+              <Skeleton width="90px" height="16px" />
-          <div>
+            </div>
-            <Skeleton width="43px" height="8px" />
+            <div>
-          </div>
+              <Skeleton width="43px" height="8px" />
-          <div>
+            </div>
-            <span>❓</span>
+            <div>
-            <Skeleton width="90px" height="16px" />
+              <span>❓</span>
-          </div>
+              <Skeleton width="90px" height="16px" />
-        </Row>
+            </div>
-        <ProgressSkeleton />
+          </Row>
-        <ButtonsRow>
+          <ProgressSkeleton />
-          <SkeletonButton />
+          <ButtonsRow>
-          <SkeletonButton />
+            <SkeletonButton />
-        </ButtonsRow>
+            <SkeletonButton />
-      </CardVoteBlock>
+          </ButtonsRow>
+        </CardVoteBlock>
+      </CardVoteWrap>
     </Card>
   )
 }