Fix nits from previous PRs (#1292)

* spacer

* address in lower case

* bring back names in staking overview

* lint

* uppercase only for names

* remove type in AddressCard

* same fix for council members

* reflect selection in setRewardDestination

* nowrap on edit and copy icons

* nit comment

packages/app-council/src/Overview/Candidate.tsx

@@ -16,7 +16,6 @@ export default class Candidate extends React.PureComponent<Props> {
     return (
       <AddressCard
         defaultName='candidate'
-        type='address'
         value={address}
       />
     );

packages/app-council/src/Overview/Member.tsx

@@ -24,7 +24,6 @@ class Member extends React.PureComponent<Props> {
       <AddressCard
         buttons={<div><label>{t('active until')}</label>#{formatNumber(block)}</div>}
         defaultName='council member'
-        type='address'
         value={address}
       />
     );

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

@@ -69,6 +69,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
 
   private renderContent () {
     const { controllerId, defaultDestination, t } = this.props;
+    const { destination } = this.state;
 
     return (
       <>
@@ -90,6 +91,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
             label={t('payment destination')}
             onChange={this.onChangeDestination}
             options={rewardDestinationOptions}
+            value={destination}
           />
         </Modal.Content>
       </>

packages/app-staking/src/Overview/Address.tsx

@@ -98,7 +98,6 @@ class Address extends React.PureComponent<Props, State> {
         defaultName={defaultName}
         iconInfo={this.renderOffline()}
         key={stashId || controllerId}
-        type='address'
         value={stashId}
         withBalance={{ bonded }}
       >

packages/ui-app/src/AddressCard.tsx

@@ -31,7 +31,6 @@ class AddressCard extends React.PureComponent<Props> {
             <LinkPolkascan
               className='ui--AddressCard-exporer-link'
               data={value}
-              type='address'
             />
           </div>
         )}

packages/ui-app/src/CardGrid.tsx

@@ -71,7 +71,7 @@ export default translate(
       > .ui--CardGrid-spacer {
         flex: 1 1;
         margin: 0.25rem;
-        padding: 1 1.5rem;
+        padding: 0 1.5rem;
       }
     }
 

packages/ui-app/src/CopyButton.tsx

@@ -36,12 +36,14 @@ class CopyButtonInner extends React.PureComponent<InnerProps> {
         >
           <div>
             {children}
-            <Button
-              className='iconButton'
-              icon={icon}
-              size='mini'
-              isPrimary
-            />
+            <span className='copySpan'>
+              <Button
+                className='iconButton'
+                icon={icon}
+                size='mini'
+                isPrimary
+              />
+            </span>
           </div>
         </CopyToClipboard>
       </div>
@@ -85,4 +87,8 @@ export default styled(CopyButton)`
   button.ui.mini.icon.primary.button.iconButton {
     cursor: copy;
   }
+
+  .copySpan {
+    white-space: nowrap;
+  }
 `;

packages/ui-app/src/Row.tsx

@@ -9,7 +9,7 @@ import { Label } from 'semantic-ui-react';
 import React from 'react';
 
 import Button from './Button';
-import { classes, getAddressName } from './util';
+import { classes, toShortAddress } from './util';
 import CopyButton from './CopyButton';
 import Input from './Input';
 import InputTags from './InputTags';
@@ -41,6 +41,10 @@ export const styles = `
     z-index: 1;
   }
 
+  .editSpan {
+    white-space: nowrap;
+  }
+
   .ui--Row-accountId,
   .ui--Row-accountIndex {
     font-family: monospace;
@@ -109,14 +113,17 @@ export const styles = `
     }
   }
 
-  .ui--Row-name {
+  .ui--Row-address-or-name {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-transform: uppercase;
     white-space: normal;
+
+    .withName {
+      text-transform: uppercase;
+    }
   }
 
   .ui--Row-name-input {
@@ -134,7 +141,7 @@ export const styles = `
       flex-wrap: wrap;
       justify-content: left;
 
-      > span {
+      .addTags {
         border: 1px #00000052 solid;
         border-radius: .5em;
         border-style: dashed;
@@ -229,19 +236,23 @@ class Row<P extends RowProps, S extends RowState> extends React.PureComponent<P,
 
   protected renderEditIcon () {
     return (
-      <Button
-        className='iconButton'
-        icon='edit'
-        size='mini'
-        isPrimary
-        key='unlock'
-      />
+      <span className='editSpan'>
+        <Button
+          className='iconButton'
+          icon='edit'
+          size='mini'
+          isPrimary
+          key='unlock'
+        />
+      </span>
+
     );
   }
 
   protected renderName (withCopy: boolean = false) {
-    const { isEditable, type } = this.props;
+    const { defaultName, isEditable } = this.props;
     const { address, isEditingName, name } = this.state;
+    const withName = name !== defaultName;
 
     // can't be both editable and copiable
     return isEditingName
@@ -258,7 +269,7 @@ class Row<P extends RowProps, S extends RowState> extends React.PureComponent<P,
       )
       : (
         <div
-          className={classes('ui--Row-name', isEditable && 'editable')}
+          className={classes('ui--Row-address-or-name', isEditable && 'editable')}
           onClick={isEditable ? this.toggleNameEditor : undefined}
         >
           {withCopy && !isEditable
@@ -267,13 +278,18 @@ class Row<P extends RowProps, S extends RowState> extends React.PureComponent<P,
                 isAddress
                 value={address}
               >
-                {getAddressName(address, type, true)}
+                <span className={`${withName ? 'withName' : 'withAddr'}`}>{
+                    withName ? name : toShortAddress(address)
+                  }
+                </span>
               </CopyButton>
             )
             : (
               <>
-                {name}
-                {isEditable && this.renderEditIcon()}
+                <span className='withName'>
+                  {name}
+                  {isEditable && this.renderEditIcon()}
+                </span>
               </>
             )
           }