Add warning to modal (#31)

* Add warning to modal

* Add nouns

* Change warning props

* Change warning conditions

* Change mock hours

* Change timeLeft condition

* Refactor code

src/components/card/VoteModal.tsx

@@ -13,6 +13,7 @@ export interface VoteModalProps {
     icon: string
     text: string
     verb: string
+    noun: string
   }
   availableAmount: number
   setShowConfirmModal: (show: boolean) => void
@@ -70,6 +71,13 @@ export function VoteModal({ vote, selectedVote, availableAmount, setShowConfirmM
           />
         </VoteProposingRangeWrap>
       </VoteProposing>
+      {vote?.type === 'Remove' && Number(proposingAmount) > 2000000 && vote.timeLeft / 3600 > 24 && (
+        <VoteWarning>
+          <span>⚠️</span>
+          <WarningText>{`Your vote will shorten vote duration! Votes over 2,000,000 SNT for ${selectedVote.noun} of the community shortens the vote duration to 24 hours.`}</WarningText>
+        </VoteWarning>
+      )}
+
       <VoteConfirmBtn
         onClick={() => setShowConfirmModal(true)}
       >{`Vote ${selectedVote.verb} community ${selectedVote.icon}`}</VoteConfirmBtn>
@@ -144,6 +152,29 @@ const VoteProposingRange = styled.input`
   }
 `
 
+const VoteWarning = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  background: #ffeff2;
+  border-radius: 6px;
+  margin-bottom: 32px;
+
+  & > span {
+    font-size: 24px;
+    line-height: 32px;
+  }
+`
+
+const WarningText = styled.div`
+  max-width: 353px;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.1px;
+`
+
 const VoteConfirmBtn = styled(ButtonSecondary)`
   width: 100%;
   padding: 11px 0;

src/constants/voteTypes.ts

@@ -5,11 +5,13 @@ type Vote = {
       icon: string
       text: string
       verb: string
+      noun: string
     }
     against: {
       icon: string
       text: string
       verb: string
+      noun: string
     }
   }
 }
@@ -21,11 +23,13 @@ export const voteTypes: Vote = {
       icon: '👍',
       text: 'Add',
       verb: 'to add',
+      noun: '',
     },
     against: {
       icon: '👎',
       text: "Don't add",
       verb: 'not to add',
+      noun: '',
     },
   },
 
@@ -35,11 +39,13 @@ export const voteTypes: Vote = {
       icon: '🗑',
       text: 'Remove',
       verb: 'to remove',
+      noun: 'removal',
     },
     against: {
       icon: '📌',
       text: 'Keep',
       verb: 'to keep',
+      noun: 'inclusion',
     },
   },
 }

src/helpers/apiMockData.ts

@@ -27,7 +27,7 @@ export const communities: Array<CommunityDetail> = [
     validForAddition: true,
     votingHistory: [],
     currentVoting: {
-      timeLeft: 28800,
+      timeLeft: 172800,
       type: 'Remove',
       voteFor: BigNumber.from(16740235),
       voteAgainst: BigNumber.from(6740235),