Satking account layout changes (#1994)

packages/app-staking/src/Actions/Account/index.tsx

@@ -144,13 +144,14 @@ class Account extends React.PureComponent<Props, State> {
     return (
       <AddressCard
         buttons={this.renderButtons()}
+        className={className}
         iconInfo={onlineStatus && (
           <OnlineStatus
             isTooltip
             value={onlineStatus}
           />
         )}
-        label={t('stash')}
+        // label={t('stash')}
         type='account'
         value={stashId}
         withAddressOrName
@@ -177,15 +178,16 @@ class Account extends React.PureComponent<Props, State> {
         {this.renderSetRewardDestination()}
         {this.renderSetSessionAccount()}
         {this.renderValidate()}
-        <div className={className}>
+        <div className='staking--Card'>
           <div className='staking--Accounts'>
             {controllerId && (
               <div className='staking--Account-detail actions'>
                 <AddressRow
-                  label={t('controller')}
+                  // label={t('controller')}
                   value={controllerId}
                   withAddressOrName
                   withBalance={CONTROLLER_BALANCES}
+                  withSmallIcon
                 />
               </div>
             )}
@@ -222,21 +224,21 @@ class Account extends React.PureComponent<Props, State> {
                 withValidatorPrefs={isStashValidating}
               />
             </div>
-            {nominees && !!nominees.length && (
-              <div className='staking--Account-Nominee'>
-                <label className='staking--label'>{t('nominating')}</label>
-                {nominees.map((nomineeId, index): React.ReactNode => (
-                  <AddressMini
-                    key={index}
-                    value={nomineeId}
-                    withBalance={false}
-                    withBonded
-                  />
-                ))}
-              </div>
-            )}
           </div>
         </div>
+        {nominees && !!nominees.length && (
+          <details className='staking--Account-Nominations'>
+            <summary>{t('Nominating {{count}}', { replace: { count: nominees.length } })}</summary>
+            {nominees.map((nomineeId, index): React.ReactNode => (
+              <AddressMini
+                key={index}
+                value={nomineeId}
+                withBalance={false}
+                withBonded
+              />
+            ))}
+          </details>
+        )}
       </AddressCard>
     );
   }
@@ -368,7 +370,7 @@ class Account extends React.PureComponent<Props, State> {
 
     // only show a "Bond Additional" button if this stash account actually doesn't bond everything already
     // staking_ledger.total gives the total amount that can be slashed (any active amount + what is being unlocked)
-    const canBondExtra = balances_all && balances_all.freeBalance.gtn(0);
+    const canBondExtra = balances_all?.freeBalance.gtn(0);
 
     return (
       <Menu
@@ -549,7 +551,9 @@ class Account extends React.PureComponent<Props, State> {
 
 export default withMulti(
   styled(Account as React.ComponentClass<Props>)`
-    display: flex;
+    .staking--Card {
+      display: flex;
+    }
 
     .staking--Accounts {
       flex: 3;
@@ -581,6 +585,7 @@ export default withMulti(
       flex: 1;
       display: flex;
       flex-direction: column;
+      margin-top: -2.25rem;
 
       .staking--balances {
         div {
@@ -591,22 +596,10 @@ export default withMulti(
           flex:0;
         }
       }
-
-      .staking--Account-Nominee {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        padding-top: 1em;
-        flex: 1;
-      }
     }
 
-    .staking--Account-Nominee {
-      text-align: left;
-
-      .staking--label {
-        margin: 0 0 -.75rem 2.25rem;
-      }
+    .staking--Account-Nominations {
+      margin-top: 1em;
     }
 
     .ui--Row-buttons .ui--Button-Group {

packages/react-components/src/AddressInfo.tsx

@@ -354,7 +354,7 @@ function AddressInfo (props: Props): React.ReactElement<Props> {
     <div className={className}>
       <div className='column'>
         {renderBalances(props, allAccounts)}
-        {withHexSessionId && (
+        {withHexSessionId && withHexSessionId[0] && (
           <>
             <Label label={t('session keys')} />
             <div className='result'>{withHexSessionId[0]}</div>

packages/react-components/src/AddressRow.tsx

@@ -38,11 +38,13 @@ export interface Props extends I18nProps, RowProps {
   withBalance?: boolean | BalanceActiveType;
   withIndex?: boolean;
   withIndexOrAddress?: boolean;
+  withSmallIcon?: boolean;
   withValidatorPrefs?: boolean | ValidatorPrefsType;
 }
 
 const DEFAULT_ADDR = '5'.padEnd(16, 'x');
 const ICON_SIZE = 48;
+const ICON_SIZE_SMALL = 32;
 
 class AddressRow extends Row<ApiProps & Props, State> {
   public state: State;
@@ -164,10 +166,10 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private renderAccountIndex (): React.ReactNode {
-    const { accounts_info = {}, withIndex = true, withIndexOrAddress = true } = this.props;
+    const { accounts_info = {}, withIndex = true, withIndexOrAddress = true, withSmallIcon } = this.props;
     const { accountIndex } = accounts_info;
 
-    if (!accountIndex || !(withIndex || withIndexOrAddress)) {
+    if (withSmallIcon || !accountIndex || !(withIndex || withIndexOrAddress)) {
       return null;
     }
 
@@ -200,7 +202,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
   }
 
   private renderIcon (): React.ReactNode {
-    const { accounts_info = {}, iconInfo, systemName, withIcon = true } = this.props;
+    const { accounts_info = {}, iconInfo, systemName, withIcon = true, withSmallIcon = false } = this.props;
     const { address } = this.state;
     const { accountId } = accounts_info;
 
@@ -218,7 +220,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
     return (
       <div className='ui--Row-icon'>
         <Component
-          size={ICON_SIZE}
+          size={withSmallIcon ? ICON_SIZE_SMALL : ICON_SIZE}
           theme={theme}
           value={address}
         />

packages/react-components/src/Card.tsx

@@ -29,6 +29,16 @@ export default styled(Card)`
   min-width: 24%;
   justify-content: space-around;
 
+  label {
+    opacity: 0.25;
+  }
+
+  &:hover {
+    label {
+      opacity: 1;
+    }
+  }
+
   &.error {
     background: rgba(255, 0, 0, 0.05);
 

packages/react-components/src/Table.tsx

@@ -79,10 +79,22 @@ export default styled(Table)`
         label {
           opacity: 1;
         }
+      }
 
-        /* td {
-          border-color: #ccc;
-        } */
+      &:not(:hover) {
+        .ui.button:not(.disabled) {
+          background: #eee !important;
+          color: #555 !important;
+        }
+
+        .ui.toggle.checkbox input:checked~.box:before,
+        .ui.toggle.checkbox input:checked~label:before {
+          background-color: #eee !important;
+        }
+
+        .ui.button.mini {
+          visibility: hidden;
+        }
       }
 
       td, th {