Tiny UI adjustments (#3608)

CHANGELOG.md

@@ -1,5 +1,29 @@
 # CHANGELOG
 
+## 0.57-beta.x
+
+Contributed:
+
+- Add Crust network (Thanks to https://github.com/zikunfan)
+- i18n Chinese round-out (Thanks to Polkaworld)
+- i18n Italian (Thanks to https://github.com/fomod-in)
+- Initial i18n Italian (Thanks to https://github.com/excerebrose)
+- i18n Bahasa Indonesian updates (Thanks to https://github.com/nzjourney)
+- Ad per-block/end-block vesting info (thanks to https://github.com/niklabh)
+- Update Polkastats logo (https://github.com/mariopino)
+- Fixes for i18n translation page on swapping (Thanks to https://github.com/motinados)
+
+Changes:
+
+- Add individual era-slash cancels on staking sleashes page
+- Add "copy seed" button to align with the extension UX on new accounts
+- Combine confirmation/backup of imports/new account into the modals (no double-modal)
+- Fix ecdsa JSON import dialogs
+- Fix detection of old/new proxy chains based on args to support Kusama 2023
+- Ensure all network-related configs are maintainable
+- Adjust average calcs for targets (optimization)
+
+
 ## 0.56.1 Aug 31, 2020
 
 Contributed:
@@ -10,7 +34,7 @@ Contributed:
 - Add Phala POC2 testnet (Thanks to https://github.com/krhougs)
 - Add Plasm network (Thanks to https://github.com/akru)
 - Rename Darwinia Crab chain (Thanks to https://github.com/WoeOm)
-- Add I18n For Bahasa Indonesian (Thanks to https://github.com/nzjourney)
+- Add I18n for Bahasa Indonesian (Thanks to https://github.com/nzjourney)
 
 Changes:
 

packages/react-components/src/AddressInfo.tsx

@@ -7,6 +7,7 @@ import { BlockNumber, LockIdentifier, ValidatorPrefsTo145 } from '@polkadot/type
 
 import BN from 'bn.js';
 import React from 'react';
+import { TFunction } from 'i18next';
 import styled from 'styled-components';
 import { BN_ZERO, formatBalance, formatNumber, hexToString, isObject } from '@polkadot/util';
 import { Expander, Icon, Tooltip } from '@polkadot/react-components';
@@ -143,7 +144,7 @@ function calcBonded (stakingInfo?: DeriveStakingAccount, bonded?: boolean | BN[]
   return [own, other];
 }
 
-function renderExtended ({ address, balancesAll, withExtended }: Props, t: <T = string> (key: string) => T): React.ReactNode {
+function renderExtended ({ address, balancesAll, withExtended }: Props, t: TFunction): React.ReactNode {
   const extendedDisplay = withExtended === true
     ? DEFAULT_EXTENDED
     : withExtended || undefined;
@@ -173,7 +174,7 @@ function renderExtended ({ address, balancesAll, withExtended }: Props, t: <T =
   );
 }
 
-function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Props, t: <T = string> (key: string) => T): React.ReactNode {
+function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Props, t: TFunction): React.ReactNode {
   const validatorPrefsDisplay = withValidatorPrefs === true
     ? DEFAULT_PREFS
     : withValidatorPrefs;
@@ -215,7 +216,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
   );
 }
 
-function renderBalances (props: Props, allAccounts: string[], bestNumber: BlockNumber | undefined, t: <T = string> (key: string) => T): React.ReactNode {
+function renderBalances (props: Props, allAccounts: string[], bestNumber: BlockNumber | undefined, t: TFunction): React.ReactNode {
   const { address, balancesAll, democracyLocks, stakingInfo, withBalance = true, withBalanceToggle = false } = props;
   const balanceDisplay = withBalance === true
     ? DEFAULT_BALANCES
@@ -272,12 +273,10 @@ function renderBalances (props: Props, allAccounts: string[], bestNumber: BlockN
                 <div>
                   {formatBalance(balancesAll.vestedClaimable, { forceUnit: '-' })}
                   <div className='faded'>{t('available to be unlocked')}</div>
+                  <BlockToTime blocks={balancesAll.vestingEndBlock.sub(bestNumber)} />
+                  <div className='faded'>{t('until block')} {formatNumber(balancesAll.vestingEndBlock)}</div>
                   {formatBalance(balancesAll.vestingPerBlock)}
                   <div className='faded'>{t('per block')}</div>
-                  <div className='faded'>
-                    {`${t('until block')} ${formatNumber(balancesAll.vestingEndBlock)}`}
-                    <BlockToTime blocks={balancesAll.vestingEndBlock.sub(bestNumber)} />
-                  </div>
                 </div>
               }
               trigger={`${address}-vested-trigger`}

packages/react-components/src/Table/Body.tsx

@@ -190,7 +190,7 @@ export default React.memo(styled(Body)`
       background: transparent;
     }
 
-    .ui--Button:not(.isIcon):not(.isToplevel):not(:hover) {
+    .ui--Button:not(.isIcon):not(:hover) {
       background: transparent !important;
       box-shadow: none !important;
     }

packages/react-components/src/styles/index.ts

@@ -135,6 +135,12 @@ export default createGlobalStyle<Props>`
   .ui--Table td .ui--Button {
     &:not(.isDisabled):not(.isIcon):not(.isToplevel),
     &.withoutLink:not(.isDisabled) {
+      &:hover {
+        .ui--Icon {
+          color: #f5f5f4;
+        }
+      }
+
       .ui--Icon {
         background: transparent;
         color: ${getHighlight};