fix email collection styling #1205

src/renderer/component/userEmailNew/view.jsx

@@ -1,18 +1,31 @@
-// I'll come back to this
-/* eslint-disable */
-import React from 'react';
-import { Form, FormRow, Submit } from 'component/common/form';
+// @flow
+import * as React from 'react';
+import { FormField, Form, FormRow, Submit } from 'component/common/form';
 
-class UserEmailNew extends React.PureComponent {
-  constructor(props) {
-    super(props);
+type Props = {
+  cancelButton: React.Node,
+  errorMessage: ?string,
+  isPending: boolean,
+  addUserEmail: string => void,
+};
+
+type State = {
+  email: string,
+};
+
+class UserEmailNew extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
 
     this.state = {
       email: '',
     };
+
+    (this: any).handleSubmit = this.handleSubmit.bind(this);
+    (this: any).handleEmailChanged = this.handleEmailChanged.bind(this);
   }
 
-  handleEmailChanged(event) {
+  handleEmailChanged(event: SyntheticInputEvent<*>) {
     this.setState({
       email: event.target.value,
     });
@@ -20,7 +33,8 @@ class UserEmailNew extends React.PureComponent {
 
   handleSubmit() {
     const { email } = this.state;
-    this.props.addUserEmail(email);
+    const { addUserEmail } = this.props;
+    addUserEmail(email);
   }
 
   render() {
@@ -32,19 +46,20 @@ class UserEmailNew extends React.PureComponent {
           {__("We'll let you know about LBRY updates, security issues, and great new content.")}
         </p>
         <p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
-        <Form onSubmit={this.handleSubmit.bind(this)}>
-          <FormRow
-            type="text"
-            label="Email"
-            placeholder="youremail@example.org"
-            name="email"
-            value={this.state.email}
-            errorMessage={errorMessage}
-            onChange={event => {
-              this.handleEmailChanged(event);
-            }}
-          />
-          <div className="form-row-submit">
+        <Form onSubmit={this.handleSubmit}>
+          <FormRow>
+            <FormField
+              stretch
+              type="email"
+              label="Email"
+              placeholder="youremail@example.org"
+              name="email"
+              value={this.state.email}
+              errorMessage={errorMessage}
+              onChange={this.handleEmailChanged}
+            />
+          </FormRow>
+          <div className="card__actions">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}
           </div>
@@ -55,4 +70,3 @@ class UserEmailNew extends React.PureComponent {
 }
 
 export default UserEmailNew;
-/* eslint-enable */

src/renderer/modal/modal.jsx

@@ -76,7 +76,7 @@ export class Modal extends React.PureComponent<ModalProps> {
             />
             {type === 'confirm' ? (
               <Button
-                button="alt"
+                button="link"
                 label={abortButtonLabel}
                 disabled={abortButtonDisabled}
                 onClick={onAborted}

src/renderer/modal/modalEmailCollection/view.jsx

@@ -1,21 +1,29 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 import UserEmailNew from 'component/userEmailNew';
 import UserEmailVerify from 'component/userEmailVerify';
 
-class ModalEmailCollection extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+  email: string,
+  user: ?{ has_verified_email: boolean },
+};
+
+class ModalEmailCollection extends React.PureComponent<Props> {
   renderInner() {
     const { closeModal, email, 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.has_verified_email && !email) {
+    if (user && !user.has_verified_email && !email) {
       return <UserEmailNew cancelButton={cancelButton} />;
-    } else if (!user.has_verified_email) {
+    } else if (user && !user.has_verified_email) {
       return <UserEmailVerify cancelButton={cancelButton} />;
     }
-    closeModal();
+
+    return closeModal();
   }
 
   render() {

src/renderer/page/auth/view.jsx

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import Button from 'component/button';
@@ -6,29 +7,31 @@ import UserEmailVerify from 'component/userEmailVerify';
 import UserVerify from 'component/userVerify';
 import Page from 'component/page';
 
-export class AuthPage extends React.PureComponent {
+type Props = {
+  isPending: boolean,
+  email: string,
+  // Not sure why it isn't recognizing that we are using this prop type
+  // Something to do with how we are passing all the props through probably
+  pathAfterAuth: string, // eslint-disable-line react/no-unused-prop-types
+  user: ?{
+    has_verified_email: boolean,
+    is_reward_approved: boolean,
+    is_identity_verified: boolean,
+  },
+  navigate: (string, ?{}) => void,
+};
+
+export class AuthPage extends React.PureComponent<Props> {
   componentWillMount() {
     this.navigateIfAuthenticated(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     this.navigateIfAuthenticated(nextProps);
   }
 
-  navigateIfAuthenticated(props) {
-    const { isPending, user } = props;
-    if (
-      !isPending &&
-      user &&
-      user.has_verified_email &&
-      (user.is_reward_approved || user.is_identity_verified)
-    ) {
-      props.navigate(props.pathAfterAuth);
-    }
-  }
-
   getTitle() {
-    const { email, isPending, isVerificationCandidate, user } = this.props;
+    const { email, isPending, user } = this.props;
 
     if (isPending || (user && !user.has_verified_email && !email)) {
       return __('Human Proofing');
@@ -40,8 +43,20 @@ export class AuthPage extends React.PureComponent {
     return __('Welcome to LBRY');
   }
 
+  navigateIfAuthenticated = (props: Props) => {
+    const { isPending, user, pathAfterAuth, navigate } = props;
+    if (
+      !isPending &&
+      user &&
+      user.has_verified_email &&
+      (user.is_reward_approved || user.is_identity_verified)
+    ) {
+      navigate(pathAfterAuth);
+    }
+  };
+
   renderMain() {
-    const { email, isPending, isVerificationCandidate, user } = this.props;
+    const { email, isPending, user } = this.props;
 
     if (isPending) {
       return [<BusyIndicator message={__('Authenticating')} />, true];
@@ -56,7 +71,7 @@ export class AuthPage extends React.PureComponent {
   }
 
   render() {
-    const { email, user, isPending, navigate } = this.props;
+    const { navigate } = this.props;
     const [innerContent, useTemplate] = this.renderMain();
 
     return (
@@ -72,7 +87,11 @@ export class AuthPage extends React.PureComponent {
                 {`${__(
                   'This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards and may be used to sync usage data across devices.'
                 )} `}
-                <Button onClick={() => navigate('/discover')} label={__('Return home')} />.
+                <Button
+                  button="link"
+                  onClick={() => navigate('/discover')}
+                  label={__('Return home.')}
+                />
               </div>
             </div>
           </section>

src/renderer/scss/_gui.scss

@@ -138,6 +138,7 @@ dd {
 
 p {
   font-family: 'metropolis-medium';
+  padding: $spacing-vertical * 1/3 0;
 }
 
 .page {