Add slider style (#48)

packages/DApp/src/components/card/ProposeModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { getCommunityDetails } from '../../helpers/apiMock'
 import { ButtonPrimary } from '../Button'
@@ -16,6 +16,7 @@ interface ProposeModalProps {
 }
 
 export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKey, publicKey }: ProposeModalProps) {
+  const [proposingAmount, setProposingAmount] = useState(availableAmount)
   const communityFound = getCommunityDetails(publicKey)
 
   return (
@@ -36,7 +37,11 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe
           <CardCommunity community={communityFound} />
           {communityFound.validForAddition ? (
             <VoteProposeWrap>
-              <VotePropose availableAmount={availableAmount} />
+              <VotePropose
+                availableAmount={availableAmount}
+                setProposingAmount={setProposingAmount}
+                proposingAmount={proposingAmount}
+              />
             </VoteProposeWrap>
           ) : (
             <WarningWrap>

packages/DApp/src/components/card/RemoveAmountPicker.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { timespan } from '../../helpers/timespan'
 import { CommunityDetail } from '../../models/community'
@@ -14,6 +14,7 @@ interface RemoveAmountPickerProps {
 }
 
 export function RemoveAmountPicker({ community, availableAmount, setShowConfirmModal }: RemoveAmountPickerProps) {
+  const [proposingAmount, setProposingAmount] = useState(availableAmount)
   const lastVote = community.votingHistory[community.votingHistory.length - 1]
   const lastVoteDate = lastVote.date
 
@@ -55,14 +56,12 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
   }
   return (
     <VoteProposeWrap>
-      <VotePropose availableAmount={availableAmount} />
-      <VoteConfirmBtn
-        type="submit"
-        onSubmit={() => setShowConfirmModal(true)}
-        onClick={() => setShowConfirmModal(true)}
-      >
-        Confirm vote to remove community
-      </VoteConfirmBtn>
+      <VotePropose
+        availableAmount={availableAmount}
+        setProposingAmount={setProposingAmount}
+        proposingAmount={proposingAmount}
+      />
+      <VoteConfirmBtn onClick={() => setShowConfirmModal(true)}>Confirm vote to remove community</VoteConfirmBtn>
     </VoteProposeWrap>
   )
 }

packages/DApp/src/components/card/VoteModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { VoteChart } from '../votes/VoteChart'
 import { ButtonSecondary } from '../Button'
@@ -18,13 +18,24 @@ export interface VoteModalProps {
 }
 
 export function VoteModal({ vote, selectedVote, availableAmount, setShowConfirmModal }: VoteModalProps) {
+  const [proposingAmount, setProposingAmount] = useState(availableAmount)
+  const disabled = proposingAmount === 0
+
   return (
     <CardProposing>
       <VoteChart vote={vote} />
-      <VotePropose vote={vote} selectedVote={selectedVote} availableAmount={availableAmount} />
+      <VotePropose
+        vote={vote}
+        selectedVote={selectedVote}
+        availableAmount={availableAmount}
+        setProposingAmount={setProposingAmount}
+        proposingAmount={proposingAmount}
+        disabled={disabled}
+      />
 
       <VoteConfirmBtn
         onClick={() => setShowConfirmModal(true)}
+        disabled={disabled}
       >{`Vote ${selectedVote.verb} community ${selectedVote.icon}`}</VoteConfirmBtn>
     </CardProposing>
   )

packages/DApp/src/components/votes/VotePropose.tsx

@@ -13,10 +13,19 @@ export interface VoteProposingProps {
     noun: string
   }
   availableAmount: number
+  setProposingAmount: (show: number) => void
+  proposingAmount: number
+  disabled?: boolean
 }
 
-export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposingProps) {
-  const [proposingAmount, setProposingAmount] = useState(availableAmount)
+export function VotePropose({
+  vote,
+  selectedVote,
+  availableAmount,
+  proposingAmount,
+  disabled,
+  setProposingAmount,
+}: VoteProposingProps) {
   const [displayAmount, setDisplayAmount] = useState(`${addCommas(availableAmount)} SNT`)
 
   let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2)
@@ -24,10 +33,14 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
     step = 1
   }
 
-  const sliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (Number(e.target.value) == step * Math.floor(availableAmount / step)) {
+  const setAvailableAmount = () => {
     setProposingAmount(availableAmount)
     setDisplayAmount(addCommas(availableAmount) + ' SNT')
+  }
+
+  const sliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (Number(e.target.value) == step * Math.floor(availableAmount / step)) {
+      setAvailableAmount()
     } else {
       setProposingAmount(Number(e.target.value))
       setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT')
@@ -36,6 +49,14 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
 
   const progress = (proposingAmount / availableAmount) * 100 + '%'
 
+  const onInputAmountBlur = () => {
+    if (proposingAmount > availableAmount) {
+      setAvailableAmount()
+    } else {
+      setDisplayAmount(addCommas(proposingAmount) + ' SNT')
+    }
+  }
+
   return (
     <VoteProposing>
       <VoteProposingInfo>
@@ -48,7 +69,7 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
           setProposingAmount(Number(e.currentTarget.value))
           setDisplayAmount(e.currentTarget.value)
         }}
-        onBlur={() => setDisplayAmount(addCommas(proposingAmount) + ' SNT')}
+        onBlur={onInputAmountBlur}
         onFocus={() => setDisplayAmount(proposingAmount.toString())}
       />
       <VoteProposingRangeWrap>
@@ -59,8 +80,11 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
           step={step}
           value={proposingAmount}
           onChange={sliderChange}
+          isDisabled={disabled}
           style={{
-            background: `linear-gradient(90deg, ${Colors.VioletDark} 0% ${progress},  ${Colors.VioletSecondary} ${progress} 100%)`,
+            background: disabled
+              ? Colors.GrayDisabledLight
+              : `linear-gradient(90deg, ${Colors.VioletDark} 0% ${progress},  ${Colors.VioletSecondary} ${progress} 100%)`,
           }}
         />
       </VoteProposingRangeWrap>
@@ -107,7 +131,7 @@ const VoteProposingRangeWrap = styled.div`
   margin-bottom: 32px;
 `
 
-const VoteProposingRange = styled.input`
+const VoteProposingRange = styled.input<{ isDisabled?: boolean }>`
   appearance: none;
   width: 100%;
   height: 4px;
@@ -122,14 +146,14 @@ const VoteProposingRange = styled.input`
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: ${Colors.Violet};
+    background: ${({ isDisabled }) => (isDisabled ? Colors.GrayDisabledDark : Colors.Violet)};
     cursor: pointer;
   }
 
   &::-moz-range-thumb {
     width: 20px;
     height: 20px;
-    background: ${Colors.Violet};
+    background: ${({ isDisabled }) => (isDisabled ? Colors.GrayDisabledDark : Colors.Violet)};
     border: 0.5px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     cursor: pointer;