Identicon and error red shading adjustments for dark theme (#4483)

* lighter read to make it more readable on dark mode

* added missing themeprops ref

* ran linter

packages/apps/src/themes.ts

@@ -30,7 +30,7 @@ export const darkTheme: ThemeDef = {
   borderTabs: 'transparent',
   color: 'rgba(244, 242, 240, 0.9)',
   colorCheckbox: 'rgba(78, 78, 78, 0.66)',
-  colorError: 'rgba(255, 0, 0, 0.85)',
+  colorError: 'rgba(255, 83, 83, 0.8)',
   colorLabel: 'rgba(244, 242, 240, 0.45)',
   colorSummary: 'rgba(244, 242, 240, 0.75)',
   contentHalfWidth: `${MAX_WIDTH / 2}px`,

packages/page-staking/src/index.tsx

@@ -202,6 +202,13 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
   .ui--Expander.stakeOver {
     .ui--Expander-summary {
       color: ${theme.colorError};
+
+    ${theme.theme === 'dark'
+    ? `
+        font-weight: bold;
+    `
+    : ''};
+
     }
   }
 `));

packages/react-components/src/IdentityIcon/index.tsx

@@ -7,6 +7,7 @@ import React, { useCallback, useContext } from 'react';
 import styled from 'styled-components';
 
 import { getSystemIcon } from '@polkadot/apps-config';
+import { ThemeProps } from '@polkadot/react-components/types';
 import { useApi } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import { settings } from '@polkadot/ui-settings';
@@ -59,9 +60,19 @@ function IdentityIcon ({ className = '', prefix, size = 24, theme, value }: Prop
   );
 }
 
-export default React.memo(styled(IdentityIcon)`
-  border: 1px solid #ddd;
-  border-radius: 50%;
-  display: inline-block;
-  overflow: hidden;
-`);
+export default React.memo(styled(IdentityIcon)(({ theme }: ThemeProps) => `
+
+    ${theme.theme === 'dark'
+    ? `
+        circle:first-child {
+            fill: #282829;
+        }
+    `
+    : ''}
+
+    border: 1px solid ${theme.theme === 'dark' ? 'transparent' : '#ddd'};
+    border-radius: 50%;
+    display: inline-block;
+    overflow: hidden;
+
+`));

packages/react-query/src/FormatBalance.tsx

@@ -122,7 +122,7 @@ export default React.memo(styled(FormatBalance)(({ theme }: ThemeProps) => `
 
     > .ui--FormatBalance-postfix {
       font-weight: ${theme.fontWeightLight};
-      opacity: 0.7;
+      opacity: ${theme.theme === 'light' ? '0.7' : '1'};
       vertical-align: baseline;
     }
   }