From da10296132a38a100e8d130c18cef091c265493c Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 13 Nov 2019 13:14:19 -0500
Subject: [PATCH] lbry.tv account copy changes

---
 .lintstagedrc.json                    |  4 +--
 package.json                          |  1 +
 ui/component/rewardAuthIntro/index.js | 12 +++++++++
 ui/component/rewardAuthIntro/view.jsx | 35 +++++++++++++++++++++++++++
 ui/component/userEmail/view.jsx       | 14 +++++++----
 ui/component/userEmailNew/view.jsx    | 13 +++++++---
 ui/page/file/view.jsx                 |  2 +-
 ui/page/publish/view.jsx              | 18 +++-----------
 ui/page/rewards/view.jsx              | 19 ++-------------
 ui/scss/component/section.scss        |  1 +
 ui/scss/init/_gui.scss                |  3 +++
 yarn.lock                             |  5 ++++
 12 files changed, 84 insertions(+), 43 deletions(-)
 create mode 100644 ui/component/rewardAuthIntro/index.js
 create mode 100644 ui/component/rewardAuthIntro/view.jsx

diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index 771aac230..38c99b105 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,6 +1,6 @@
 {
   "linters": {
-    "src/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
-    "src/**/*.{js,jsx}": ["eslint", "flow focus-check --color always", "git add"]
+    "ui/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
+    "ui/**/*.{js,jsx}": ["eslint", "flow focus-check --color always", "git add"]
   }
 }
diff --git a/package.json b/package.json
index ac86fccb3..33cf82a28 100644
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint-plugin-standard": "^4.0.1",
     "file-loader": "^4.2.0",
     "flow-bin": "^0.97.0",
     "flow-typed": "^2.3.0",
