diff --git a/packages/page-bounties/src/BountyInfos/VotingSummary.tsx b/packages/page-bounties/src/BountyInfos/VotingSummary.tsx index 4ed206d0b9..1c13bfd69d 100644 --- a/packages/page-bounties/src/BountyInfos/VotingSummary.tsx +++ b/packages/page-bounties/src/BountyInfos/VotingSummary.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; -import type { BountyStatus } from '@polkadot/types/interfaces'; import React, { useMemo } from 'react'; import styled from 'styled-components'; @@ -11,20 +10,17 @@ import { ThemeProps } from '@polkadot/react-components/types'; import { useMembers } from '@polkadot/react-hooks'; import Description from '../Description'; -import { getProposalToDisplay } from '../helpers/extendedStatuses'; import { bountyLabelColor } from '../theme'; import { useTranslation } from '../translate'; interface Props { className?: string; - proposals: DeriveCollectiveProposal[]; - status: BountyStatus; + proposal: DeriveCollectiveProposal; } -function VotingSummary ({ className, proposals, status }: Props): JSX.Element { +function VotingSummary ({ className, proposal }: Props): JSX.Element { const { members } = useMembers(); const { t } = useTranslation(); - const proposal = useMemo(() => getProposalToDisplay(proposals, status), [proposals, status]); const ayes = useMemo(() => proposal?.votes?.ayes?.length, [proposal]); const nays = useMemo(() => proposal?.votes?.nays?.length, [proposal]); const threshold = useMemo(() => proposal?.votes?.threshold.toNumber(), [proposal]); @@ -37,9 +33,11 @@ function VotingSummary ({ className, proposals, status }: Props): JSX.Element { className={className} data-testid='voting-summary' > -

{t('Aye')} {ayes}/{threshold}

-

{t('Nay')} {nays}/{nayThreshold}

- +
+

{t('Aye')} {ayes}/{threshold}

+

{t('Nay')} {nays}/{nayThreshold}

+ ('Voting results')} /> +
)} diff --git a/packages/page-bounties/src/BountyInfos/index.tsx b/packages/page-bounties/src/BountyInfos/index.tsx index 0cb7820f9b..1472b8c135 100644 --- a/packages/page-bounties/src/BountyInfos/index.tsx +++ b/packages/page-bounties/src/BountyInfos/index.tsx @@ -5,20 +5,24 @@ import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; import type { AccountId, BountyStatus } from '@polkadot/types/interfaces'; import BN from 'bn.js'; -import React from 'react'; +import React, { useMemo } from 'react'; +import styled from 'styled-components'; import { AddressSmall } from '@polkadot/react-components'; import { BN_HUNDRED } from '@polkadot/util'; import Description from '../Description'; +import { getProposalToDisplay } from '../helpers/extendedStatuses'; import { useBounties } from '../hooks'; import { useTranslation } from '../translate'; +import VotingLink from '../Voting/VotingLink'; import BountyInfo from './BountyInfo'; import VotingSummary from './VotingSummary'; interface Props { beneficiary?: AccountId; blocksUntilUpdate?: BN; + className?: string; proposals?: DeriveCollectiveProposal[]; status: BountyStatus; } @@ -26,22 +30,19 @@ interface Props { export const BLOCKS_PERCENTAGE_LEFT_TO_SHOW_WARNING = 10; const BLOCKS_LEFT_TO_SHOW_WARNING = new BN('10000'); -function BountyInfos ({ beneficiary, blocksUntilUpdate, proposals, status }: Props): JSX.Element { +function BountyInfos ({ beneficiary, blocksUntilUpdate, className, proposals, status }: Props): JSX.Element { const { t } = useTranslation(); const { bountyUpdatePeriod } = useBounties(); const blocksPercentageLeftToShowWarning = bountyUpdatePeriod?.muln(BLOCKS_PERCENTAGE_LEFT_TO_SHOW_WARNING).div(BN_HUNDRED); const blocksToShowWarning = blocksPercentageLeftToShowWarning ?? BLOCKS_LEFT_TO_SHOW_WARNING; + const proposalToDisplay = useMemo(() => proposals && getProposalToDisplay(proposals, status), [proposals, status]); return ( - <> - {proposals && ( - - )} +
+ {proposalToDisplay && } + {proposalToDisplay && } {beneficiary && (
@@ -66,8 +67,12 @@ function BountyInfos ({ beneficiary, blocksUntilUpdate, proposals, status }: Pro type='info' /> )} - +
); } -export default React.memo(BountyInfos); +export default React.memo(styled(BountyInfos)` + display: flex; + justify-content: space-between; + align-items: center; +`); diff --git a/packages/page-bounties/src/Voting/VotersColumn.tsx b/packages/page-bounties/src/Voting/VotersColumn.tsx index 87930e3c5b..a81ea104c1 100644 --- a/packages/page-bounties/src/Voting/VotersColumn.tsx +++ b/packages/page-bounties/src/Voting/VotersColumn.tsx @@ -59,6 +59,8 @@ function VotersColumn ({ className, option, proposals, status }: Props): React.R } export default React.memo(styled(VotersColumn)(({ theme }: ThemeProps) => ` + width: 50%; + .vote-numbers { display: flex; align-items: center; diff --git a/packages/page-bounties/src/Voting/VotingLink.tsx b/packages/page-bounties/src/Voting/VotingLink.tsx new file mode 100644 index 0000000000..bc60d1f7ce --- /dev/null +++ b/packages/page-bounties/src/Voting/VotingLink.tsx @@ -0,0 +1,27 @@ +// Copyright 2017-2021 @polkadot/app-bounties authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import styled from 'styled-components'; + +import Description from '../Description'; +import { useTranslation } from '../translate'; + +interface Props { + className?: string; +} + +function VotingLink ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); + + return ( +
+ {t('Voting')} + ('Go to motions panel')} /> +
+ ); +} + +export default React.memo(styled(VotingLink)` + margin: 0 1rem 0 0 +`); diff --git a/packages/page-treasury/src/Overview/Proposal.tsx b/packages/page-treasury/src/Overview/Proposal.tsx index 11312d024c..9a44582666 100644 --- a/packages/page-treasury/src/Overview/Proposal.tsx +++ b/packages/page-treasury/src/Overview/Proposal.tsx @@ -16,7 +16,6 @@ interface Props { className?: string; isMember: boolean; members: string[]; - onRespond: () => void; proposal: DeriveTreasuryProposal; withSend: boolean; } diff --git a/packages/page-treasury/src/Overview/Proposals.tsx b/packages/page-treasury/src/Overview/Proposals.tsx index c695fbbe37..0604fcfc55 100644 --- a/packages/page-treasury/src/Overview/Proposals.tsx +++ b/packages/page-treasury/src/Overview/Proposals.tsx @@ -3,8 +3,7 @@ import type { DeriveTreasuryProposal } from '@polkadot/api-derive/types'; -import React, { useCallback, useMemo } from 'react'; -import { useHistory } from 'react-router-dom'; +import React, { useMemo } from 'react'; import { Table } from '@polkadot/react-components'; @@ -21,14 +20,6 @@ interface Props { function ProposalsBase ({ className = '', isApprovals, isMember, members, proposals }: Props): React.ReactElement { const { t } = useTranslation(); - const history = useHistory(); - - const _onRespond = useCallback( - (): void => { - history.push('/council/motions'); - }, - [history] - ); const header = useMemo(() => [ [isApprovals ? t('Approved') : t('Proposals'), 'start', 2], @@ -50,7 +41,6 @@ function ProposalsBase ({ className = '', isApprovals, isMember, members, propos isMember={isMember} key={proposal.id.toString()} members={members} - onRespond={_onRespond} proposal={proposal} withSend={!isApprovals} />