Change disabled btns (#59)

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

@@ -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;
+`

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

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

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

@@ -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'
 

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

@@ -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}

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

@@ -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,7 +46,10 @@ export function VoteModal({
         proposingAmount={proposingAmount}
       />
 
-      {selectedVote === 0 ? (
+      {!funds && <DisabledButton>Not enought ABC to vote</DisabledButton>}
+
+      {funds &&
+        (selectedVote === 0 ? (
           <ModalVoteBtnAgainst disabled={disabled} onClick={() => setShowConfirmModal(true)}>
             Vote Against
           </ModalVoteBtnAgainst>
@@ -53,7 +57,7 @@ export function VoteModal({
           <ModalVoteBtnFor disabled={disabled} onClick={() => setShowConfirmModal(true)}>
             Vote For
           </ModalVoteBtnFor>
-      )}
+        ))}
     </Column>
   )
 }

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

@@ -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>

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

@@ -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'