fix: modal styling and phone collection errors

src/renderer/component/cardVerify/view.jsx

@@ -158,7 +158,7 @@ class CardVerify extends React.Component {
   render() {
     return (
       <Button
-        button="alt"
+        button="primary"
         label={this.props.label}
         icon={icons.LOCK}
         disabled={this.props.disabled || this.state.open || this.hasPendingClick}

src/renderer/component/common/form-components/form-field.jsx

@@ -36,6 +36,8 @@ export class FormField extends React.PureComponent<Props> {
       ...inputProps
     } = this.props;
 
+    const errorMessage = typeof error === 'object' ? error.message : error;
+
     let input;
     if (type) {
       if (type === 'select') {
@@ -65,13 +67,13 @@ export class FormField extends React.PureComponent<Props> {
           'form-field--stretch': stretch || type === 'markdown',
         })}
       >
-        {(label || error) && (
+        {(label || errorMessage) && (
           <label
-            className={classnames('form-field__label', { 'form-field__error': error })}
+            className={classnames('form-field__label', { 'form-field__error': errorMessage })}
             htmlFor={name}
           >
-            {!error && label}
-            {error}
+            {!errorMessage && label}
+            {errorMessage}
           </label>
         )}
         <div

src/renderer/component/userPhoneNew/view.jsx

@@ -1,7 +1,7 @@
 // I'll come back to this
 /* eslint-disable */
 import React from 'react';
-import { Form, FormRow, FormField } from 'component/common/form';
+import { Form, FormRow, FormField, Submit } from 'component/common/form';
 
 const os = require('os').type();
 const countryCodes = require('country-data')
@@ -77,37 +77,30 @@ class UserPhoneNew extends React.PureComponent {
           )}
         </p>
         <Form onSubmit={this.handleSubmit.bind(this)}>
-          <div className="form-row-phone">
+          <FormRow>
+            <FormField type="select" name="country-codes" onChange={this.handleSelect.bind(this)}>
+              {countryCodes.map((country, index) => (
+                <option key={index} value={country.countryCallingCode}>
+                  {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
+                  {country.countryCallingCode}
+                </option>
+              ))}
+            </FormField>
             <FormField
-              onChange={this.handleSelect.bind(this)}
-              render={() => (
-                <select>
-                  {countryCodes.map((country, index) => (
-                    <option key={index} value={country.countryCallingCode}>
-                      {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
-                      {country.countryCallingCode}
-                    </option>
-                  ))}
-                </select>
-              )}
-            />
-            <FormField
-              errorMessage={phoneErrorMessage}
+              type="text"
+              placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
+              name="phone"
+              value={this.state.phone}
+              error={phoneErrorMessage}
               onChange={event => {
                 this.handleChanged(event);
               }}
-              render={() => (
-                <input
-                  type="text"
-                  placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
-                  name="phone"
-                  value={this.state.phone}
-                />
-              )}
             />
+          </FormRow>
+          <div className="card__actions card__actions--center">
+            <Submit label="Submit" disabled={isPending} />
+            {cancelButton}
           </div>
-          <Submit label="Submit" disabled={isPending} />
-          {cancelButton}
         </Form>
       </div>
     );

src/renderer/component/userPhoneVerify/view.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable */
 import React from 'react';
 import Button from 'component/button';
-import { Form, FormElement, Submit } from 'component/common/form';
+import { Form, FormField, Submit } from 'component/common/form';
 
 class UserPhoneVerify extends React.PureComponent {
   constructor(props) {
@@ -37,31 +37,27 @@ class UserPhoneVerify extends React.PureComponent {
           {__(
             `Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `
           )}
-          <Button onClick={this.reset.bind(this)} label="Go back." />
+          <Button button="link" onClick={this.reset.bind(this)} label="Go back." />
         </p>
-        <FormElement
+        <FormField
+          type="text"
+          name="code"
+          value={this.state.code}
+          onChange={event => {
+            this.handleCodeChanged(event);
+          }}
           label={__('Verification Code')}
-          errorMessage={phoneErrorMessage}
-          render={() => (
-            <input
-              type="text"
-              name="code"
-              value={this.state.code}
-              onChange={event => {
-                this.handleCodeChanged(event);
-              }}
-            />
-          )}
+          error={phoneErrorMessage}
         />
         {/* render help separately so it always shows */}
         <div className="form-field__helper">
           <p>
-            {__('Email')} <Button href="mailto:help@lbry.io" label="help@lbry.io" /> or join our{' '}
-            <Button href="https://chat.lbry.io" label="chat" />{' '}
+            {__('Email')} <Button button="link" href="mailto:help@lbry.io" label="help@lbry.io" />{' '}
+            or join our <Button button="link" href="https://chat.lbry.io" label="chat" />{' '}
             {__('if you encounter any trouble with your code.')}
           </p>
         </div>
-        <div className="form-row-submit">
+        <div className="card__actions card__actions--center">
           <Submit label={__('Verify')} />
           {cancelButton}
         </div>

src/renderer/component/userVerify/view.jsx

@@ -60,6 +60,7 @@ class UserVerify extends React.PureComponent {
             <div className="meta">
               {__('A $1 authorization may temporarily appear with your provider.')}{' '}
               <Button
+                button="link"
                 href="https://lbry.io/faq/identity-requirements"
                 label={__('Read more about why we do this.')}
               />
@@ -80,7 +81,7 @@ class UserVerify extends React.PureComponent {
               onClick={() => {
                 verifyPhone();
               }}
-              button="alt"
+              button="primary"
               icon={icons.PHONE}
               label={__('Submit Phone Number')}
             />
@@ -88,11 +89,11 @@ class UserVerify extends React.PureComponent {
           <div className="card__content">
             <div className="meta">
               {__('Standard messaging rates apply. Having trouble?')}{' '}
-              <Button href="https://lbry.io/faq/phone" label={__('Read more.')} />
+              <Button button="link" href="https://lbry.io/faq/phone" label={__('Read more.')} />
             </div>
           </div>
         </section>
-        <section className="card card--form">
+        <section className="card card--section">
           <div className="card__title">
             <h3>{__('3) Proof via Chat')}</h3>
           </div>
@@ -111,7 +112,7 @@ class UserVerify extends React.PureComponent {
           <div className="card__actions">
             <Button
               href="https://chat.lbry.io"
-              button="alt"
+              button="primary"
               icon={icons.MESSAGE}
               label={__('Join LBRY Chat')}
             />
@@ -129,7 +130,7 @@ class UserVerify extends React.PureComponent {
             </p>
           </div>
           <div className="card__actions">
-            <Button onClick={() => navigate('/discover')} button="alt" label={__('Skip Rewards')} />
+            <Button onClick={() => navigate('/discover')} button="primary" label={__('Skip Rewards')} />
           </div>
         </section>
       </React.Fragment>

src/renderer/modal/modalCreditIntro/view.jsx

@@ -21,24 +21,24 @@ const ModalCreditIntro = props => {
         </p>
         {currentBalance <= 0 && (
           <p>
-            You currently have <CreditAmount amount={currentBalance} />, so the actions you can take
-            are limited.
+            You currently have <CreditAmount noStyle amount={currentBalance} />, so the actions you
+            can take are limited.
           </p>
         )}
         <p>
           There are a variety of ways to get credits, including more than{' '}
           {totalRewardValue ? (
-            <CreditAmount amount={totalRewardRounded} />
+            <CreditAmount noStyle amount={totalRewardRounded} />
           ) : (
             <span className="credit-amount">{__('?? credits')}</span>
           )}{' '}
           {__(' in free rewards for participating in the LBRY beta.')}
         </p>
 
-        <div className="modal__buttons">
+        <div className="card__actions card__actions--center">
           <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
           <Button
-            button="alt"
+            button="link"
             onClick={closeModal}
             label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
           />

src/renderer/modal/modalPhoneCollection/view.jsx

@@ -8,7 +8,7 @@ class ModalPhoneCollection extends React.PureComponent {
   renderInner() {
     const { closeModal, phone, user } = this.props;
 
-    const cancelButton = <Button button="text" onClick={closeModal} label={__('Not Now')} />;
+    const cancelButton = <Button button="link" onClick={closeModal} label={__('Not Now')} />;
 
     if (!user.phone_number && !phone) {
       return <UserPhoneNew cancelButton={cancelButton} />;