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

better consistency

Browse source
This commit is contained in:
Sean Yesmunt 2019-07-21 17:31:22 -04:00
parent f2e70ba0d2
commit cd1ce38687
125 changed files with 1330 additions and 1947 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -159,7 +159,6 @@
"react-simplemde-editor": "^4.0.0",
"react-spring": "^8.0.20",
"react-sticky-box": "^0.8.0",
"react-toggle": "^4.0.2",
"redux": "^3.6.0",
"redux-persist": "^4.8.0",
"redux-persist-transform-compress": "^4.2.0",

4
src/ui/component/channelContent/view.jsx
View file

@ -29,11 +29,11 @@ function ChannelContent(props: Props) {
{!fetching && !hasContent && (
<div className="card--section">
<h2 className="card__content help">{__("This channel hasn't uploaded anything.")}</h2>
<h2 className="help">{__("This channel hasn't uploaded anything.")}</h2>
</div>
)}
{!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}
{!channelIsMine && <HiddenNsfwClaims className="help" uri={uri} />}
{hasContent && <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />}

7
src/ui/component/channelEdit/view.jsx
View file

@ -2,7 +2,6 @@
import React, { useState } from 'react';
import { parseURI } from 'lbry-redux';
import { Form, FormField } from 'component/common/form';
import Button from 'component/button';
import SelectAsset from 'component/selectAsset';
import TagSelect from 'component/tagsSelect';
@ -21,12 +20,9 @@ type Props = {
tags: Array<string>,
locations: Array<string>,
languages: Array<string>,
updateChannel: any => void,
updateThumb: string => void,
updateCover: string => void,
setEditing: boolean => void,
};
function ChannelForm(props: Props) {
@ -43,7 +39,6 @@ function ChannelForm(props: Props) {
languages,
amount,
updateChannel,
setEditing,
updateThumb,
updateCover,
} = props;
@ -113,7 +108,6 @@ function ChannelForm(props: Props) {
</p>
</div>
<Form onSubmit={channelParams => updateChannel(channelParams)}>
<div className="card__content">
<SelectAsset
onUpdate={v => handleThumbnailChange(v)}
currentValue={params.thumbnail}
@ -218,7 +212,6 @@ function ChannelForm(props: Props) {
}}
/>
</div>
</div>
</Form>
</section>
);

4
src/ui/component/claimList/view.jsx
View file

@ -99,7 +99,7 @@ export default function ClaimList(props: Props) {
</div>
)}
{urisLength > 0 && (
<ul>
<ul className="ul--no-style">
{sortedUris.map((uri, index) => (
<React.Fragment key={uri}>
<ClaimPreview uri={uri} type={type} />
@ -108,7 +108,7 @@ export default function ClaimList(props: Props) {
))}
</ul>
)}
{urisLength === 0 && !loading && <h2 className="main--empty empty">{empty || __('No results')}</h2>}
{urisLength === 0 && !loading && <p className="main--empty empty">{empty || __('No results')}</p>}
</section>
);
}

8
src/ui/component/claimListDiscover/view.jsx
View file

@ -1,6 +1,6 @@
// @flow
import type { Node } from 'react';
import React, { useEffect } from 'react';
import React, { Fragment, useEffect } from 'react';
import { withRouter } from 'react-router';
import { buildClaimSearchCacheQuery, MATURE_TAGS } from 'lbry-redux';
import { FormField } from 'component/common/form';
@ -149,7 +149,7 @@ function ClaimListDiscover(props: Props) {
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
const header = (
<h1 className="card__title--flex">
<Fragment>
<FormField
className="claim-list__dropdown"
type="select"
@ -205,7 +205,7 @@ function ClaimListDiscover(props: Props) {
))}
</FormField>
)}
</h1>
</Fragment>
);
return (
@ -221,7 +221,7 @@ function ClaimListDiscover(props: Props) {
pageSize={PAGE_SIZE}
/>
{loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder />)}
{loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
</div>
);
}

48
src/ui/component/claimPreview/view.jsx
View file

