neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Tag for society head & council prime (#2454)

Browse Source
This commit is contained in:
Jaco Greeff 2020-03-24 18:05:16 +01:00 committed by GitHub
parent d4fb6765b9
commit fc6523d41d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/page-council/src/Overview/Candidate.tsx
View File

@ -5,8 +5,7 @@
import { AccountId, Balance } from '@polkadot/types/interfaces';
import React from 'react';
import styled from 'styled-components';
import { AddressSmall, Badge, Icon } from '@polkadot/react-components';
import { AddressSmall, Tag } from '@polkadot/react-components';
import { FormatBalance } from '@polkadot/react-query';
import { useTranslation } from '../translate';
@ -24,22 +23,17 @@ function Candidate ({ className, address, balance, isPrime, voters }: Props): Re
const { t } = useTranslation();
return (
<tr className={`${className} ${isPrime ? 'council--isPrime' : ''}`}>
<tr className={className}>
<td className='address'>
<AddressSmall value={address} />
</td>
<td className='council--prime'>
<td className='together top padtop'>
{isPrime && (
<div>
<Badge
hover={t('Prime member')}
info={<Icon name='chess king' />}
isInline
isTooltip
type='green'
/>
<span>&nbsp;{t('prime voter')}</span>
</div>
<Tag
color='green'
hover={t('Current prime member, default voting')}
label={t('prime voter')}
/>
)}
</td>
<td className='top together right'>
@ -56,20 +50,4 @@ function Candidate ({ className, address, balance, isPrime, voters }: Props): Re
);
}
export default React.memo(styled(Candidate)`
&.council--isPrime {
td {
background-color: rgba(239, 255, 239, 0.8) !important;
}
}
.council--prime > div {
display: inline-flex;
align-items: center;
white-space: nowrap;
> span {
color: green;
}
}
`);
export default React.memo(Candidate);

2
packages/page-democracy/src/Overview/Referendum.tsx
View File

@ -79,7 +79,7 @@ function Referendum ({ className, value }: Props): React.ReactElement<Props> | n
)}
</Expander>
</td>
<td className='padtop top'>
<td className='together top padtop'>
{isBoolean(isPassing) && (
<Tag
color={isPassing ? 'green' : 'red'}

41
packages/page-society/src/Overview/Member.tsx
View File

@ -5,8 +5,7 @@
import { DeriveSocietyMember } from '@polkadot/api-derive/types';
import React from 'react';
import styled from 'styled-components';
import { AddressSmall, Badge, Icon } from '@polkadot/react-components';
import { AddressSmall, Tag } from '@polkadot/react-components';
import { useTranslation } from '../translate';
@ -20,24 +19,20 @@ function Member ({ className, isHead, value: { accountId, strikes } }: Props): R
const { t } = useTranslation();
return (
<tr className={`${className} ${isHead && 'society--isHead'}`}>
<tr className={className}>
<td className='address'>
<AddressSmall value={accountId} />
</td>
<td className='society--head'>
<td className='together top padtop'>
{isHead && (
<div>
<Badge
hover={t('Current head')}
info={<Icon name='chess king' />}
isInline
isTooltip
type='green'
/>
<span>&nbsp;{t('society head')}</span>
</div>
<Tag
color='green'
hover={t('Current society head, exempt')}
label={t('society head')}
/>
)}
</td>
<td className='all'>&nbsp;</td>
<td className='number top'>
<label>{t('strikes')}</label>
{strikes.toString()}
@ -46,20 +41,4 @@ function Member ({ className, isHead, value: { accountId, strikes } }: Props): R
);
}
export default React.memo(styled(Member)`
&.society--isHead {
td {
background-color: rgba(239, 255, 239, 0.8) !important;
}
}
.society--head > div {
display: inline-flex;
align-items: center;
white-space: nowrap;
> span {
color: green;
}
}
`);
export default React.memo(Member);

61
packages/page-tech-comm/src/Overview/Members.tsx
View File

@ -5,8 +5,7 @@
import { AccountId } from '@polkadot/types/interfaces';
import React from 'react';
import styled from 'styled-components';
import { AddressSmall, Badge, Icon, Table } from '@polkadot/react-components';
import { AddressSmall, Table, Tag } from '@polkadot/react-components';
import { useTranslation } from '../translate';
@ -25,32 +24,23 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
? (
<Table>
<Table.Body>
{members.map((accountId): React.ReactNode => {
const isPrime = prime?.toString() === accountId.toString();
return (
<tr
className={isPrime ? 'techcomm--isPrime' : ''}
key={accountId.toString()}
>
<td className='all address'>
<AddressSmall value={accountId} />
</td>
<td className='right techcomm--prime'>
{isPrime && (
<div>
<Badge
info={<Icon name='chess king' />}
isInline
type='green'
/>
<span>{' '}{t('prime voter')}</span>
</div>
)}
</td>
</tr>
);
})}
{members.map((accountId): React.ReactNode => (
<tr key={accountId.toString()}>
<td className='all address'>
<AddressSmall value={accountId} />
</td>
<td className='together top padtop'>
{prime?.eq(accountId) && (
<Tag
color='green'
hover={t('Committee prime member, default voting')}
label={t('prime member')}
/>
)}
</td>
<td className='all'>&nbsp;</td>
</tr>
))}
</Table.Body>
</Table>
)
@ -60,17 +50,4 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
);
}
export default React.memo(styled(Members)`
.techcomm--isPrime td {
background: rgba(239, 255, 239, 0.8);
}
.techcomm--prime > div {
display: inline-flex;
align-items: center;
white-space: nowrap;
> span {
color: green;
}
}
`);
export default React.memo(Members);