From 7e62cb5b73f48764c31848ad26ffe90defe8341e Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 27 Mar 2018 14:25:23 -0700
Subject: [PATCH 1/9] fix for navigating with enter key

---
 src/renderer/component/wunderbar/view.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx
index 31b7fdee8..583ed54e6 100644
--- a/src/renderer/component/wunderbar/view.jsx
+++ b/src/renderer/component/wunderbar/view.jsx
@@ -1,10 +1,11 @@
 // @flow
 import React from 'react';
 import classnames from 'classnames';
+import { normalizeURI } from 'lbryURI';
 import Icon from 'component/common/icon';
-import Autocomplete from './internal/autocomplete';
 import { parseQueryParams } from 'util/query_params';
 import * as icons from 'constants/icons';
+import Autocomplete from './internal/autocomplete';
 
 type Props = {
   updateSearchQuery: string => void,

From 3bb530411deaa97f133dc562849d68c2ef5f73ef Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 27 Mar 2018 21:59:35 -0700
Subject: [PATCH 2/9] align category-list with buttons

---
 src/renderer/page/discover/view.jsx      |  2 +-
 src/renderer/scss/component/_button.scss |  2 +-
 src/renderer/scss/component/_card.scss   | 12 ++++--------
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/renderer/page/discover/view.jsx b/src/renderer/page/discover/view.jsx
index abe0c0f56..28adf330c 100644
--- a/src/renderer/page/discover/view.jsx
+++ b/src/renderer/page/discover/view.jsx
@@ -18,7 +18,7 @@ class DiscoverPage extends React.PureComponent<Props> {
     const { featuredUris, fetchingFeaturedUris } = this.props;
     const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length;
     const failedToLoad = !fetchingFeaturedUris && !hasContent;
-    // lbry://fortnite-top-stream-moments-nickatnydte#27395875d68e9d3e53be46edf36d622aa8284441
+
     return (
       <Page noPadding isLoading={!hasContent && fetchingFeaturedUris}>
         {hasContent &&
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index 8b19a4be9..e4e08977d 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -114,7 +114,7 @@ button:disabled {
   text-transform: uppercase;
 }
 
-.btn:not(.btn--no-padding):not(.btn--link) {
+.btn:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) {
   .btn__content {
     padding: 0 8px;
     display: flex;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 5cb1baae9..9c5f125c6 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -282,7 +282,7 @@
   }
 
   .card:last-of-type {
-    margin-right: $spacing-vertical * 2/3;
+    margin-right: $spacing-width;
   }
 }
 
@@ -336,12 +336,8 @@
     display: inline-block;
     vertical-align: top;
     overflow: visible;
-    // -- three cards on a screen
-    // -- minus 12px for 1/3 of the page padding (36px)
-    // -- minus 20px for the card's margin
-    // Ideally we should be able to use $spacing-width / 3, but I'm not sure
-    // how inside the calc function
-    width: calc((100% / 3) - 12px - 20px);
+    // we should use $spacing-width - 1px here, not sure why it isn't working
+    width: calc((100% / 3) - 35px);
   }
 
   .card:not(:first-of-type) {
@@ -354,7 +350,7 @@
 
   @media only screen and (min-width: $medium-breakpoint) {
     .card {
-      width: calc((100% / 4) - 12px - 20px);
+      width: calc((100% / 4) - 31px);
     }
   }
 }

From 6a6d6db08ca0eda325ae48c25764e023261de471 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Thu, 29 Mar 2018 20:29:05 -0400
Subject: [PATCH 3/9] fix description height on publish page #1195

---
 .eslintrc.json                                              | 3 ++-
 .../component/common/form-components/form-field.jsx         | 6 +++++-
 src/renderer/scss/component/_form-field.scss                | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 69a674b7a..56319633d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -33,6 +33,7 @@
       "printWidth": 100,
       "singleQuote": true
     }],
-    "func-names": ["warn", "as-needed"]
+    "func-names": ["warn", "as-needed"],
+    "jsx-a11y/label-has-for": 0
   }
 }
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 39f57dc9a..212982299 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -74,7 +74,11 @@ export class FormField extends React.PureComponent<Props> {
             {error}
           </label>
         )}
