Fix misc element size issues

app/components/wallet/staking/dashboard/StakePool.js

@@ -21,6 +21,7 @@ import type { ReputationObject } from '../../../../api/jormungandr/lib/state-fet
 import globalMessages from '../../../../i18n/global-messages';
 import WarningIcon from '../../../../assets/images/attention-modern.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { truncateStakePool } from '../../../../utils/formatters';
 
 const messages = defineMessages({
   title: {
@@ -197,7 +198,7 @@ export default class StakePool extends Component<Props> {
                 >
                   <RawHash light>
                     <span className={styles.hash}>{
-                      hash.substring(0, 6) + '...' + hash.substring(hash.length - 6, hash.length)
+                      truncateStakePool(hash)
                     }
                     </span>
                   </RawHash>

app/components/wallet/staking/dashboard/UpcomingRewards.js

@@ -11,6 +11,7 @@ import CustomTooltip from '../../../widgets/CustomTooltip';
 import LoadingSpinner from '../../../widgets/LoadingSpinner';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import AttentionIcon from '../../../../assets/images/attention-modern.inline.svg';
+import { truncateStakePool } from '../../../../utils/formatters';
 
 import Card from './Card';
 import styles from './UpcomingRewards.scss';
@@ -175,13 +176,13 @@ export default class UpcomingRewards extends Component<Props> {
     const avatar = `data:image/svg+xml;utf8,${encodeURIComponent(avatarSource)}`;
 
     const tooltip = pool.ticker == null
-      ? pool.id[0]
-      : (<>[{pool.ticker}] {pool.name}<br /><span>{pool.id[0]}</span></>);
+      ? truncateStakePool(pool.id[0])
+      : (<>[{pool.ticker}] {pool.name}<br /><span>{truncateStakePool(pool.id[0])}</span></>);
 
     const poolInfo =
       pool.ticker == null ? (
         <div className={styles.poolInfo}>
-          {pool.id[0]}
+          {truncateStakePool(pool.id[0])}
         </div>
       ) : (
         <div className={styles.poolInfo}>

app/components/widgets/CustomTooltip.js

@@ -35,15 +35,18 @@ export default class CustomTooltip extends Component<Props> {
     const child = (children == null) ? this.makeDefaultChild() : children;
 
     return (
-      <div className={styles.component}>
+      <div className={classnames([
+        styles.component,
+        this.props.isPoolAvatar === true
+          ? styles.PoolAvatarTooltip
+          : null
+        ])}
+      >
         <Tooltip
           className={classnames([
             this.props.isAligningRight === true
               ? null
               : styles.SimpleCenteredTooltip,
-            this.props.isPoolAvatar === true
-            ? styles.PoolAvatarTooltip
-            : null
           ])}
           skin={TooltipSkin}
           isAligningRight={this.props.isAligningRight}

app/components/widgets/CustomTooltip.scss

@@ -13,18 +13,6 @@
       margin-left: 20px; // offset = horizontal padding of icon and tooltip
     }
   }
-
-  .PoolAvatarTooltip {
-
-    div[data-bubble-container] {
-      margin-left: 210px;
-      margin-top: 20px !important;
-    }
-
-    span[data-bubble-arrow] {
-      top: 16px;
-    }
-  }
 
   :global(.SimpleBubble_bubble) {
     font-size: 13px;
@@ -47,4 +35,15 @@
   :global(.SimpleBubble_root.SimpleBubble_transparent.SimpleBubble_openUpward)  {
       margin-bottom: -8px !important;
   }
-}
+}
+
+.PoolAvatarTooltip {
+  :global(.SimpleBubble_root:not(.SimpleBubble_openUpward))  {
+    margin-top: 15px !important;
+    margin-left: 70px;
+  }
+  :global(.SimpleBubble_root.SimpleBubble_transparent.SimpleBubble_openUpward)  {
+    margin-bottom: -15px !important;
+    margin-left: 70px;
+  }
+}

app/containers/wallet/Receive.js

@@ -95,7 +95,7 @@ export default class Receive extends Component<Props> {
       }));
 
     return (
-      <FullscreenLayout bottomPadding={57}>
+      <FullscreenLayout bottomPadding={70}>
         <ReceiveWithNavigation
           addressStores={storesForWallet}
           setFilter={filter => this.generated.actions.addresses.setFilter.trigger(filter)}

app/i18n/global-messages.js

@@ -383,7 +383,7 @@ const globalMessages: * = defineMessages({
   },
   blockchainExplorer: {
     id: 'settings.general.explorer',
-    defaultMessage: '!!!Blockchain Explorer',
+    defaultMessage: '!!!explorer',
   },
   newPasswordLabel: {
     id: 'wallet.settings.changePassword.dialog.newPasswordLabel',

app/i18n/locales/en-US.json

@@ -236,7 +236,7 @@
   "settings.general.aboutYoroi.versionLabel": "Current version:",
   "settings.general.aboutYoroi.website": "Yoroi website",
   "settings.general.aboutYoroi.youtube": "EMURGO YouTube",
-  "settings.general.explorer": "Blockchain Explorer",
+  "settings.general.explorer": "explorer",
   "settings.general.languageSelect.info": "For EMURGO, friendliness in Yoroi is an important topic. We believe understanding blockchain concepts is easier in your native language. We try supporting as many languages as possible, but for a broader selection of languages we need to accept the help from community translators. The selected language translation is fully provided by the community.",
   "settings.general.languageSelect.labelInfo": "The selected language translation is fully provided by the community",
   "settings.general.translation.acknowledgment": "Thank you to the following for their contribution: ",

app/utils/formatters.js

@@ -71,7 +71,11 @@ function truncateFormatter(addr: string, cutoff: number): string {
 }
 
 export function truncateToken(addr: string): string {
-  return truncateFormatter(addr, 10);
+  return truncateFormatter(addr, 20);
+}
+
+export function truncateStakePool(addr: string): string {
+  return truncateFormatter(addr, 18);
 }
 
 export function truncateAddress(addr: string): string {