diff --git a/ui/component/rewardAuthIntro/index.js b/ui/component/rewardAuthIntro/index.js
new file mode 100644
index 000000000..4acfa933c
--- /dev/null
+++ b/ui/component/rewardAuthIntro/index.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { selectUnclaimedRewardValue } from 'lbryinc';
+import RewardAuthIntro from './view';
+
+const select = state => ({
+  totalRewardValue: selectUnclaimedRewardValue(state),
+});
+
+export default connect(
+  select,
+  null
+)(RewardAuthIntro);
diff --git a/ui/component/rewardAuthIntro/view.jsx b/ui/component/rewardAuthIntro/view.jsx
new file mode 100644
index 000000000..decc047e6
--- /dev/null
+++ b/ui/component/rewardAuthIntro/view.jsx
@@ -0,0 +1,35 @@
+// @flow
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import I18nMessage from 'component/i18nMessage';
+
+type Props = {
+  balance: number,
+  totalRewardValue: number,
+};
+
+function RewardAuthIntro(props: Props) {
+  const { totalRewardValue } = props;
+  const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
+
+  return (
+    <Card
+      title={__('Sign In to lbry.tv to Earn Rewards')}
+      subtitle={
+        <I18nMessage
+          tokens={{
+            credit_amount: <CreditAmount inheritStyle amount={totalRewardRounded} />,
+          }}
+        >
+          A lbry.tv account allows you to earn more than %credit_amount% in rewards, backup your data, and get content
+          and security updates.
+        </I18nMessage>
+      }
+      actions={<Button button="primary" navigate="/$/rewards" label={__('Unlock Rewards')} />}
+    />
+  );
+}
+
+export default RewardAuthIntro;
diff --git a/ui/component/userEmail/view.jsx b/ui/component/userEmail/view.jsx
index dc414406e..2bd06c5f0 100644
--- a/ui/component/userEmail/view.jsx
+++ b/ui/component/userEmail/view.jsx
@@ -35,10 +35,14 @@ function UserEmail(props: Props) {
 
   return (
     <Card
-      title={__('Email')}
-      subtitle={__(
-        'This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to save account information and earn rewards.'
-      )}
+      title={__('lbry.tv Account')}
+      subtitle={
+        isVerified
+          ? undefined
+          : __(
+              'Creating a lbry.tv account will allow you to earn rewards, receive content and security updates, and optionally backup your data.'
+            )
+      }
       actions={
         isVerified ? (
           <FormField
@@ -59,7 +63,7 @@ function UserEmail(props: Props) {
             value={email || ''}
           />
         ) : (
-          <Button button="primary" label={__('Add Email')} navigate={`/$/${PAGES.AUTH}`} />
+          <Button button="primary" label={__('Sign In')} navigate={`/$/${PAGES.AUTH}`} />
         )
       }
     />
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index ae66f39c0..033e08d54 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -29,8 +29,15 @@ function UserEmailNew(props: Props) {
 
   return (
     <React.Fragment>
-      <h1 className="section__title--large">{__('Sign In to LBRY')}</h1>
-      <p className="section__subtitle">{__('Create a new account or sign in.')}</p>
+      <h1 className="section__title--large">{__('Sign In to lbry.tv')}</h1>
+      <p className="section__subtitle">
+        {/* @if TARGET='web' */}
+        {__('Create a new account or sign in.')}
+        {/* @endif */}
+        {/* @if TARGET='app' */}
+        {__('An account with lbry.tv allows you to earn rewards and backup your data.')}
+        {/* @endif */}
+      </p>
       <Form onSubmit={handleSubmit} className="section__body">
         <FormField
           autoFocus
@@ -49,7 +56,7 @@ function UserEmailNew(props: Props) {
             name="sync_checkbox"
             label={
               <React.Fragment>
-                {__('Sync balance and preferences across devices.')}{' '}
+                {__('Backup your account and wallet data.')}{' '}
                 <Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
               </React.Fragment>
             }
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index 4e6e123f5..7800914b9 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -142,7 +142,7 @@ class FilePage extends React.Component<Props> {
               {__(
                 'The publisher has chosen to charge LBC to view this content. Your balance is currently too low to view it.'
               )}{' '}
-              {__('Checkout')} <Button button="link" navigate="/$/rewards" label={__('the rewards page')} />{' '}
+              {__('Check out')} <Button button="link" navigate="/$/rewards" label={__('the rewards page')} />{' '}
               {__('or send more LBC to your wallet.')}
             </div>
           )}
diff --git a/ui/page/publish/view.jsx b/ui/page/publish/view.jsx
index 34f6187d2..a80a499c5 100644
--- a/ui/page/publish/view.jsx
+++ b/ui/page/publish/view.jsx
@@ -4,8 +4,7 @@ import PublishForm from 'component/publishForm';
 import Page from 'component/page';
 import Yrbl from 'component/yrbl';
 import LbcSymbol from 'component/common/lbc-symbol';
-import CreditAmount from 'component/common/credit-amount';
-import Button from 'component/button';
+import RewardAuthIntro from 'component/rewardAuthIntro';
 
 type Props = {
   balance: number,
@@ -13,8 +12,7 @@ type Props = {
 };
 
 function PublishPage(props: Props) {
-  const { balance, totalRewardValue } = props;
-  const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
+  const { balance } = props;
 
   function scrollToTop() {
     const mainContent = document.querySelector('main');
@@ -50,17 +48,7 @@ function PublishPage(props: Props) {
               </Fragment>
             }
           />
-          <section className="card card--section">
-            <h1 className="card__title">{__('LBRY Credits Required')}</h1>
-            <p className="card__subtitle">
-              {__(' There are a variety of ways to get credits, including more than')}{' '}
-              <CreditAmount inheritStyle amount={totalRewardRounded} />{' '}
-              {__('in free rewards for participating in the LBRY beta.')}
-            </p>
-            <div className="card__actions">
-              <Button button="link" navigate="/$/rewards" label={__('Checkout the rewards')} />
-            </div>
-          </section>
+          <RewardAuthIntro />
         </Fragment>
       )}
       <PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
diff --git a/ui/page/rewards/view.jsx b/ui/page/rewards/view.jsx
index dde6b7c4e..21808252c 100644
--- a/ui/page/rewards/view.jsx
+++ b/ui/page/rewards/view.jsx
@@ -1,14 +1,13 @@
 // @flow
-import * as PAGES from 'constants/pages';
 import React, { PureComponent, Fragment } from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import RewardListClaimed from 'component/rewardListClaimed';
 import RewardTile from 'component/rewardTile';
 import Button from 'component/button';
 import Page from 'component/page';
-import Card from 'component/common/card';
 import classnames from 'classnames';
 import { rewards as REWARD_TYPES } from 'lbryinc';
+import RewardAuthIntro from 'component/rewardAuthIntro';
 
 type Props = {
   doAuth: () => void,
@@ -38,21 +37,7 @@ class RewardsPage extends PureComponent<Props> {
 
     if (user && !user.is_reward_approved && rewardsEnabled) {
       if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) {
-        return (
-          <Card
-            title={__('Sign In To Unlock Rewards')}
-            subtitle={__(
-              'This is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.'
-            )}
-            actions={
-              <Button
-                navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.REWARDS}`}
-                button="primary"
-                label={__('Unlock Rewards')}
-              />
-            }
-          />
-        );
+        return <RewardAuthIntro />;
       }
       return (
         <section className="card card--section">
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 6e6cb625c..0af266355 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -57,6 +57,7 @@
 }
 
 .section__subtitle {
+  font-size: var(--font-body);
   color: $lbry-gray-5;
 }
 
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index fece0a216..6393f0f86 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -44,6 +44,9 @@ h6 {
 
 p {
   font-size: var(--font-body);
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-small);
+  }
 }
 
 ul,
diff --git a/yarn.lock b/yarn.lock
index 0e803bbc2..b4bc468cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4504,6 +4504,11 @@ eslint-plugin-react@^7.7.0:
     prop-types "^15.7.2"
     resolve "^1.10.1"
 
+eslint-plugin-standard@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-4.0.1.tgz#ff0519f7ffaff114f76d1bd7c3996eef0f6e20b4"
+  integrity sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ==
+
 eslint-scope@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"