Add range style (#28)

* Add range style

* Add vote confirm modal

* Rename components & states

src/components/Card.tsx

@@ -5,9 +5,10 @@ import { ButtonSecondary } from '../components/Button'
 import { CommunityDetail } from '../models/community'
 import { LinkExternal, LinkInternal } from './Link'
 import { Modal } from './Modal'
-import { CardModal } from './card/CardModal'
+import { VoteModal } from './card/VoteModal'
 import { VoteChart } from './votes/VoteChart'
 import { voteTypes } from './../constants/voteTypes'
+import { VoteConfirmModal } from './card/VoteConfirmModal'
 
 interface CardCommunityProps {
   community: CommunityDetail
@@ -44,8 +45,14 @@ interface CardVoteProps {
 
 export const CardVote = ({ community }: CardVoteProps) => {
   const [showModal, setShowModal] = useState(false)
+  const [showVoteModal, setShowVoteModal] = useState(false)
   const [selectedVoted, setSelectedVoted] = useState(voteTypes['Add'].for)
 
+  const setNext = (val: boolean) => {
+    setShowVoteModal(val)
+    setShowModal(false)
+  }
+
   const vote = community.currentVoting
 
   if (!vote) {
@@ -81,7 +88,17 @@ export const CardVote = ({ community }: CardVoteProps) => {
         <VotesBtns>
           {showModal && (
             <Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowModal}>
-              <CardModal vote={vote} selectedVote={selectedVoted} availableAmount={65245346} />{' '}
+              <VoteModal
+                vote={vote}
+                selectedVote={selectedVoted}
+                availableAmount={65245346}
+                setShowVoteModal={setNext}
+              />{' '}
+            </Modal>
+          )}
+          {showVoteModal && (
+            <Modal setShowModal={setShowVoteModal}>
+              <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} />
             </Modal>
           )}
           <VoteBtn

src/components/card/VoteConfirmModal.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import styled from 'styled-components'
+import { CommunityDetail } from '../../models/community'
+import { ButtonSecondary } from '../Button'
+import { LinkExternal } from '../Link'
+
+interface VoteConfirmModalProps {
+  community: CommunityDetail
+  selectedVote: {
+    verb: string
+  }
+  setShowModal: (val: boolean) => void
+}
+
+export function VoteConfirmModal({ community, selectedVote, setShowModal }: VoteConfirmModalProps) {
+  return (
+    <VoteConfirm>
+      <ConfirmLogo src={community.icon} alt={`${community.name} logo`} />
+      <ConfirmText>
+        Your vote{' '}
+        <span>
+          {selectedVote.verb} {community.name}
+        </span>{' '}
+        will be casted after 10 confirmations.
+      </ConfirmText>
+      <EtherscanLink href="#" target="_blank">
+        View on Etherscan
+      </EtherscanLink>
+      <ConfirmBtn onClick={() => setShowModal(false)}>
+        OK, let’s move on! <span>🤙</span>
+      </ConfirmBtn>
+    </VoteConfirm>
+  )
+}
+
+const VoteConfirm = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const ConfirmLogo = styled.img`
+  width: 64px !important;
+  height: 64px !important;
+  border-radius: 50%;
+  margin-bottom: 32px;
+`
+
+const ConfirmText = styled.div`
+  max-width: 272px;
+  margin-bottom: 32px;
+  text-align: center;
+  line-height: 22px;
+
+  & > span {
+    font-weight: bold;
+  }
+`
+
+const EtherscanLink = styled(LinkExternal)`
+  margin-bottom: 32px;
+`
+
+const ConfirmBtn = styled(ButtonSecondary)`
+  width: 100%;
+  padding: 11px 0;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+
+  & > span {
+    font-size: 20px;
+  }
+`

src/components/card/VoteModal.tsx

@@ -7,7 +7,7 @@ import { ButtonSecondary } from '../Button'
 import { addCommas } from '../../helpers/addCommas'
 import { CurrentVoting } from '../../models/community'
 
-export interface CardModalProps {
+export interface VoteModalProps {
   vote: CurrentVoting
   selectedVote: {
     icon: string
@@ -15,9 +15,10 @@ export interface CardModalProps {
     verb: string
   }
   availableAmount: number
+  setShowVoteModal: (show: boolean) => void
 }
 
-export function CardModal({ vote, selectedVote, availableAmount }: CardModalProps) {
+export function VoteModal({ vote, selectedVote, availableAmount, setShowVoteModal }: VoteModalProps) {
   const [proposingAmount, setProposingAmount] = useState(0)
   const [displayAmount, setDisplayAmount] = useState('0 SNT')
 
@@ -35,6 +36,9 @@ export function CardModal({ vote, selectedVote, availableAmount }: CardModalProp
       setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT')
     }
   }
+
+  const progress = (proposingAmount / availableAmount) * 100 + '%'
+
   return (
     <CardProposing>
       <VoteChart vote={vote} />
@@ -60,10 +64,15 @@ export function CardModal({ vote, selectedVote, availableAmount }: CardModalProp
             step={step}
             value={proposingAmount}
             onChange={sliderChange}
+            style={{
+              background: `linear-gradient(90deg, ${Colors.VioletDark} 0% ${progress},  ${Colors.VioletSecondary} ${progress} 100%)`,
+            }}
           />
         </VoteProposingRangeWrap>
       </VoteProposing>
-      <VoteConfirmBtn>{`Vote ${selectedVote.verb} community ${selectedVote.icon}`}</VoteConfirmBtn>
+      <VoteConfirmBtn
+        onClick={() => setShowVoteModal(true)}
+      >{`Vote ${selectedVote.verb} community ${selectedVote.icon}`}</VoteConfirmBtn>
     </CardProposing>
   )
 }
@@ -114,7 +123,6 @@ const VoteProposingRange = styled.input`
   margin: 10px 0;
   border-radius: 2px;
   outline: none;
-  background: ${Colors.VioletSecondary};
 
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
@@ -129,7 +137,7 @@ const VoteProposingRange = styled.input`
   &::-moz-range-thumb {
     width: 20px;
     height: 20px;
-    background: #bd5de2;
+    background: ${Colors.Violet};
     border: 0.5px solid rgba(0, 0, 0, 0);
     border-radius: 50px;
     cursor: pointer;
@@ -142,8 +150,4 @@ const VoteConfirmBtn = styled(ButtonSecondary)`
   font-weight: 500;
   font-size: 15px;
   line-height: 22px;
-
-  & > span {
-    font-size: 20px;
-  }
 `