@ -1,5 +1,5 @@
// @flow
import React, { useEffect } from 'react';
import React, { Fragment, useEffect } from 'react';
import classnames from 'classnames';
import { parseURI, convertToShareLink } from 'lbry-redux';
import { withRouter } from 'react-router-dom';
@ -13,6 +13,7 @@ import FileProperties from 'component/fileProperties';
import ClaimTags from 'component/claimTags';
import SubscribeButton from 'component/subscribeButton';
import ChannelThumbnail from 'component/channelThumbnail';
import Button from 'component/button';
type Props = {
uri: string,
@ -27,7 +28,7 @@ type Props = {
thumbnail: string,
title: string,
nsfw: boolean,
placeholder: boolean,
placeholder: string,
type: string,
hasVisitedUri: boolean,
blackListedOutpoints: Array<{
@ -60,8 +61,10 @@ function ClaimPreview(props: Props) {
hasVisitedUri,
} = props;
const haventFetched = claim === undefined;
const abandoned = !isResolvingUri && !claim && !placeholder;
const abandoned = !isResolvingUri && !claim;
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
const showPublishLink = abandoned && placeholder === 'publish';
let isValid;
try {
parseURI(uri);
@ -71,9 +74,8 @@ function ClaimPreview(props: Props) {
}
const isChannel = isValid ? parseURI(uri).isChannel : false;
const signingChannel = claim && claim.signing_channel;
let shouldHide = abandoned || (!claimIsMine && obscureNsfw && nsfw);
let shouldHide =
placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw));
// This will be replaced once blocking is done at the wallet server level
if (claim && !shouldHide && blackListedOutpoints) {
@ -113,9 +115,9 @@ function ClaimPreview(props: Props) {
return null;
}
if (placeholder || (isResolvingUri && !claim)) {
if (placeholder === 'loading' || (isResolvingUri && !claim)) {
return (
<li className="claim-preview" disabled>
<li className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })} disabled>
<div className="placeholder media__thumb" />
<div className="placeholder__wrapper">
<div className="placeholder claim-preview-title" />
@ -128,10 +130,12 @@ function ClaimPreview(props: Props) {
return (
<li
role="link"
onClick={pending ? undefined : onClick}
onClick={pending || type === 'inline' ? undefined : onClick}
onContextMenu={handleContextMenu}
className={classnames('claim-preview', {
'claim-preview--small': type === 'small',
'claim-preview--large': type === 'large',
'claim-preview--inline': type === 'inline',
'claim-preview--visited': !isChannel && hasVisitedUri,
'claim-preview--pending': pending,
})}
@ -140,7 +144,7 @@ function ClaimPreview(props: Props) {
<div className="claim-preview-metadata">
<div className="claim-preview-info">
<div className="claim-preview-title">
<TruncatedText text={title || (claim && claim.name)} lines={1} />
{claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
</div>
{type !== 'small' && (
<div>
@ -152,11 +156,29 @@ function ClaimPreview(props: Props) {
<div className="claim-preview-properties">
<div className="media__subtitle">
<UriIndicator uri={uri} link />
{pending && <div>Pending...</div>}
<div>{isChannel ? `${claimsInChannel} ${__('publishes')}` : <DateTime timeAgo uri={uri} />}</div>
{!isResolvingUri && (
<div>
{claim ? (
<UriIndicator uri={uri} link />
) : (
<Fragment>
<div>{__('Publish something and claim this spot!')}</div>
<div className="card__actions">
<Button button="primary" label={`${__('Publish to')} ${uri}`} />
</div>
</Fragment>
)}
<div>
{isChannel ? (
type !== 'inline' && `${claimsInChannel} ${__('publishes')}`
) : (
<DateTime timeAgo uri={uri} />
)}
</div>
</div>
)}
</div>
<ClaimTags uri={uri} type={type} />
</div>
</div>

6
src/ui/component/commentCreate/view.jsx
View file

@ -39,7 +39,7 @@ export function CommentCreate(props: Props) {
return (
<section>
{commentAck !== true && (
<div className="card__content markdown-preview">
<div>
<p>{__('A few things to know before participating in the comment alpha:')}</p>
<ul>
<li>
@ -66,10 +66,7 @@ export function CommentCreate(props: Props) {
)}
{commentAck === true && (
<Form onSubmit={handleSubmit}>
<div className="card__content">
<ChannelSection channel={channel} onChannelChange={handleChannelChange} />
</div>
<div className="card__content">
<FormField
disabled={channel === CHANNEL_NEW}
type="textarea"
@ -79,7 +76,6 @@ export function CommentCreate(props: Props) {
value={commentValue}
onChange={handleCommentChange}
/>
</div>
<div className="card__actions">
<Button
button="primary"

11
src/ui/component/common/form-components/form-field.jsx
View file

@ -2,11 +2,9 @@
import type { ElementRef } from 'react';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Toggle from 'react-toggle';
import SimpleMDE from 'react-simplemde-editor';
import MarkdownPreview from 'component/common/markdown-preview-internal';
import { openEditorMenu, stopContextMenu } from 'util/context-menu';
import 'easymde/dist/easymde.min.css';
type Props = {
@ -107,15 +105,6 @@ export class FormField extends React.PureComponent<Props> {
</checkbox-element>
</Wrapper>
);
} else if (type === 'setting') {
// 'setting' should only be used for settings. Forms should use "checkbox"
input = (
<input-submit>
{labelOnLeft && <label htmlFor={name}>{label}</label>}
<Toggle id={name} {...inputProps} />
{!labelOnLeft && <label htmlFor={name}>{label}</label>}
</input-submit>
);
} else if (type === 'select') {
input = (
<fieldset-section>

2
src/ui/component/common/icon-custom.jsx
View file

@ -212,7 +212,7 @@ export const icons = {
[ICONS.NO]: buildIcon(
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
),
[ICONS.UP]: buildIcon(<polyline points="18 15 12 9 6 15" />),
[ICONS.UP]: buildIcon(<polyline transform="translate(-5.000) scale(1.1, 1.1)" points="18 15 12 9 6 15" />),
[ICONS.DOWN]: buildIcon(<polyline points="6 9 12 15 18 9" />),
[ICONS.FULLSCREEN]: buildIcon(
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />

2
src/ui/component/common/unsupported-on-web.jsx
View file

@ -4,7 +4,7 @@ import Button from 'component/button';
export default function UnsupportedOnWeb() {
return (
IS_WEB && (
<div className="card__content help help--warning">
<div className="help help--warning">
This page is not currently supported on the web.{' '}
<Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" /> for full feature
support.

6
src/ui/component/fileDetails/view.jsx
View file

@ -19,11 +19,7 @@ class FileDetails extends PureComponent<Props> {
const { claim, contentType, fileInfo, metadata, openFolder } = this.props;
if (!claim || !metadata) {
return (
<div className="card__content">
<span className="empty">{__('Empty claim or metadata info.')}</span>
</div>
);
return <span className="empty">{__('Empty claim or metadata info.')}</span>;
}
const { description, languages, license } = metadata;

2
src/ui/component/fileDownloadLink/view.jsx
View file

@ -62,7 +62,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
const progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
const label = fileInfo ? __('Downloading: ') + progress.toFixed(0) + __('% complete') : __('Connecting...');
return <span className="file-download">{label}</span>;
return <span>{label}</span>;
} else if ((fileInfo === null && !downloading) || (fileInfo && !fileInfo.download_path)) {
if (!costInfo) {
return null;

13
src/ui/component/inviteList/view.jsx
View file

@ -48,9 +48,9 @@ class InviteList extends React.PureComponent<Props> {
const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title card__title--flex-between">
<section className="card">
<div className="table__header">
<h2 className="card__title">
{__('Invite History')}
{referralReward && showClaimable && (
<RewardLink
@ -60,9 +60,9 @@ class InviteList extends React.PureComponent<Props> {
/>
)}
</h2>
</header>
<p className="card__subtitle">{rewardHelp}</p>
</div>
<div className="card__content">
<table className="table table--invites">
<thead>
<tr>
@ -93,9 +93,6 @@ class InviteList extends React.PureComponent<Props> {
))}
</tbody>
</table>
<div className="help">{rewardHelp}</div>
</div>
</section>
);
}

11
src/ui/component/inviteNew/view.jsx
View file

@ -48,7 +48,9 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
name="email"
value={this.state.email}
error={errorMessage}
inputButton={<Button button="inverse" type="submit" label="Invite" disabled={isPending} />}
inputButton={
<Button button="inverse" type="submit" label="Invite" disabled={isPending || !this.state.email} />
}
onChange={event => {
this.handleEmailChanged(event);
}}
@ -72,21 +74,15 @@ class InviteNew extends React.PureComponent<Props> {
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Invite a Friend')}</h2>
<p className="card__subtitle">{__('When your friends start using LBRY, the network gets stronger!')}</p>
</header>
<div className="card__content">
<FormInviteNew
errorMessage={errorMessage}
inviteNew={inviteNew}
isPending={isPending}
rewardAmount={rewardAmount}
/>
</div>
<div className="card__content">
<CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
<p className="help">
@ -95,7 +91,6 @@ class InviteNew extends React.PureComponent<Props> {
<Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />{' '}
{__('to learn more about referrals')}.
</p>
</div>
</section>
);
}

8
src/ui/component/navigationHistory/view.jsx
View file

@ -78,7 +78,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
return historyItems.length ? (
<React.Fragment>
<div className="card__header card__actions card__actions--between">
<div className="card__actions">
{Object.keys(itemsSelected).length ? (
<Button button="link" label={__('Delete')} onClick={this.removeSelected} />
) : (
@ -87,7 +87,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
<Button button="link" label={allSelected ? __('Cancel') : __('Select All')} onClick={selectHandler} />
</div>
{!!historyItems.length && (
<section className="card card__content item-list">
<section className="card item-list">
{historyItems.map(item => (
<NavigationHistoryItem
key={item.uri}
@ -106,15 +106,11 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
) : (
<div className="main--empty">
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Your history is empty, what are you doing here?')}</h2>
</header>
<div className="card__content">
<div className="card__actions card__actions--center">
<Button button="primary" navigate="/" label={__('Explore new content')} />
</div>
</div>
</section>
</div>
);

2
src/ui/component/navigationHistoryRecent/view.jsx
View file

@ -17,11 +17,9 @@ export default function NavigationHistoryRecent(props: Props) {
return history.length ? (
<div className="card item-list">
<section className="card__content">
{history.map(({ lastViewed, uri }) => (
<NavigationHistoryItem slim key={uri} uri={uri} lastViewed={lastViewed} />
))}
</section>
<div className="card__actions">
<Button navigate="/$/library/all" button="link" label={__('See All Visited Links')} />
</div>

4
src/ui/component/previewLink/view.jsx
View file

@ -38,11 +38,11 @@ class PreviewLink extends React.PureComponent<Props> {
<TruncatedText text={title} lines={1} />
</span>
</span>
<span className={'preview-link__description media__subtext'}>
<span className={'preview-link__description media__subtitle'}>
<UriIndicator uri={uri} link />
</span>
<span className={'file-list__item-properties'}>
<span className={'preview-link__description media__subtext'}>
<span className={'preview-link__description media__subtitle'}>
<TruncatedText lines={2} showTooltip={false}>
<MarkdownPreview content={description} promptLinks strip />
</TruncatedText>

2
src/ui/component/publishAdditionalOptions/view.jsx
View file

@ -27,7 +27,7 @@ function PublishAdvanced(props: Props) {
return (
<section className="card card--section">
{!hideSection && (
<div className={classnames('card__content', { 'card--disabled': !name })}>
<div className={classnames({ 'card--disabled': !name })}>
<FormField
label={__('Language')}
type="select"

4
src/ui/component/publishFile/view.jsx
View file

@ -33,10 +33,8 @@ function PublishFile(props: Props) {
'card--disabled': balance === 0,
})}
>
<header className="card__header">
<h2 className="card__title card__title--flex-between">{isStillEditing ? __('Edit') : __('Publish')}</h2>
<h2 className="card__title">{isStillEditing ? __('Edit') : __('Publish')}</h2>
{isStillEditing && <p className="card__subtitle">{__('You are currently editing a claim.')}</p>}
</header>
<div className="card__content">
<FileSelector currentPath={filePath} onFileChosen={handleFileChange} />

6
src/ui/component/publishForm/view.jsx
View file

@ -130,7 +130,7 @@ function PublishForm(props: Props) {
{/* This should probably be PublishThumbnail */}
<SelectThumbnail />
</div>
<div className="card">
<div className="card card--section">
<TagSelect
title={false}
suggestMature
@ -152,20 +152,18 @@ function PublishForm(props: Props) {
/>
</div>
<section className="card card--section">
<div className="card__content">
<ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
<p className="help">
{__('This is a username or handle that your content can be found under.')}{' '}
{__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
</p>
</div>
</section>
<PublishName disabled={formDisabled} />
<PublishPrice disabled={formDisabled} />
<PublishAdditionalOptions disabled={formDisabled} />
<section className="card card--section">
<section>
{!formDisabled && !formValid && <PublishFormErrors />}
<div className="card__actions">

2
src/ui/component/publishFormErrors/view.jsx
View file

@ -18,7 +18,7 @@ function PublishFormErrors(props: Props) {
// These are extra help
// If there is an error it will be presented as an inline error as well
return (
<div className="card__content error-text">
<div className="error-text">
{!title && <div>{__('A title is required')}</div>}
{!name && <div>{__('A URL is required')}</div>}
{!bid && <div>{__('A deposit amount is required')}</div>}

6
src/ui/component/publishName/view.jsx
View file

@ -74,13 +74,12 @@ function PublishName(props: Props) {
return (
<section className="card card--section">
<div className="card__content">
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label>{__('Name')}</label>
<span className="form-field__prefix">{`lbry://${
<div className="form-field__prefix">{`lbry://${
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/`
}`}</span>
}`}</div>
</fieldset-section>
<FormField
type="text"
@ -98,7 +97,6 @@ function PublishName(props: Props) {
onEditMyClaim={editExistingClaim}
/>
</div>
</div>
<FormField
type="number"
name="content_bid"

2
src/ui/component/publishPrice/view.jsx
View file

@ -14,7 +14,6 @@ function PublishText(props: Props) {
return (
<section className="card card--section">
<div className="card__content">
<FormField
type="radio"
name="content_free"
@ -47,7 +46,6 @@ function PublishText(props: Props) {
)}
</p>
)}
</div>
</section>
);
}

2
src/ui/component/publishText/view.jsx
View file

@ -20,7 +20,6 @@ function PublishText(props: Props) {
return (
<section className="card card--section">
<div className="card__content">
<FormField
type="text"
name="content_title"
@ -43,7 +42,6 @@ function PublishText(props: Props) {
<div className="card__actions">
<Button button="link" onClick={toggleMarkdown} label={advancedEditor ? 'Simple Editor' : 'Advanced Editor'} />
</div>
</div>
</section>
);
}

2
src/ui/component/recommendedContent/view.jsx
View file

@ -56,7 +56,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
type="small"
loading={isSearching}
uris={recommendedContent}
header={<span>{__('Related')}</span>}
header={__('Related')}
empty={<div className="empty">{__('No related content found')}</div>}
/>
</section>

2
src/ui/component/rewardListClaimed/view.jsx
View file

@ -35,7 +35,7 @@ const RewardListClaimed = (props: Props) => {
</p>
</header>
<table className="card__content table table--rewards">
<table className="table table--rewards">
<thead>
<tr>
<th>{__('Title')}</th>

4
src/ui/component/rewardSummary/view.jsx
View file

@ -14,9 +14,7 @@ class RewardSummary extends React.Component<Props> {
const hasRewards = unclaimedRewardAmount > 0;
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Rewards')}</h2>
</header>
<p className="card__subtitle">
{fetching && __('You have...')}
@ -34,7 +32,6 @@ class RewardSummary extends React.Component<Props> {
)}
</p>
<div className="card__content">
<div className="card__actions">
<Button
button="primary"
@ -43,7 +40,6 @@ class RewardSummary extends React.Component<Props> {
/>
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
</div>
</div>
</section>
);
}

4
src/ui/component/rewardTile/view.jsx
View file

@ -25,12 +25,9 @@ const RewardTile = (props: Props) => {
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{reward.reward_title}</h2>
<p className="card__subtitle">{reward.reward_description}</p>
</header>
<div className="card__content">
<div className="card__actions">
{reward.reward_type === rewards.TYPE_GENERATED_CODE && (
<Button button="inverse" onClick={openRewardCodeModal} label={__('Enter Code')} />
@ -47,7 +44,6 @@ const RewardTile = (props: Props) => {
<RewardLink button reward_type={reward.reward_type} />
))}
</div>
</div>
</section>
);
};

2
src/ui/component/rewardTotal/view.jsx
View file

@ -16,9 +16,7 @@ function RewardTotal(props: Props) {
return (
<section className="card card--section card--reward-total" style={{ backgroundImage: `url(${TotalBackground})` }}>
<span className="card__title">
{integer} LBC {__('Earned From Rewards')}
</span>
</section>
);
}

4
src/ui/component/searchOptions/view.jsx
View file

@ -8,7 +8,7 @@ import Button from 'component/button';
const ExpandableOptions = posed.div({
hide: { height: 0, opacity: 0 },
show: { height: 300, opacity: 1 },
show: { height: 380, opacity: 1 },
});
type Props = {
@ -32,7 +32,7 @@ const SearchOptions = (props: Props) => {
/>
<ExpandableOptions pose={expanded ? 'show' : 'hide'}>
{expanded && (
<Form className="card__content search__options">
<Form className="search__options">
<fieldset>
<legend className="search__legend--1">{__('Search For')}</legend>
{[

8
src/ui/component/selectChannel/view.jsx
View file

@ -1,5 +1,5 @@
// @flow
import React from 'react';
import React, { Fragment } from 'react';
import { isNameValid } from 'lbry-redux';
import { FormField } from 'component/common/form';
import BusyIndicator from 'component/common/busy-indicator';
@ -151,7 +151,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
} = this.state;
return (
<div className="card__content">
<Fragment>
{createChannelError && <div className="error-text">{createChannelError}</div>}
{fetchingChannels ? (
<BusyIndicator message="Updating channels" />
@ -175,7 +175,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
</fieldset-section>
)}
{addingChannel && (
<div className="card__content">
<div>
<FormField
label={__('Name')}
name="channel-input"
@ -211,7 +211,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
</div>
</div>
)}
</div>
</Fragment>
);
}
}

2
src/ui/component/selectThumbnail/view.jsx
View file

@ -83,7 +83,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
*/
return (
<div className="card__content">
<div>
{status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
<div className="column">
<div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnailSrc})` }}>

18
src/ui/component/sideBar/view.jsx
View file

@ -24,9 +24,9 @@ function SideBar(props: Props) {
}
return (
<StickyBox offsetBottom={40} offsetTop={100}>
<StickyBox offsetBottom={40} offsetTop={90}>
<nav className="navigation">
<ul className="navigation__links">
<ul className="navigation-links">
{[
{
...buildLink(null, __('Home'), ICONS.HOME),
@ -42,25 +42,25 @@ function SideBar(props: Props) {
},
].map(linkProps => (
<li key={linkProps.label}>
<Button {...linkProps} className="navigation__link" activeClass="navigation__link--active" />
<Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
</li>
))}
</ul>
<ul className="navigation__links tags--vertical">
<ul className="navigation-links tags--vertical">
{followedTags.map(({ name }, key) => (
<li className="" key={name}>
<li className="navigation-link__wrapper" key={name}>
<Tag navigate={`/$/tags?t${name}`} name={name} />
</li>
))}
</ul>
<ul className="navigation__links--small">
<ul className="navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className="">
<li key={uri} className="navigation-link__wrapper">
<Button
navigate={uri}
label={channelName}
className="navigation__link"
activeClass="navigation__link--active"
className="navigation-link"
activeClass="navigation-link--active"
/>
</li>
))}

11
src/ui/component/socialShare/view.jsx
View file

@ -44,9 +44,8 @@ class SocialShare extends React.PureComponent<Props> {
return (
<React.Fragment>
{speechShareable && (
<div className="card__content">
<label className="card__subtitle">{__('Web link')}</label>
<CopyableText copyable={lbryTvUrl} />
<div>
<CopyableText label={__('Web link')} copyable={lbryTvUrl} />
<div className="card__actions card__actions--center">
<Button
icon={ICONS.FACEBOOK}
@ -64,9 +63,8 @@ class SocialShare extends React.PureComponent<Props> {
</div>
</div>
)}
<div className="card__content">
<label className="card__subtitle">{__('LBRY App link')}</label>
<CopyableText copyable={lbryURL} noSnackbar />
<CopyableText label={__('LBRY App Link')} copyable={lbryURL} noSnackbar />
<div className="card__actions card__actions--center">
<Button
icon={ICONS.FACEBOOK}
@ -81,7 +79,6 @@ class SocialShare extends React.PureComponent<Props> {
href={`https://twitter.com/home?status=${encodedLbryURL}`}
/>
</div>
</div>
<div className="card__actions">
<Button button="link" label={__('Done')} onClick={onDone} />
</div>

2
src/ui/component/tagsSearch/view.jsx
View file

@ -74,7 +74,7 @@ export default function TagSelect(props: Props) {
<div>
<Form onSubmit={handleSubmit}>
<FormField
label={__('Tag Search')}
label={__('Find New Tags')}
onChange={onChange}
placeholder={__('Search for more tags')}
type="text"

8
src/ui/component/tagsSelect/view.jsx
View file

@ -65,15 +65,14 @@ export default function TagSelect(props: Props) {
return (
((showClose && !hasClosed) || !showClose) && (
<div className="card--section">
<div>
{title !== false && (
<h2 className="card__title card__title--flex-between">
<h2 className="card__title">
{title}
{showClose && !hasClosed && <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />}
</h2>
)}
<div className="card__content">
<ul className="tags--remove">
{transitions.map(({ item, props, key }) => (
<animated.li key={key} style={props}>
@ -93,12 +92,11 @@ export default function TagSelect(props: Props) {
<TagsSearch onSelect={onSelect} suggestMature={suggestMature && !hasMatureTag} />
{help !== false && (
<p className="help">
{help || __("The tags you follow will change what's trending for you. ")}
{help || __("The tags you follow will change what's trending for you.")}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/trending" />.
</p>
)}
</div>
</div>
)
);
}

3
src/ui/component/transactionList/internal/transaction-list-item.jsx
View file

@ -73,8 +73,7 @@ class TransactionListItem extends React.PureComponent<Props> {
<span>{this.capitalize(type)}</span> {isRevokeable && this.getLink(type)}
</td>
<td className="table__item--actionable">
{reward && <span>{reward.reward_title}</span>}
{claimName && claimId ? <Button button="link" navigate={uri} label={claimName} /> : claimName}
{reward ? <span>{reward.reward_title}</span> : <Button button="link" navigate={uri} label={claimName} />}
</td>
<td>

8
src/ui/component/transactionList/view.jsx
View file

@ -69,12 +69,12 @@ class TransactionList extends React.PureComponent<Props> {
return (
<React.Fragment>
<header className="table__header">
<h2 className="card__title card__title--flex-between">
<h2 className="card__title--between">
<span>
{title}
{loading && <Spinner type="small" />}
</span>
<div className="card__actions">
<div className="card__actions--inline">
{slim && (
<Button button="link" className="button--alt" navigate="/$/transactions" label={__('Full History')} />
)}
@ -83,8 +83,8 @@ class TransactionList extends React.PureComponent<Props> {
</h2>
</header>
{!slim && !!transactions.length && (
<header className="card__header table__header">
<div className="card__actions card__actions--between">
<header className="table__header">
<div className="card__actions">
<FileExporter
data={transactionList}
label={__('Export')}

2
src/ui/component/transactionListRecent/view.jsx
View file

@ -23,7 +23,7 @@ class TransactionListRecent extends React.PureComponent<Props> {
render() {
const { transactions } = this.props;
return (
<section className="card card__content">
<section className="card">
<TransactionList
slim
title={__('Recent Transactions')}

2
src/ui/component/userEmail/view.jsx
View file

@ -39,13 +39,11 @@ function UserEmail(props: Props) {
{user && email && !isVerified && <UserEmailVerify />}
{email && isVerified && (
<React.Fragment>
<div className="card__header">
<h2 className="card__title">{__('Email')}</h2>
<p className="card__subtitle">
{email && isVerified && __('Your email has been successfully verified')}
{!email && __('')}.
</p>
</div>
{isVerified && (
<FormField

4
src/ui/component/userEmailNew/view.jsx
View file

@ -48,7 +48,6 @@ class UserEmailNew extends React.PureComponent<Props, State> {
return (
<React.Fragment>
<header className="card__header">
<h2 className="card__title">{__('Verify Your Email')}</h2>
<p className="card__subtitle">
{/* @if TARGET='app' */}
@ -58,9 +57,8 @@ class UserEmailNew extends React.PureComponent<Props, State> {
{__('Stay up to date with lbry.tv and be the first to know about the progress we make.')}
{/* @endif */}
</p>
</header>
<Form className="card__content" onSubmit={this.handleSubmit}>
<Form onSubmit={this.handleSubmit}>
<FormField
type="email"
label="Email"

5
src/ui/component/userEmailVerify/view.jsx
View file

@ -51,11 +51,8 @@ class UserEmailVerify extends React.PureComponent<Props> {
return (
<React.Fragment>
<header className="card__header">
<h2 className="card__title">{__('Waiting For Verification')}</h2>
</header>
<div className="card__content">
<p className="card__subtitle">
{__('An email was sent to')} {email}.{' '}
{__('Follow the link and you will be good to go. This will update automatically.')}
@ -67,7 +64,6 @@ class UserEmailVerify extends React.PureComponent<Props> {
label={__('Resend verification email')}
onClick={this.handleResendVerificationEmail}
/>
<UserEmailResetButton />
</div>
@ -76,7 +72,6 @@ class UserEmailVerify extends React.PureComponent<Props> {
<Button button="link" href="https://chat.lbry.com" label="chat" />{' '}
{__('if you encounter any trouble verifying.')}
</p>
</div>
</React.Fragment>
);
}

4
src/ui/component/userPhoneNew/view.jsx
View file

@ -83,16 +83,13 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
return (
<React.Fragment>
<section className="card__content">
<p className="card__subtitle">
{__(
'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
)}
</p>
</section>
<Form onSubmit={this.handleSubmit}>
<div className="card__content">
<fieldset-group class="fieldset-group--smushed">
<FormField label={__('Country')} type="select" name="country-codes" onChange={this.handleSelect}>
{countryCodes.map((country, index) => (
@ -113,7 +110,6 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
}}
/>
</fieldset-group>
</div>
<div className="card__actions">
<Submit label="Submit" disabled={isPending} />
{cancelButton}

4
src/ui/component/userPhoneVerify/view.jsx
View file

@ -45,14 +45,12 @@ class UserPhoneVerify extends React.PureComponent<Props, State> {
const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
return (
<React.Fragment>
<section className="card__content">
<p>
{' '}
{__(`Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `)}
<Button button="link" onClick={this.reset.bind(this)} label="Go back." />
</p>
</section>
<Form className="card__content" onSubmit={this.handleSubmit.bind(this)}>
<Form onSubmit={this.handleSubmit.bind(this)}>
<FormField
type="text"
name="code"

22
src/ui/component/userVerify/view.jsx
View file

@ -27,26 +27,21 @@ class UserVerify extends React.PureComponent<Props> {
return (
<React.Fragment>
<section className="card card--section">
<header className="card__header--flat">
<h1 className="card__title">{__('Final Human Proof')}</h1>
<p className="card__subtitle">
To start the rewards approval process, please complete <strong>one and only one</strong> of the options
below. This is optional, and can be skipped at the bottom of the page.
</p>
</header>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('1) Proof via Phone')}</h2>
<p className="card__subtitle">
{`${__(
'You will receive an SMS text message confirming that your phone number is correct. Does not work for Canada and possibly other regions'
)}`}
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button
onClick={() => {
@ -55,7 +50,6 @@ class UserVerify extends React.PureComponent<Props> {
button="inverse"
label={__('Submit Phone Number')}
/>
</div>
<div className="help">
{__('Standard messaging rates apply. LBRY will not text or call you otherwise. Having trouble?')}{' '}
@ -65,18 +59,13 @@ class UserVerify extends React.PureComponent<Props> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('2) Proof via Credit')}</h2>
<p className="card__subtitle">
{`${__(
'If you have a valid credit or debit card, you can use it to instantly prove your humanity.'
)} ${__(
{`${__('If you have a valid credit or debit card, you can use it to instantly prove your humanity.')} ${__(
'LBRY does not store your credit card information. There is no charge at all for this, now or in the future.'
)} `}
</p>
</header>
<div className="card__content">
<div className="card__actions">
{errorMessage && <p className="error-text">{errorMessage}</p>}
<CardVerify
@ -95,11 +84,9 @@ class UserVerify extends React.PureComponent<Props> {
label={__('Read more about why we do this.')}
/>
</div>
</div>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('3) Proof via Chat')}</h2>
<p className="card__subtitle">
{__(
@ -109,28 +96,21 @@ class UserVerify extends React.PureComponent<Props> {
'This process will likely involve providing proof of a stable and established online or real-life identity.'
)}
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button href="https://chat.lbry.com" button="inverse" label={__('Join LBRY Chat')} />
</div>
</div>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Or, Skip It Entirely')}</h2>
<p className="card__subtitle">
{__('You can continue without this step, but you will not be eligible to earn rewards.')}
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button navigate="/" button="primary" label={__('Skip Rewards')} />
</div>
</div>
</section>
</React.Fragment>
);

31
src/ui/component/walletAddress/view.jsx
View file

@ -47,39 +47,20 @@ class WalletAddress extends React.PureComponent<Props, State> {
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Receive Credits')}</h2>
<p className="card__subtitle">
{__('Use this wallet address to receive credits sent by another user (or yourself).')}
{__(
'Use this address to receive LBC. You can generate a new address at any time, and any previous addresses will continue to work.'
)}
</p>
</header>
<CopyableText label={__('Your Address')} copyable={receiveAddress} snackMessage={__('Address copied.')} />
<div className="card__content">
<CopyableText copyable={receiveAddress} snackMessage={__('Address copied.')} />
</div>
<div className="card__content">
<div className="card__actions">
<Button
button="inverse"
label={__('Get New Address')}
onClick={getNewAddress}
disabled={gettingNewAddress}
/>
<Button button="inverse" label={__('Get New Address')} onClick={getNewAddress} disabled={gettingNewAddress} />
<Button button="link" label={showQR ? __('Hide QR code') : __('Show QR code')} onClick={this.toggleQR} />
</div>
<p className="help">
{__('You can generate a new address at any time, and any previous addresses will continue to work.')}
</p>
</div>
{showQR && (
<div className="card__content">
<QRCode value={receiveAddress} paddingTop />
</div>
)}
{showQR && <QRCode value={receiveAddress} paddingTop />}
</section>
);
}

57
src/ui/component/walletBackup/view.jsx
View file

@ -66,7 +66,7 @@ class WalletBackup extends React.PureComponent<Props, State> {
try {
zip.addLocalFolder(lbryumWalletDir);
} catch (err) {
console.error(err);
console.error(err); // eslint-disable-line no-console
this.showErrorMessage(__('The wallet folder could not be added to the zip archive.'));
return;
}
@ -74,7 +74,7 @@ class WalletBackup extends React.PureComponent<Props, State> {
try {
zip.writeZip(outputPath);
} catch (err) {
console.error(err);
console.error(err); // eslint-disable-line no-console
this.showErrorMessage(__('There was a problem writing the zip archive to disk.'));
return;
}
@ -85,50 +85,38 @@ class WalletBackup extends React.PureComponent<Props, State> {
}
render() {
const { daemonSettings } = this.props;
const { daemonSettings = {} } = this.props;
const { wallet_dir: lbryumWalletDir } = daemonSettings;
const noDaemonSettings = Object.keys(daemonSettings).length === 0;
return (
<section className="card card--section">
{noDaemonSettings ? (
<header className="card__header">
<h2 className="card__title">{__('Failed to load settings.')}</h2>
</header>
) : (
<React.Fragment>
<header className="card__header">
<h2 className="card__title">{__('Backup Your LBRY Credits')}</h2>
<p className="card__subtitle">
<ul className="card__subtitle ol--bulleted">
<li>
{__(
'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
)}
</p>
</header>
<div className="card__content">
<p>
</li>
<li>
{__(
'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.'
)}
</p>
<p>
</li>
<li>
{__(
'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
)}
</p>
</li>
</ul>
<CopyableText copyable={lbryumWalletDir} snackMessage={__('Path copied.')} />
<p>
<p className="help">
{__(
'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
)}
</p>
<p>
For more details on backing up and best practices,{' '}
<Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />
.
)}{' '}
{/* @i18fixme */}
{__('For more details on backing up and best practices')},{' '}
<Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />.
</p>
<p className={'card__message card__message--error' + (this.state.errorMessage ? '' : ' hidden')}>
{this.state.errorMessage}
@ -137,16 +125,9 @@ class WalletBackup extends React.PureComponent<Props, State> {
{this.state.successMessage}
</p>
<div className="card__actions">
<Button button="inverse" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
<Button
button="inverse"
label={__('Create Backup')}
onClick={() => this.backupWalletDir(lbryumWalletDir)}
/>
<Button button="inverse" label={__('Create Backup')} onClick={() => this.backupWalletDir(lbryumWalletDir)} />
<Button button="link" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
</div>
</div>
</React.Fragment>
)}
</section>
);
}

BIN
src/ui/component/walletBalance/balance-background.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 32 KiB

5
src/ui/component/walletBalance/view.jsx
View file

@ -14,15 +14,10 @@ const WalletBalance = (props: Props) => {
className="card card--section card--wallet-balance"
style={{ backgroundImage: `url(${BalanceBackground})` }}
>
<header className="card__header">
<h2 className="card__title">{__('Balance')}</h2>
</header>
<div className="card__content">
<h3>{__('You currently have')}</h3>
<span className="card__content--large">
{(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
</span>
</div>
</section>
);
};

6
src/ui/component/walletSend/view.jsx
View file

@ -37,10 +37,8 @@ class WalletSend extends React.PureComponent<Props> {
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Send Credits')}</h2>
<p className="card__subtitle">{__('Send LBC to your friends or favorite creators')}</p>
</header>
<p className="card__subtitle">{__('Send LBC to your friends or favorite creators.')}</p>
<Formik
initialValues={{
@ -51,7 +49,6 @@ class WalletSend extends React.PureComponent<Props> {
validate={validateSendTx}
render={({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form onSubmit={handleSubmit}>
<div className="card__content">
<fieldset-group class="fieldset-group--smushed">
<FormField
type="number"
@ -79,7 +76,6 @@ class WalletSend extends React.PureComponent<Props> {
value={values.address}
/>
</fieldset-group>
</div>
<div className="card__actions">
<Button
button="inverse"

10
src/ui/component/walletSendTip/view.jsx
View file

@ -76,7 +76,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
return (
<React.Fragment>
<Form className="card__content">
<Form>
<FormField
autoFocus
name="tip-input"
@ -100,13 +100,13 @@ class WalletSendTip extends React.PureComponent<Props, State> {
/>
}
helper={
<p>
{claimIsMine || isSupport
? __('This will increase the overall bid amount for ')
<React.Fragment>
{claimIsMine
? __('This will increase your overall bid amount for ')
: __('This will appear as a tip for ')}
{`"${title}" which will boost its ability to be discovered while active.`}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
</p>
</React.Fragment>
}
/>
</Form>

2
src/ui/component/yrbl/index.jsx
View file

@ -32,7 +32,7 @@ export default class extends React.PureComponent<Props> {
{title && subtitle && (
<div className="yrbl__content">
<h2 className="card__title">{title}</h2>
<div className="card__content">{subtitle}</div>
<p>{subtitle}</p>
</div>
)}
</div>

8
src/ui/modal/modal.jsx
View file

@ -53,11 +53,7 @@ export class Modal extends React.PureComponent<ModalProps> {
className={classnames('card card--modal modal', className)}
overlayClassName="modal-overlay"
>
{title && (
<header className="card__header">
<h1 className="card__title">{title}</h1>
</header>
)}
{title && <h1 className="card__title">{title}</h1>}
{children}
{type === 'custom' ? null : ( // custom modals define their own buttons
<div className="card__actions">
@ -106,7 +102,7 @@ export class ExpandableModal extends React.PureComponent<ModalProps, State> {
return (
<Modal type="custom" {...this.props}>
{this.props.children}
{this.state.expanded ? <div className="card__content">{this.props.extraContent}</div> : null}
{this.state.expanded ? <div>{this.props.extraContent}</div> : null}
<div className="card__actions">
<Button button="primary" label={this.props.confirmButtonLabel} onClick={this.props.onConfirmed} />
<Button

2
src/ui/modal/modalAffirmPurchase/view.jsx
View file

@ -39,7 +39,6 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
onConfirmed={this.onAffirmPurchase}
onAborted={cancelPurchase}
>
<section className="card__content">
<p className="card__subtitle">
{__('This will purchase')} <strong>{title ? `"${title}"` : uri}</strong> {__('for')}{' '}
<strong>
@ -47,7 +46,6 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
</strong>{' '}
{__('credits')}.
</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalAuthFailure/view.jsx
View file

@ -23,9 +23,7 @@ class ModalAuthFailure extends React.PureComponent<Props> {
}}
onAborted={close}
>
<section className="card__content">
<p>{__('If reloading does not fix this, or you see this at every start up, please email help@lbry.com.')}</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalAutoGenerateThumbnail/view.jsx
View file

@ -69,10 +69,8 @@ function ModalAutoGenerateThumbnail(props: Props) {
onConfirmed={uploadImage}
onAborted={closeModal}
>
<section className="card__content">
<p className="card__subtitle">{__('Pause at any time to select a thumbnail from your video')}.</p>
<video ref={playerRef} src={videoSrc} onLoadedMetadata={resize} onError={onError} controls />
</section>
</Modal>
);
}

2
src/ui/modal/modalAutoUpdateConfirm/view.jsx
View file

@ -29,13 +29,11 @@ class ModalAutoUpdateConfirm extends React.PureComponent<Props> {
closeModal();
}}
>
<section className="card__content">
<p>{__('Your LBRY upgrade is ready. Restart LBRY now to use it!')}</p>
<p className="help">
{__('Want to know what has changed?')} See the{' '}
<Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />.
</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalAutoUpdateDownloaded/view.jsx
View file

@ -46,13 +46,11 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props, State> {
closeModal();
}}
>
<section className="card__content">
<p>{__('A new version of LBRY is ready for you.')}</p>
<p className="help">
{__('Want to know what has changed?')} See the{' '}
<Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />.
</p>
</section>
</Modal>
);
}

5
src/ui/modal/modalConfirmThumbnailUpload/view.jsx
View file

@ -1,7 +1,6 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import { FormField } from 'component/common/form';
type Props = {
upload: string => void,
@ -19,7 +18,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
}
render() {
const { closeModal, path, updatePublishForm } = this.props;
const { closeModal, path } = this.props;
return (
<Modal
@ -31,11 +30,9 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
onConfirmed={() => this.upload()}
onAborted={closeModal}
>
<section className="card__content">
<p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
<blockquote>{path}</blockquote>
</section>
</Modal>
);
}

2
src/ui/modal/modalConfirmTransaction/view.jsx
View file

@ -28,7 +28,7 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
type="custom"
onAborted={closeModal}
>
<Form className="card__content" onSubmit={() => this.onConfirmed()}>
<Form onSubmit={() => this.onConfirmed()}>
<p>{__('Sending: ')}</p>
<blockquote>{amount} LBC</blockquote>
<p>{__('To address: ')}</p>

2
src/ui/modal/modalDownloading/view.jsx
View file

@ -18,7 +18,6 @@ class ModalDownloading extends React.PureComponent<Props> {
return (
<Modal title={__('Downloading Update')} isOpen contentLabel={__('Downloading Update')} type="custom">
<section className="card__content">
{downloadProgress ? `${downloadProgress}% ${__('complete')}` : null}
<Line percent={downloadProgress || 0} strokeWidth="4" />
{downloadComplete ? (
@ -30,7 +29,6 @@ class ModalDownloading extends React.PureComponent<Props> {
<p>{__('After the install is complete, please reopen the app.')}</p>
</React.Fragment>
) : null}
</section>
<div className="card__actions">
{downloadComplete ? <Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} /> : null}

4
src/ui/modal/modalError/view.jsx
View file

@ -41,14 +41,12 @@ class ModalError extends React.PureComponent<Props> {
return (
<Modal isOpen contentLabel={__('Error')} title={__('Error')} className="error-modal" onConfirmed={closeModal}>
<section className="card__content">
<p>
{__(
"We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem."
)}
</p>
</section>
<ul className="card__content error-modal__error-list">{errorInfoList}</ul>
<ul className="error-modal__error-list">{errorInfoList}</ul>
</Modal>
);
}

2
src/ui/modal/modalFileTimeout/view.jsx
View file

@ -18,14 +18,12 @@ class ModalFileTimeout extends React.PureComponent<Props> {
return (
<Modal isOpen title={__('Unable to Download')} contentLabel={__('Download failed')} onConfirmed={closeModal}>
<section className="card__content">
<p className="error-modal__error-list">
{__('LBRY was unable to download the stream')}:
<div>
<b>{title ? `"${title}"` : uri}</b>
</div>
</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalFirstReward/view.jsx
View file

@ -18,7 +18,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
title={__('Your First Reward')}
onConfirmed={closeModal}
>
<section className="card__content">
<p>{__('You just earned your first reward!')}</p>
<p>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p>
<p>
@ -27,7 +26,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
)}
</p>
<p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
</section>
</Modal>
);
}

6
src/ui/modal/modalFirstSubscription/view.jsx
View file

@ -12,15 +12,14 @@ const ModalFirstSubscription = (props: Props) => {
return (
<Modal type="custom" isOpen contentLabel="Subscriptions 101" title={__('Subscriptions 101')}>
<section className="card__content">
<p>{__('You just subscribed to your first channel. Awesome!')}</p>
<p>{__('A few quick things to know:')}</p>
<p className="card__content">
<p>
{__(
'1) This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.'
)}
</p>
<p className="card__content">
<p>
{__(
'2) If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.'
)}
@ -28,7 +27,6 @@ const ModalFirstSubscription = (props: Props) => {
<div className="modal__buttons">
<Button button="primary" onClick={closeModal} label={__('Got it')} />
</div>
</section>
</Modal>
);
};

2
src/ui/modal/modalIncompatibleDaemon/view.jsx
View file

@ -23,14 +23,12 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
onConfirmed={quitAnyDaemon}
onAborted={onContinueAnyway}
>
<div className="card__content">
<p>
{__(
'This app is running with an incompatible version of the LBRY protocol. You can still use it, but there may be issues. Re-run the installation package for best results.'
)}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/incompatible-protocol-version" />.
</p>
</div>
</Modal>
);
}

2
src/ui/modal/modalOpenExternalResource/view.jsx
View file

@ -54,14 +54,12 @@ function ModalOpenExternalResource(props: Props) {
onConfirmed={() => openResource()}
onAborted={closeModal}
>
<section className="card__content">
<p>
{(uri && __('This link leads to an external website.')) ||
(path && __('This file has been shared with you by other people.'))}
</p>
<blockquote>{uri || path}</blockquote>
<p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalPublish/view.jsx
View file

@ -28,7 +28,6 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
closeModal();
}}
>
<section className="card__content">
<p>{__(`Your ${publishMessage} published to LBRY at the address`)}</p>
<blockquote>{uri}</blockquote>
<p>
@ -36,7 +35,6 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
`The ${publishType} will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.`
)}
</p>
</section>
</Modal>
);
}

12
src/ui/modal/modalRemoveFile/view.jsx
View file

@ -25,18 +25,18 @@ function ModalRemoveFile(props: Props) {
return (
<Modal isOpen title="Remove File" contentLabel={__('Confirm File Remove')} type="custom" onAborted={closeModal}>
<section className="card__content">
<section>
<p>
{__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')}
</p>
</section>
<Form className="card__content" onSubmit={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}>
<Form onSubmit={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}>
<FormField
name="file_delete"
label={__('Also delete this file from my computer')}
name="claim_abandon"
label={__('Abandon the claim for this URI')}
type="checkbox"
checked={deleteChecked}
onChange={() => setDeleteChecked(!deleteChecked)}
checked={abandonChecked}
onChange={() => setAbandonChecked(!abandonChecked)}
/>
{claimIsMine && (

2
src/ui/modal/modalRevokeClaim/view.jsx
View file

@ -84,7 +84,7 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
onConfirmed={this.revokeClaim}
onAborted={closeModal}
>
<section className="card__content">{this.getMsgBody(type)}</section>
<section>{this.getMsgBody(type)}</section>
</Modal>
);
}

2
src/ui/modal/modalRewardApprovalRequired/view.jsx
View file

@ -22,13 +22,11 @@ class ModalRewardApprovalRequired extends React.PureComponent<Props> {
confirmButtonLabel={__("I'm Totally Real")}
abortButtonLabel={__('Never Mind')}
>
<section className="card__content">
<p>
{__(
"Before we can give you any credits, we need to perform a brief check to make sure you're a new and unique person."
)}
</p>
</section>
</Modal>
);
}

7
src/ui/modal/modalRewardCode/view.jsx
View file

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import { FormField, Form, Submit } from 'component/common/form';
import { FormField, Form } from 'component/common/form';
import { Modal } from 'modal/modal';
import Button from 'component/button';
@ -44,7 +44,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
type="custom"
onAborted={closeModal}
>
<Form className="card__content" onSubmit={this.handleSubmit}>
<Form onSubmit={this.handleSubmit}>
<p>
{__('Redeem a custom reward code for LBC')}
{'. '}
@ -55,7 +55,8 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
type="text"
name="reward-code"
inputButton={
<Submit
<Button
button="primary"
disabled={!rewardCode || rewardIsPending}
label={rewardIsPending ? __('Redeeming') : __('Redeem')}
/>

2
src/ui/modal/modalTransactionFailed/view.jsx
View file

@ -12,9 +12,7 @@ class ModalTransactionFailed extends React.PureComponent<Props> {
return (
<Modal isOpen contentLabel={__('Transaction failed')} title={__('Transaction Failed')} onConfirmed={closeModal}>
<section className="card__content">
<p>{__('Sorry about that. Contact help@lbry.com if you continue to have issues.')}</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalUpgrade/view.jsx
View file

@ -23,7 +23,6 @@ class ModalUpgrade extends React.PureComponent<Props> {
onConfirmed={downloadUpgrade}
onAborted={skipUpgrade}
>
<div className="card__content">
<p>
{__('An updated version of LBRY is now available.')}{' '}
{__('Your version is out of date and may be unreliable or insecure.')}
@ -32,7 +31,6 @@ class ModalUpgrade extends React.PureComponent<Props> {
{__('Want to know what has changed?')} See the{' '}
<Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />.
</p>
</div>
</Modal>
);
}

2
src/ui/modal/modalWalletDecrypt/view.jsx
View file

@ -47,14 +47,12 @@ class ModalWalletDecrypt extends React.PureComponent<Props, State> {
onConfirmed={() => this.submitDecryptForm()}
onAborted={closeModal}
>
<section className="card__content">
<p>
{__(
'Your wallet has been encrypted with a local password, performing this action will remove this password.'
)}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />.
</p>
</section>
</Modal>
);
}

2
src/ui/modal/modalWalletEncrypt/view.jsx
View file

@ -98,7 +98,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
onConfirmed={() => this.submitEncryptForm()}
onAborted={closeModal}
>
<Form className="card__content" onSubmit={() => this.submitEncryptForm()}>
<Form onSubmit={() => this.submitEncryptForm()}>
<p>
{__(
'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'

6
src/ui/modal/modalWalletUnlock/view.jsx
View file

@ -49,12 +49,9 @@ class ModalWalletUnlock extends React.PureComponent<Props, State> {
onConfirmed={() => unlockWallet(password)}
onAborted={quit}
>
<section className="card__content">
<Form onSubmit={() => unlockWallet(password)}>
<p>
{__(
'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
)}{' '}
{__('Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.')}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />.
</p>
<FormField
@ -66,7 +63,6 @@ class ModalWalletUnlock extends React.PureComponent<Props, State> {
onChange={event => this.onChangePassword(event)}
/>
</Form>
</section>
</Modal>
);
}

2
src/ui/modal/modalWelcome/view.jsx
View file

@ -12,14 +12,12 @@ const ModalWelcome = (props: Props) => {
return (
<Modal type="custom" isOpen contentLabel="Welcome to LBRY" title={__('Welcome to LBRY')}>
<section className="card__content">
<p>
{__('Using LBRY is like dating a centaur. Totally normal up top, and')} <em>{__('way different')}</em>{' '}
{__('underneath.')}
</p>
<p>{__('Up top, LBRY is similar to popular media sites.')}</p>
<p>{__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}</p>
</section>
<div className="card__actions">
<Button button="primary" onClick={closeModal} label={__("I'm In")} />
</div>

2
src/ui/page/channel/view.jsx
View file

@ -89,7 +89,7 @@ function ChannelPage(props: Props) {
<TabList className="tabs__list--channel-page">
<Tab disabled={editing}>{__('Content')}</Tab>
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
<div className="card__actions">
<div className="card__actions--inline">
<ShareButton uri={uri} />
<SubscribeButton uri={permanentUrl} />
</div>

55
src/ui/page/file/view.jsx
View file

@ -8,11 +8,9 @@ import Thumbnail from 'component/common/thumbnail';
import FilePrice from 'component/filePrice';
import FileDetails from 'component/fileDetails';
import FileActions from 'component/fileActions';
import UriIndicator from 'component/uriIndicator';
import Icon from 'component/common/icon';
import DateTime from 'component/dateTime';
import Button from 'component/button';
import SubscribeButton from 'component/subscribeButton';
import Page from 'component/page';
import FileDownloadLink from 'component/fileDownloadLink';
import classnames from 'classnames';
@ -21,8 +19,8 @@ import RecommendedContent from 'component/recommendedContent';
import ClaimTags from 'component/claimTags';
import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate';
import VideoDuration from 'component/videoDuration';
import ClaimUri from 'component/claimUri';
import ClaimPreview from 'component/claimPreview';
type Props = {
claim: StreamClaim,
@ -224,11 +222,17 @@ class FilePage extends React.Component<Props> {
<div className="columns">
<div className="grid-area--info">
<h1 className="media__title media__title--large">{title}</h1>
<div className="media__subtext media__subtext--large">
<div className="media__subtitle__channel">
<UriIndicator uri={uri} link />
</div>
<div className="media__subtitle">
<div className="media__actions media__actions--between">
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
{'claimIsMine' && (
<span>
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
</span>
)}
</div>
<div className="media__actions media__actions--between">
<div className="media__action-group--large">
{claimIsMine && (
@ -242,25 +246,25 @@ class FilePage extends React.Component<Props> {
}}
/>
)}
{
<React.Fragment>
{!claimIsMine && channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
{!claimIsMine && (
<Button
button="alt"
icon={claimIsMine ? icons.SUPPORT : icons.TIP}
label={claimIsMine ? __('Support') : __('Tip')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
icon={icons.TIP}
label={__('Tip')}
title={__('Send a tip to this creator')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine })}
/>
{!claimIsMine && supportOption && (
)}
{claimIsMine ||
(!claimIsMine && supportOption && (
<Button
button="alt"
icon={icons.SUPPORT}
label={__('Support')}
title={__('Support this claim')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
/>
)}
</React.Fragment>
}
))}
<Button
button="alt"
icon={icons.SHARE}
@ -279,26 +283,13 @@ class FilePage extends React.Component<Props> {
/>
</div>
</div>
<div className="media__actions media__actions--between">
<div className="media__subtext media__subtext--large">
<DateTime uri={uri} show={DateTime.SHOW_DATE} />
</div>
<div className="media__subtext media__subtext--large">
<VideoDuration uri={uri} />
{claimIsMine && (
<p>
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
</p>
)}
</div>
</div>
<ClaimPreview uri={channelUri} type="inline" />
<div className="media__info--large">
<ClaimTags uri={uri} type="large" />
<FileDetails uri={uri} />
<ClaimTags uri={uri} type="large" />
<div className="media__info-title">
{__('Comments')} <span className="badge badge--alert">ALPHA</span>

7
src/ui/page/fileListDownloaded/view.jsx
View file

@ -19,7 +19,7 @@ function FileListDownloaded(props: Props) {
{hasDownloads ? (
<div className="card">
<ClaimList
header={<h1>{__('Your Library')}</h1>}
header={__('Your Library')}
defaultSort
persistedStorageKey="claim-list-downloaded"
uris={downloadedUris}
@ -29,15 +29,10 @@ function FileListDownloaded(props: Props) {
) : (
<div className="main--empty">
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__("You haven't downloaded anything from LBRY yet.")}</h2>
</header>
<div className="card__content">
<div className="card__actions card__actions--center">
<Button button="primary" navigate="/" label={__('Explore new content')} />
</div>
</div>
</section>
</div>
)}

6
src/ui/page/fileListPublished/view.jsx
View file

@ -22,7 +22,7 @@ function FileListPublished(props: Props) {
{uris && uris.length ? (
<div className="card">
<ClaimList
header={<h1>{__('Your Publishes')}</h1>}
header={__('Your Publishes')}
loading={fetching}
persistedStorageKey="claim-list-published"
uris={uris}
@ -33,15 +33,11 @@ function FileListPublished(props: Props) {
) : (
<div className="main--empty">
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__("It looks like you haven't published anything to LBRY yet.")}</h2>
</header>
<div className="card__content">
<div className="card__actions card__actions--center">
<Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
</div>
</div>
</section>
</div>
)}

4
src/ui/page/following/view.jsx
View file

@ -38,12 +38,12 @@ function FollowingPage(props: Props) {
return (
<Page>
<div className="card">
<div className="card card--section">
<TagsSelect showClose={false} title={__('Customize Your Tags')} />
</div>
<div className="card">
<ClaimList
header={<h1>{viewingSuggestedSubs ? __('Discover New Channels') : __('Channels You Follow')}</h1>}
header={viewingSuggestedSubs ? __('Discover New Channels') : __('Channels You Follow')}
headerAltControls={
<Button
button="link"

3
src/ui/page/getCredits/index.js
View file

@ -1,3 +0,0 @@
import GetCreditsPage from './view';
export default GetCreditsPage;

33
src/ui/page/getCredits/view.jsx
View file

@ -1,33 +0,0 @@
import React from 'react';
import Button from 'component/button';
import RewardSummary from 'component/rewardSummary';
// import ShapeShift from 'component/shapeShift';
import Page from 'component/page';
const GetCreditsPage = () => (
<Page>
<RewardSummary />
{/*
Removing Shapeshift after they switched to user accounts
Ideally most of the redux logic should be able to be re-used if we switch to another company
Or find a way to use ShapShift with an account?
<ShapeShift />
*/}
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('More Ways To Get LBRY Credits')}</h2>
<p className="card__subtitle">
{'LBRY credits can be purchased on exchanges, earned for contributions, for mining, and more.'}
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button button="primary" href="https://lbry.com/faq/earn-credits" label={__('Read More')} />
</div>
</div>
</section>
</Page>
);
export default GetCreditsPage;

31
src/ui/page/help/view.jsx
View file

@ -123,12 +123,9 @@ class HelpPage extends React.PureComponent<Props, State> {
return (
<Page>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Read the FAQ')}</h2>
<p className="card__subtitle">{__('Our FAQ answers many common questions.')}</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button
href="https://lbry.com/faq/lbry-basics"
@ -138,66 +135,46 @@ class HelpPage extends React.PureComponent<Props, State> {
/>
<Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
</div>
</div>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Find Assistance')}</h2>
<p className="card__subtitle">
{__('Live help is available most hours in the')} <strong>#help</strong>{' '}
{__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')}
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
<Button button="inverse" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
</div>
</div>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Report a Bug or Suggest a New Feature')}</h2>
<p className="card__subtitle">
{__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />.
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button
navigate="/$/report"
label={__('Submit a Bug Report/Feature Request')}
icon={icons.REPORT}
button="inverse"
/>
</div>
<div className="help">{__('Thanks! LBRY is made by its users.')}</div>
<Button navigate="/$/report" label={__('Help Us Out')} button="inverse" />
</div>
</section>
{/* @if TARGET='app' */}
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('View your Log')}</h2>
<p className="card__subtitle">
{__('Did something go wrong? Have a look in your log file, or send it to')}{' '}
<Button button="link" label={__('support')} href="https://lbry.com/faq/support" />.
</p>
</header>
<div className="card__content">
<div className="card__actions">
<Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
<Button button="inverse" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
</div>
<Button button="link" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
</div>
</section>
@ -210,7 +187,7 @@ class HelpPage extends React.PureComponent<Props, State> {
<h2 className="card__title">{__('About')}</h2>
{this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? (
<p className="card__subtitle">
<p className="card__subtitle--status">
{__('A newer version of LBRY is available.')}{' '}
<Button button="link" href={newVerLink} label={__('Download now!')} />
</p>
@ -219,7 +196,6 @@ class HelpPage extends React.PureComponent<Props, State> {
)}
</header>
<div className="card__content">
<table className="table table--stretch">
<tbody>
<tr>
@ -280,7 +256,6 @@ class HelpPage extends React.PureComponent<Props, State> {
</tr>
</tbody>
</table>
</div>
</section>
{/* @endif */}
</Page>

2
src/ui/page/publish/view.jsx
View file

@ -51,9 +51,7 @@ function PublishPage(props: Props) {
}
/>
<section className="card card--section">
<header className="card__header">
<h1 className="card__title">{__('LBRY Credits Required')}</h1>
</header>
<p className="card__subtitle">
{__(' There are a variety of ways to get credits, including more than')}{' '}
<CreditAmount inheritStyle amount={totalRewardRounded} />{' '}

8
src/ui/page/report/view.jsx
View file

@ -47,16 +47,13 @@ class ReportPage extends React.Component {
return (
<Page>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2>
<p className="card__subtitle">
{__(
'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
)}
</p>
</header>
<div className="card__content">
<FormField
type="textarea"
rows="10"
@ -80,15 +77,11 @@ class ReportPage extends React.Component {
{this.state.submitting ? __('Submitting...') : __('Submit Report')}
</Button>
</div>
</div>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Developer?')}</h2>
</header>
<div className="card__content">
<p>
{__('You can also')}{' '}
<Button
@ -104,7 +97,6 @@ class ReportPage extends React.Component {
<p>
{__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />.
</p>
</div>
</section>
</Page>
);

20
src/ui/page/rewards/view.jsx
View file

@ -34,7 +34,6 @@ class RewardsPage extends PureComponent<Props> {
return (
!IS_WEB && (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Rewards Approval to Earn Credits (LBC)')}</h2>
<p className="card__subtitle">
{__(
@ -42,18 +41,14 @@ class RewardsPage extends PureComponent<Props> {
)}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
</p>
</header>
<div className="card__content">
<Button navigate="/$/auth?redirect=rewards" button="primary" label="Prove Humanity" />
</div>
</section>
)
);
}
return (
<section className="card card--section">
<div className="card__content">
<p>
{__('This account must undergo review before you can participate in the rewards program.')}{' '}
{__('This can take anywhere from several minutes to several days.')}
@ -65,7 +60,6 @@ class RewardsPage extends PureComponent<Props> {
'Please enjoy free content in the meantime!'
)}`}
</p>
</div>
<div className="card__actions">
<Button navigate="/" button="primary" label="Return Home" />
</div>
@ -95,34 +89,26 @@ class RewardsPage extends PureComponent<Props> {
if (daemonSettings && !daemonSettings.share_usage_data) {
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Disabled')}</h2>
<p className="card__subtitle">
{__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '}
<Button button="link" navigate="/$/settings" label="Settings" />
{__(', in order to re-enable them.')}
</p>
</header>
</section>
);
} else if (fetching) {
return (
<div className="card__content">
<BusyIndicator message={__('Fetching rewards')} />
</div>
);
return <BusyIndicator message={__('Fetching rewards')} />;
} else if (user === null) {
return (
<section className="card card--section">
<p>{__('This application is unable to earn rewards due to an authentication failure.')}</p>
</section>
<p className="help">{__('This application is unable to earn rewards due to an authentication failure.')}</p>
);
} else if (!rewards || rewards.length <= 0) {
return (
<Fragment>
<section className="card card--section">
<h2 className="card__title">{__('No Rewards Available')}</h2>
<p className="card__content">
<p>
{claimed && claimed.length
? __(
"You have claimed all available rewards! We're regularly adding more so be sure to check back later."

8
src/ui/page/search/view.jsx
View file

@ -41,10 +41,12 @@ export default function SearchPage(props: Props) {
<Fragment>
{isValid && (
<header className="search__header">
<Button button="alt" navigate={uri} className="media__uri">
<Button button="alt" navigate={uri} className="media__uri--large">
{uri}
</Button>
<ClaimPreview uri={uri} type="large" />
<div className="card">
<ClaimPreview uri={uri} type="large" placeholder="publish" />
</div>
</header>
)}
@ -72,7 +74,7 @@ export default function SearchPage(props: Props) {
}
/>
</div>
<div className="card__content help">{__('These search results are provided by LBRY, Inc.')}</div>
<div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
</Fragment>
)}
</section>

57
src/ui/page/settings/view.jsx
View file

@ -1,5 +1,4 @@
// @flow
import * as ICONS from 'constants/icons';
import * as SETTINGS from 'constants/settings';
import * as React from 'react';
import classnames from 'classnames';
@ -170,9 +169,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
) : (
<div className={classnames({ 'card--disabled': IS_WEB })}>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Download Directory')}</h2>
</header>
<div className="card__content">
<FileSelector
@ -187,11 +184,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Max Purchase Price')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="radio"
name="no_max_purchase_no_limit"
@ -228,11 +223,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Purchase Confirmations')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="radio"
name="confirm_all_purchases"
@ -268,13 +261,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Content Settings')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="setting"
type="checkbox"
name="show_nsfw"
onChange={() => setClientSetting(SETTINGS.SHOW_NSFW, !showNsfw)}
checked={showNsfw}
@ -287,12 +278,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Notifications')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="setting"
type="checkbox"
name="desktopNotification"
onChange={() => setClientSetting(SETTINGS.OS_NOTIFICATIONS_ENABLED, !osNotificationsEnabled)}
checked={osNotificationsEnabled}
@ -303,13 +292,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Share Diagnostic Data')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="setting"
type="checkbox"
name="share_usage_data"
onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
checked={daemonSettings.share_usage_data}
@ -325,11 +312,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Appearance')}</h2>
</header>
<Form className="card__content">
<Form>
<fieldset-section>
<FormField
name="theme_select"
@ -348,7 +333,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
</fieldset-section>
<fieldset-section>
<FormField
type="setting"
type="checkbox"
name="automatic_dark_mode"
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
checked={automaticDarkModeEnabled}
@ -360,13 +345,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Wallet Security')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="setting"
type="checkbox"
name="encrypt_wallet"
onChange={() => this.onChangeEncryptWallet()}
checked={walletEncrypted}
@ -383,11 +366,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Experimental Settings')}</h2>
</header>
<Form className="card__content">
<Form>
<FormField
type="setting"
name="support_option"
@ -407,6 +388,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
<FormField
type="setting"
type="checkbox"
name="auto_download"
onChange={() => setClientSetting(SETTINGS.AUTO_DOWNLOAD, !autoDownload)}
checked={autoDownload}
@ -417,7 +399,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
/>
<FormField
type="setting"
type="checkbox"
name="autoplay"
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
checked={autoplay}
@ -447,23 +429,18 @@ class SettingsPage extends React.PureComponent<Props, State> {
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Application Cache')}</h2>
</header>
<p className="help--warning">
<p className="card__subtitle--status">
{__('This will clear the application cache. Your wallet will not be affected.')}
</p>
<div className="card__content">
<Button
button="primary"
button="inverse"
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
icon={ICONS.ALERT}
onClick={this.clearCache}
disabled={this.state.clearingCache}
/>
</div>
</section>
</div>
)}

4
src/ui/page/show/view.jsx
View file

@ -45,7 +45,7 @@ class ShowPage extends React.PureComponent<Props> {
if (claim && !claim.name) {
// While testing the normalization changes, Brannon found that `name` was missing sometimes
// This shouldn't happen, so hopefully this helps track it down
console.error('No name for associated claim: ', claim.claim_id);
console.error('No name for associated claim: ', claim.claim_id); // eslint-disable-line no-console
}
innerContent = (
@ -72,13 +72,11 @@ class ShowPage extends React.PureComponent<Props> {
<Page>
<section className="card card--section">
<div className="card__title">{uri}</div>
<div className="card__content">
<p>
{__(
'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
)}
</p>
</div>
<div className="card__actions">
<Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
</div>

3
src/ui/scss/all.scss
View file

@ -16,10 +16,8 @@
@import 'component/claim-list';
@import 'component/comments';
@import 'component/content';
@import 'component/credit';
@import 'component/dat-gui';
@import 'component/expandable';
@import 'component/file-download';
@import 'component/file-properties';
@import 'component/file-render';
@import 'component/form-field';
@ -45,6 +43,5 @@
@import 'component/tabs';
@import 'component/tags';
@import 'component/time';
@import 'component/toggle';
@import 'component/wunderbar';
@import 'component/yrbl';

1
src/ui/scss/component/_badge.scss
View file

@ -2,6 +2,7 @@
.badge {
vertical-align: middle;
white-space: nowrap;
}
.badge--tag {

27
src/ui/scss/component/_button.scss
View file

@ -5,26 +5,22 @@
font-weight: 400;
svg {
stroke-width: 1.9;
position: relative;
color: $lbry-gray-5;
// Buttons that don't have a label
&:only-child {
color: inherit;
width: 1.4rem;
height: 1.4rem;
width: 1.3rem;
height: 1.3rem;
}
}
}
.button--primary {
&:hover {
background-color: $lbry-teal-3;
background-color: $lbry-teal-4;
}
svg {
color: white;
stroke: $lbry-teal-4;
}
}
@ -41,15 +37,15 @@
.button--primary,
.button--inverse {
height: var(--button-height);
line-height: var(--button-height);
border-radius: var(--button-radius);
font-size: 1.1rem;
padding: 0 var(--spacing-medium);
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.button--inverse {
border-color: $lbry-teal-4;
color: $lbry-teal-5;
&:hover {
color: $lbry-white;
@ -64,6 +60,12 @@
padding: 0;
}
.button--link {
[data-mode='dark'] & {
color: $lbry-teal-5;
}
}
.button--uri-indicator {
max-width: 100%;
height: 1.2em;
@ -100,6 +102,7 @@
display: flex;
align-items: center;
min-width: 0;
height: 100%;
}
.button__label {
@ -111,5 +114,5 @@
// Handle icons on the left or right side of the button label
svg + .button__label,
.button__label + svg {
margin-left: var(--spacing-miniscule);
margin-left: var(--spacing-small);
}

92
src/ui/scss/component/_card.scss
View file

@ -5,7 +5,6 @@
border-radius: var(--card-radius);
box-shadow: var(--card-box-shadow) $lbry-gray-1;
overflow: hidden;
font-size: 1.25rem;
[data-mode='dark'] & {
background-color: var(--dm-color-05);
@ -41,8 +40,9 @@
.card--reward-total {
background-repeat: no-repeat;
background-size: cover;
// justify-content: space-between;
color: $lbry-white;
font-size: var(--font-title);
font-weight: 700;
}
.card--modal {
@ -55,13 +55,23 @@
.card__actions {
display: flex;
align-items: center;
font-size: 1.15rem;
margin-top: var(--spacing-medium);
font-size: var(--font-body);
&:only-child {
margin-top: 0;
}
> *:not(:last-child) {
margin-right: var(--spacing-medium);
}
}
.card__actions--inline {
@extend .card__actions;
margin-top: 0;
}
.card__actions--between {
@include between;
}
@ -92,34 +102,9 @@
padding: var(--spacing-medium);
}
// C A R D
// C O N T E N T
.card__content {
&:not(:last-of-type) {
margin-bottom: var(--spacing-medium);
}
p:not(:last-child) {
margin-bottom: var(--spacing-medium);
}
}
.card__content--large {
font-size: 3rem;
line-height: 1.5;
font-weight: 700;
}
// C A R D
// H E A D E R
.card__header {
position: relative;
&:not(.card__header--flat) {
margin-bottom: var(--spacing-medium);
}
font-size: var(--font-heading);
font-weight: 600;
}
// C A R D
@ -168,19 +153,25 @@
// S U B T I T L E
.card__subtitle {
@extend .help;
color: darken($lbry-gray-5, 25%);
background-color: lighten($lbry-gray-1, 5%);
font-size: 1.15rem;
margin-bottom: var(--spacing-small);
flex: 1;
p {
margin-bottom: var(--spacing-small);
}
margin: var(--spacing-small) 0;
padding: var(--spacing-small);
border-radius: var(--card-radius);
font-size: var(--font-body);
background-color: rgba($lbry-blue-1, 0.1);
color: darken($lbry-gray-5, 15%);
[data-mode='dark'] & {
background-color: darken($lbry-gray-5, 20%);
background-color: var(--dm-color-04);
color: inherit;
}
}
.card__subtitle--status {
@extend .card__subtitle;
background-color: $lbry-yellow-1;
[data-mode='dark'] & {
background-color: rgba($lbry-yellow-1, 0.1);
}
}
@ -188,26 +179,17 @@
// T I T L E
.card__title {
font-size: 2rem;
font-weight: 600;
margin-bottom: var(--spacing-medium);
+ .card__content {
margin-top: var(--spacing-medium);
}
}
.card__title--flex {
display: flex;
align-items: center;
margin-bottom: var(--spacing-small);
font-size: var(--font-title);
& > *:not(:last-child) {
margin-right: var(--spacing-medium);
}
}
.card__title--flex-between {
display: flex;
@include between;
align-items: center;
.card__title--between {
@extend .card__title;
justify-content: space-between;
}

7
src/ui/scss/component/_channel.scss
View file

@ -84,11 +84,12 @@ $metadata-z-index: 1;
}
.channel__title {
font-size: 3rem;
font-weight: 800;
margin-right: var(--spacing-small);
overflow: hidden;
text-overflow: ellipsis;
// line-height: var(--font-heading);
font-size: var(--font-heading);
font-weight: 800;
// Quick hack to get this to work
// We should have a generic style for "header with button next to it"
@ -98,8 +99,6 @@ $metadata-z-index: 1;
}
.channel__url {
font-size: 1.2rem;
margin-top: -0.25rem;
color: rgba($lbry-white, 0.75);
margin-right: var(--spacing-large);
}

95
src/ui/scss/component/_claim-list.scss
View file

@ -3,23 +3,22 @@
align-items: center;
min-height: 4.5rem;
padding: var(--spacing-medium);
font-size: 1rem; // Ensures select & header text have same font-size
color: $lbry-white;
font-size: var(--font-body);
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
color: $lbry-white;
& > *:not(:last-child) {
margin-right: 0.5rem;
}
fieldset-section {
margin-bottom: 0;
margin: 0;
}
// Normal link buttons are too dark on the black file list background
.button--link {
color: $lbry-teal-3;
font-size: 1.2em;
&:hover {
color: $lbry-teal-1;
@ -46,19 +45,13 @@
.claim-list__header--small {
height: 3rem;
min-height: 3rem;
font-size: 1em;
}
.claim-list__dropdown {
background-position: 95% center;
background-repeat: no-repeat;
background-size: 1.2rem;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
height: 2.5rem;
font-size: 1.3rem;
margin-bottom: 0;
padding: 0 var(--spacing-medium);
padding-right: var(--spacing-large);
margin-bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
border: 1px solid $lbry-white;
color: $lbry-white;
background-color: lighten($lbry-black, 10%);
@ -81,7 +74,6 @@
display: flex;
align-items: center;
margin-left: auto;
font-size: 1.1em;
& > * {
margin-left: var(--spacing-small);
@ -89,25 +81,26 @@
}
.claim-preview {
@include mediaThumbHoverZoom;
display: flex;
position: relative;
overflow: visible;
cursor: pointer;
font-size: 1.3rem;
padding: var(--spacing-medium);
&:not(.claim-preview--inline) {
@include mediaThumbHoverZoom;
cursor: pointer;
}
.media__thumb {
width: var(--file-list-thumbnail-width);
flex-shrink: 0;
margin-right: var(--spacing-medium);
}
}
ul & {
&:first-of-type {
border-top: none;
}
}
.claim-preview--injected {
padding: var(--spacing-medium);
position: relative;
}
.claim-preview--injected,
@ -116,23 +109,45 @@
[data-mode='dark'] & {
color: $lbry-white;
border-top: 1px solid var(--dm-color-04);
background-color: var(--dm-color-05);
border-color: var(--dm-color-04);
}
}
.claim-preview--large {
font-size: 1.6rem;
border-bottom: 0;
border: none;
padding: 0;
margin: var(--spacing-small) 0;
margin: var(--spacing-medium);
font-size: var(--font-multiplier-large);
&:hover {
background-color: transparent;
}
.media__thumb {
width: 20rem;
width: 14rem;
}
.channel-thumbnail {
width: 7.5rem;
height: 7.5rem;
}
[data-mode='dark'] & {
border: none;
}
}
.claim-preview--small {
font-size: var(--font-multiplier-small);
padding: var(--spacing-small);
.media__thumb {
width: 8rem;
}
.channel-thumbnail {
width: 4rem;
height: 4rem;
}
}
@ -160,6 +175,25 @@
}
}
.claim-preview--inline {
padding: 0;
padding-top: var(--spacing-large);
border-bottom: none;
border-top: 1px solid $lbry-gray-1;
.channel-thumbnail {
width: var(--channel-thumbnail-width--small);
height: var(--channel-thumbnail-width--small);
}
}
.claim-preview-title {
font-weight: 600;
margin-right: auto;
padding-right: var(--spacing-medium);
font-size: larger;
}
.claim-preview-metadata {
display: flex;
flex-direction: column;
@ -179,10 +213,5 @@
.claim-preview-properties {
align-items: flex-end;
flex: 1;
}
.claim-preview-title {
font-weight: 600;
margin-right: auto;
padding-right: var(--spacing-medium);
font-size: var(--font-subtext);
}

1
src/ui/scss/component/_comments.scss
View file

@ -1,4 +1,5 @@
.comments {
@extend .ul--no-style;
margin-top: var(--spacing-large);
}

17
src/ui/scss/component/_credit.scss
View file

@ -1,17 +0,0 @@
.credit-amount {
font-size: 0.8rem;
white-space: nowrap;
}
.credit-amount--inherit {
background-color: inherit;
color: inherit;
font-size: inherit;
font-weight: inherit;
padding: 0;
}
.credit-amount--large {
font-size: 36px;
font-weight: 600;
}

Some files were not shown because too many files have changed in this diff Show more