From 2209078f5cf0f037a948153a621c9ffa4174ddae Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 14 Mar 2020 08:49:50 +0100
Subject: [PATCH] Adjust UI highlights based on chain/node color settings
 (#2384)

* Adjust app hightlights

* Default fallback
---
 packages/apps-config/src/ui/general/index.ts  |  8 +--
 .../apps/public/locales/zh/app-staking.json   |  1 +
 packages/apps/src/Apps.tsx                    |  6 +--
 packages/page-accounts/src/Account.tsx        |  1 -
 packages/page-accounts/src/Overview.tsx       |  4 --
 packages/page-address-book/src/Address.tsx    |  1 -
 packages/page-address-book/src/Overview.tsx   |  1 -
 packages/page-contracts/src/Codes/index.tsx   |  1 -
 .../page-contracts/src/Contracts/index.tsx    |  2 -
 packages/page-council/src/Motions/Propose.tsx |  1 -
 .../page-council/src/Motions/Slashing.tsx     |  1 -
 .../src/Overview/SubmitCandidacy.tsx          |  1 -
 packages/page-council/src/Overview/Vote.tsx   |  1 -
 .../src/Overview/PreImageButton.tsx           |  1 -
 .../page-democracy/src/Overview/Seconding.tsx |  1 -
 .../page-democracy/src/Overview/Voting.tsx    |  1 -
 .../page-democracy/src/Overview/index.tsx     |  2 -
 packages/page-extrinsics/src/Selection.tsx    |  2 +-
 packages/page-generic-asset/src/Assets.tsx    |  1 -
 .../page-parachains/src/Overview/Register.tsx |  1 -
 packages/page-settings/src/Developer.tsx      |  2 -
 packages/page-settings/src/General.tsx        | 28 +++++++----
 .../src/Overview/DefenderVoting.tsx           |  1 -
 .../src/Actions/Account/index.tsx             | 11 +---
 packages/page-staking/src/Actions/index.tsx   |  1 -
 .../page-storage/src/Selection/Modules.tsx    |  1 -
 .../page-tech-comm/src/Proposals/index.tsx    |  1 -
 packages/page-toolbox/src/Rpc/Selection.tsx   |  1 -
 packages/page-toolbox/src/Sign.tsx            |  2 -
 .../page-treasury/src/Overview/Propose.tsx    |  1 -
 packages/react-components/src/Password.tsx    |  1 -
 packages/react-components/src/Spinner.tsx     |  4 +-
 packages/react-components/src/styles/index.ts | 50 ++++++++++++++++---
 packages/react-components/src/styles/theme.ts | 48 ++++++++----------
 packages/react-hooks/src/useOwnEraRewards.ts  |  2 +-
 35 files changed, 97 insertions(+), 95 deletions(-)

diff --git a/packages/apps-config/src/ui/general/index.ts b/packages/apps-config/src/ui/general/index.ts
index c66be88156..847e58ff97 100644
--- a/packages/apps-config/src/ui/general/index.ts
+++ b/packages/apps-config/src/ui/general/index.ts
@@ -28,10 +28,10 @@ const chainColors: Record<string, any> = [
 // overrides based on the actual software node type (all '-' converted to ' ')
 const nodeColors: Record<string, any> = [
   ['centrifuge chain', nodeCentrifuge],
-  ['edgeware node', nodeEdgeware],
-  ['node template', emptyColor],
-  ['parity polkadot', emptyColor],
-  ['substrate node', emptyColor]
+  ['edgeware node', nodeEdgeware]
+  // ['node template', emptyColor],
+  // ['parity polkadot', emptyColor],
+  // ['substrate node', emptyColor]
 ].reduce((colors, [node, color]): Record<string, any> => ({
   ...colors,
   [node.toLowerCase().replace(/-/g, ' ')]: color
diff --git a/packages/apps/public/locales/zh/app-staking.json b/packages/apps/public/locales/zh/app-staking.json
index 90ed80c48c..f39aeb1485 100644
--- a/packages/apps/public/locales/zh/app-staking.json
+++ b/packages/apps/public/locales/zh/app-staking.json
@@ -12,6 +12,7 @@
   "controller": "控制器",
   "Stop Nominating": "停止提名",
   "Stop Validating": "停止验证",
+  "Stop": "停止",
   "Set Session Key": "设置会话key",
   "Validate": "验证",
   "Nominate": "提名",
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index ac24539623..c9b82aff1e 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -7,7 +7,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 import React, { useCallback, useMemo, useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
-import { defaultColor, chainColors, emptyColor, nodeColors } from '@polkadot/apps-config/ui/general';
+import { defaultColor, chainColors, nodeColors } from '@polkadot/apps-config/ui/general';
 import GlobalStyle from '@polkadot/react-components/styles';
 import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
@@ -41,8 +41,8 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
     ...store.get('sidebar', {}),
     isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
   });
-  const uiHighlight = useMemo((): string => {
-    return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)] || emptyColor;
+  const uiHighlight = useMemo((): string | undefined => {
+    return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
   }, [systemChain, systemName]);
   const { isCollapsed, isMenu, isMenuOpen } = sidebar;
 
diff --git a/packages/page-accounts/src/Account.tsx b/packages/page-accounts/src/Account.tsx
index 50c1abb30f..86c9e650c5 100644
--- a/packages/page-accounts/src/Account.tsx
+++ b/packages/page-accounts/src/Account.tsx
@@ -335,7 +335,6 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
       <td className='number top'>
         <Button
           icon='paper plane'
-          isPrimary
           label={t('send')}
           onClick={toggleTransfer}
           size='small'
diff --git a/packages/page-accounts/src/Overview.tsx b/packages/page-accounts/src/Overview.tsx
index 650cee4c6e..5439bb2a75 100644
--- a/packages/page-accounts/src/Overview.tsx
+++ b/packages/page-accounts/src/Overview.tsx
@@ -90,21 +90,18 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
       <Button.Group>
         <Button
           icon='add'
-          isPrimary
           label={t('Add account')}
           onClick={toggleCreate}
         />
         <Button.Or />
         <Button
           icon='sync'
-          isPrimary
           label={t('Restore JSON')}
           onClick={toggleImport}
         />
         <Button.Or />
         <Button
           icon='qrcode'
-          isPrimary
           label={t('Add via Qr')}
           onClick={toggleQr}
         />
@@ -113,7 +110,6 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
             <Button.Or />
             <Button
               icon='question'
-              isPrimary
               label={t('Query Ledger')}
               onClick={queryLedger}
             />
diff --git a/packages/page-address-book/src/Address.tsx b/packages/page-address-book/src/Address.tsx
index 95182769f8..fb1179952b 100644
--- a/packages/page-address-book/src/Address.tsx
+++ b/packages/page-address-book/src/Address.tsx
@@ -248,7 +248,6 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
       <td className='number top'>
         <Button
           icon='paper plane'
-          isPrimary
           key='deposit'
           label={t('deposit')}
           onClick={_toggleTransfer}
diff --git a/packages/page-address-book/src/Overview.tsx b/packages/page-address-book/src/Overview.tsx
index 8fe7232aae..10af7bd2d2 100644
--- a/packages/page-address-book/src/Overview.tsx
+++ b/packages/page-address-book/src/Overview.tsx
@@ -46,7 +46,6 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
       <Button.Group>
         <Button
           icon='add'
-          isPrimary
           label={t('Add contact')}
           onClick={_toggleCreate}
         />
diff --git a/packages/page-contracts/src/Codes/index.tsx b/packages/page-contracts/src/Codes/index.tsx
index a3466eac28..6e53c14d6a 100644
--- a/packages/page-contracts/src/Codes/index.tsx
+++ b/packages/page-contracts/src/Codes/index.tsx
@@ -40,7 +40,6 @@ class Codes extends React.PureComponent<Props, State> {
             <Button.Group>
               <Button
                 icon='upload'
-                isPrimary
                 label={t('Upload WASM')}
                 onClick={this.showUpload}
               />
diff --git a/packages/page-contracts/src/Contracts/index.tsx b/packages/page-contracts/src/Contracts/index.tsx
index 104b409ec8..f020f7f5c1 100644
--- a/packages/page-contracts/src/Contracts/index.tsx
+++ b/packages/page-contracts/src/Contracts/index.tsx
@@ -79,7 +79,6 @@ export default function Contracts (props: Props): React.ReactElement<Props> {
               <>
                 <Button
                   icon='cloud upload'
-                  isPrimary
                   label={t('Deploy a code hash')}
                   onClick={showDeploy()}
                 />
@@ -88,7 +87,6 @@ export default function Contracts (props: Props): React.ReactElement<Props> {
             )}
             <Button
               icon='add'
-              isPrimary
               label={t('Add an existing contract')}
               onClick={_toggleAdd}
             />
diff --git a/packages/page-council/src/Motions/Propose.tsx b/packages/page-council/src/Motions/Propose.tsx
index 4c9aa9fd59..cb74ec0335 100644
--- a/packages/page-council/src/Motions/Propose.tsx
+++ b/packages/page-council/src/Motions/Propose.tsx
@@ -74,7 +74,6 @@ class Propose extends TxModal<Props, State> {
     return (
       <Button
         isDisabled={!isMember}
-        isPrimary
         label={t('Propose motion')}
         icon='add'
         onClick={this.showModal}
diff --git a/packages/page-council/src/Motions/Slashing.tsx b/packages/page-council/src/Motions/Slashing.tsx
index e097f26d4f..79391af2cb 100644
--- a/packages/page-council/src/Motions/Slashing.tsx
+++ b/packages/page-council/src/Motions/Slashing.tsx
@@ -66,7 +66,6 @@ export default function Slashing ({ className, isMember, members }: Props): Reac
       <Button
         icon='cancel'
         isDisabled={!isMember || !members.length || !slashes.length}
-        isPrimary
         label={t('Cancel slashes')}
         onClick={toggleVisible}
       />
diff --git a/packages/page-council/src/Overview/SubmitCandidacy.tsx b/packages/page-council/src/Overview/SubmitCandidacy.tsx
index 42d972f92a..4d032ce14c 100644
--- a/packages/page-council/src/Overview/SubmitCandidacy.tsx
+++ b/packages/page-council/src/Overview/SubmitCandidacy.tsx
@@ -39,7 +39,6 @@ class SubmitCandidacy extends TxModal<Props, State> {
 
     return (
       <Button
-        isPrimary
         label={t('Submit candidacy')}
         icon='add'
         onClick={this.showModal}
diff --git a/packages/page-council/src/Overview/Vote.tsx b/packages/page-council/src/Overview/Vote.tsx
index 8a4bf1005f..fcc07972cc 100644
--- a/packages/page-council/src/Overview/Vote.tsx
+++ b/packages/page-council/src/Overview/Vote.tsx
@@ -78,7 +78,6 @@ class Vote extends TxModal<Props, State> {
     return (
       <Button
         isDisabled={available.length === 0}
-        isPrimary
         label={this.props.t('Vote')}
         icon='check'
         onClick={this.showModal}
diff --git a/packages/page-democracy/src/Overview/PreImageButton.tsx b/packages/page-democracy/src/Overview/PreImageButton.tsx
index 59d4b6b9cd..ce967ec805 100644
--- a/packages/page-democracy/src/Overview/PreImageButton.tsx
+++ b/packages/page-democracy/src/Overview/PreImageButton.tsx
@@ -31,7 +31,6 @@ function PreImageButton ({ hash, isImminent, proposal, withoutOr }: Props): Reac
       {!withoutOr && <Button.Or />}
       <Button
         icon='plus'
-        isPrimary
         label={t('Preimage')}
         onClick={togglePreimage}
       />
diff --git a/packages/page-democracy/src/Overview/Seconding.tsx b/packages/page-democracy/src/Overview/Seconding.tsx
index 245ef72693..07e8bb0729 100644
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@@ -65,7 +65,6 @@ function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactEle
         </Modal>
       )}
       <Button
-        isPrimary
         label={t('Second')}
         icon='toggle off'
         onClick={toggleSeconding}
diff --git a/packages/page-democracy/src/Overview/Voting.tsx b/packages/page-democracy/src/Overview/Voting.tsx
index 6c7323ed91..6941b68258 100644
--- a/packages/page-democracy/src/Overview/Voting.tsx
+++ b/packages/page-democracy/src/Overview/Voting.tsx
@@ -87,7 +87,6 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
       )}
       <Button
         icon='check'
-        isPrimary
         label={t('Vote')}
         onClick={toggleVoting}
       />
diff --git a/packages/page-democracy/src/Overview/index.tsx b/packages/page-democracy/src/Overview/index.tsx
index 0293f71dd6..a9fa4c6a6f 100644
--- a/packages/page-democracy/src/Overview/index.tsx
+++ b/packages/page-democracy/src/Overview/index.tsx
@@ -31,14 +31,12 @@ function Overview ({ className }: Props): React.ReactElement {
       <Button.Group>
         <Button
           icon='add'
-          isPrimary
           label={t('Submit preimage')}
           onClick={togglePreimage}
         />
         <Button.Or />
         <Button
           icon='add'
-          isPrimary
           label={t('Submit proposal')}
           onClick={togglePropose}
         />
diff --git a/packages/page-extrinsics/src/Selection.tsx b/packages/page-extrinsics/src/Selection.tsx
index 1e27773498..76af58a4b3 100644
--- a/packages/page-extrinsics/src/Selection.tsx
+++ b/packages/page-extrinsics/src/Selection.tsx
@@ -66,7 +66,7 @@ class Selection extends TxComponent<Props, State> {
             accountId={accountId}
             icon='sign-in'
             isDisabled={!isValid}
-            isPrimary
+            isPrimary={false}
             extrinsic={extrinsic}
             label={t('Submit Transaction')}
           />
diff --git a/packages/page-generic-asset/src/Assets.tsx b/packages/page-generic-asset/src/Assets.tsx
index a2b5756a55..5490fb7125 100644
--- a/packages/page-generic-asset/src/Assets.tsx
+++ b/packages/page-generic-asset/src/Assets.tsx
@@ -32,7 +32,6 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
       buttons={
         <Button.Group>
           <Button
-            isPrimary
             label={t('Register Asset')}
             icon='registered'
             onClick={_toggleCreate}
diff --git a/packages/page-parachains/src/Overview/Register.tsx b/packages/page-parachains/src/Overview/Register.tsx
index 9957e8b3e1..fdfc2898f1 100644
--- a/packages/page-parachains/src/Overview/Register.tsx
+++ b/packages/page-parachains/src/Overview/Register.tsx
@@ -79,7 +79,6 @@ export default function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props)
     <>
       <div className='ui--Row-buttons'>
         <Button
-          isPrimary
           label={t('Register a parachain')}
           icon='add'
           onClick={onOpen}
diff --git a/packages/page-settings/src/Developer.tsx b/packages/page-settings/src/Developer.tsx
index e807617f7c..ae7743a93e 100644
--- a/packages/page-settings/src/Developer.tsx
+++ b/packages/page-settings/src/Developer.tsx
@@ -146,7 +146,6 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
       </div>
       <Button.Group>
         <Button
-          isNegative
           onClick={_clearTypes}
           label={t('Reset')}
           icon='sync'
@@ -154,7 +153,6 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
         <Button.Or />
         <Button
           isDisabled={!isTypesValid || !isJsonValid}
-          isPrimary
           onClick={_saveDeveloper}
           label={t('Save')}
           icon='save'
diff --git a/packages/page-settings/src/General.tsx b/packages/page-settings/src/General.tsx
index a573588fdb..1dc3768750 100644
--- a/packages/page-settings/src/General.tsx
+++ b/packages/page-settings/src/General.tsx
@@ -4,7 +4,7 @@
 
 import { Option } from '@polkadot/apps-config/settings/types';
 
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { availableLanguages, availableSs58 } from '@polkadot/apps-config/settings';
 import { isLedgerCapable } from '@polkadot/react-api';
 import { Button, ButtonCancel, Dropdown } from '@polkadot/react-components';
@@ -52,14 +52,22 @@ export default function General ({ className, isModalContent, onClose }: Props):
     );
   }, [settings]);
 
-  const _handleChange = (key: keyof SettingsStruct) => <T extends string | number>(value: T): void => {
-    setSettings({ ...settings, [key]: value });
-  };
-  const _saveAndReload = (): void => saveAndReload(settings);
-  const _save = (): void => {
-    save(settings);
-    setChanged(null);
-  };
+  const _handleChange = useCallback(
+    (key: keyof SettingsStruct) => <T extends string | number>(value: T): void =>
+      setSettings((settings) => ({ ...settings, [key]: value })),
+    []
+  );
+  const _saveAndReload = useCallback(
+    (): void => saveAndReload(settings),
+    [settings]
+  );
+  const _save = useCallback(
+    (): void => {
+      save(settings);
+      setChanged(null);
+    },
+    [settings]
+  );
 
   const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
 
@@ -125,7 +133,7 @@ export default function General ({ className, isModalContent, onClose }: Props):
         )}
         <Button
           isDisabled={changed === null}
-          isPrimary
+          isPrimary={isModalContent}
           onClick={
             changed
               ? _saveAndReload
diff --git a/packages/page-society/src/Overview/DefenderVoting.tsx b/packages/page-society/src/Overview/DefenderVoting.tsx
index 5b5c5dcdb1..7346b4aa25 100644
--- a/packages/page-society/src/Overview/DefenderVoting.tsx
+++ b/packages/page-society/src/Overview/DefenderVoting.tsx
@@ -57,7 +57,6 @@ export default function DefenderVoting ({ isMember, ownMembers }: Props): React.
       <Button
         icon='check'
         isDisabled={!isMember}
-        isPrimary
         label={t('Vote')}
         onClick={toggleVisible}
       />
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index 0e21a70972..fd49a36e9b 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -332,12 +332,8 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                   <TxButton
                     accountId={controllerId}
                     isDisabled={!isOwnController}
-                    isNegative
-                    label={
-                      isStashNominating
-                        ? t('Stop Nominating')
-                        : t('Stop Validating')
-                    }
+                    isPrimary={false}
+                    label={t('Stop')}
                     icon='stop'
                     key='stop'
                     tx='staking.chill'
@@ -349,7 +345,6 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                       ? (
                         <Button
                           isDisabled={!isOwnController}
-                          isPrimary
                           key='set'
                           onClick={toggleSetSession}
                           label={t('Session Key')}
@@ -359,7 +354,6 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                       : (
                         <Button
                           isDisabled={!isOwnController}
-                          isPrimary
                           key='validate'
                           onClick={toggleValidate}
                           label={t('Validate')}
@@ -370,7 +364,6 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
                     <Button.Or key='nominate.or' />
                     <Button
                       isDisabled={!isOwnController}
-                      isPrimary
                       key='nominate'
                       onClick={toggleNominate}
                       label={t('Nominate')}
diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx
index 162f74d6ff..a2c1b7e377 100644
--- a/packages/page-staking/src/Actions/index.tsx
+++ b/packages/page-staking/src/Actions/index.tsx
@@ -68,7 +68,6 @@ function Actions ({ allRewards, allStashes, className, isVisible, next, stakingO
     <div className={`${className} ${!isVisible && 'staking--hidden'}`}>
       <Button.Group>
         <Button
-          isPrimary
           key='new-stake'
           label={t('New stake')}
           icon='add'
diff --git a/packages/page-storage/src/Selection/Modules.tsx b/packages/page-storage/src/Selection/Modules.tsx
index bf208f46df..4a1b81ace6 100644
--- a/packages/page-storage/src/Selection/Modules.tsx
+++ b/packages/page-storage/src/Selection/Modules.tsx
@@ -110,7 +110,6 @@ export default function Modules ({ onAdd }: Props): React.ReactElement<Props> {
         <Button
           icon='plus'
           isDisabled={!isValid}
-          isPrimary
           onClick={_onAdd}
         />
       </div>
diff --git a/packages/page-tech-comm/src/Proposals/index.tsx b/packages/page-tech-comm/src/Proposals/index.tsx
index a0922da4d7..f3dd9fb55d 100644
--- a/packages/page-tech-comm/src/Proposals/index.tsx
+++ b/packages/page-tech-comm/src/Proposals/index.tsx
@@ -27,7 +27,6 @@ export default function Proposals ({ className, members, prime, proposals }: Pro
       )}
       <Button.Group>
         <Button
-          isPrimary
           label={t('Submit proposal')}
           icon='add'
           onClick={togglePropose}
diff --git a/packages/page-toolbox/src/Rpc/Selection.tsx b/packages/page-toolbox/src/Rpc/Selection.tsx
index 7346f48a4f..2b7fef7012 100644
--- a/packages/page-toolbox/src/Rpc/Selection.tsx
+++ b/packages/page-toolbox/src/Rpc/Selection.tsx
@@ -62,7 +62,6 @@ class Selection extends TxComponent<Props, State> {
         <Button.Group>
           <Button
             isDisabled={!isValid}
-            isPrimary
             onClick={this.onSubmit}
             label={t('Submit RPC call')}
             icon='sign-in'
diff --git a/packages/page-toolbox/src/Sign.tsx b/packages/page-toolbox/src/Sign.tsx
index fa69a5ddec..22dda4b3be 100644
--- a/packages/page-toolbox/src/Sign.tsx
+++ b/packages/page-toolbox/src/Sign.tsx
@@ -162,7 +162,6 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
                 {t('You need to unlock this account to be able to sign data.')}<br/>
                 <Button.Group>
                   <Button
-                    isPrimary
                     onClick={_toggleUnlock}
                     label={t('Unlock account')}
                     icon='unlock'
@@ -196,7 +195,6 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
         <Button
           icon='privacy'
           isDisabled={!(isUsable && !isLocked)}
-          isPrimary
           label={t('Sign message')}
           onClick={_onSign}
         />
diff --git a/packages/page-treasury/src/Overview/Propose.tsx b/packages/page-treasury/src/Overview/Propose.tsx
index b062f37f79..db5a59dcfe 100644
--- a/packages/page-treasury/src/Overview/Propose.tsx
+++ b/packages/page-treasury/src/Overview/Propose.tsx
@@ -68,7 +68,6 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
       )}
       <Button
         icon='check'
-        isPrimary
         label={t('Submit proposal')}
         onClick={togglePropose}
       />
diff --git a/packages/react-components/src/Password.tsx b/packages/react-components/src/Password.tsx
index ee623441bf..d54e1d2410 100644
--- a/packages/react-components/src/Password.tsx
+++ b/packages/react-components/src/Password.tsx
@@ -68,7 +68,6 @@ export default function Password ({ autoFocus, children, className, defaultValue
             ? 'hide'
             : 'unhide'
         }
-        isPrimary
         onClick={_toggleVisible}
       />
       {children}
diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx
index 12cc54528a..3b049dcdd0 100644
--- a/packages/react-components/src/Spinner.tsx
+++ b/packages/react-components/src/Spinner.tsx
@@ -19,8 +19,8 @@ function Spinner ({ className, variant = 'app' }: Props): React.ReactElement<Pro
   return (
     <div className={`${className} ui--Spinner ${variant}`}>
       <div className='loader'>
-        <svg className="circular" viewBox="25 25 50 50">
-          <circle className="path" cx="50" cy="50" r="20" fill="none" strokeWidth={strokeWidth} strokeMiterlimit="10"/>
+        <svg className='circular ui--highlight--stroke' viewBox='25 25 50 50'>
+          <circle className='path' cx='50' cy='50' r='20' fill='none' strokeWidth={strokeWidth} strokeMiterlimit='10' />
         </svg>
       </div>
       {variant === 'app' && (
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 932af0a051..ec19acf5ed 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -16,31 +16,67 @@ interface Props {
   uiHighlight?: string;
 }
 
+const defaultHighlight = '#f19135'; // #999
+
 export default createGlobalStyle<Props>`
   .ui--highlight--all {
-    /* .theme--default .ui.blue.progress > .bar */
-    background: ${(props): string => (props.uiHighlight || '#999')} !important;
-    border-color: ${(props): string => (props.uiHighlight || '#999')} !important;
-    color: ${(props): string => (props.uiHighlight || '#999')} !important;
+    background: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
   }
 
   .ui--highlight--bg {
-    background: ${(props): string => (props.uiHighlight || '#999')} !important;
+    background: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
   }
 
   .ui--highlight--border {
     /* .theme--default .ui.menu.tabular > .item.active */
-    border-color: ${(props): string => (props.uiHighlight || '#999')} !important;
+    border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
   }
 
   .ui--highlight--color {
-    color: ${(props): string => (props.uiHighlight || '#999')} !important;
+    color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+  }
+
+  .ui--highlight--fill {
+    fill: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
   }
 
   .ui--highlight--gradient {
     background: ${(props): string => `linear-gradient(90deg, ${props.uiHighlight}, transparent)`};
   }
 
+  .ui--highlight--stroke {
+    stroke: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+  }
+
+  .theme--default {
+    .ui.menu.tabular .item.active {
+      border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    }
+
+    .ui.blue.progress > .bar {
+      background-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
+    }
+
+    .ui.negative.button,
+    .ui.buttons .negative.button {
+      background: #666 !important;
+    }
+
+    .ui.primary.button,
+    .ui.buttons .primary.button {
+      background: ${(props): string => (props.uiHighlight || defaultHighlight)};
+
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: ${(props): string => (props.uiHighlight || defaultHighlight)};
+      }
+    }
+  }
+
   #root {
     color: #4e4e4e;
     font-family: sans-serif;
diff --git a/packages/react-components/src/styles/theme.ts b/packages/react-components/src/styles/theme.ts
index a0e14406d6..111bfb37de 100644
--- a/packages/react-components/src/styles/theme.ts
+++ b/packages/react-components/src/styles/theme.ts
@@ -11,19 +11,21 @@ const colorBtnDefault = '#666';
 const colorBtnHighlight = '#f19135';
 
 /* primary buttons, blue */
-const colorBtnPrimary = '#2e86ab';
+const colorBtnPrimary = colorBtnDefault; // '#2e86ab';
 
 /* button text color */
 const colorBtnText = '#f9f9f9';
 
+const colorLink = '#2e86ab';
+
 export default css`
   .theme--default {
     a {
-      color: ${colorBtnPrimary};
+      color: ${colorLink};
 
       &:hover,
       a:visited {
-        color: ${colorBtnPrimary};
+        color: ${colorLink};
       }
     }
 
@@ -41,38 +43,38 @@ export default css`
       }
 
       &:hover {
-        opacity: 0.8;
+        filter: brightness(120%);
       }
     }
 
     .ui.basic.negative.button {
-      box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
-      color: ${colorBtnHighlight} !important;
+      // box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
+      // color: ${colorBtnHighlight} !important;
     }
 
     .ui.negative.button,
     .ui.buttons .negative.button {
-      background-color: ${colorBtnHighlight};
+      // background-color: ${colorBtnHighlight};
 
-      &.active,
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: ${colorBtnHighlight};
-      }
+      // &.active,
+      // &:active,
+      // &:focus,
+      // &:hover {
+      //   background-color: ${colorBtnHighlight};
+      // }
     }
 
     .ui.primary.button,
     .ui.buttons .primary.button
     /*, .ui.primary.buttons .button (for dropdowns) */ {
-      background-color: ${colorBtnPrimary};
+      // background-color: ${colorBtnPrimary};
 
-      &.active,
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: ${colorBtnPrimary};
-      }
+      // &.active,
+      // &:active,
+      // &:focus,
+      // &:hover {
+      //   background-color: ${colorBtnPrimary};
+      // }
     }
 
     .ui.blue.progress .bar {
@@ -103,11 +105,5 @@ export default css`
     .ui.toggle.checkbox input:checked~label:before {
       background-color: ${colorBtnHighlight} !important;
     }
-
-    .ui--Spinner {
-      .loader svg {
-        stroke: ${colorBtnPrimary};
-      }
-    }
   }
 `;
diff --git a/packages/react-hooks/src/useOwnEraRewards.ts b/packages/react-hooks/src/useOwnEraRewards.ts
index 81d07bcd82..164829655e 100644
--- a/packages/react-hooks/src/useOwnEraRewards.ts
+++ b/packages/react-hooks/src/useOwnEraRewards.ts
@@ -21,7 +21,7 @@ function useNextPayouts (onlyLatest?: boolean): [string, BN][] | undefined {
   const { api, isApiReady } = useApi();
   const stashIds = useOwnStashIds();
   const allInfo = useCall<DerivedStakingQuery[]>(isApiReady && stashIds && api.derive.staking?.queryMulti, stashIds);
-  const indexes = useCall<DeriveSessionIndexes>(isApiReady && api.derive.session.indexes, []);
+  const indexes = useCall<DeriveSessionIndexes>(isApiReady && api.derive.session?.indexes, []);
   const [nextPayouts, setNextPayouts] = useState<[string, BN][] | undefined>();
 
   useEffect((): void => {