LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

use consitent style for 'empty wallet' message on pages that require LBC

Browse source
This commit is contained in:
Sean Yesmunt 2020-08-26 12:24:07 -04:00
parent a5107f075c
commit 391cc76bd8
14 changed files with 113 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.env.defaults
View file

@ -22,12 +22,16 @@ SITE_DESCRIPTION=Meet LBRY, an open, free, and community-controlled content wond
LOGO_TITLE=lbry.tv LOGO_TITLE=lbry.tv
SIMPLE_SITE=false SIMPLE_SITE=false
SHOW_ADS=true SHOW_ADS=true
# OG YRBL_HAPPY_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-happy/7aa50a7e5adaf48691935d55e45d697547392929/839d9a
YRBL_SAD_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-sad/c2d9649633d974e5ffb503925e1f17d951f1bd0f/f262dd
# OG
OG_TITLE_SUFFIX=| lbry.tv OG_TITLE_SUFFIX=| lbry.tv
OG_HOMEPAGE_TITLE=lbry.tv OG_HOMEPAGE_TITLE=lbry.tv
OG_IMAGE_URL= OG_IMAGE_URL=
SITE_CANONICAL_URL=https://lbry.tv SITE_CANONICAL_URL=https://lbry.tv
# LOCALE # LOCALE
DEFAULT_LANGUAGE=en DEFAULT_LANGUAGE=en

2
config.js
View file

