fix: phone collection layout

src/renderer/component/common/credit-amount.jsx

@@ -23,6 +23,7 @@ class CreditAmount extends React.PureComponent<Props> {
     showFullPrice: false,
     showPlus: false,
     showLBC: true,
+    badge: true,
   };
 
   render() {

src/renderer/component/transactionList/internal/transaction-list-item.jsx

@@ -53,12 +53,12 @@ class TransactionListItem extends React.PureComponent<Props> {
     return (
       <tr>
         <td>
-          <CreditAmount showPlus amount={amount} precision={8} />
+          <CreditAmount badge={false} showPlus amount={amount} precision={8} />
           <br />
 
           {fee !== 0 && (
             <span className="table__item-label">
-              <CreditAmount fee amount={fee} precision={8} />
+              <CreditAmount badge={false} fee amount={fee} precision={8} />
             </span>
           )}
         </td>

src/renderer/component/userPhoneNew/view.jsx

@@ -1,6 +1,5 @@
-// I'll come back to this
+// @flow
-/* eslint-disable */
+import * as React from 'react';
-import React from 'react';
 import { Form, FormRow, FormField, Submit } from 'component/common/form';
 
 const os = require('os').type();
@@ -20,67 +19,86 @@ const countryCodes = require('country-data')
     return 0;
   });
 
-class UserPhoneNew extends React.PureComponent {
+type Props = {
-  constructor(props) {
+  addUserPhone: (string, string) => void,
+  cancelButton: React.Node,
+  phoneErrorMessage: ?string,
+  isPending: boolean,
+};
+
+type State = {
+  phone: string,
+  countryCode: string,
+};
+
+class UserPhoneNew extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
       phone: '',
-      country_code: '+1',
+      countryCode: '+1',
     };
 
-    this.formatPhone = this.formatPhone.bind(this);
+    (this: any).formatPhone = this.formatPhone.bind(this);
+    (this: any).handleSubmit = this.handleSubmit.bind(this);
+    (this: any).handleSelect = this.handleSelect.bind(this);
   }
 
-  formatPhone(value) {
+  formatPhone(value: string) {
-    const { country_code } = this.state;
+    const { countryCode } = this.state;
-    value = value.replace(/\D/g, '');
+    const formattedNumber = value.replace(/\D/g, '');
-    if (country_code === '+1') {
+
-      if (!value) {
+    if (countryCode === '+1') {
+      if (!formattedNumber) {
         return '';
-      } else if (value.length < 4) {
+      } else if (formattedNumber.length < 4) {
-        return value;
+        return formattedNumber;
-      } else if (value.length < 7) {
+      } else if (formattedNumber.length < 7) {
-        return `(${value.substring(0, 3)}) ${value.substring(3)}`;
+        return `(${formattedNumber.substring(0, 3)}) ${formattedNumber.substring(3)}`;
       }
-      const fullNumber = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(
+      const fullNumber = `(${formattedNumber.substring(0, 3)}) ${formattedNumber.substring(
+        3,
         6
-      )}`;
+      )}-${formattedNumber.substring(6)}`;
       return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14);
     }
-    return value;
+    return formattedNumber;
   }
 
-  handleChanged(event) {
+  handleChanged(event: SyntheticInputEvent<*>) {
     this.setState({
       phone: this.formatPhone(event.target.value),
     });
   }
 
-  handleSelect(event) {
+  handleSelect(event: SyntheticInputEvent<*>) {
-    this.setState({ country_code: event.target.value });
+    this.setState({ countryCode: event.target.value });
   }
 
   handleSubmit() {
-    const { phone, country_code } = this.state;
+    const { phone, countryCode } = this.state;
-    this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.substring(1));
+    this.props.addUserPhone(phone.replace(/\D/g, ''), countryCode.substring(1));
   }
 
   render() {
     const { cancelButton, phoneErrorMessage, isPending } = this.props;
 
     return (
-      <div>
+      <React.Fragment>
-        <p>
+        <header className="card__header">
-          {__(
+          <h2 className="card__title">{__('Enter The Verification Code')}</h2>
-            'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
+          <p className="card__subtitle">
-          )}
+            {__(
-        </p>
+              'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
-        <Form onSubmit={this.handleSubmit.bind(this)}>
+            )}
-          <FormRow>
+          </p>
-            <FormField type="select" name="country-codes" onChange={this.handleSelect.bind(this)}>
+        </header>
-              {countryCodes.map((country, index) => (
+        <Form onSubmit={this.handleSubmit}>
-                <option key={index} value={country.countryCallingCode}>
+          <FormRow padded verticallyCentered>
+            <FormField type="select" name="country-codes" onChange={this.handleSelect}>
+              {countryCodes.map(country => (
+                <option key={country.countryCallingCode} value={country.countryCallingCode}>
                   {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
                   {country.countryCallingCode}
                 </option>
@@ -88,7 +106,7 @@ class UserPhoneNew extends React.PureComponent {
             </FormField>
             <FormField
               type="text"
-              placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
+              placeholder={this.state.countryCode === '+1' ? '(555) 555-5555' : '5555555555'}
               name="phone"
               value={this.state.phone}
               error={phoneErrorMessage}
@@ -102,10 +120,9 @@ class UserPhoneNew extends React.PureComponent {
             {cancelButton}
           </div>
         </Form>
-      </div>
+      </React.Fragment>
     );
   }
 }
 
 export default UserPhoneNew;
-/* eslint-enable */

src/renderer/component/userPhoneVerify/view.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable */
 import React from 'react';
 import Button from 'component/button';
-import { Form, FormField, Submit } from 'component/common/form';
+import { Form, FormField, Submit, FormRow } from 'component/common/form';
 
 class UserPhoneVerify extends React.PureComponent {
   constructor(props) {
@@ -32,35 +32,44 @@ class UserPhoneVerify extends React.PureComponent {
   render() {
     const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
     return (
-      <Form onSubmit={this.handleSubmit.bind(this)}>
+      <React.Fragment>
-        <p>
+        <header className="card__header">
-          {__(
+          <h2 className="card__title">{__('Enter The Verification Code')}</h2>
-            `Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `
+          <p className="card__subtitle">
-          )}
+            {' '}
-          <Button button="link" onClick={this.reset.bind(this)} label="Go back." />
+            {__(
-        </p>
+              `Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `
-        <FormField
+            )}
-          type="text"
+            <Button button="link" onClick={this.reset.bind(this)} label="Go back." />
-          name="code"
+          </p>
-          value={this.state.code}
+        </header>
-          onChange={event => {
+        <Form className="card__content" onSubmit={this.handleSubmit.bind(this)}>
-            this.handleCodeChanged(event);
+          <FormRow padded>
-          }}
+            <FormField
-          label={__('Verification Code')}
+              type="text"
-          error={phoneErrorMessage}
+              name="code"
-        />
+              placeholder="1234"
-        {/* render help separately so it always shows */}
+              value={this.state.code}
-        <div className="card__actions card__actions--center">
+              onChange={event => {
-          <Submit label={__('Verify')} />
+                this.handleCodeChanged(event);
-          {cancelButton}
+              }}
-        </div>
+              label={__('Verification Code')}
+              error={phoneErrorMessage}
+            />
+          </FormRow>
+
+          <div className="card__actions">
+            <Submit label={__('Verify')} />
+            {cancelButton}
+          </div>
+        </Form>
 
         <p className="help">
-          {__('Email')} <Button button="link" href="mailto:help@lbry.io" label="help@lbry.io" />{' '}
+          {__('Email')} <Button button="link" href="mailto:help@lbry.io" label="help@lbry.io" /> or
-          or join our <Button button="link" href="https://chat.lbry.io" label="chat" />{' '}
+          join our <Button button="link" href="https://chat.lbry.io" label="chat" />{' '}
           {__('if you encounter any trouble with your code.')}
         </p>
-      </Form>
+      </React.Fragment>
     );
   }
 }

src/renderer/modal/modal.jsx

@@ -67,9 +67,11 @@ export class Modal extends React.PureComponent<ModalProps> {
           ![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
         }
       >
-        <header className="card__header">
+        {title && (
-          <h2 className="card__title">{title}</h2>
+          <header className="card__header">
-        </header>
+            <h1 className="card__title">{title}</h1>
+          </header>
+        )}
         <div className="card__content">{children}</div>
         {type === 'custom' ? null : ( // custom modals define their own buttons
           <div className="card__actions">

src/renderer/modal/modalPhoneCollection/view.jsx

@@ -36,8 +36,8 @@ class ModalPhoneCollection extends React.PureComponent<Props> {
     }
 
     return (
-      <Modal type="custom" isOpen contentLabel="Phone" title={__('Verify Your Phone')}>
+      <Modal type="custom" isOpen contentLabel="Phone">
-        <section className="card__content">{this.renderInner()}</section>
+        {this.renderInner()}
       </Modal>
     );
   }