From 2e8fc91ae7fe3526fb3100c37e7a36437daba19c Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Tue, 19 Apr 2022 11:48:54 +0200
Subject: [PATCH] Align info banners on staking (#7395)

---
 packages/page-staking/src/Bags/index.tsx      | 16 ++++++++++------
 packages/page-staking/src/Payouts/index.tsx   |  9 ++++++---
 packages/react-components/src/MarkWarning.tsx |  5 +++--
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/page-staking/src/Bags/index.tsx b/packages/page-staking/src/Bags/index.tsx
index 52d157c719..eac9c2a6b7 100644
--- a/packages/page-staking/src/Bags/index.tsx
+++ b/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>
   );
 }
 
diff --git a/packages/page-staking/src/Payouts/index.tsx b/packages/page-staking/src/Payouts/index.tsx
index 3aed15f4aa..b39b836f52 100644
--- a/packages/page-staking/src/Payouts/index.tsx
+++ b/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 && (
diff --git a/packages/react-components/src/MarkWarning.tsx b/packages/react-components/src/MarkWarning.tsx
index 4be8da0e5f..ccbe53de0d 100644
--- a/packages/react-components/src/MarkWarning.tsx
+++ b/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>
   );
 }