@ -22,6 +22,8 @@ const config = {
OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX, OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX,
OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE, OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE,
OG_IMAGE_URL: process.env.OG_IMAGE_URL, OG_IMAGE_URL: process.env.OG_IMAGE_URL,
YRBL_HAPPY_IMG_URL: process.env.YRBL_HAPPY_IMG_URL,
YRBL_SAD_IMG_URL: process.env.YRBL_SAD_IMG_URL,
SITE_CANONICAL_URL: process.env.SITE_CANONICAL_URL, SITE_CANONICAL_URL: process.env.SITE_CANONICAL_URL,
DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE, DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
AUTO_FOLLOW_CHANNELS: process.env.AUTO_FOLLOW_CHANNELS, AUTO_FOLLOW_CHANNELS: process.env.AUTO_FOLLOW_CHANNELS,

2
static/app-strings.json
View file

@ -1119,7 +1119,7 @@
"Once the transaction is sent, it cannot be reversed.": "Once the transaction is sent, it cannot be reversed.", "Once the transaction is sent, it cannot be reversed.": "Once the transaction is sent, it cannot be reversed.",
"Update Your Password": "Update Your Password", "Update Your Password": "Update Your Password",
"Your Wallet is Empty": "Your Wallet is Empty", "Your Wallet is Empty": "Your Wallet is Empty",
"There are a lot of ways to get LBC! You can purchase your own, earn rewards, or have your friend send you a few.": "There are a lot of ways to get LBC! You can purchase your own, earn rewards, or have your friend send you a few.", "Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.": "Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.",
"Buy Credits": "Buy Credits", "Buy Credits": "Buy Credits",
"Earn Rewards": "Earn Rewards", "Earn Rewards": "Earn Rewards",
"Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to re-enable them.": "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to re-enable them.", "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to re-enable them.": "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to re-enable them.",

2
ui/component/publishFile/view.jsx
View file

@ -337,7 +337,7 @@ function PublishFile(props: Props) {
return ( return (
<Card <Card
disabled={disabled || balance === 0} className={disabled || balance === 0 ? 'card--disabled' : ''}
title={ title={
<div> <div>
{header} {header}

4
ui/component/userEmailVerify/view.jsx
View file

@ -77,11 +77,11 @@ class UserEmailVerify extends React.PureComponent<Props> {
<div className="section__actions"> <div className="section__actions">
<Button <Button
button="primary" button="primary"
label={__('Resend link')} label={__('Resend Link')}
onClick={this.handleResendVerificationEmail} onClick={this.handleResendVerificationEmail}
disabled={resendingEmail} disabled={resendingEmail}
/> />
<UserSignOutButton label={__('Start over')} /> <UserSignOutButton label={__('Start Over')} />
</div> </div>
<p className="help--card-actions"> <p className="help--card-actions">
<I18nMessage <I18nMessage

BIN
ui/component/yrbl/gerbil-happy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 81 KiB

BIN
ui/component/yrbl/gerbil-sad.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 84 KiB

11
ui/component/yrbl/index.jsx
View file

@ -1,8 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import HappyYrbl from './gerbil-happy.png'; import { YRBL_HAPPY_IMG_URL, YRBL_SAD_IMG_URL } from 'config';
import SadYrbl from './gerbil-sad.png';
type Props = { type Props = {
title?: string, title?: string,
@ -12,8 +11,8 @@ type Props = {
}; };
const yrblTypes = { const yrblTypes = {
happy: HappyYrbl, happy: YRBL_HAPPY_IMG_URL,
sad: SadYrbl, sad: YRBL_SAD_IMG_URL,
}; };
export default class extends React.PureComponent<Props> { export default class extends React.PureComponent<Props> {
@ -31,8 +30,8 @@ export default class extends React.PureComponent<Props> {
<img alt="Friendly gerbil" className={classnames('yrbl', className)} src={`${image}`} /> <img alt="Friendly gerbil" className={classnames('yrbl', className)} src={`${image}`} />
{title && subtitle && ( {title && subtitle && (
<div className="yrbl__content"> <div className="yrbl__content">
<h2 className="card__title card__title--deprecated">{title}</h2> <h2 className="section__title">{title}</h2>
<p>{subtitle}</p> <p className="section__subtitle">{subtitle}</p>
</div> </div>
)} )}
</div> </div>

2
ui/page/buy/view.jsx
View file

@ -88,7 +88,7 @@ export default function BuyPage(props: Props) {
); );
return ( return (
<Page noSideNavigation className="main--buy"> <Page noSideNavigation className="main--buy" backout={{ backoutLabel: __('Done'), title: __('Buy credits') }}>
{!user && ( {!user && (
<div className="main--empty"> <div className="main--empty">
<Spinner delayed /> <Spinner delayed />

39
ui/page/channelNew/view.jsx
View file

@ -1,10 +1,12 @@
// @flow // @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import React from 'react'; import React from 'react';
import ChannelEdit from 'component/channelEdit'; import ChannelEdit from 'component/channelEdit';
import Page from 'component/page'; import Page from 'component/page';
import Button from 'component/button'; import Button from 'component/button';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import * as PAGES from 'constants/pages'; import Yrbl from 'component/yrbl';
type Props = { type Props = {
balance: number, balance: number,
@ -18,17 +20,32 @@ function ChannelNew(props: Props) {
const emptyBalance = balance === 0; const emptyBalance = balance === 0;
return ( return (
<Page noSideNavigation noFooter backout={{ title: __('Create A Channel'), backLabel: __('Cancel') }}> <Page noSideNavigation noFooter backout={{ title: __('Create a channel'), backLabel: __('Cancel') }}>
{emptyBalance && ( {emptyBalance && (
<div className="main--contained"> <div className="main--empty">
<div className="notice-message--above-content"> <Yrbl
<h1 className="section__title">You need LBC for this</h1> type="sad"
<h1 className="section__subtitle">Get sum coinz</h1> title={__('Your wallet is empty')}
<div className="section__actions"> subtitle={
<Button button="primary" label={__('Earn Rewards')} navigate={`/$/${PAGES.REWARDS}`} /> <div>
<Button button="primary" label={__('Purchase LBC')} navigate={`/$/${PAGES.BUY}`} /> <p>{__('You need LBC to create a channel and upload content.')}</p>
</div> <p>
</div> {__(
'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
)}
</p>
<div className="section__actions">
<Button
button="primary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
</div>
</div>
}
/>
</div> </div>
)} )}

67
ui/page/publish/view.jsx
View file

@ -1,10 +1,11 @@
// @flow // @flow
import React, { Fragment } from 'react'; import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import PublishForm from 'component/publishForm'; import PublishForm from 'component/publishForm';
import Page from 'component/page'; import Page from 'component/page';
import Yrbl from 'component/yrbl'; import Yrbl from 'component/yrbl';
import LbcSymbol from 'component/common/lbc-symbol'; import Button from 'component/button';
import RewardAuthIntro from 'component/rewardAuthIntro';
type Props = { type Props = {
balance: number, balance: number,
@ -23,40 +24,34 @@ function PublishPage(props: Props) {
return ( return (
<Page> <Page>
{balance === 0 ? ( {balance === 0 && (
<Fragment> <div className="main--empty">
<div className="section"> <Yrbl
<Yrbl type="sad"
title={__("You can't upload things quite yet")} title={__('Your wallet is empty')}
subtitle={ subtitle={
<Fragment> <div>
<p> <p>{__('You need LBC to create a channel and upload content.')}</p>
{__( <p>
'LBRY uses a blockchain, which is a fancy way of saying that users (you) are in control of your data.' {__(
)} 'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
</p> )}
<p> </p>
{__('Because of the blockchain, some actions require LBRY credits')} ( <div className="section__actions">
<LbcSymbol /> <Button
). button="primary"
</p> icon={ICONS.REWARDS}
<p> label={__('Earn Rewards')}
<LbcSymbol />{' '} navigate={`/$/${PAGES.REWARDS}`}
{__( />
'allows you to do some neat things, like paying your favorite creators for their content. And no company can stop you.' <Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
)} </div>
</p> </div>
</Fragment> }
} />
/> </div>
</div>
<div className="section">
<RewardAuthIntro />
</div>
</Fragment>
) : (
<PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
)} )}
<PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
</Page> </Page>
); );
} }

18
ui/page/wallet/view.jsx
View file

@ -36,27 +36,29 @@ const WalletPage = (props: Props) => {
{showIntro ? ( {showIntro ? (
<div className="main--empty"> <div className="main--empty">
<Yrbl <Yrbl
title={__('Your Wallet is Empty')} type="sad"
title={__('Your wallet is empty')}
subtitle={ subtitle={
<div> <div>
<p>{__('You need LBC to create a channel and upload content.')}</p>
<p> <p>
{__( {__(
'There are a lot of ways to get LBC! You can purchase your own, earn rewards, or have your friend send you a few.' 'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
)} )}
</p> </p>
<div className="section__actions"> <div className="section__actions">
<Button <Button
button="primary" button="primary"
icon={ICONS.BUY}
label={__('Buy Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button
button="secondary"
icon={ICONS.REWARDS} icon={ICONS.REWARDS}
label={__('Earn Rewards')} label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`} navigate={`/$/${PAGES.REWARDS}`}
/> />
<Button
button="secondary"
icon={ICONS.BUY}
label={__('Buy Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button <Button
icon={ICONS.RECEIVE} icon={ICONS.RECEIVE}
button="secondary" button="secondary"

11
ui/scss/component/_main.scss
View file

@ -180,15 +180,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top: 100px;
margin-bottom: 100px;
text-align: center; text-align: center;
padding: 0 var(--spacing-m);
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-l);
> .card { > .card {
width: 100%; width: 100%;
} }
@media (max-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
padding: 0 var(--spacing-m); margin-top: 100px;
margin-bottom: 100px;
} }
} }

26
ui/scss/component/_yrbl.scss
View file

@ -1,17 +1,31 @@
.yrbl__wrap { .yrbl__wrap {
align-items: center;
display: flex; display: flex;
align-items: center;
flex-direction: column-reverse;
flex-wrap: wrap;
justify-content: center; justify-content: center;
vertical-align: middle;
text-align: left; text-align: left;
.section__actions {
flex-wrap: wrap;
> * {
margin-bottom: var(--spacing-s);
}
}
@media (min-width: $breakpoint-small) {
flex-direction: row;
}
} }
.yrbl { .yrbl {
height: 20rem; display: none;
margin-right: calc(var(--spacing-xl) * 2);
@media (max-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
display: none; display: block;
height: 20rem;
margin-right: calc(var(--spacing-xl) * 2);
} }
} }