diff --git a/packages/page-accounts/src/Accounts/Banner.tsx b/packages/page-accounts/src/Accounts/Banner.tsx index 70d45b5d1b..f6c74a1cfe 100644 --- a/packages/page-accounts/src/Accounts/Banner.tsx +++ b/packages/page-accounts/src/Accounts/Banner.tsx @@ -13,43 +13,21 @@ interface Props { function Banner ({ children, className = '', type }: Props): React.ReactElement | null { return ( -
+
-
- {children} -
+ {children}
-
+ ); } 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; } `); diff --git a/packages/page-accounts/src/Accounts/BannerClaims.tsx b/packages/page-accounts/src/Accounts/BannerClaims.tsx index e35ac822e9..d6f0d60a76 100644 --- a/packages/page-accounts/src/Accounts/BannerClaims.tsx +++ b/packages/page-accounts/src/Accounts/BannerClaims.tsx @@ -18,7 +18,7 @@ function BannerExtension (): React.ReactElement | null { return ( -

{t('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 } })}

+

{t('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 } })} {t('Claim tokens...')}

); }