Some small UI adjustments (#2471)

packages/apps/src/Content/index.tsx

@@ -52,7 +52,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
       {needsApi && (!isApiReady || !isApiConnected)
         ? (
           <div className='connecting'>
-            <Spinner label={t('Waiting for API to be connected and ready')} />
+            <Spinner label={t('Initializing connection')} />
           </div>
         )
         : (

packages/page-accounts/src/Accounts/Account.tsx

@@ -100,68 +100,83 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
     }
   }, [accName, filter, tags]);
 
+  const _onFavorite = useCallback(
+    (): void => toggleFavorite(address),
+    [address, toggleFavorite]
+  );
+  const _onGenesisChange = useCallback(
+    (genesisHash: string | null): void => {
+      const account = keyring.getPair(address);
+
+      account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash });
+
+      setGenesisHash(genesisHash);
+    },
+    [address]
+  );
+  const _saveName = useCallback(
+    (): void => {
+      toggleEditName();
+
+      const meta = { name: accName, whenEdited: Date.now() };
+
+      if (address) {
+        try {
+          const currentKeyring = keyring.getPair(address);
+
+          currentKeyring && keyring.saveAccountMeta(currentKeyring, meta);
+        } catch (error) {
+          keyring.saveAddress(address, meta);
+        }
+      }
+    },
+    [accName, address, toggleEditName]
+  );
+  const _saveTags = useCallback(
+    (): void => {
+      toggleEditTags();
+
+      const meta = { tags, whenEdited: Date.now() };
+
+      if (address) {
+        try {
+          const currentKeyring = keyring.getPair(address);
+
+          currentKeyring && keyring.saveAccountMeta(currentKeyring, meta);
+        } catch (error) {
+          keyring.saveAddress(address, meta);
+        }
+      }
+    },
+    [address, tags, toggleEditTags]
+  );
+  const _onForget = useCallback(
+    (): void => {
+      if (!address) {
+        return;
+      }
+
+      const status: Partial<ActionStatus> = {
+        account: address,
+        action: 'forget'
+      };
+
+      try {
+        keyring.forgetAccount(address);
+        status.status = 'success';
+        status.message = t('account forgotten');
+      } catch (error) {
+        status.status = 'error';
+        status.message = error.message;
+      }
+    },
+    [address, t]
+  );
+
   if (!isVisible) {
     return null;
   }
 
-  const _saveName = (): void => {
-    toggleEditName();
-
-    const meta = { name: accName, whenEdited: Date.now() };
-
-    if (address) {
-      try {
-        const currentKeyring = keyring.getPair(address);
-
-        currentKeyring && keyring.saveAccountMeta(currentKeyring, meta);
-      } catch (error) {
-        keyring.saveAddress(address, meta);
-      }
-    }
-  };
-  const _saveTags = (): void => {
-    toggleEditTags();
-
-    const meta = { tags, whenEdited: Date.now() };
-
-    if (address) {
-      try {
-        const currentKeyring = keyring.getPair(address);
-
-        currentKeyring && keyring.saveAccountMeta(currentKeyring, meta);
-      } catch (error) {
-        keyring.saveAddress(address, meta);
-      }
-    }
-  };
-  const _onForget = (): void => {
-    if (!address) {
-      return;
-    }
-
-    const status: Partial<ActionStatus> = {
-      account: address,
-      action: 'forget'
-    };
-
-    try {
-      keyring.forgetAccount(address);
-      status.status = 'success';
-      status.message = t('account forgotten');
-    } catch (error) {
-      status.status = 'error';
-      status.message = error.message;
-    }
-  };
-  const _onGenesisChange = (genesisHash: string | null): void => {
-    const account = keyring.getPair(address);
-
-    account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash });
-
-    setGenesisHash(genesisHash);
-  };
-  const _onFavorite = (): void => toggleFavorite(address);
-
   return (
     <tr className={className}>
       <td className='favorite'>
@@ -290,7 +305,7 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
           />
         )}
       </td>
-      <td className='top'>
+      <td>
         {isEditingTags
           ? (
             <InputTags

packages/page-accounts/src/Contacts/Address.tsx

@@ -204,7 +204,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
           </>
         )}
       </td>
-      <td className='top'>
+      <td>
         {isEditingTags
           ? (
             <InputTags

packages/page-democracy/src/Overview/DispatchQueue.tsx

@@ -37,7 +37,7 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
               </Table.Body>
             </Table>
           )
-          : t('nothing queued for execution')
+          : t('Nothing queued for execution')
         : <Spinner />
       }
     </div>

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -8,7 +8,7 @@ import { EventRecord, SignedBlock } from '@polkadot/types/interfaces';
 import React from 'react';
 import styled from 'styled-components';
 import { HeaderExtended } from '@polkadot/api-derive';
-import { Columar } from '@polkadot/react-components';
+import { Columar, Spinner } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import BlockHeader from '../BlockHeader';
@@ -21,14 +21,14 @@ interface Props {
   value: string;
 }
 
-function BlockByHash ({ className, value }: Props): React.ReactElement<Props> | null {
+function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const events = useCall<EventRecord[]>(api.query.system.events.at as any, [value], { isSingle: true });
   const getBlock = useCall<SignedBlock>(api.rpc.chain.getBlock as any, [value], { isSingle: true });
   const getHeader = useCall<HeaderExtended>(api.derive.chain.getHeader as any, [value]);
 
   if (!getBlock || getBlock.isEmpty || !getHeader || getHeader.isEmpty) {
-    return null;
+    return <Spinner />;
   }
 
   return (

packages/page-explorer/src/BlockInfo/ByNumber.tsx

@@ -6,6 +6,7 @@
 import { Hash } from '@polkadot/types/interfaces';
 
 import React from 'react';
+import { Spinner } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import BlockByHash from './ByHash';
@@ -19,7 +20,7 @@ function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
   const getBlockHash = useCall<Hash>(api.rpc.chain.getBlockHash as any, [value]);
 
   if (!getBlockHash) {
-    return null;
+    return <Spinner />;
   }
 
   return (

packages/react-components/src/Spinner.tsx

@@ -49,7 +49,7 @@ export default React.memo(styled(Spinner)`
   .loader {
     position: relative;
     margin: 0 auto;
-    width: 64px;
+    width: 56px;
 
     &:before {
       content: '';