From ce084ccacca6efcdc87ecbab2d709cef76328393 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 30 Aug 2020 18:04:27 +0200
Subject: [PATCH] Align overstaked on actions with red color (#3577)

---
 packages/page-staking/src/Actions/Account/ListNominees.tsx | 1 +
 packages/page-staking/src/Actions/Account/index.tsx        | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/packages/page-staking/src/Actions/Account/ListNominees.tsx b/packages/page-staking/src/Actions/Account/ListNominees.tsx
index e9cebd6fa3..50845a2f7a 100644
--- a/packages/page-staking/src/Actions/Account/ListNominees.tsx
+++ b/packages/page-staking/src/Actions/Account/ListNominees.tsx
@@ -25,6 +25,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
     <>
       {nomsOver && nomsOver.length !== 0 && (
         <Expander
+          className='stakeOver'
           help={t<string>('These validators are active but only the top {{max}} nominators by backing stake will be receiving rewards. The nominating stash is not one of those to be rewarded in the current era.', { replace: max })}
           summary={t<string>('Oversubscribed nominations ({{count}})', { replace: { count: nomsOver.length } })}
         >
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index 15cdfa6fc4..1804c5a7f1 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -347,4 +347,10 @@ export default React.memo(styled(Account)`
     margin-right: 0.25rem;
     vertical-align: inherit;
   }
+
+  .ui--Expander.stakeOver {
+    .ui--Expander-summary {
+      color: darkred;
+    }
+  }
 `);