Change disabled btns (#59)

This commit is contained in:
Maria Rushkova 2021-09-13 12:41:04 +02:00 committed by GitHub
parent 87e0f8b49b
commit f0d8d6b74e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 22 deletions

View File

@ -110,3 +110,11 @@ export const ProposingBtn = styled(Btn)`
filter: grayscale(1);
}
`
export const DisabledButton = styled(Btn)`
width: 100%;
background-color: #f3f3f3;
color: #676868;
font-size: 15px;
margin-top: 32px;
`

View File

@ -50,7 +50,7 @@ export function VoteChart({
let balanceWidth = graphWidth
if (proposingAmount && selectedVote) {
if (proposingAmount) {
balanceWidth =
selectedVote === 0
? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount)

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { ProposingBtn } from './Buttons'
import { Card, CardHeading, CardText } from './ProposalInfo'
import { CardHeading, CardText } from './ProposalInfo'
import { ProposingData } from './ProposeModal'
import { VotePropose } from './VotePropose'

View File

@ -22,7 +22,8 @@ export function VoteAnimatedModal({
}: VoteAnimatedModalProps) {
return (
<VoteConfirm>
<ConfirmText>Your vote for this proposal has been cast!</ConfirmText>
<ConfirmText>Your vote {selectedVote === 0 ? 'against' : 'for'} this proposal has been cast!</ConfirmText>
<VoteChart
votesFor={votesFor}
votesAgainst={votesAgainst}

View File

@ -1,7 +1,7 @@
import React from 'react'
import styled from 'styled-components'
import { VoteChart } from './ProposalVoteCard/VoteChart'
import { VoteBtnAgainst, VoteBtnFor } from './Buttons'
import { DisabledButton, VoteBtnAgainst, VoteBtnFor } from './Buttons'
import { VotePropose } from './VotePropose'
export interface VoteModalProps {
@ -28,6 +28,7 @@ export function VoteModal({
setProposingAmount,
}: VoteModalProps) {
const disabled = proposingAmount === 0
const funds = availableAmount > 0
return (
<Column>
@ -45,15 +46,18 @@ export function VoteModal({
proposingAmount={proposingAmount}
/>
{selectedVote === 0 ? (
<ModalVoteBtnAgainst disabled={disabled} onClick={() => setShowConfirmModal(true)}>
Vote Against
</ModalVoteBtnAgainst>
) : (
<ModalVoteBtnFor disabled={disabled} onClick={() => setShowConfirmModal(true)}>
Vote For
</ModalVoteBtnFor>
)}
{!funds && <DisabledButton>Not enought ABC to vote</DisabledButton>}
{funds &&
(selectedVote === 0 ? (
<ModalVoteBtnAgainst disabled={disabled} onClick={() => setShowConfirmModal(true)}>
Vote Against
</ModalVoteBtnAgainst>
) : (
<ModalVoteBtnFor disabled={disabled} onClick={() => setShowConfirmModal(true)}>
Vote For
</ModalVoteBtnFor>
))}
</Column>
)
}

View File

@ -8,20 +8,20 @@ export interface VoteProposingProps {
availableAmount: number
setProposingAmount: (show: number) => void
proposingAmount: number
disabled?: boolean
}
export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) {
const [displayAmount, setDisplayAmount] = useState(addCommas(proposingAmount) + ' SNT')
const [displayAmount, setDisplayAmount] = useState(addCommas(proposingAmount) + ' ABC')
const disabled = availableAmount === 0
let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2)
if (availableAmount < 100) {
step = 1
}
const setAvailableAmount = () => {
setProposingAmount(availableAmount)
setDisplayAmount(addCommas(availableAmount) + ' SNT')
setDisplayAmount(addCommas(availableAmount) + ' ABC')
}
const sliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -29,7 +29,7 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou
setAvailableAmount()
} else {
setProposingAmount(Number(e.target.value))
setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT')
setDisplayAmount(addCommas(Number(e.target.value)) + ' ABC')
}
}
@ -39,7 +39,7 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou
if (proposingAmount > availableAmount) {
setAvailableAmount()
} else {
setDisplayAmount(addCommas(proposingAmount) + ' SNT')
setDisplayAmount(addCommas(proposingAmount) + ' ABC')
}
}
@ -67,7 +67,9 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou
value={proposingAmount}
onChange={sliderChange}
style={{
background: `linear-gradient(90deg, #0F3595 0% ${progress}, #EDF1FF ${progress} 100%)`,
background: disabled
? '#EDF1FF'
: `linear-gradient(90deg, #0F3595 0% ${progress}, #EDF1FF ${progress} 100%)`,
}}
/>
</VoteProposingRangeWrap>

View File

@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react'
import React, { useState } from 'react'
import { useEthers } from '@usedapp/core'
import styled from 'styled-components'
import { CreateButton, Modal, Networks, Theme } from '@status-waku-voting/react-components'
import { ProposeModal } from './ProposeModal'