From 3c9c0d213006475507878f09e98943a5bf1d0117 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Fri, 18 Jun 2021 09:05:53 +0200 Subject: [PATCH] Add propose restrict (#43) * Add disabled btn style * Extract Warning component * Add warning to propose modal --- packages/DApp/src/components/Button.tsx | 1 + .../DApp/src/components/card/ProposeModal.tsx | 47 ++++++++++++++----- .../src/components/card/VoteConfirmModal.tsx | 2 +- .../DApp/src/components/votes/VotePropose.tsx | 32 ++----------- .../DApp/src/components/votes/VoteWarning.tsx | 39 +++++++++++++++ packages/DApp/src/constants/styles.ts | 1 + packages/DApp/src/helpers/apiMockData.ts | 4 +- 7 files changed, 85 insertions(+), 41 deletions(-) create mode 100644 packages/DApp/src/components/votes/VoteWarning.tsx diff --git a/packages/DApp/src/components/Button.tsx b/packages/DApp/src/components/Button.tsx index 601f503..fc3128f 100644 --- a/packages/DApp/src/components/Button.tsx +++ b/packages/DApp/src/components/Button.tsx @@ -23,6 +23,7 @@ export const ButtonPrimary = styled(Button)` &:disabled { background: ${Colors.GrayDisabledDark}; + color: ${Colors.GreyTextDisabled}; } ` export const ButtonSecondary = styled(Button)` diff --git a/packages/DApp/src/components/card/ProposeModal.tsx b/packages/DApp/src/components/card/ProposeModal.tsx index bad9d83..a283ee7 100644 --- a/packages/DApp/src/components/card/ProposeModal.tsx +++ b/packages/DApp/src/components/card/ProposeModal.tsx @@ -5,6 +5,8 @@ import { ButtonPrimary } from '../Button' import { CardCommunity } from '../Card' import { Input } from '../Input' import { VotePropose } from '../votes/VotePropose' +import { Warning } from '../votes/VoteWarning' +import { ConfirmBtn } from './VoteConfirmModal' interface ProposeModalProps { availableAmount: number @@ -32,9 +34,18 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe {publicKey && communityFound && (
- - - + {communityFound.validForAddition ? ( + + + + ) : ( + + + + )}
)} @@ -45,14 +56,25 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe )} - setShowConfirmModal(true)} - onClick={() => setShowConfirmModal(true)} - > - Confirm vote to add community - + {communityFound && !communityFound.validForAddition ? ( + { + setShowConfirmModal(false) + setPublicKey('') + }} + > + OK, let’s move on! 🤙 + + ) : ( + setShowConfirmModal(true)} + onClick={() => setShowConfirmModal(true)} + > + Confirm vote to add community + + )} ) } @@ -104,3 +126,6 @@ const ProposingBtn = styled(ButtonPrimary)` width: 100%; padding: 11px 0; ` +const WarningWrap = styled.div` + margin: 24px 0; +` diff --git a/packages/DApp/src/components/card/VoteConfirmModal.tsx b/packages/DApp/src/components/card/VoteConfirmModal.tsx index 8626f3b..052670b 100644 --- a/packages/DApp/src/components/card/VoteConfirmModal.tsx +++ b/packages/DApp/src/components/card/VoteConfirmModal.tsx @@ -61,7 +61,7 @@ const EtherscanLink = styled(LinkExternal)` margin-bottom: 32px; ` -const ConfirmBtn = styled(ButtonSecondary)` +export const ConfirmBtn = styled(ButtonSecondary)` width: 100%; padding: 11px 0; font-weight: 500; diff --git a/packages/DApp/src/components/votes/VotePropose.tsx b/packages/DApp/src/components/votes/VotePropose.tsx index d5d75b3..c843546 100644 --- a/packages/DApp/src/components/votes/VotePropose.tsx +++ b/packages/DApp/src/components/votes/VotePropose.tsx @@ -5,6 +5,7 @@ import { Colors } from '../../constants/styles' import { addCommas } from '../../helpers/addCommas' import { CurrentVoting } from '../../models/community' import { Input } from '../Input' +import { Warning } from './VoteWarning' export interface VoteProposingProps { vote?: CurrentVoting @@ -65,10 +66,10 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi {vote?.type === 'Remove' && Number(proposingAmount) > 2000000 && vote.timeLeft / 3600 > 24 && ( - - ⚠️ - {`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.`} - + )} ) @@ -134,26 +135,3 @@ const VoteProposingRange = styled.input` cursor: pointer; } ` - -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; -` diff --git a/packages/DApp/src/components/votes/VoteWarning.tsx b/packages/DApp/src/components/votes/VoteWarning.tsx new file mode 100644 index 0000000..5ba6a7e --- /dev/null +++ b/packages/DApp/src/components/votes/VoteWarning.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import styled from 'styled-components' + +type VoteWarningProps = { + icon: string + text: string +} + +export function Warning({ icon, text }: VoteWarningProps) { + return ( + + {icon} + {text} + + ) +} + +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; +` diff --git a/packages/DApp/src/constants/styles.ts b/packages/DApp/src/constants/styles.ts index 68face7..710c17e 100644 --- a/packages/DApp/src/constants/styles.ts +++ b/packages/DApp/src/constants/styles.ts @@ -14,6 +14,7 @@ export const Colors = { GrayDisabledDark: '#888888', GrayDisabledLight: '#F3F3F3', GreyText: '#939BA1', + GreyTextDisabled: '#B1B1B1', GrayLight: '#FBFCFE', GrayBorder: '#EEF2F5', ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)', diff --git a/packages/DApp/src/helpers/apiMockData.ts b/packages/DApp/src/helpers/apiMockData.ts index 0096dd8..52fad71 100644 --- a/packages/DApp/src/helpers/apiMockData.ts +++ b/packages/DApp/src/helpers/apiMockData.ts @@ -23,8 +23,8 @@ export const communities: Array = [ icon: 'https://static.coindesk.com/wp-content/uploads/2021/01/cryptopunk.jpg', tags: ['nfts', 'collectables', 'cryptopunks', 'quite long', 'funny', 'very long tag', 'short'], description: 'Owners of CryptoPunks, marketplace. Nullam mattis mattis mattis fermentum libero.', - numberOfMembers: 50, - validForAddition: true, + numberOfMembers: 4, + validForAddition: false, votingHistory: [], currentVoting: { timeLeft: 172800,