status-im/community-dapp
2
0
Fork 0
mirror of https://github.com/status-im/community-dapp.git synced 2025-02-23 11:38:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change VoteGraph (#111)

Browse Source
This commit is contained in:
Maria Rushkova 2021-07-13 23:32:35 +02:00 committed by GitHub
parent 023c1ace73
commit f67c63830d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/DApp/src/components/votes/VoteChart.tsx
View File

@ -30,16 +30,15 @@ export function VoteChart({
const votesFor = vote.voteFor.toNumber()
const votesAgainst = vote.voteAgainst.toNumber()
const voteSum = votesFor + votesAgainst
const graphWidth = (100 * votesAgainst) / voteSum - (votesAgainst > 0 && votesFor > 0 ? 0 : 3)
const graphWidth = (100 * votesAgainst) / voteSum
let balanceWidth = graphWidth
if (proposingAmount && selectedVote) {
balanceWidth =
selectedVote.type === 0
? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount) -
(votesFor > 0 && votesAgainst > 0 && proposingAmount > 0 ? 0 : 3)
: (100 * votesAgainst) / (voteSum + proposingAmount) - (votesAgainst > 0 && proposingAmount > 0 ? 0 : 3)
? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount)
: (100 * votesAgainst) / (voteSum + proposingAmount)
}
return (

14
packages/DApp/src/components/votes/VoteGraphBar.tsx
View File

@ -23,8 +23,8 @@ export interface VoteGraphBarProps {
}
export function VoteGraphBar({ graphWidth, balanceWidth, voteWinner, isAnimation }: VoteGraphBarProps) {
const markerWidth: number = balanceWidth ? balanceWidth : 3
const votesWidth: number = graphWidth ? graphWidth : 3
const markerWidth: number = balanceWidth ? balanceWidth : 0
const votesWidth: number = graphWidth ? graphWidth : 0
const [keyFrames, setKeyFrames] = useState('')
const [style, setStyle] = useState<any>({ width: `${votesWidth}%` })
@ -53,14 +53,16 @@ const VoteGraph = styled.div<VoteGraphBarProps>`
background-color: ${({ theme }) => (theme.voteWinner === 1 ? Colors.GrayDisabledLight : Colors.BlueBar)};
border-radius: 10px;
padding-top: 5px;
border-left: 13px solid ${({ theme }) => (theme.voteWinner === 0 ? Colors.GrayDisabledLight : Colors.Orange)};
border-right: 13px solid ${({ theme }) => (theme.voteWinner === 1 ? Colors.GrayDisabledLight : Colors.BlueBar)};
&::before {
content: '';
width: 16px;
height: 5px;
position: absolute;
top: -5px;
left: calc(50% - 1px);
top: -6px;
left: calc(50% - 2px);
transform: translateX(-50%);
background-image: url(${indicatorIcon});
background-size: cover;
@ -81,10 +83,8 @@ const VoteGraphAgainst = styled.div<VoteGraphBarProps>`
position: absolute;
left: 0;
top: 0;
width: 3%;
height: 16px;
background-color: ${({ theme }) => (theme.voteWinner === 2 ? Colors.GrayDisabledLight : Colors.Orange)};
border-radius: 10px 0 0 10px;
transition: width 2s;
z-index: 2;
`
@ -93,10 +93,8 @@ const VoteBalance = styled.div`
position: absolute;
left: 0;
top: 0;
width: 3%;
height: 16px;
background-color: transparent;
border-right: 2px solid ${Colors.VioletLight};
border-radius: 10px 0 0 10px;
z-index: 2;
`