Align info banners on staking (#7395)

packages/page-staking/src/Bags/index.tsx

@@ -6,7 +6,7 @@ import type { BagInfo, BagMap, StashNode } from './types';
 
 import React, { useMemo, useRef, useState } from 'react';
 
-import { Button, Table, ToggleGroup } from '@polkadot/react-components';
+import { Button, MarkWarning, Table, ToggleGroup } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 import Bag from './Bag';
@@ -15,6 +15,7 @@ import useBagsList from './useBagsList';
 import useBagsNodes from './useBagsNodes';
 
 interface Props {
+  className?: string;
   ownStashes?: StakerState[];
 }
 
@@ -24,7 +25,7 @@ function sortNodes (list: BagInfo[], nodes: BagMap, onlyMine: boolean): [BagInfo
     .filter(([, n]) => !onlyMine || !!n);
 }
 
-function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
+function Bags ({ className, ownStashes }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const stashIds = useMemo(
     () => ownStashes
@@ -60,7 +61,7 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
   );
 
   return (
-    <>
+    <div className={className}>
       <Summary
         bags={bags}
         mapOwn={mapOwn}
@@ -72,10 +73,13 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
           value={filterIndex}
         />
       </Button.Group>
-      <article className='warning centered'>
+      <MarkWarning
+        className='warning centered'
+        withIcon={false}
+      >
         <p>{t('The All bags list is composed of bags that each describe a range of active bonded funds of the nominators. In each bag is a list of nodes that correspond to a nominator and their staked funds.')}</p>
         <p>{t('Within the context of a single bag, nodes are not sorted by their stake, but instead placed in insertion order. In other words, the most recently inserted node will be the last node in the bag, regardless of stake. Events like staking rewards or slashes do not automatically put you in a different bag. The bags-list pallet comes with an important permissionless extrinsic: rebag. This allows anyone to specify another account that is in the wrong bag, and place it in the correct one.')}</p>
-      </article>
+      </MarkWarning>
       <Table
         empty={filtered && t<string>('No available bags')}
         emptySpinner={t<string>('Retrieving all available bags, this will take some time')}
@@ -92,7 +96,7 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
           />
         ))}
       </Table>
-    </>
+    </div>
   );
 }
 

packages/page-staking/src/Payouts/index.tsx

@@ -9,7 +9,7 @@ import type { PayoutStash, PayoutValidator } from './types';
 import React, { useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { Button, Table, ToggleGroup } from '@polkadot/react-components';
+import { Button, MarkWarning, Table, ToggleGroup } from '@polkadot/react-components';
 import { useApi, useBlockInterval, useCall, useOwnEraRewards } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { BN, BN_THREE } from '@polkadot/util';
@@ -240,10 +240,13 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React
       </Button.Group>
       <ElectionBanner isInElection={isInElection} />
       {!isLoadingRewards && !stashes?.length && (
-        <article className='warning centered'>
+        <MarkWarning
+          className='warning centered'
+          withIcon={false}
+        >
           <p>{t('Payouts of rewards for a validator can be initiated by any account. This means that as soon as a validator or nominator requests a payout for an era, all the nominators for that validator will be rewarded. Each user does not need to claim individually and the suggestion is that validators should claim rewards for everybody as soon as an era ends.')}</p>
           <p>{t('If you have not claimed rewards straight after the end of the era, the validator is in the active set and you are seeing no rewards, this would mean that the reward payout transaction was made by another account on your behalf. Always check your favorite explorer to see any historic payouts made to your accounts.')}</p>
-        </article>
+        </MarkWarning>
       )}
       <Table
         empty={!isLoadingRewards && stashes && (

packages/react-components/src/MarkWarning.tsx

@@ -10,12 +10,13 @@ interface Props {
   children?: React.ReactNode;
   className?: string;
   content?: React.ReactNode;
+  withIcon?: boolean;
 }
 
-function MarkWarning ({ children, className = '', content }: Props): React.ReactElement<Props> {
+function MarkWarning ({ children, className = '', content, withIcon = true }: Props): React.ReactElement<Props> {
   return (
     <article className={`mark warning ${className}`}>
-      <Icon icon='exclamation-triangle' />{content}{children}
+      {withIcon && <Icon icon='exclamation-triangle' />}{content}{children}
     </article>
   );
 }