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 />

33
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="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" label={__('Earn Rewards')} navigate={`/$/${PAGES.REWARDS}`} />
<Button button="primary" label={__('Purchase LBC')} navigate={`/$/${PAGES.BUY}`} />
<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>
)}

49
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">
{balance === 0 && (
<div className="main--empty">
<Yrbl
title={__("You can't upload things quite yet")}
type="sad"
title={__('Your wallet is empty')}
subtitle={
<Fragment>
<div>
<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>
{__('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 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 className="section">
<RewardAuthIntro />
</div>
</Fragment>
) : (
<PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
)}
<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;
}
}

24
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 {
display: none;
@media (min-width: $breakpoint-small) {
display: block;
height: 20rem;
margin-right: calc(var(--spacing-xl) * 2);
@media (max-width: $breakpoint-small) {
display: none;
}
}