Add propose restrict (#43)

* Add disabled btn style

* Extract Warning component

* Add warning to propose modal

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)`

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 && (
         <div>
           <CardCommunity community={communityFound} />
+          {communityFound.validForAddition ? (
             <VoteProposeWrap>
               <VotePropose availableAmount={availableAmount} />
             </VoteProposeWrap>
+          ) : (
+            <WarningWrap>
+              <Warning
+                icon="🤏"
+                text={`${communityFound.name} currently only has ${communityFound.numberOfMembers} members. A community needs more than 42 members before a vote to be added to the Status community directory can be proposed.`}
+              />
+            </WarningWrap>
+          )}
         </div>
       )}
 
@@ -45,6 +56,16 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe
         </ProposingInfo>
       )}
 
+      {communityFound && !communityFound.validForAddition ? (
+        <ConfirmBtn
+          onClick={() => {
+            setShowConfirmModal(false)
+            setPublicKey('')
+          }}
+        >
+          OK, let’s move on! <span>🤙</span>
+        </ConfirmBtn>
+      ) : (
         <ProposingBtn
           type="submit"
           disabled={!communityFound}
@@ -53,6 +74,7 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe
         >
           Confirm vote to add community
         </ProposingBtn>
+      )}
     </CommunityProposing>
   )
 }
@@ -104,3 +126,6 @@ const ProposingBtn = styled(ButtonPrimary)`
   width: 100%;
   padding: 11px 0;
 `
+const WarningWrap = styled.div`
+  margin: 24px 0;
+`

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;

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
       </VoteProposingRangeWrap>
 
       {vote?.type === 'Remove' && Number(proposingAmount) > 2000000 && vote.timeLeft / 3600 > 24 && (
-        <VoteWarning>
+        <Warning
-          <span>⚠️</span>
+          icon="⚠️"
-          <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>
+          text={`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.`}
-        </VoteWarning>
+        />
       )}
     </VoteProposing>
   )
@@ -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;
-`

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 (
+    <VoteWarning>
+      <span>{icon}</span>
+      <WarningText>{text}</WarningText>
+    </VoteWarning>
+  )
+}
+
+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;
+`

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)',

packages/DApp/src/helpers/apiMockData.ts

@@ -23,8 +23,8 @@ export const communities: Array<CommunityDetail> = [
     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,
+    numberOfMembers: 4,
-    validForAddition: true,
+    validForAddition: false,
     votingHistory: [],
     currentVoting: {
       timeLeft: 172800,