From 22548f430415b614cf1d22759a2123f0aa396ab9 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Fri, 27 Sep 2019 16:03:05 -0400 Subject: [PATCH] CARD ALL THE THINGS --- src/ui/component/splash/view.jsx | 2 +- src/ui/component/userSignIn/view.jsx | 6 +- src/ui/component/userVerify/view.jsx | 4 +- src/ui/component/walletBackup/view.jsx | 90 ++- .../component/youtubeTransferWelcome/view.jsx | 14 +- src/ui/modal/modal.jsx | 2 +- src/ui/page/help/view.jsx | 119 +-- src/ui/page/settings/view.jsx | 715 +++++++++--------- src/ui/scss/component/_card.scss | 53 -- src/ui/scss/component/_main.scss | 3 +- src/ui/scss/component/_modal.scss | 1 + src/ui/scss/component/_table.scss | 1 - src/ui/scss/component/section.scss | 4 - src/ui/scss/init/_gui.scss | 8 +- 14 files changed, 496 insertions(+), 526 deletions(-) diff --git a/src/ui/component/splash/view.jsx b/src/ui/component/splash/view.jsx index 6236ae42e..16aef786f 100644 --- a/src/ui/component/splash/view.jsx +++ b/src/ui/component/splash/view.jsx @@ -272,7 +272,7 @@ export default class SplashScreen extends React.PureComponent {

{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}

-
+
diff --git a/src/ui/component/userSignIn/view.jsx b/src/ui/component/userSignIn/view.jsx index 705f46053..20c7e29e1 100644 --- a/src/ui/component/userSignIn/view.jsx +++ b/src/ui/component/userSignIn/view.jsx @@ -68,11 +68,11 @@ function UserSignIn(props: Props) { // We may want to keep a component rendered while something is being fetched, instead of replacing it with the large spinner // The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from // reward claiming (plus the balance updating after), channel creation, account syncing, and youtube transfer - const canHijackSignInFlowWithSpinner = hasVerifiedEmail && balance === 0 && !getSyncError; + const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !hasClaimedEmailAward && balance === 0 && !getSyncError; const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet; const isWaitingForSomethingToFinish = // If the user has claimed the email award, we need to wait until the balance updates sometime in the future - !hasFetchedReward || (hasFetchedReward && hasClaimedEmailAward) || (syncEnabled && !hasSynced); + !hasFetchedReward || (hasFetchedReward && balance === 0) || (syncEnabled && !hasSynced); // The possible screens for the sign in flow const showEmail = !emailToVerify && !hasVerifiedEmail; @@ -98,7 +98,7 @@ function UserSignIn(props: Props) { if (hasVerifiedEmail && !hasClaimedEmailAward && !hasFetchedReward && !delayForSync) { claimReward(); } - }, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced]); + }, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced, balance]); // Loop through this list from the end, until it finds a matching component // If it never finds one, assume the user has completed every step and redirect them diff --git a/src/ui/component/userVerify/view.jsx b/src/ui/component/userVerify/view.jsx index 8cf198e5f..bf03860e7 100644 --- a/src/ui/component/userVerify/view.jsx +++ b/src/ui/component/userVerify/view.jsx @@ -28,13 +28,13 @@ class UserVerify extends React.PureComponent { const { errorMessage, isPending, verifyPhone } = this.props; return ( -
+

{__('Extra Verification Needed')}

{__( "We weren't able to auto-approve you for rewards. Please complete one of the steps below to unlock them." )}{' '} -

diff --git a/src/ui/component/walletBackup/view.jsx b/src/ui/component/walletBackup/view.jsx index 1b9563de4..0cc7898be 100644 --- a/src/ui/component/walletBackup/view.jsx +++ b/src/ui/component/walletBackup/view.jsx @@ -5,6 +5,7 @@ import Button from 'component/button'; import CopyableText from 'component/copyableText'; import AdmZip from 'adm-zip'; import path from 'path'; +import Card from 'component/common/card'; type Props = { daemonSettings: { @@ -89,46 +90,55 @@ class WalletBackup extends React.PureComponent { const { wallet_dir: lbryumWalletDir } = daemonSettings; return ( -
-

{__('Backup Your LBRY Credits')}

- -
    -
  • - {__( - 'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.' - )} -
    • -
  • - {__( - 'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.' - )} -
    • -
  • - {__( - 'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:' - )} -
    • -
- -

- {__( - 'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.' - )}{' '} - {/* @i18fixme */} - {__('For more details on backing up and best practices')},{' '} -

- + +
  • + {__( + 'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.' + )} +
    • +
  • + {__( + 'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.' + )} +
    • +
  • + {__( + 'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:' + )} +
    • + + } + actions={ + + +

    + {__( + 'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.' + )}{' '} + {/* @i18fixme */} + {__('For more details on backing up and best practices')},{' '} +

    + + } + /> ); } } diff --git a/src/ui/component/youtubeTransferWelcome/view.jsx b/src/ui/component/youtubeTransferWelcome/view.jsx index 98e12f40f..6cfff830a 100644 --- a/src/ui/component/youtubeTransferWelcome/view.jsx +++ b/src/ui/component/youtubeTransferWelcome/view.jsx @@ -37,7 +37,7 @@ export default function UserYoutubeTransfer(props: Props) {
    {youtubeChannels.map(({ lbry_channel_name: channelName, channel_claim_id: claimId }) => ( -
    +
    {}} actions={false} uri={`lbry://${channelName}#${claimId}`} />
    ))} @@ -45,10 +45,8 @@ export default function UserYoutubeTransfer(props: Props) { {hasPendingYoutubeTransfer ? (
    -
    -

    {__('Transfer In Progress...')}

    -

    {__('You can now publish and comment using your official channel.')}

    -
    +

    {__('Transfer In Progress...')}

    +

    {__('You can now publish and comment using your official channel.')}

    diff --git a/src/ui/modal/modal.jsx b/src/ui/modal/modal.jsx index 8eaeca7f7..d0ca6edae 100644 --- a/src/ui/modal/modal.jsx +++ b/src/ui/modal/modal.jsx @@ -50,7 +50,7 @@ export class Modal extends React.PureComponent { {title &&

    {title}

    } diff --git a/src/ui/page/help/view.jsx b/src/ui/page/help/view.jsx index 69a925864..7b802cf9e 100644 --- a/src/ui/page/help/view.jsx +++ b/src/ui/page/help/view.jsx @@ -10,6 +10,7 @@ import { Lbry } from 'lbry-redux'; import Native from 'native'; import Button from 'component/button'; import Page from 'component/page'; +import Card from 'component/common/card'; type DeamonSettings = { data_dir: string | any, @@ -122,77 +123,84 @@ class HelpPage extends React.PureComponent { return ( -
    -

    {__('Read the FAQ')}

    -

    {__('Our FAQ answers many common questions.')}

    + +
    + } + /> -
    -
    -
    + + {__('Live help is available most hours in the')} #help{' '} + {__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')} +

    + } + actions={ +
    +
    + } + /> -
    -

    {__('Find Assistance')}

    - -

    - {__('Live help is available most hours in the')} #help{' '} - {__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')} -

    - -
    -
    -
    -
    -

    {__('Report a Bug or Suggest a New Feature')}

    - -

    - {__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '} -

    + + {__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '} +