Merge branch 'develop' into dependabot/npm_and_yarn/babel/preset-env-…

…7.5.0

app/components/settings/categories/SupportSettings.js

@@ -2,6 +2,9 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
+import classnames from 'classnames';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import globalMessages from '../../../i18n/global-messages';
 import styles from './SupportSettings.scss';
 
@@ -52,8 +55,14 @@ export default class SupportSettings extends Component<Props> {
     const { onExternalLinkClick, onDownloadLogs } = this.props;
     const { intl } = this.context;
 
+    const buttonClasses = classnames([
+      'primary',
+      styles.downloadButton
+    ]);
+
     const faqLink = (
       <a
+        className={styles.link}
         href={intl.formatMessage(globalMessages.faqLinkUrl)}
         onClick={event => onExternalLinkClick(event)}
       >
@@ -63,6 +72,7 @@ export default class SupportSettings extends Component<Props> {
 
     const supportRequestLink = (
       <a
+        className={styles.link}
         href={intl.formatMessage(globalMessages.supportRequestLinkUrl)}
         onClick={event => onExternalLinkClick(event)}
       >
@@ -71,9 +81,15 @@ export default class SupportSettings extends Component<Props> {
     );
 
     const downloadLogsLink = (
-      <button type="button" onClick={onDownloadLogs}>
+      <span
+        role="button"
+        tabIndex={0}
+        onKeyPress={() => null}
+        className={styles.link}
+        onClick={onDownloadLogs}
+      >
         {intl.formatMessage(globalMessages.downloadLogsLink)}
-      </button>
+      </span>
     );
 
     return (
@@ -92,6 +108,13 @@ export default class SupportSettings extends Component<Props> {
 
         <p><FormattedMessage {...globalMessages.logsContent} values={{ downloadLogsLink }} /></p>
 
+        <Button
+          className={buttonClasses}
+          label={intl.formatMessage(globalMessages.downloadLogsButtonLabel)}
+          onClick={onDownloadLogs}
+          skin={ButtonSkin}
+        />
+
       </div>
     );
   }

app/components/settings/categories/SupportSettings.scss

@@ -15,49 +15,45 @@
   }
 
   a,
-  button,
   p {
     color: var(--theme-support-settings-text-color);
     font-family: var(--font-regular);
     font-size: 14px;
     line-height: 19px;
   }
 
-  a,
-  button {
+  a {
     color: var(--theme-support-settings-link-color);
   }
-
-  button {
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  .link {
     cursor: pointer;
-    letter-spacing: 1px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--theme-widgets-explorable-hash-underline-dark-color);
+    text-decoration: none;
   }
 
-  p {
-    margin-bottom: 10px;
+  .link:focus {
+    outline: none;
   }
-}
 
+  .downloadButton {
+    margin-top: 20px;
+  }
+}
 
 :global(.YoroiClassic) .component {
   h1 {
     font-size: 16px;
   }
-
-  a,
-  button {
-    text-decoration: underline;
-  }
 }
 
 :global(.YoroiModern) .component {
   h1 {
     font-size: 18px;
   }
-
-  a,
-  button {
-    text-decoration: none;
-    font-family: var(--font-semibold);
-  }
 }

app/components/transfer/TransferInstructionsPage.scss

@@ -5,11 +5,11 @@
   min-width: 650px;
 
   .buttonTitle {
+    font-size: 18px;
+    font-family: var(--font-semibold);
     margin-bottom: 30px;
     line-height: 1.38;
     text-align: left;
-    font-size: 11px;
-    font-family: var(--font-medium);
   }
 
   .button {
@@ -27,10 +27,10 @@
     .infoBlock {
       padding-right: 60px;
       .title {
+        font-size: 18px;
+        font-family: var(--font-semibold);
         line-height: 1.38;
         margin-bottom: 16px;
-        font-size: 11px;
-        font-family: var(--font-medium);
       }
 
       .text {
@@ -47,32 +47,3 @@
     }
   }
 }
-
-:global(.YoroiClassic) .component {
-  .buttonTitle {
-    font-weight: 600;
-    text-transform: uppercase;
-  }
-
-  .body {
-    .title {
-      font-weight: 600;
-      padding-left: 10px;
-      text-transform: uppercase;
-    }
-  }  
-}
-
-:global(.YoroiModern) .component {
-  .buttonTitle {
-    font-size: 18px;
-    font-family: var(--font-semibold);
-  }
-
-  .body {
-    .title {
-      font-size: 18px;
-      font-family: var(--font-semibold);
-    }
-  }
-}

app/components/transfer/TransferMasterKeyPage.scss

@@ -17,6 +17,8 @@
     .title {
       line-height: 1.38;
       margin-bottom: 4px;
+      font-size: 18px;
+      font-family: var(--font-semibold);
     }
 
     .text {
@@ -49,23 +51,4 @@
   .button {
     margin: 0 auto 0;
   }
-
-  .body {
-    .title {
-      font-size: 11px;
-      font-family: var(--font-medium);
-      font-weight: 600;
-      padding-left: 10px;
-      text-transform: uppercase;
-    }
-  }  
-}
-
-:global(.YoroiModern) .component {
-  .body {
-    .title {
-      font-size: 18px;
-      font-family: var(--font-semibold);
-    }
-  }  
 }

app/components/transfer/TransferMnemonicPage.scss

@@ -17,6 +17,8 @@
     .title {
       line-height: 1.38;
       margin-bottom: 4px;
+      font-size: 18px;
+      font-family: var(--font-semibold);
     }
 
     .text {
@@ -49,27 +51,10 @@
   .button {
     margin: 0 auto 0;
   }
-
-  .body {
-    .title {
-      font-size: 11px;
-      font-family: var(--font-medium);
-      font-weight: 600;
-      padding-left: 10px;
-      text-transform: uppercase;
-    }
-  }
 }
 
 :global(.YoroiModern) .component {
   .inputWrapper span[class*='selectedWordBox'] {
     background-color: var(--rp-autocomplete-selected-word-box-bg-color-secondary);
   }
-
-  .body {
-    .title {
-      font-size: 18px;
-      font-family: var(--font-semibold);
-    }
-  }
 }

app/components/uri/URIGenerateDialog.js

@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import { NumericInput } from 'react-polymorph/lib/components/NumericInput';
+import { Input } from 'react-polymorph/lib/components/Input';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import vjf from 'mobx-react-form/lib/validators/VJF';
@@ -126,7 +126,6 @@ export default class URIGenerateDialog extends Component<Props> {
       onClose,
       onGenerate,
       classicTheme,
-      walletAddress,
       currencyMaxIntegerDigits,
       currencyMaxFractionalDigits,
     } = this.props;
@@ -139,8 +138,8 @@ export default class URIGenerateDialog extends Component<Props> {
     const { form } = this;
     const { intl } = this.context;
 
-    const amountField = form.$('amount');
     const receiverField = form.$('receiver');
+    const amountField = form.$('amount');
 
     return (
       <Dialog
@@ -152,22 +151,25 @@ export default class URIGenerateDialog extends Component<Props> {
         onClose={onClose}
       >
         <div>
-          <h2 className={styles.receiverLabel}>
-            {intl.formatMessage(messages.uriGenerateDialogAddressLabel)}
-          </h2>
-          <div className={styles.receiverField}>
-            {walletAddress}
+          <div className={styles.receiverInput}>
+            <Input
+              className="receiver"
+              {...receiverField.bind()}
+              skin={InputOwnSkin}
+              disabled
+            />
           </div>
           <div className={styles.amountField}>
             <NumericInput
-              {...amountField.bind()}
               className="amount"
+              {...amountField.bind()}
               label={this.getAmountLabel()}
+              error={amountField.error}
               maxBeforeDot={currencyMaxIntegerDigits}
               maxAfterDot={currencyMaxFractionalDigits}
-              skin={classicTheme ? InputSkin : InputOwnSkin}
+              skin={InputOwnSkin}
+              done={amountField.isValid}
               classicTheme={classicTheme}
-              error={amountField.error}
               autoFocus
             />
           </div>

app/components/uri/URIGenerateDialog.scss

@@ -13,38 +13,44 @@
     margin-bottom: 10px;
   }
 
-  .receiverField {
-    letter-spacing: 0px;
-    font-family: var(--font-mono-light);
-    word-break: break-all;
-    font-size: 16px;
-    line-height: 23px;
-  }
+  .receiverInput {
+    position: relative;
+
+    :global {
+      .SimpleInput_input {
+        font-family: var(--font-mono-light);
+        letter-spacing: 0;
+      }
+    }
+  }  
 
-  .amountField, .receiverField {
+  .amountField {
     margin-bottom: 15px;
   }
 
   .generateButton {
     display: block !important;
     margin: 30px auto 0;
   }
-
 }
 
 :global(.YoroiClassic) .component {
-  .receiverLabel {
-    font-family: var(--font-medium);
-    text-transform: uppercase;
-    font-size: 11px;
-    font-weight: 600;
-    line-height: 1.38;
-    color: var(--rp-formfield-label-text-color, #5e6066);
-    padding-left: 10px;
-  }
+  .receiverInput {
+    margin-bottom: 10px;
+  }  
 }
 
 :global(.YoroiModern) .component {
+  .receiverInput {
+    letter-spacing: 0;
+
+    :global {
+      .SimpleInput_input {
+        font-family: var(--font-mono-regular);
+      }
+    }
+  }  
+
   .generateButton {
     margin: 20px auto 0;
   }