diff --git a/packages/apps/src/themes.ts b/packages/apps/src/themes.ts index 8566b4f928..7e49be5645 100644 --- a/packages/apps/src/themes.ts +++ b/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`, diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index cd12ffc730..1bd4f988a7 100644 --- a/packages/page-staking/src/index.tsx +++ b/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; + ` + : ''}; + } } `)); diff --git a/packages/react-components/src/IdentityIcon/index.tsx b/packages/react-components/src/IdentityIcon/index.tsx index 3151ab9c57..ca2321ac2f 100644 --- a/packages/react-components/src/IdentityIcon/index.tsx +++ b/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; + +`)); diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx index ac686dc60c..7df1f30116 100644 --- a/packages/react-query/src/FormatBalance.tsx +++ b/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; } }