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
SIMPLE_SITE=false
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_HOMEPAGE_TITLE=lbry.tv
OG_IMAGE_URL=
SITE_CANONICAL_URL=https://lbry.tv
# LOCALE
DEFAULT_LANGUAGE=en

2
config.js
View file

@ -22,6 +22,8 @@ const config = {
OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX,
OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE,
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,
DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
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.",
"Update Your Password": "Update Your Password",
"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",
"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.",

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

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

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

@ -77,11 +77,11 @@ class UserEmailVerify extends React.PureComponent<Props> {
<div className="section__actions">
<Button
button="primary"
label={__('Resend link')}
label={__('Resend Link')}
onClick={this.handleResendVerificationEmail}
disabled={resendingEmail}
/>
<UserSignOutButton label={__('Start over')} />
<UserSignOutButton label={__('Start Over')} />
</div>
<p className="help--card-actions">
<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
import * as React from 'react';
import classnames from 'classnames';
import HappyYrbl from './gerbil-happy.png';
import SadYrbl from './gerbil-sad.png';
import { YRBL_HAPPY_IMG_URL, YRBL_SAD_IMG_URL } from 'config';
type Props = {
title?: string,
@ -12,8 +11,8 @@ type Props = {
};
const yrblTypes = {
happy: HappyYrbl,
sad: SadYrbl,
happy: YRBL_HAPPY_IMG_URL,
sad: YRBL_SAD_IMG_URL,
};
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}`} />
{title && subtitle && (
<div className="yrbl__content">
<h2 className="card__title card__title--deprecated">{title}</h2>
<p>{subtitle}</p>
<h2 className="section__title">{title}</h2>
<p className="section__subtitle">{subtitle}</p>
</div>
)}
</div>

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

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

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

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

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

@ -1,10 +1,11 @@
// @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 Page from 'component/page';
import Yrbl from 'component/yrbl';
import LbcSymbol from 'component/common/lbc-symbol';
import RewardAuthIntro from 'component/rewardAuthIntro';
import Button from 'component/button';
type Props = {
balance: number,
@ -23,40 +24,34 @@ function PublishPage(props: Props) {
return (
<Page>
{balance === 0 ? (
<Fragment>
<div className="section">
<Yrbl
title={__("You can't upload things quite yet")}
subtitle={
<Fragment>
<p>
{__(
'LBRY uses a blockchain, which is a fancy way of saying that users (you) are in control of your data.'
)}
</p>
<p>
{__('Because of the blockchain, some actions require LBRY credits')} (
<LbcSymbol />
).
</p>
<p>
<LbcSymbol />{' '}
{__(
'allows you to do some neat things, like paying your favorite creators for their content. And no company can stop you.'
)}
</p>
</Fragment>
}
/>
</div>
<div className="section">
<RewardAuthIntro />
</div>
</Fragment>
) : (
<PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
{balance === 0 && (
<div className="main--empty">
<Yrbl
type="sad"
title={__('Your wallet is empty')}
subtitle={
<div>
<p>{__('You need LBC to create a channel and upload content.')}</p>
<p>
{__(
'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>
)}
<PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
</Page>
);
}

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

@ -36,27 +36,29 @@ const WalletPage = (props: Props) => {
{showIntro ? (
<div className="main--empty">
<Yrbl
title={__('Your Wallet is Empty')}
type="sad"
title={__('Your wallet is empty')}
subtitle={
<div>
<p>{__('You need LBC to create a channel and upload content.')}</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>
<div className="section__actions">
<Button
button="primary"
icon={ICONS.BUY}
label={__('Buy Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button
button="secondary"
icon={ICONS.REWARDS}
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button
button="secondary"
icon={ICONS.BUY}
label={__('Buy Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button
icon={ICONS.RECEIVE}
button="secondary"

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

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

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

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