Added nominations banner to Targets and Staking Overview pages (#130)

Banner is displayed in all Aleph Zero envs

1. Page Staking/Overview

![image](https://github.com/user-attachments/assets/1c2e56bf-697f-4b23-802d-c169066d02c3)

2. Page Staking/Targets


![image](https://github.com/user-attachments/assets/05cde04f-9c5e-4117-81fa-f78be71fe69b)

Author: Marcin-Radecki

packages/page-staking/src/NominationsBanner.tsx

@@ -0,0 +1,21 @@
+// Copyright 2017-2024 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { MarkWarning } from '@polkadot/react-components';
+
+import { useTranslation } from './translate.js';
+
+function ElectionBanner (): React.ReactElement<null> | null {
+  const { t } = useTranslation();
+
+  return (
+    <MarkWarning
+      className='warning centered'
+      content={t('On December 16th, the Mainnet decentralizes as 9 AZF nodes are replaced by community validators in the block finalization committee. If you’re staking with an AZF node, switch to a Community Validator to keep earning rewards!')}
+    />
+  );
+}
+
+export default React.memo(ElectionBanner);

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

@@ -15,6 +15,7 @@ import { useApi, useAvailableSlashes, useSavedFlags } from '@polkadot/react-hook
 import { MAX_NOMINATIONS } from '../constants.js';
 import ElectionBanner from '../ElectionBanner.js';
 import Filtering from '../Filtering.js';
+import NominationsBanner from '../NominationsBanner.js';
 import { useTranslation } from '../translate.js';
 import useIdentities from '../useIdentities.js';
 import Nominate from './Nominate.js';
@@ -255,6 +256,7 @@ function Targets ({ className = '', isInElection, nominatedBy, ownStashes, targe
         totalIssuance={totalIssuance}
         totalStaked={totalStaked}
       />
+      <NominationsBanner />
       <Button.Group>
         <Button
           icon='check'

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

@@ -10,6 +10,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Button, ToggleGroup } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
+import NominationsBanner from '../NominationsBanner.js';
 import { useTranslation } from '../translate.js';
 import ActionsBanner from './ActionsBanner.js';
 import CurrentList from './CurrentList.js';
@@ -63,6 +64,7 @@ function Overview ({ className = '', favorites, hasAccounts, hasQueries, nominat
       {hasAccounts && (ownStashes?.length === 0) && (
         <ActionsBanner />
       )}
+      <NominationsBanner />
       <Button.Group>
         <ToggleGroup
           onChange={setTypeIndex}