Refactor PageInfo (#121)

packages/DApp/src/components/Button.tsx

@@ -27,6 +27,12 @@ export const ButtonPrimary = styled(Button)`
     filter: grayscale(1);
   }
 `
+
+export const ProposeButton = styled(ButtonPrimary)`
+  padding: 10px 0;
+  width: 343px;
+`
+
 export const ButtonSecondary = styled(Button)`
   background: ${Colors.VioletSecondary};
   color: ${Colors.VioletDark};

packages/DApp/src/components/ConnectButton.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useState } from 'react'
-import { ButtonPrimary } from './Button'
+import React, { useState } from 'react'
+import { ProposeButton } from './Button'
 import { useEthers } from '@usedapp/core'
 import styled from 'styled-components'
 import { Modal } from './Modal'
@@ -7,12 +7,12 @@ import { LinkExternal } from './Link'
 import statusLogo from '../assets/images/statusLogo.svg'
 import { ColumnFlexDiv } from '../constants/styles'
 
-export type StatusConnectButtonProps = {
-  children: ReactNode
+export type ConnectButtonProps = {
+  text?: string
   className?: string
 }
 
-export function StatusConnectButton({ children, className }: StatusConnectButtonProps) {
+export function ConnectButton({ text, className }: ConnectButtonProps) {
   const [showModal, setShowModal] = useState(false)
   const { activateBrowserWallet } = useEthers()
 
@@ -31,9 +31,9 @@ export function StatusConnectButton({ children, className }: StatusConnectButton
           <StatusModal />{' '}
         </Modal>
       )}
-      <ButtonPrimary className={className} onClick={activateStatusWallet}>
-        {children}
-      </ButtonPrimary>
+      <ProposeButton className={className} onClick={activateStatusWallet}>
+        {!text ? 'Connect to Vote' : text}
+      </ProposeButton>
     </div>
   )
 }

packages/DApp/src/components/PageInfo.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { ButtonPrimary } from '../components/Button'
 import { ColumnFlexDiv } from '../constants/styles'
-import { StatusConnectButton } from './StatusConnectButton'
 
 interface PageInfoProps {
   heading: string
@@ -16,18 +14,6 @@ export const PageInfo = ({ heading, text }: PageInfoProps) => (
   </ColumnFlexDiv>
 )
 
-interface ProposeButtonProps {
-  onClick: () => void
-}
-
-export function ProposeButton({ onClick }: ProposeButtonProps) {
-  return <ProposeButtonStyled onClick={onClick}>Propose community</ProposeButtonStyled>
-}
-
-export function ConnectButton() {
-  return <ConnectButtonStyled>Connect to Vote</ConnectButtonStyled>
-}
-
 export const InfoWrap = styled(ColumnFlexDiv)`
   max-width: 630px;
   padding: 48px 0;
@@ -48,12 +34,3 @@ const InfoText = styled.p`
   line-height: 32px;
   margin-bottom: 24px;
 `
-const ProposeButtonStyled = styled(ButtonPrimary)`
-  padding: 10px 0;
-  width: 343px;
-`
-
-const ConnectButtonStyled = styled(StatusConnectButton)`
-  padding: 10px 0;
-  width: 343px;
-`

packages/DApp/src/components/directory/DirectoryInfo.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { ConnectButton, InfoWrap, PageInfo } from '../PageInfo'
+import { InfoWrap, PageInfo } from '../PageInfo'
 import { useEthers } from '@usedapp/core'
+import { ConnectButton } from '../ConnectButton'
 
 export function DirectoryInfo() {
   const { account } = useEthers()

packages/DApp/src/components/top/TopBar.tsx

@@ -5,7 +5,7 @@ import { useEthers, shortenAddress } from '@usedapp/core'
 import { Logo } from './Logo'
 import { Colors } from '../../constants/styles'
 import { Animation } from '../../constants/animation'
-import { StatusConnectButton } from '../StatusConnectButton'
+import { ConnectButton } from '../ConnectButton'
 
 export function TopBar() {
   const { account, deactivate } = useEthers()
@@ -58,7 +58,7 @@ export function TopBar() {
               </ButtonDisconnect>
             </AccountWrap>
           ) : (
-            <ButtonConnect>Connect</ButtonConnect>
+            <ButtonConnect text={'Connect'} />
           )}
         </MenuContent>
       </HeaderWrapper>
@@ -163,8 +163,10 @@ const StyledNavLink = styled(NavLink)`
     }
   }
 `
-const ButtonConnect = styled(StatusConnectButton)`
+
+const ButtonConnect = styled(ConnectButton)`
   padding: 10px 27px;
+  width: auto;
 `
 
 const AccountWrap = styled.div`

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

@@ -1,10 +1,12 @@
 import React, { useState } from 'react'
-import { InfoWrap, ConnectButton, ProposeButton, PageInfo } from '../PageInfo'
+import { InfoWrap, PageInfo } from '../PageInfo'
 import { useEthers } from '@usedapp/core'
 import { Modal } from '../Modal'
 import { ProposeModal } from '../card/ProposeModal'
 import { VoteConfirmModal } from '../card/VoteConfirmModal'
 import { CommunityDetail } from '../../models/community'
+import { ProposeButton } from '../Button'
+import { ConnectButton } from '../ConnectButton'
 
 export function VotesInfo() {
   const { account } = useEthers()
@@ -43,7 +45,11 @@ export function VotesInfo() {
         </Modal>
       )}
 
-      {account ? <ProposeButton onClick={() => setShowProposeModal(true)} /> : <ConnectButton />}
+      {account ? (
+        <ProposeButton onClick={() => setShowProposeModal(true)}>Propose community</ProposeButton>
+      ) : (
+        <ConnectButton />
+      )}
     </InfoWrap>
   )
 }