-        <div className="form-field__input">
+        <div
+          className={classnames('form-field__input', {
+            'form-field--auto-height': type === 'markdown',
+          })}
+        >
           {prefix && (
             <label htmlFor={name} className="form-field__prefix">
               {prefix}
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index e4c9d4287..8e54d2f75 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -43,6 +43,10 @@
   input[type='radio'] {
     margin-top: 5px;
   }
+
+  &.form-field--auto-height {
+    height: auto;
+  }
 }
 
 .form-field__help,

From 9466c8ad94efcea060c68b2e87affd3bf94acdca Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Thu, 29 Mar 2018 20:43:47 -0400
Subject: [PATCH 4/9] fix email collection styling #1205

---
 src/renderer/component/userEmailNew/view.jsx  | 60 ++++++++++++-------
 src/renderer/modal/modal.jsx                  |  2 +-
 .../modal/modalEmailCollection/view.jsx       | 18 ++++--
 src/renderer/page/auth/view.jsx               | 55 +++++++++++------
 src/renderer/scss/_gui.scss                   |  1 +
 5 files changed, 89 insertions(+), 47 deletions(-)

diff --git a/src/renderer/component/userEmailNew/view.jsx b/src/renderer/component/userEmailNew/view.jsx
index 16760dc6d..b45b50d87 100644
--- a/src/renderer/component/userEmailNew/view.jsx
+++ b/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 */
diff --git a/src/renderer/modal/modal.jsx b/src/renderer/modal/modal.jsx
index eeed95ef0..c32e817ca 100644
--- a/src/renderer/modal/modal.jsx
+++ b/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}
diff --git a/src/renderer/modal/modalEmailCollection/view.jsx b/src/renderer/modal/modalEmailCollection/view.jsx
index 38e1a1d07..e74591c07 100644
--- a/src/renderer/modal/modalEmailCollection/view.jsx
+++ b/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() {
diff --git a/src/renderer/page/auth/view.jsx b/src/renderer/page/auth/view.jsx
index b3379af54..f7e045241 100644
--- a/src/renderer/page/auth/view.jsx
+++ b/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>
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 3a6bdae70..70e31aead 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -138,6 +138,7 @@ dd {
 
 p {
   font-family: 'metropolis-medium';
+  padding: $spacing-vertical * 1/3 0;
 }
 
 .page {

From fbb4041e7850ba43dc76e842ee0d54895259b1f9 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Thu, 29 Mar 2018 20:48:06 -0400
Subject: [PATCH 5/9] fix disabled rewards message styling

---
 src/renderer/page/rewards/view.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/page/rewards/view.jsx b/src/renderer/page/rewards/view.jsx
index a25b06ec4..f79e806e8 100644
--- a/src/renderer/page/rewards/view.jsx
+++ b/src/renderer/page/rewards/view.jsx
@@ -81,12 +81,13 @@ class RewardsPage extends React.PureComponent {
 
     if (!daemonSettings.share_usage_data) {
       return (
-        <div className="card__content empty">
+        <div className="card card--section">
+          <div className="card__title">{__('Disabled')}</div>
           <p>
             {__(
               'Rewards are currently disabled for your account. Turn on diagnostic data sharing, in'
             )}{' '}
-            <Button onClick={() => navigate('/settings')} label="Settings" />
+            <Button button="link" onClick={() => navigate('/settings')} label="Settings" />
             {__(', in order to re-enable them.')}
           </p>
         </div>

From 1866acc6124556e8706ba3680c928d92c0a4918d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Fri, 30 Mar 2018 01:33:09 -0400
Subject: [PATCH 6/9] implement backup page styling

---
 src/renderer/page/backup/view.jsx      | 18 +++++-------------
 src/renderer/scss/_vars.scss           |  6 ++++++
 src/renderer/scss/component/_card.scss |  8 ++++++++
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/renderer/page/backup/view.jsx b/src/renderer/page/backup/view.jsx
index 3163c0d29..5fee3c0d4 100644
--- a/src/renderer/page/backup/view.jsx
+++ b/src/renderer/page/backup/view.jsx
@@ -12,7 +12,7 @@ type Props = {
 class BackupPage extends React.PureComponent<Props> {
   render() {
     const { daemonSettings } = this.props;
-    const { lbryum_wallet_dir } = daemonSettings;
+    const { lbryum_wallet_dir: lbryumWalletDir } = daemonSettings;
 
     const noDaemonSettings = Object.keys(daemonSettings).length === 0;
 
@@ -35,24 +35,16 @@ class BackupPage extends React.PureComponent<Props> {
                     'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
                   )}
                 </p>
-              </div>
-              <div className="card__content">
                 <p>
                   {__(
                     'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
                   )}
                 </p>
-                <div className="card__content">
-                  <code>{lbryum_wallet_dir}</code>
-                </div>
-              </div>
-              <div className="card__content">
+                <p className="card__success-msg">{lbryumWalletDir}</p>
                 <p>
-                  <strong>
-                    {__(
-                      'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
-                    )}
-                  </strong>
+                  {__(
+                    'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
+                  )}
                 </p>
                 <p>
                   For more details on backing up and best practices,{' '}
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 0f0b4e797..246104151 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -31,6 +31,9 @@ $large-breakpoint: 1760px;
   --color-light-blue: #49b2e2;
   --color-red: #e2495e;
   --color-yellow: #fbd55e;
+  --color-green: #399483;
+  --color-green-light: #effbe4;
+  --color-green-blue: #2ec1a8;
   --color-divider: #e3e3e3;
 
   --text-color: var(--color-black);
@@ -123,6 +126,9 @@ $large-breakpoint: 1760px;
   --card-radius: 2px;
   --card-margin: $spacing-vertical * 2/3;
   --card-wallet-color: var(--text-color-inverse);
+  --success-msg-color: var(--color-green);
+  --success-msg-border: var(--color-green-blue);
+  --success-msg-bg: var(--color-green-light);
 
   /* File Tile Card */
   --file-tile--media-size: 60px;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 9c5f125c6..39a42fd8b 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -355,6 +355,14 @@
   }
 }
 
+.card__success-msg {
+  border-left: 2px solid var(--success-msg-border);
+  color: var(--success-msg-color);
+  background-color: var(--success-msg-bg);
+  padding: $spacing-vertical * 1/3;
+  margin: $spacing-vertical * 1/3 0;
+}
+
 .card__media--autothumb {
   color: red !important;
 }

From 460325d9e826786abcea2297c25bea26e0081ada Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Fri, 30 Mar 2018 01:37:09 -0400
Subject: [PATCH 7/9] update publish modal styling #1211

---
 src/renderer/component/publishForm/view.jsx | 13 ++++---------
 src/renderer/modal/modalPublish/view.jsx    |  5 ++---
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/renderer/component/publishForm/view.jsx b/src/renderer/component/publishForm/view.jsx
index af38738e7..0a7ab7523 100644
--- a/src/renderer/component/publishForm/view.jsx
+++ b/src/renderer/component/publishForm/view.jsx
@@ -1,21 +1,17 @@
 // @flow
 import * as React from 'react';
-import lbry from 'lbry';
-import { isNameValid, buildURI, regexInvalidURI, parseURI } from 'lbryURI';
+import { isNameValid, buildURI, regexInvalidURI } from 'lbryURI';
 import { Form, FormField, FormRow, FormFieldPrice, Submit } from 'component/common/form';
 import Button from 'component/button';
-import Modal from 'modal/modal';
 import ChannelSection from 'component/selectChannel';
-import Icon from 'component/common/icon';
 import classnames from 'classnames';
 import type { PublishParams, UpdatePublishFormData } from 'redux/reducers/publish';
 import FileSelector from 'component/common/file-selector';
+import { COPYRIGHT, OTHER } from 'constants/licenses';
+import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/claim';
+import * as icons from 'constants/icons';
 import BidHelpText from './internal/bid-help-text';
 import LicenseType from './internal/license-type';
-import { COPYRIGHT, OTHER } from 'constants/licenses';
-import { MINIMUM_PUBLISH_BID } from 'constants/claim';
-import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
-import * as icons from 'constants/icons';
 
 type Props = {
   publish: PublishParams => void,
@@ -292,7 +288,6 @@ class PublishForm extends React.PureComponent<Props> {
       submitLabel = !publishing ? __('Publish') : __('Publishing...');
     }
 
-    console.log('this.props', this.props);
     return (
       <Form onSubmit={this.handlePublish}>
         <section className={classnames('card card--section')}>
diff --git a/src/renderer/modal/modalPublish/view.jsx b/src/renderer/modal/modalPublish/view.jsx
index 6b1af68dd..65ed5580f 100644
--- a/src/renderer/modal/modalPublish/view.jsx
+++ b/src/renderer/modal/modalPublish/view.jsx
@@ -23,9 +23,8 @@ class ModalSendTip extends React.PureComponent<Props> {
           closeModal();
         }}
       >
-        <p>
-          {__('Your file has been published to LBRY at the address')} <code>{uri}</code>!
-        </p>
+        <p>{__('Your file has been published to LBRY at the address')}</p>
+        <p className="card__success-msg">{uri}</p>
         <p>
           {__(
             'The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.'

From 00e2e5e6da6d3e123f76ef13f4547ddc3ab752de Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Fri, 30 Mar 2018 01:40:20 -0400
Subject: [PATCH 8/9] fix prop name

---
 src/renderer/component/userEmailNew/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/component/userEmailNew/view.jsx b/src/renderer/component/userEmailNew/view.jsx
index b45b50d87..e6485811f 100644
--- a/src/renderer/component/userEmailNew/view.jsx
+++ b/src/renderer/component/userEmailNew/view.jsx
@@ -55,7 +55,7 @@ class UserEmailNew extends React.PureComponent<Props, State> {
               placeholder="youremail@example.org"
               name="email"
               value={this.state.email}
-              errorMessage={errorMessage}
+              error={errorMessage}
               onChange={this.handleEmailChanged}
             />
           </FormRow>

From 3d0900d8255c50dd5115539651959de460e95034 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Fri, 30 Mar 2018 12:30:43 -0400
Subject: [PATCH 9/9] add comment for card width

---
 src/renderer/scss/component/_card.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 39a42fd8b..eacc25491 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -336,7 +336,7 @@
     display: inline-block;
     vertical-align: top;
     overflow: visible;
-    // we should use $spacing-width - 1px here, not sure why it isn't working
+    // 35 px to handle to padding between cards
     width: calc((100% / 3) - 35px);
   }
 
@@ -350,6 +350,7 @@
 
   @media only screen and (min-width: $medium-breakpoint) {
     .card {
+      // 31 px to handle to padding between cards
       width: calc((100% / 4) - 31px);
     }
   }