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

Standard boxing for account banners (#2846)

Browse Source
This commit is contained in:
Jaco Greeff 2020-05-28 14:53:35 +02:00 committed by GitHub
parent 46cdb022bd
commit 2b9752f188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/page-accounts/src/Accounts/Banner.tsx
View File

@ -13,43 +13,21 @@ interface Props {
function Banner ({ children, className = '', type }: Props): React.ReactElement<Props> | null {
return (
<div className={`${className} ${type}`}>
<article className={`${className} ${type} nomargin`}>
<div className='box'>
<div className='info'>
{children}
</div>
{children}
</div>
</div>
</article>
);
}
export default React.memo(styled(Banner)`
padding: 0 0.5rem 0.5rem;
&.error {
.box {
background: #fdd;
border-left-color: #9f3a38;
color: #9f3a38;
}
}
&.warning {
.box {
background: #fff6e5;
border-left-color: darkorange;
}
&+& {
margin-top: 0.5rem;
}
.box {
border-left-style: solid;
border-left-width: 0.25rem;
border-radius: 0 0.25rem 0.25rem 0;
box-sizing: border-box;
padding: 1rem 1.5rem;
.info {
max-width: 50rem;
}
max-width: 50rem;
padding: 0 0.5rem;
}
`);

2
packages/page-accounts/src/Accounts/BannerClaims.tsx
View File

@ -18,7 +18,7 @@ function BannerExtension (): React.ReactElement | null {
return (
<Banner type='error'>
<p>{t<string>('You have {{claimCount}} accounts that need attestations. Use the Claim Tokens app on the left navigation bar to complete the process. Until you do, your balances for those accounts will not be reflected.', { replace: { claimCount } })}</p>
<p>{t<string>('You have {{claimCount}} accounts that need attestations. Use the Claim Tokens app on the left navigation bar to complete the process. Until you do, your balances for those accounts will not be reflected.', { replace: { claimCount } })}&nbsp;<a href='#/claims'>{t<string>('Claim tokens...')}</a></p>
</Banner>
);
}