Style sending btn (#77)

This commit is contained in:
Maria Rushkova 2021-07-01 09:24:12 +02:00 committed by GitHub
parent 3c89ffbb12
commit e7c749f658
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 13 deletions

View File

@ -15,6 +15,8 @@ import { useEthers } from '@usedapp/core'
import { useContractFunction } from '@usedapp/core'
import { useContracts } from '../hooks/useContracts'
import { getVotingWinner } from '../helpers/voting'
import { useVotesAggregate } from '../hooks/useVotesAggregate'
import rightIcon from '../assets/images/arrowRight.svg'
interface CardCommunityProps {
community: CommunityDetail
@ -114,6 +116,9 @@ export const CardVote = ({ community, room, hideModalFunction }: CardVoteProps)
const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for)
const { votingContract } = useContracts()
const { votes } = useVotesAggregate(room)
const { send } = useContractFunction(votingContract, 'castVotes')
const finalizeVoting = useContractFunction(votingContract, 'finalizeVotingRoom')
const setNext = (val: boolean) => {
@ -167,7 +172,12 @@ export const CardVote = ({ community, room, hideModalFunction }: CardVoteProps)
) : hideModalFunction ? (
<CardHeading />
) : (
<CardHeading>{voteConstants.question}</CardHeading>
<CardVoteTop>
<CardHeading>{voteConstants.question}</CardHeading>
{votes.length > 0 && community.currentVoting && community?.currentVoting.timeLeft > 0 && (
<VoteSendingBtn onClick={() => send(votes)}> {votes.length} votes need saving</VoteSendingBtn>
)}
</CardVoteTop>
)}
<div>
<VoteChart vote={vote} voteWinner={winner} />
@ -245,6 +255,11 @@ const CardLogo = styled.img`
height: 64px !important;
border-radius: 50%;
`
const CardVoteTop = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`
export const CardHeading = styled.h2`
font-weight: bold;
@ -258,6 +273,35 @@ const CardTop = styled.div`
line-height: 24px;
`
const VoteSendingBtn = styled.button`
padding-right: 28px;
font-size: 12px;
font-weight: 500;
line-height: 20px;
position: relative;
color: ${Colors.VioletDark};
&:hover {
color: ${Colors.Violet};
}
&:active {
color: ${Colors.VioletDark};
}
&::after {
content: '';
width: 24px;
height: 24px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background-image: url(${rightIcon});
background-size: cover;
}
`
const RemoveBtn = styled.button`
width: 16px;
height: 16px;

View File

@ -1,9 +1,6 @@
import { useContractFunction } from '@usedapp/core'
import React from 'react'
import { Card, CardCommunity, CardCommunityWrap, CardVote, CardVoteWrap } from '../Card'
import { useCommunity } from '../../hooks/useCommunity'
import { useContracts } from '../../hooks/useContracts'
import { useVotesAggregate } from '../../hooks/useVotesAggregate'
import { VotingCardSkeleton } from './VotingCardSkeleton'
interface VotingCardProps {
@ -12,9 +9,6 @@ interface VotingCardProps {
export function VotingCard({ room }: VotingCardProps) {
const { community } = useCommunity(room)
const { votes } = useVotesAggregate(room)
const { votingContract } = useContracts()
const { send } = useContractFunction(votingContract, 'castVotes')
if (community) {
return (
@ -27,12 +21,6 @@ export function VotingCard({ room }: VotingCardProps) {
{' '}
<CardVote community={community} room={room} />
</CardVoteWrap>
{votes.length > 0 && community.currentVoting && community?.currentVoting.timeLeft > 0 && (
<button style={{ border: '1px solid black', height: '50px' }} onClick={() => send(votes)}>
{' '}
There are {votes.length} uncomitted votes
</button>
)}
</Card>
)
}