Fix vote chart (#77)

packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx

@@ -46,52 +46,22 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
     <Votes ref={ref}>
       <VotesChart className={selectedVote || tabletMode ? '' : 'notModal'}>
         <VoteBox
-          style={{
+          voteType={2}
-            filter: voteWinner && voteWinner === 2 ? 'grayscale(1)' : 'none',
+          mobileVersion={mobileVersion}
-            alignItems: mobileVersion ? 'flex-start' : 'center',
+          totalVotes={votingRoom.totalVotesAgainst.toNumber()}
-          }}
+          won={voteWinner === 2}
-        >
+          selected={isAnimation && selectedVote === 0}
-          <VoteIcon
+          proposingAmount={proposingAmount}
-            src={voteWinner === 1 ? crossWinnerIcon : crossIcon}
+        />
-            width={voteWinner === 1 ? '18px' : '14px'}
-            style={{
-              marginLeft: mobileVersion ? '10px' : '0',
-            }}
-          />
-          <span>
-            {' '}
-            {isAnimation && proposingAmount && selectedVote && selectedVote === 0 ? (
-              <CountUp end={votingRoom.totalVotesAgainst.toNumber() + proposingAmount} separator="," />
-            ) : (
-              addCommas(votingRoom.totalVotesAgainst.toNumber())
-            )}{' '}
-            <span style={{ fontWeight: 'normal' }}>ABC</span>
-          </span>
-        </VoteBox>
         {!voteWinner && <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(timeLeft)}</TimeLeft>}
         <VoteBox
-          style={{
+          voteType={1}
-            filter: voteWinner && voteWinner === 1 ? 'grayscale(1)' : 'none',
+          mobileVersion={mobileVersion}
-            alignItems: mobileVersion ? 'flex-end' : 'center',
+          totalVotes={votingRoom.totalVotesFor.toNumber()}
-          }}
+          won={voteWinner === 1}
-        >
+          selected={isAnimation && selectedVote === 1}
-          <VoteIcon
+          proposingAmount={proposingAmount}
-            src={voteWinner === 2 ? checkWinnerIcon : checkIcon}
+        />
-            width={voteWinner === 2 ? '24px' : '18px'}
-            style={{
-              marginRight: mobileVersion ? '10px' : '0',
-            }}
-          />
-          <span>
-            {' '}
-            {isAnimation && proposingAmount && selectedVote && selectedVote === 1 ? (
-              <CountUp end={votingRoom.totalVotesFor.toNumber() + proposingAmount} separator="," />
-            ) : (
-              addCommas(votingRoom.totalVotesFor.toNumber())
-            )}{' '}
-            <span style={{ fontWeight: 'normal' }}>ABC</span>
-          </span>
-        </VoteBox>
       </VotesChart>
       <VoteGraphBarWrap className={selectedVote || tabletMode ? '' : 'notModal'}>
         <VoteGraphBar
@@ -106,6 +76,43 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
   )
 }
 
+type VoteBoxProps = {
+  won: boolean
+  mobileVersion: boolean
+  voteType: number
+  totalVotes: number
+  selected?: boolean
+  proposingAmount?: number
+}
+
+function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, selected }: VoteBoxProps) {
+  return (
+    <VoteBoxWrapper
+      style={{
+        filter: won ? 'grayscale(1)' : 'none',
+        alignItems: mobileVersion ? (voteType == 1 ? 'flex-start' : 'flex-end') : 'center',
+      }}
+    >
+      <VoteIcon
+        src={voteType === 1 ? (!won ? checkWinnerIcon : checkIcon) : !won ? crossWinnerIcon : crossIcon}
+        width={!won ? '18px' : '14px'}
+        style={{
+          marginLeft: mobileVersion ? '10px' : '0',
+        }}
+      />
+      <span>
+        {' '}
+        {proposingAmount && selected ? (
+          <CountUp end={totalVotes + proposingAmount} separator="," start={totalVotes} duration={2} useEasing={false} />
+        ) : (
+          addCommas(totalVotes)
+        )}{' '}
+        <span style={{ fontWeight: 'normal' }}>ABC</span>
+      </span>
+    </VoteBoxWrapper>
+  )
+}
+
 const Votes = styled.div`
   display: flex;
   flex-direction: column;
@@ -135,7 +142,7 @@ const VotesChart = styled.div`
   }
 `
 
-const VoteBox = styled.div`
+const VoteBoxWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;

packages/proposal-components/src/components/VotePropose.tsx

@@ -12,7 +12,6 @@ export interface VoteProposingProps {
 
 export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) {
   const [inputFocused, setInputFocused] = useState(false)
-  const disabled = useMemo(() => availableAmount === 0, [availableAmount])
   const step = useMemo(
     () => (availableAmount < 100 ? 1 : 10 ** (Math.floor(Math.log10(availableAmount)) - 2)),
     [availableAmount]
@@ -57,9 +56,10 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou
           value={proposingAmount}
           onChange={sliderChange}
           style={{
-            background: disabled
+            background:
-              ? '#EDF1FF'
+              availableAmount === 0
-              : `linear-gradient(90deg, #0F3595 0% ${progress},  #EDF1FF ${progress} 100%)`,
+                ? '#EDF1FF'
+                : `linear-gradient(90deg, #0F3595 0% ${progress},  #EDF1FF ${progress} 100%)`,
           }}
         />
       </VoteProposingRangeWrap>