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-simplemde-editor": "^4.0.0",
"react-spring": "^8.0.20", "react-spring": "^8.0.20",
"react-sticky-box": "^0.8.0", "react-sticky-box": "^0.8.0",
"react-toggle": "^4.0.2",
"redux": "^3.6.0", "redux": "^3.6.0",
"redux-persist": "^4.8.0", "redux-persist": "^4.8.0",
"redux-persist-transform-compress": "^4.2.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 && ( {!fetching && !hasContent && (
<div className="card--section"> <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> </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)} />} {hasContent && <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />}

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

@ -2,7 +2,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import { Form, FormField } from 'component/common/form'; import { Form, FormField } from 'component/common/form';
import Button from 'component/button';
import SelectAsset from 'component/selectAsset'; import SelectAsset from 'component/selectAsset';
import TagSelect from 'component/tagsSelect'; import TagSelect from 'component/tagsSelect';
@ -21,12 +20,9 @@ type Props = {
tags: Array<string>, tags: Array<string>,
locations: Array<string>, locations: Array<string>,
languages: Array<string>, languages: Array<string>,
updateChannel: any => void, updateChannel: any => void,
updateThumb: string => void, updateThumb: string => void,
updateCover: string => void, updateCover: string => void,
setEditing: boolean => void,
}; };
function ChannelForm(props: Props) { function ChannelForm(props: Props) {
@ -43,7 +39,6 @@ function ChannelForm(props: Props) {
languages, languages,
amount, amount,
updateChannel, updateChannel,
setEditing,
updateThumb, updateThumb,
updateCover, updateCover,
} = props; } = props;
@ -113,111 +108,109 @@ function ChannelForm(props: Props) {
</p> </p>
</div> </div>
<Form onSubmit={channelParams => updateChannel(channelParams)}> <Form onSubmit={channelParams => updateChannel(channelParams)}>
<div className="card__content"> <SelectAsset
<SelectAsset onUpdate={v => handleThumbnailChange(v)}
onUpdate={v => handleThumbnailChange(v)} currentValue={params.thumbnail}
currentValue={params.thumbnail} assetName={'Thumbnail'}
assetName={'Thumbnail'} recommended={'(300 x 300)'}
recommended={'(300 x 300)'} />
/>
<SelectAsset <SelectAsset
onUpdate={v => handleCoverChange(v)} onUpdate={v => handleCoverChange(v)}
currentValue={params.cover} currentValue={params.cover}
assetName={'Cover'} assetName={'Cover'}
recommended={'(1000 x 160)'} recommended={'(1000 x 160)'}
/> />
<FormField <FormField
type="text" type="text"
name="channel_title2" name="channel_title2"
label={__('Title')} label={__('Title')}
placeholder={__('Titular Title')} placeholder={__('Titular Title')}
disabled={false} disabled={false}
value={params.title} value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })} onChange={e => setParams({ ...params, title: e.target.value })}
/> />
<FormField <FormField
className="form-field--price-amount" className="form-field--price-amount"
type="number" type="number"
name="content_bid2" name="content_bid2"
step="any" step="any"
label={__('Deposit (LBC)')} label={__('Deposit (LBC)')}
postfix="LBC" postfix="LBC"
value={params.amount} value={params.amount}
error={bidError} error={bidError}
min="0.0" min="0.0"
disabled={false} disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))} onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1} placeholder={0.1}
/> />
<FormField <FormField
type="text" type="text"
name="channel_website2" name="channel_website2"
label={__('Website')} label={__('Website')}
placeholder={__('aprettygoodsite.com')} placeholder={__('aprettygoodsite.com')}
disabled={false} disabled={false}
value={params.website} value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })} onChange={e => setParams({ ...params, website: e.target.value })}
/> />
<FormField <FormField
type="text" type="text"
name="content_email2" name="content_email2"
label={__('Email')} label={__('Email')}
placeholder={__('yourstruly@example.com')} placeholder={__('yourstruly@example.com')}
disabled={false} disabled={false}
value={params.email} value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })} onChange={e => setParams({ ...params, email: e.target.value })}
/> />
<FormField <FormField
type="markdown" type="markdown"
name="content_description2" name="content_description2"
label={__('Description')} label={__('Description')}
placeholder={__('Description of your content')} placeholder={__('Description of your content')}
value={params.description} value={params.description}
disabled={false} disabled={false}
onChange={text => setParams({ ...params, description: text })} onChange={text => setParams({ ...params, description: text })}
/> />
<TagSelect <TagSelect
title={false} title={false}
suggestMature suggestMature
help={__('The better your tags are, the easier it will be for people to discover your channel.')} help={__('The better your tags are, the easier it will be for people to discover your channel.')}
empty={__('No tags added')} empty={__('No tags added')}
onSelect={newTag => { onSelect={newTag => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) { if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] }); setParams({ ...params, tags: [...params.tags, newTag] });
} else { } else {
// If it already exists and the user types it in, remove it // If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) }); setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
} }
}}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
tagsChosen={params.tags || []}
/>
<div className={'card__actions'}>
<Button
button="primary"
label={__('Submit')}
onClick={() => {
updateChannel(params);
setEditing(false);
}}
/>
<Button
button="link"
label={__('Cancel')}
onClick={() => {
setParams({ ...channelParams });
setEditing(false);
}} }}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
tagsChosen={params.tags || []}
/> />
<div className={'card__actions'}>
<Button
button="primary"
label={__('Submit')}
onClick={() => {
updateChannel(params);
setEditing(false);
}}
/>
<Button
button="link"
label={__('Cancel')}
onClick={() => {
setParams({ ...channelParams });
setEditing(false);
}}
/>
</div>
</div> </div>
</Form> </Form>
</section> </section>

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

@ -99,7 +99,7 @@ export default function ClaimList(props: Props) {
</div> </div>
)} )}
{urisLength > 0 && ( {urisLength > 0 && (
<ul> <ul className="ul--no-style">
{sortedUris.map((uri, index) => ( {sortedUris.map((uri, index) => (
<React.Fragment key={uri}> <React.Fragment key={uri}>
<ClaimPreview uri={uri} type={type} /> <ClaimPreview uri={uri} type={type} />
@ -108,7 +108,7 @@ export default function ClaimList(props: Props) {
))} ))}
</ul> </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> </section>
); );
} }

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

@ -1,6 +1,6 @@
// @flow // @flow
import type { Node } from 'react'; import type { Node } from 'react';
import React, { useEffect } from 'react'; import React, { Fragment, useEffect } from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { buildClaimSearchCacheQuery, MATURE_TAGS } from 'lbry-redux'; import { buildClaimSearchCacheQuery, MATURE_TAGS } from 'lbry-redux';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
@ -149,7 +149,7 @@ function ClaimListDiscover(props: Props) {
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]); }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
const header = ( const header = (
<h1 className="card__title--flex"> <Fragment>
<FormField <FormField
className="claim-list__dropdown" className="claim-list__dropdown"
type="select" type="select"
@ -205,7 +205,7 @@ function ClaimListDiscover(props: Props) {
))} ))}
</FormField> </FormField>
)} )}
</h1> </Fragment>
); );
return ( return (
@ -221,7 +221,7 @@ function ClaimListDiscover(props: Props) {
pageSize={PAGE_SIZE} 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> </div>
); );
} }

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

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

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

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

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

@ -2,11 +2,9 @@
import type { ElementRef } from 'react'; import type { ElementRef } from 'react';
import React from 'react'; import React from 'react';
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import Toggle from 'react-toggle';
import SimpleMDE from 'react-simplemde-editor'; import SimpleMDE from 'react-simplemde-editor';
import MarkdownPreview from 'component/common/markdown-preview-internal'; import MarkdownPreview from 'component/common/markdown-preview-internal';
import { openEditorMenu, stopContextMenu } from 'util/context-menu'; import { openEditorMenu, stopContextMenu } from 'util/context-menu';
import 'easymde/dist/easymde.min.css'; import 'easymde/dist/easymde.min.css';
type Props = { type Props = {
@ -107,15 +105,6 @@ export class FormField extends React.PureComponent<Props> {
</checkbox-element> </checkbox-element>
</Wrapper> </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') { } else if (type === 'select') {
input = ( input = (
<fieldset-section> <fieldset-section>

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

@ -212,7 +212,7 @@ export const icons = {
[ICONS.NO]: buildIcon( [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" /> <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.DOWN]: buildIcon(<polyline points="6 9 12 15 18 9" />),
[ICONS.FULLSCREEN]: buildIcon( [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" /> <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() { export default function UnsupportedOnWeb() {
return ( return (
IS_WEB && ( IS_WEB && (
<div className="card__content help help--warning"> <div className="help help--warning">
This page is not currently supported on the web.{' '} 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 <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" /> for full feature
support. 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; const { claim, contentType, fileInfo, metadata, openFolder } = this.props;
if (!claim || !metadata) { if (!claim || !metadata) {
return ( return <span className="empty">{__('Empty claim or metadata info.')}</span>;
<div className="card__content">
<span className="empty">{__('Empty claim or metadata info.')}</span>
</div>
);
} }
const { description, languages, license } = metadata; 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 progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
const label = fileInfo ? __('Downloading: ') + progress.toFixed(0) + __('% complete') : __('Connecting...'); 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)) { } else if ((fileInfo === null && !downloading) || (fileInfo && !fileInfo.download_path)) {
if (!costInfo) { if (!costInfo) {
return null; return null;

73
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); const showClaimable = invitees.some(invite => invite.invite_reward_claimable && !invite.invite_reward_claimed);
return ( return (
<section className="card card--section"> <section className="card">
<header className="card__header"> <div className="table__header">
<h2 className="card__title card__title--flex-between"> <h2 className="card__title">
{__('Invite History')} {__('Invite History')}
{referralReward && showClaimable && ( {referralReward && showClaimable && (
<RewardLink <RewardLink
@ -60,42 +60,39 @@ class InviteList extends React.PureComponent<Props> {
/> />
)} )}
</h2> </h2>
</header> <p className="card__subtitle">{rewardHelp}</p>
<div className="card__content">
<table className="table table--invites">
<thead>
<tr>
<th>{__('Invitee Email')}</th>
<th>{__('Invite Status')}</th>
<th>{__('Reward')}</th>
</tr>
</thead>
<tbody>
{invitees.map(invitee => (
<tr key={invitee.email}>
<td>{invitee.email}</td>
<td>
<span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
</td>
<td>
{invitee.invite_reward_claimed && (
<React.Fragment>
<span>{__('Claimed')}</span>
<Icon icon={ICONS.COMPLETE} />
</React.Fragment>
)}
{!invitee.invite_reward_claimed &&
(invitee.invite_reward_claimable ? <span>{__('Claimable')}</span> : __('Unclaimable'))}
</td>
</tr>
))}
</tbody>
</table>
<div className="help">{rewardHelp}</div>
</div> </div>
<table className="table table--invites">
<thead>
<tr>
<th>{__('Invitee Email')}</th>
<th>{__('Invite Status')}</th>
<th>{__('Reward')}</th>
</tr>
</thead>
<tbody>
{invitees.map(invitee => (
<tr key={invitee.email}>
<td>{invitee.email}</td>
<td>
<span>{invitee.invite_accepted ? __('Accepted') : __('Not Accepted')}</span>
</td>
<td>
{invitee.invite_reward_claimed && (
<React.Fragment>
<span>{__('Claimed')}</span>
<Icon icon={ICONS.COMPLETE} />
</React.Fragment>
)}
{!invitee.invite_reward_claimed &&
(invitee.invite_reward_claimable ? <span>{__('Claimable')}</span> : __('Unclaimable'))}
</td>
</tr>
))}
</tbody>
</table>
</section> </section>
); );
} }

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

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

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

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

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

@ -17,11 +17,9 @@ export default function NavigationHistoryRecent(props: Props) {
return history.length ? ( return history.length ? (
<div className="card item-list"> <div className="card item-list">
<section className="card__content"> {history.map(({ lastViewed, uri }) => (
{history.map(({ lastViewed, uri }) => ( <NavigationHistoryItem slim key={uri} uri={uri} lastViewed={lastViewed} />
<NavigationHistoryItem slim key={uri} uri={uri} lastViewed={lastViewed} /> ))}
))}
</section>
<div className="card__actions"> <div className="card__actions">
<Button navigate="/$/library/all" button="link" label={__('See All Visited Links')} /> <Button navigate="/$/library/all" button="link" label={__('See All Visited Links')} />
</div> </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} /> <TruncatedText text={title} lines={1} />
</span> </span>
</span> </span>
<span className={'preview-link__description media__subtext'}> <span className={'preview-link__description media__subtitle'}>
<UriIndicator uri={uri} link /> <UriIndicator uri={uri} link />
</span> </span>
<span className={'file-list__item-properties'}> <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}> <TruncatedText lines={2} showTooltip={false}>
<MarkdownPreview content={description} promptLinks strip /> <MarkdownPreview content={description} promptLinks strip />
</TruncatedText> </TruncatedText>

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

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

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

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

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

@ -130,7 +130,7 @@ function PublishForm(props: Props) {
{/* This should probably be PublishThumbnail */} {/* This should probably be PublishThumbnail */}
<SelectThumbnail /> <SelectThumbnail />
</div> </div>
<div className="card"> <div className="card card--section">
<TagSelect <TagSelect
title={false} title={false}
suggestMature suggestMature
@ -152,20 +152,18 @@ function PublishForm(props: Props) {
/> />
</div> </div>
<section className="card card--section"> <section className="card card--section">
<div className="card__content"> <ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
<ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} /> <p className="help">
<p className="help"> {__('This is a username or handle that your content can be found under.')}{' '}
{__('This is a username or handle that your content can be found under.')}{' '} {__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
{__('Ex. @Marvel, @TheBeatles, @BooksByJoe')} </p>
</p>
</div>
</section> </section>
<PublishName disabled={formDisabled} /> <PublishName disabled={formDisabled} />
<PublishPrice disabled={formDisabled} /> <PublishPrice disabled={formDisabled} />
<PublishAdditionalOptions disabled={formDisabled} /> <PublishAdditionalOptions disabled={formDisabled} />
<section className="card card--section"> <section>
{!formDisabled && !formValid && <PublishFormErrors />} {!formDisabled && !formValid && <PublishFormErrors />}
<div className="card__actions"> <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 // These are extra help
// If there is an error it will be presented as an inline error as well // If there is an error it will be presented as an inline error as well
return ( return (
<div className="card__content error-text"> <div className="error-text">
{!title && <div>{__('A title is required')}</div>} {!title && <div>{__('A title is required')}</div>}
{!name && <div>{__('A URL is required')}</div>} {!name && <div>{__('A URL is required')}</div>}
{!bid && <div>{__('A deposit amount is required')}</div>} {!bid && <div>{__('A deposit amount is required')}</div>}

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

@ -74,30 +74,28 @@ function PublishName(props: Props) {
return ( return (
<section className="card card--section"> <section className="card card--section">
<div className="card__content"> <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix"> <fieldset-section>
<fieldset-section> <label>{__('Name')}</label>
<label>{__('Name')}</label> <div className="form-field__prefix">{`lbry://${
<span className="form-field__prefix">{`lbry://${ !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/`
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : `${channel}/` }`}</div>
}`}</span> </fieldset-section>
</fieldset-section> <FormField
<FormField type="text"
type="text" name="content_name"
name="content_name" value={name}
value={name} error={nameError}
error={nameError} onChange={event => updatePublishForm({ name: event.target.value })}
onChange={event => updatePublishForm({ name: event.target.value })} />
/> </fieldset-group>
</fieldset-group> <div className="form-field__help">
<div className="form-field__help"> <NameHelpText
<NameHelpText uri={uri}
uri={uri} isStillEditing={isStillEditing}
isStillEditing={isStillEditing} myClaimForUri={myClaimForUri}
myClaimForUri={myClaimForUri} onEditMyClaim={editExistingClaim}
onEditMyClaim={editExistingClaim} />
/>
</div>
</div> </div>
<FormField <FormField
type="number" type="number"

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

@ -14,40 +14,38 @@ function PublishText(props: Props) {
return ( return (
<section className="card card--section"> <section className="card card--section">
<div className="card__content"> <FormField
<FormField type="radio"
type="radio" name="content_free"
name="content_free" label={__('Free')}
label={__('Free')} checked={contentIsFree}
checked={contentIsFree} disabled={disabled}
disabled={disabled} onChange={() => updatePublishForm({ contentIsFree: true })}
onChange={() => updatePublishForm({ contentIsFree: true })} />
/>
<FormField <FormField
type="radio" type="radio"
name="content_cost" name="content_cost"
label={__('Add a price to this file')} label={__('Add a price to this file')}
checked={!contentIsFree} checked={!contentIsFree}
disabled={disabled} disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: false })} onChange={() => updatePublishForm({ contentIsFree: false })}
/>
{!contentIsFree && (
<FormFieldPrice
name="content_cost_amount"
min="0"
price={fee}
onChange={newFee => updatePublishForm({ fee: newFee })}
/> />
{!contentIsFree && ( )}
<FormFieldPrice {fee && fee.currency !== 'LBC' && (
name="content_cost_amount" <p className="form-field__help">
min="0" {__(
price={fee} 'All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.'
onChange={newFee => updatePublishForm({ fee: newFee })} )}
/> </p>
)} )}
{fee && fee.currency !== 'LBC' && (
<p className="form-field__help">
{__(
'All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.'
)}
</p>
)}
</div>
</section> </section>
); );
} }

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

@ -20,29 +20,27 @@ function PublishText(props: Props) {
return ( return (
<section className="card card--section"> <section className="card card--section">
<div className="card__content"> <FormField
<FormField type="text"
type="text" name="content_title"
name="content_title" label={__('Title')}
label={__('Title')} placeholder={__('Titular Title')}
placeholder={__('Titular Title')} disabled={disabled}
disabled={disabled} value={title}
value={title} onChange={e => updatePublishForm({ title: e.target.value })}
onChange={e => updatePublishForm({ title: e.target.value })} />
/>
<FormField <FormField
type={advancedEditor ? 'markdown' : 'textarea'} type={advancedEditor ? 'markdown' : 'textarea'}
name="content_description" name="content_description"
label={__('Description')} label={__('Description')}
placeholder={__('My description for this and that')} placeholder={__('My description for this and that')}
value={description} value={description}
disabled={disabled} disabled={disabled}
onChange={value => updatePublishForm({ description: advancedEditor ? value : value.target.value })} onChange={value => updatePublishForm({ description: advancedEditor ? value : value.target.value })}
/> />
<div className="card__actions"> <div className="card__actions">
<Button button="link" onClick={toggleMarkdown} label={advancedEditor ? 'Simple Editor' : 'Advanced Editor'} /> <Button button="link" onClick={toggleMarkdown} label={advancedEditor ? 'Simple Editor' : 'Advanced Editor'} />
</div>
</div> </div>
</section> </section>
); );

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

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

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

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

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

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

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

@ -25,28 +25,24 @@ const RewardTile = (props: Props) => {
return ( return (
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{reward.reward_title}</h2>
<h2 className="card__title">{reward.reward_title}</h2> <p className="card__subtitle">{reward.reward_description}</p>
<p className="card__subtitle">{reward.reward_description}</p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
{reward.reward_type === rewards.TYPE_GENERATED_CODE && ( <Button button="inverse" onClick={openRewardCodeModal} label={__('Enter Code')} />
<Button button="inverse" onClick={openRewardCodeModal} label={__('Enter Code')} /> )}
)} {reward.reward_type === rewards.TYPE_REFERRAL && (
{reward.reward_type === rewards.TYPE_REFERRAL && ( <Button button="inverse" navigate="/$/invite" label={__('Go To Invites')} />
<Button button="inverse" navigate="/$/invite" label={__('Go To Invites')} /> )}
)} {reward.reward_type !== rewards.TYPE_REFERRAL &&
{reward.reward_type !== rewards.TYPE_REFERRAL && (claimed ? (
(claimed ? ( <span>
<span> <Icon icon={ICONS.COMPLETED} /> {__('Reward claimed.')}
<Icon icon={ICONS.COMPLETED} /> {__('Reward claimed.')} </span>
</span> ) : (
) : ( <RewardLink button reward_type={reward.reward_type} />
<RewardLink button reward_type={reward.reward_type} /> ))}
))}
</div>
</div> </div>
</section> </section>
); );

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

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

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

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

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

@ -1,5 +1,5 @@
// @flow // @flow
import React from 'react'; import React, { Fragment } from 'react';
import { isNameValid } from 'lbry-redux'; import { isNameValid } from 'lbry-redux';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
import BusyIndicator from 'component/common/busy-indicator'; import BusyIndicator from 'component/common/busy-indicator';
@ -151,7 +151,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
} = this.state; } = this.state;
return ( return (
<div className="card__content"> <Fragment>
{createChannelError && <div className="error-text">{createChannelError}</div>} {createChannelError && <div className="error-text">{createChannelError}</div>}
{fetchingChannels ? ( {fetchingChannels ? (
<BusyIndicator message="Updating channels" /> <BusyIndicator message="Updating channels" />
@ -175,7 +175,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
</fieldset-section> </fieldset-section>
)} )}
{addingChannel && ( {addingChannel && (
<div className="card__content"> <div>
<FormField <FormField
label={__('Name')} label={__('Name')}
name="channel-input" name="channel-input"
@ -211,7 +211,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
</div> </div>
</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 ( return (
<div className="card__content"> <div>
{status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? ( {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
<div className="column"> <div className="column">
<div className="column__item thumbnail-preview" style={{ backgroundImage: `url(${thumbnailSrc})` }}> <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 ( return (
<StickyBox offsetBottom={40} offsetTop={100}> <StickyBox offsetBottom={40} offsetTop={90}>
<nav className="navigation"> <nav className="navigation">
<ul className="navigation__links"> <ul className="navigation-links">
{[ {[
{ {
...buildLink(null, __('Home'), ICONS.HOME), ...buildLink(null, __('Home'), ICONS.HOME),
@ -42,25 +42,25 @@ function SideBar(props: Props) {
}, },
].map(linkProps => ( ].map(linkProps => (
<li key={linkProps.label}> <li key={linkProps.label}>
<Button {...linkProps} className="navigation__link" activeClass="navigation__link--active" /> <Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" />
</li> </li>
))} ))}
</ul> </ul>
<ul className="navigation__links tags--vertical"> <ul className="navigation-links tags--vertical">
{followedTags.map(({ name }, key) => ( {followedTags.map(({ name }, key) => (
<li className="" key={name}> <li className="navigation-link__wrapper" key={name}>
<Tag navigate={`/$/tags?t${name}`} name={name} /> <Tag navigate={`/$/tags?t${name}`} name={name} />
</li> </li>
))} ))}
</ul> </ul>
<ul className="navigation__links--small"> <ul className="navigation-links--small">
{subscriptions.map(({ uri, channelName }, index) => ( {subscriptions.map(({ uri, channelName }, index) => (
<li key={uri} className=""> <li key={uri} className="navigation-link__wrapper">
<Button <Button
navigate={uri} navigate={uri}
label={channelName} label={channelName}
className="navigation__link" className="navigation-link"
activeClass="navigation__link--active" activeClass="navigation-link--active"
/> />
</li> </li>
))} ))}

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

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

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

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

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

@ -65,39 +65,37 @@ export default function TagSelect(props: Props) {
return ( return (
((showClose && !hasClosed) || !showClose) && ( ((showClose && !hasClosed) || !showClose) && (
<div className="card--section"> <div>
{title !== false && ( {title !== false && (
<h2 className="card__title card__title--flex-between"> <h2 className="card__title">
{title} {title}
{showClose && !hasClosed && <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />} {showClose && !hasClosed && <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />}
</h2> </h2>
)} )}
<div className="card__content"> <ul className="tags--remove">
<ul className="tags--remove"> {transitions.map(({ item, props, key }) => (
{transitions.map(({ item, props, key }) => ( <animated.li key={key} style={props}>
<animated.li key={key} style={props}> <Tag
<Tag name={item.name}
name={item.name} type="remove"
type="remove" onClick={() => {
onClick={() => { handleTagClick(item);
handleTagClick(item); }}
}} />
/> </animated.li>
</animated.li> ))}
))} {!transitions.length && (
{!transitions.length && ( <div className="empty">{empty || __("You aren't following any tags, try searching for one.")}</div>
<div className="empty">{empty || __("You aren't following any tags, try searching for one.")}</div>
)}
</ul>
<TagsSearch onSelect={onSelect} suggestMature={suggestMature && !hasMatureTag} />
{help !== false && (
<p className="help">
{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> </ul>
<TagsSearch onSelect={onSelect} suggestMature={suggestMature && !hasMatureTag} />
{help !== false && (
<p className="help">
{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)} <span>{this.capitalize(type)}</span> {isRevokeable && this.getLink(type)}
</td> </td>
<td className="table__item--actionable"> <td className="table__item--actionable">
{reward && <span>{reward.reward_title}</span>} {reward ? <span>{reward.reward_title}</span> : <Button button="link" navigate={uri} label={claimName} />}
{claimName && claimId ? <Button button="link" navigate={uri} label={claimName} /> : claimName}
</td> </td>
<td> <td>

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

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

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

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

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

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

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

@ -48,19 +48,17 @@ class UserEmailNew extends React.PureComponent<Props, State> {
return ( return (
<React.Fragment> <React.Fragment>
<header className="card__header"> <h2 className="card__title">{__('Verify Your Email')}</h2>
<h2 className="card__title">{__('Verify Your Email')}</h2> <p className="card__subtitle">
<p className="card__subtitle"> {/* @if TARGET='app' */}
{/* @if TARGET='app' */} {__("We'll let you know about LBRY updates, security issues, and great new content.")}
{__("We'll let you know about LBRY updates, security issues, and great new content.")} {/* @endif */}
{/* @endif */} {/* @if TARGET='web' */}
{/* @if TARGET='web' */} {__('Stay up to date with lbry.tv and be the first to know about the progress we make.')}
{__('Stay up to date with lbry.tv and be the first to know about the progress we make.')} {/* @endif */}
{/* @endif */} </p>
</p>
</header>
<Form className="card__content" onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<FormField <FormField
type="email" type="email"
label="Email" label="Email"

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

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

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

@ -83,37 +83,33 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
return ( return (
<React.Fragment> <React.Fragment>
<section className="card__content"> <p className="card__subtitle">
<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.'
'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.' )}
)} </p>
</p>
</section>
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<div className="card__content"> <fieldset-group class="fieldset-group--smushed">
<fieldset-group class="fieldset-group--smushed"> <FormField label={__('Country')} type="select" name="country-codes" onChange={this.handleSelect}>
<FormField label={__('Country')} type="select" name="country-codes" onChange={this.handleSelect}> {countryCodes.map((country, index) => (
{countryCodes.map((country, index) => ( <option key={index} value={country.countryCallingCode}>
<option key={index} value={country.countryCallingCode}> {os === 'Darwin' ? country.emoji : `(${country.alpha2})`} {country.countryCallingCode}
{os === 'Darwin' ? country.emoji : `(${country.alpha2})`} {country.countryCallingCode} </option>
</option> ))}
))} </FormField>
</FormField> <FormField
<FormField type="text"
type="text" label={__('Number')}
label={__('Number')} placeholder={this.state.countryCode === '+1' ? '(555) 555-5555' : '5555555555'}
placeholder={this.state.countryCode === '+1' ? '(555) 555-5555' : '5555555555'} name="phone"
name="phone" value={this.state.phone}
value={this.state.phone} error={phoneErrorMessage}
error={phoneErrorMessage} onChange={event => {
onChange={event => { this.handleChanged(event);
this.handleChanged(event); }}
}} />
/> </fieldset-group>
</fieldset-group>
</div>
<div className="card__actions"> <div className="card__actions">
<Submit label="Submit" disabled={isPending} /> <Submit label="Submit" disabled={isPending} />
{cancelButton} {cancelButton}

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

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

@ -27,35 +27,29 @@ class UserVerify extends React.PureComponent<Props> {
return ( return (
<React.Fragment> <React.Fragment>
<section className="card card--section"> <section className="card card--section">
<header className="card__header--flat"> <h1 className="card__title">{__('Final Human Proof')}</h1>
<h1 className="card__title">{__('Final Human Proof')}</h1> <p className="card__subtitle">
<p className="card__subtitle"> To start the rewards approval process, please complete <strong>one and only one</strong> of the options
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.
below. This is optional, and can be skipped at the bottom of the page. </p>
</p>
</header>
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('1) Proof via Phone')}</h2>
<h2 className="card__title">{__('1) Proof via Phone')}</h2> <p className="card__subtitle">
<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'
'You will receive an SMS text message confirming that your phone number is correct. Does not work for Canada and possibly other regions' )}`}
)}`} </p>
</p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button
<Button onClick={() => {
onClick={() => { verifyPhone();
verifyPhone(); }}
}} button="inverse"
button="inverse" label={__('Submit Phone Number')}
label={__('Submit Phone Number')} />
/>
</div>
<div className="help"> <div className="help">
{__('Standard messaging rates apply. LBRY will not text or call you otherwise. Having trouble?')}{' '} {__('Standard messaging rates apply. LBRY will not text or call you otherwise. Having trouble?')}{' '}
@ -65,71 +59,57 @@ class UserVerify extends React.PureComponent<Props> {
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('2) Proof via Credit')}</h2>
<h2 className="card__title">{__('2) Proof via Credit')}</h2> <p className="card__subtitle">
<p className="card__subtitle"> {`${__('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.'
'If you have a valid credit or debit card, you can use it to instantly prove your humanity.' )} `}
)} ${__( </p>
'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">
<div className="card__actions"> {errorMessage && <p className="error-text">{errorMessage}</p>}
{errorMessage && <p className="error-text">{errorMessage}</p>} <CardVerify
<CardVerify label={__('Perform Card Verification')}
label={__('Perform Card Verification')} disabled={isPending}
disabled={isPending} token={this.onToken}
token={this.onToken} stripeKey={Lbryio.getStripeToken()}
stripeKey={Lbryio.getStripeToken()} />
/> </div>
</div>
<div className="help"> <div className="help">
{__('A $1 authorization may temporarily appear with your provider.')}{' '} {__('A $1 authorization may temporarily appear with your provider.')}{' '}
<Button <Button
button="link" button="link"
href="https://lbry.com/faq/identity-requirements" href="https://lbry.com/faq/identity-requirements"
label={__('Read more about why we do this.')} label={__('Read more about why we do this.')}
/> />
</div>
</div> </div>
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('3) Proof via Chat')}</h2>
<h2 className="card__title">{__('3) Proof via Chat')}</h2> <p className="card__subtitle">
<p className="card__subtitle"> {__(
{__( 'A moderator capable of approving you is typically available in the discord server. Check out the #rewards-approval channel for more information.'
'A moderator capable of approving you is typically available in the discord server. Check out the #rewards-approval channel for more information.' )}{' '}
)}{' '} {__(
{__( 'This process will likely involve providing proof of a stable and established online or real-life identity.'
'This process will likely involve providing proof of a stable and established online or real-life identity.' )}
)} </p>
</p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button href="https://chat.lbry.com" button="inverse" label={__('Join LBRY Chat')} />
<Button href="https://chat.lbry.com" button="inverse" label={__('Join LBRY Chat')} />
</div>
</div> </div>
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Or, Skip It Entirely')}</h2>
<h2 className="card__title">{__('Or, Skip It Entirely')}</h2> <p className="card__subtitle">
<p className="card__subtitle"> {__('You can continue without this step, but you will not be eligible to earn rewards.')}
{__('You can continue without this step, but you will not be eligible to earn rewards.')} </p>
</p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button navigate="/" button="primary" label={__('Skip Rewards')} />
<Button navigate="/" button="primary" label={__('Skip Rewards')} />
</div>
</div> </div>
</section> </section>
</React.Fragment> </React.Fragment>

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

@ -47,39 +47,20 @@ class WalletAddress extends React.PureComponent<Props, State> {
return ( return (
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Receive Credits')}</h2>
<h2 className="card__title">{__('Receive Credits')}</h2> <p className="card__subtitle">
<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> </p>
<CopyableText label={__('Your Address')} copyable={receiveAddress} snackMessage={__('Address copied.')} />
<div className="card__content"> <div className="card__actions">
<CopyableText copyable={receiveAddress} snackMessage={__('Address copied.')} /> <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> </div>
<div className="card__content"> {showQR && <QRCode value={receiveAddress} paddingTop />}
<div className="card__actions">
<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>
)}
</section> </section>
); );
} }

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

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

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

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

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

@ -37,10 +37,8 @@ class WalletSend extends React.PureComponent<Props> {
return ( return (
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Send Credits')}</h2>
<h2 className="card__title">{__('Send Credits')}</h2> <p className="card__subtitle">{__('Send LBC to your friends or favorite creators.')}</p>
<p className="card__subtitle">{__('Send LBC to your friends or favorite creators')}</p>
</header>
<Formik <Formik
initialValues={{ initialValues={{
@ -51,35 +49,33 @@ class WalletSend extends React.PureComponent<Props> {
validate={validateSendTx} validate={validateSendTx}
render={({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( render={({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<div className="card__content"> <fieldset-group class="fieldset-group--smushed">
<fieldset-group class="fieldset-group--smushed"> <FormField
<FormField type="number"
type="number" name="amount"
name="amount" label={__('Amount')}
label={__('Amount')} postfix={__('LBC')}
postfix={__('LBC')} className="form-field--price-amount"
className="form-field--price-amount" affixClass="form-field--fix-no-height"
affixClass="form-field--fix-no-height" min="0"
min="0" step="any"
step="any" placeholder="12.34"
placeholder="12.34" onChange={handleChange}
onChange={handleChange} onBlur={handleBlur}
onBlur={handleBlur} value={values.amount}
value={values.amount} />
/>
<FormField <FormField
type="text" type="text"
name="address" name="address"
placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs"
className="form-field--address" className="form-field--address"
label={__('Recipient address')} label={__('Recipient address')}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.address} value={values.address}
/> />
</fieldset-group> </fieldset-group>
</div>
<div className="card__actions"> <div className="card__actions">
<Button <Button
button="inverse" button="inverse"

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

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

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

@ -32,7 +32,7 @@ export default class extends React.PureComponent<Props> {
{title && subtitle && ( {title && subtitle && (
<div className="yrbl__content"> <div className="yrbl__content">
<h2 className="card__title">{title}</h2> <h2 className="card__title">{title}</h2>
<div className="card__content">{subtitle}</div> <p>{subtitle}</p>
</div> </div>
)} )}
</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)} className={classnames('card card--modal modal', className)}
overlayClassName="modal-overlay" overlayClassName="modal-overlay"
> >
{title && ( {title && <h1 className="card__title">{title}</h1>}
<header className="card__header">
<h1 className="card__title">{title}</h1>
</header>
)}
{children} {children}
{type === 'custom' ? null : ( // custom modals define their own buttons {type === 'custom' ? null : ( // custom modals define their own buttons
<div className="card__actions"> <div className="card__actions">
@ -106,7 +102,7 @@ export class ExpandableModal extends React.PureComponent<ModalProps, State> {
return ( return (
<Modal type="custom" {...this.props}> <Modal type="custom" {...this.props}>
{this.props.children} {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"> <div className="card__actions">
<Button button="primary" label={this.props.confirmButtonLabel} onClick={this.props.onConfirmed} /> <Button button="primary" label={this.props.confirmButtonLabel} onClick={this.props.onConfirmed} />
<Button <Button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -18,19 +18,17 @@ class ModalDownloading extends React.PureComponent<Props> {
return ( return (
<Modal title={__('Downloading Update')} isOpen contentLabel={__('Downloading Update')} type="custom"> <Modal title={__('Downloading Update')} isOpen contentLabel={__('Downloading Update')} type="custom">
<section className="card__content"> {downloadProgress ? `${downloadProgress}% ${__('complete')}` : null}
{downloadProgress ? `${downloadProgress}% ${__('complete')}` : null} <Line percent={downloadProgress || 0} strokeWidth="4" />
<Line percent={downloadProgress || 0} strokeWidth="4" /> {downloadComplete ? (
{downloadComplete ? ( <React.Fragment>
<React.Fragment> <p>{__('Click "Begin Upgrade" to start the upgrade process.')}</p>
<p>{__('Click "Begin Upgrade" to start the upgrade process.')}</p> <p>{__('The app will close, and you will be prompted to install the latest version of LBRY.')}</p>
<p>{__('The app will close, and you will be prompted to install the latest version of LBRY.')}</p> <p>{__('To launch installation manually, close LBRY and run the command below in the terminal.')}</p>
<p>{__('To launch installation manually, close LBRY and run the command below in the terminal.')}</p> <blockquote>sudo dpkg -i {downloadItem}</blockquote>
<blockquote>sudo dpkg -i {downloadItem}</blockquote> <p>{__('After the install is complete, please reopen the app.')}</p>
<p>{__('After the install is complete, please reopen the app.')}</p> </React.Fragment>
</React.Fragment> ) : null}
) : null}
</section>
<div className="card__actions"> <div className="card__actions">
{downloadComplete ? <Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} /> : null} {downloadComplete ? <Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} /> : null}

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

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

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

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

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

@ -18,16 +18,14 @@ class ModalFirstReward extends React.PureComponent<Props> {
title={__('Your First Reward')} title={__('Your First Reward')}
onConfirmed={closeModal} onConfirmed={closeModal}
> >
<section className="card__content"> <p>{__('You just earned your first reward!')}</p>
<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>{__("This reward will show in your Wallet in the top right momentarily (if it hasn't already).")}</p> <p>
<p> {__(
{__( 'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.'
'These credits are used to compensate creators, to publish your own content, and to have say in how the network works.' )}
)} </p>
</p> <p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
<p>{__('No need to understand it all just yet! Try watching or publishing something next.')}</p>
</section>
</Modal> </Modal>
); );
} }

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

@ -12,23 +12,21 @@ const ModalFirstSubscription = (props: Props) => {
return ( return (
<Modal type="custom" isOpen contentLabel="Subscriptions 101" title={__('Subscriptions 101')}> <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>{__('You just subscribed to your first channel. Awesome!')}</p> <p>{__('A few quick things to know:')}</p>
<p>{__('A few quick things to know:')}</p> <p>
<p className="card__content"> {__(
{__( '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.'
'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> <p>
<p className="card__content"> {__(
{__( '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.'
'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.' )}
)} </p>
</p> <div className="modal__buttons">
<div className="modal__buttons"> <Button button="primary" onClick={closeModal} label={__('Got it')} />
<Button button="primary" onClick={closeModal} label={__('Got it')} /> </div>
</div>
</section>
</Modal> </Modal>
); );
}; };

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

@ -23,14 +23,12 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
onConfirmed={quitAnyDaemon} onConfirmed={quitAnyDaemon}
onAborted={onContinueAnyway} onAborted={onContinueAnyway}
> >
<div className="card__content"> <p>
<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.'
'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" />.
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/incompatible-protocol-version" />. </p>
</p>
</div>
</Modal> </Modal>
); );
} }

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

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

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

@ -28,15 +28,13 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
closeModal(); closeModal();
}} }}
> >
<section className="card__content"> <p>{__(`Your ${publishMessage} published to LBRY at the address`)}</p>
<p>{__(`Your ${publishMessage} published to LBRY at the address`)}</p> <blockquote>{uri}</blockquote>
<blockquote>{uri}</blockquote> <p>
<p> {__(
{__( `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.`
`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>
</p>
</section>
</Modal> </Modal>
); );
} }

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

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

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

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

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

@ -22,13 +22,11 @@ class ModalRewardApprovalRequired extends React.PureComponent<Props> {
confirmButtonLabel={__("I'm Totally Real")} confirmButtonLabel={__("I'm Totally Real")}
abortButtonLabel={__('Never Mind')} abortButtonLabel={__('Never Mind')}
> >
<section className="card__content"> <p>
<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."
"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>
</p>
</section>
</Modal> </Modal>
); );
} }

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

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

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

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

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

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

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

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

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

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

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

@ -49,24 +49,20 @@ class ModalWalletUnlock extends React.PureComponent<Props, State> {
onConfirmed={() => unlockWallet(password)} onConfirmed={() => unlockWallet(password)}
onAborted={quit} onAborted={quit}
> >
<section className="card__content"> <Form onSubmit={() => unlockWallet(password)}>
<Form onSubmit={() => unlockWallet(password)}> <p>
<p> {__('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" />.
'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.' </p>
)}{' '} <FormField
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. autoFocus
</p> error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
<FormField label={__('Wallet Password')}
autoFocus type="password"
error={walletUnlockSucceded === false ? 'Incorrect Password' : false} name="wallet-password"
label={__('Wallet Password')} onChange={event => this.onChangePassword(event)}
type="password" />
name="wallet-password" </Form>
onChange={event => this.onChangePassword(event)}
/>
</Form>
</section>
</Modal> </Modal>
); );
} }

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

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

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

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

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

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

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

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

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

@ -22,7 +22,7 @@ function FileListPublished(props: Props) {
{uris && uris.length ? ( {uris && uris.length ? (
<div className="card"> <div className="card">
<ClaimList <ClaimList
header={<h1>{__('Your Publishes')}</h1>} header={__('Your Publishes')}
loading={fetching} loading={fetching}
persistedStorageKey="claim-list-published" persistedStorageKey="claim-list-published"
uris={uris} uris={uris}
@ -33,14 +33,10 @@ function FileListPublished(props: Props) {
) : ( ) : (
<div className="main--empty"> <div className="main--empty">
<section className="card card--section"> <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>
<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">
<div className="card__actions card__actions--center"> <Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
<Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
</div>
</div> </div>
</section> </section>
</div> </div>

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

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

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

@ -123,81 +123,58 @@ class HelpPage extends React.PureComponent<Props, State> {
return ( return (
<Page> <Page>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Read the FAQ')}</h2>
<h2 className="card__title">{__('Read the FAQ')}</h2> <p className="card__subtitle">{__('Our FAQ answers many common questions.')}</p>
<p className="card__subtitle">{__('Our FAQ answers many common questions.')}</p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button
<Button href="https://lbry.com/faq/lbry-basics"
href="https://lbry.com/faq/lbry-basics" label={__('Read the App Basics FAQ')}
label={__('Read the App Basics FAQ')} icon={icons.HELP}
icon={icons.HELP} button="inverse"
button="inverse" />
/> <Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
<Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
</div>
</div> </div>
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Find Assistance')}</h2>
<h2 className="card__title">{__('Find Assistance')}</h2>
<p className="card__subtitle"> <p className="card__subtitle">
{__('Live help is available most hours in the')} <strong>#help</strong>{' '} {__('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.')} {__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')}
</p> </p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
<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" />
<Button button="inverse" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
</div>
</div> </div>
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Report a Bug or Suggest a New Feature')}</h2>
<h2 className="card__title">{__('Report a Bug or Suggest a New Feature')}</h2>
<p className="card__subtitle"> <p className="card__subtitle">
{__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '} {__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />. <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />.
</p> </p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button navigate="/$/report" label={__('Help Us Out')} button="inverse" />
<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>
</div> </div>
</section> </section>
{/* @if TARGET='app' */} {/* @if TARGET='app' */}
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('View your Log')}</h2>
<h2 className="card__title">{__('View your Log')}</h2>
<p className="card__subtitle"> <p className="card__subtitle">
{__('Did something go wrong? Have a look in your log file, or send it to')}{' '} {__('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" />. <Button button="link" label={__('support')} href="https://lbry.com/faq/support" />.
</p> </p>
</header>
<div className="card__content"> <div className="card__actions">
<div className="card__actions"> <Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
<Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} /> <Button button="link" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
<Button button="inverse" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
</div>
</div> </div>
</section> </section>
@ -210,7 +187,7 @@ class HelpPage extends React.PureComponent<Props, State> {
<h2 className="card__title">{__('About')}</h2> <h2 className="card__title">{__('About')}</h2>
{this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? ( {this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? (
<p className="card__subtitle"> <p className="card__subtitle--status">
{__('A newer version of LBRY is available.')}{' '} {__('A newer version of LBRY is available.')}{' '}
<Button button="link" href={newVerLink} label={__('Download now!')} /> <Button button="link" href={newVerLink} label={__('Download now!')} />
</p> </p>
@ -219,68 +196,66 @@ class HelpPage extends React.PureComponent<Props, State> {
)} )}
</header> </header>
<div className="card__content"> <table className="table table--stretch">
<table className="table table--stretch"> <tbody>
<tbody> <tr>
<tr> <td>{__('App')}</td>
<td>{__('App')}</td> <td>{this.state.uiVersion}</td>
<td>{this.state.uiVersion}</td> </tr>
</tr> <tr>
<tr> <td>{__('Daemon (lbrynet)')}</td>
<td>{__('Daemon (lbrynet)')}</td> <td>{ver ? ver.lbrynet_version : __('Loading...')}</td>
<td>{ver ? ver.lbrynet_version : __('Loading...')}</td> </tr>
</tr> <tr>
<tr> <td>{__('Connected Email')}</td>
<td>{__('Connected Email')}</td> <td>
<td> {user && user.primary_email ? (
{user && user.primary_email ? ( <React.Fragment>
<React.Fragment> {user.primary_email}{' '}
{user.primary_email}{' '} <Button
<Button button="link"
button="link" href={`https://lbry.com/list/edit/${accessToken}`}
href={`https://lbry.com/list/edit/${accessToken}`} label={__('Update mailing preferences')}
label={__('Update mailing preferences')} />
/> </React.Fragment>
</React.Fragment> ) : (
) : ( <React.Fragment>
<React.Fragment> <span className="empty">{__('none')} </span>
<span className="empty">{__('none')} </span> <Button button="link" onClick={() => doAuth()} label={__('set email')} />
<Button button="link" onClick={() => doAuth()} label={__('set email')} /> </React.Fragment>
</React.Fragment> )}
)} </td>
</td> </tr>
</tr> <tr>
<tr> <td>{__('Reward Eligible')}</td>
<td>{__('Reward Eligible')}</td> <td>{user && user.is_reward_approved ? __('Yes') : __('No')}</td>
<td>{user && user.is_reward_approved ? __('Yes') : __('No')}</td> </tr>
</tr> <tr>
<tr> <td>{__('Platform')}</td>
<td>{__('Platform')}</td> <td>{platform}</td>
<td>{platform}</td> </tr>
</tr> <tr>
<tr> <td>{__('Installation ID')}</td>
<td>{__('Installation ID')}</td> <td>{this.state.lbryId}</td>
<td>{this.state.lbryId}</td> </tr>
</tr> <tr>
<tr> <td>{__('Access Token')}</td>
<td>{__('Access Token')}</td> <td>
<td> {this.state.accessTokenHidden && (
{this.state.accessTokenHidden && ( <Button button="link" label={__('View')} onClick={this.showAccessToken} />
<Button button="link" label={__('View')} onClick={this.showAccessToken} /> )}
)} {!this.state.accessTokenHidden && accessToken && (
{!this.state.accessTokenHidden && accessToken && ( <div>
<div> <p>{accessToken}</p>
<p>{accessToken}</p> <div className="alert-text">
<div className="alert-text"> {__('This is equivalent to a password. Do not post or share this.')}
{__('This is equivalent to a password. Do not post or share this.')}
</div>
</div> </div>
)} </div>
</td> )}
</tr> </td>
</tbody> </tr>
</table> </tbody>
</div> </table>
</section> </section>
{/* @endif */} {/* @endif */}
</Page> </Page>

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

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

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

@ -47,64 +47,56 @@ class ReportPage extends React.Component {
return ( return (
<Page> <Page>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2>
<h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2> <p className="card__subtitle">
<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!'
'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>
</p>
</header>
<div className="card__content"> <FormField
<FormField type="textarea"
type="textarea" rows="10"
rows="10" name="message"
name="message" stretch
stretch value={this.state.message}
value={this.state.message} onChange={event => {
onChange={event => { this.onMessageChange(event);
this.onMessageChange(event); }}
placeholder={__('Description of your issue or feature request')}
/>
<div className="card__actions">
<Button
button="primary"
onClick={event => {
this.submitMessage(event);
}} }}
placeholder={__('Description of your issue or feature request')} className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`}
/> >
{this.state.submitting ? __('Submitting...') : __('Submit Report')}
<div className="card__actions"> </Button>
<Button
button="primary"
onClick={event => {
this.submitMessage(event);
}}
className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`}
>
{this.state.submitting ? __('Submitting...') : __('Submit Report')}
</Button>
</div>
</div> </div>
</section> </section>
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Developer?')}</h2>
<h2 className="card__title">{__('Developer?')}</h2>
</header>
<div className="card__content"> <p>
<p> {__('You can also')}{' '}
{__('You can also')}{' '} <Button
<Button button="link"
button="link" href="https://github.com/lbryio/lbry-desktop/issues"
href="https://github.com/lbryio/lbry-desktop/issues" label={__('submit an issue on GitHub')}
label={__('submit an issue on GitHub')} />
/> .
. </p>
</p> <p>
<p> {__('Explore our')} <Button button="link" href="https://lbry.tech" label={__('technical resources')} />.
{__('Explore our')} <Button button="link" href="https://lbry.tech" label={__('technical resources')} />. </p>
</p> <p>
<p> {__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />.
{__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />. </p>
</p>
</div>
</section> </section>
</Page> </Page>
); );

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

@ -34,38 +34,32 @@ class RewardsPage extends PureComponent<Props> {
return ( return (
!IS_WEB && ( !IS_WEB && (
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Rewards Approval to Earn Credits (LBC)')}</h2>
<h2 className="card__title">{__('Rewards Approval to Earn Credits (LBC)')}</h2> <p className="card__subtitle">
<p className="card__subtitle"> {__(
{__( 'This step is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.'
'This step is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.' )}{' '}
)}{' '} <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />. </p>
</p>
</header>
<div className="card__content"> <Button navigate="/$/auth?redirect=rewards" button="primary" label="Prove Humanity" />
<Button navigate="/$/auth?redirect=rewards" button="primary" label="Prove Humanity" />
</div>
</section> </section>
) )
); );
} }
return ( return (
<section className="card card--section"> <section className="card card--section">
<div className="card__content"> <p>
<p> {__('This account must undergo review before you can participate in the rewards program.')}{' '}
{__('This account must undergo review before you can participate in the rewards program.')}{' '} {__('This can take anywhere from several minutes to several days.')}
{__('This can take anywhere from several minutes to several days.')} </p>
</p>
<p>{__('We apologize for this inconvenience, but have added this additional step to prevent fraud.')}</p> <p>{__('We apologize for this inconvenience, but have added this additional step to prevent fraud.')}</p>
<p> <p>
{`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__( {`${__('If you continue to see this message, send us an email to help@lbry.com.')} ${__(
'Please enjoy free content in the meantime!' 'Please enjoy free content in the meantime!'
)}`} )}`}
</p> </p>
</div>
<div className="card__actions"> <div className="card__actions">
<Button navigate="/" button="primary" label="Return Home" /> <Button navigate="/" button="primary" label="Return Home" />
</div> </div>
@ -95,34 +89,26 @@ class RewardsPage extends PureComponent<Props> {
if (daemonSettings && !daemonSettings.share_usage_data) { if (daemonSettings && !daemonSettings.share_usage_data) {
return ( return (
<section className="card card--section"> <section className="card card--section">
<header className="card__header"> <h2 className="card__title">{__('Disabled')}</h2>
<h2 className="card__title">{__('Disabled')}</h2> <p className="card__subtitle">
<p className="card__subtitle"> {__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '}
{__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '} <Button button="link" navigate="/$/settings" label="Settings" />
<Button button="link" navigate="/$/settings" label="Settings" /> {__(', in order to re-enable them.')}
{__(', in order to re-enable them.')} </p>
</p>
</header>
</section> </section>
); );
} else if (fetching) { } else if (fetching) {
return ( return <BusyIndicator message={__('Fetching rewards')} />;
<div className="card__content">
<BusyIndicator message={__('Fetching rewards')} />
</div>
);
} else if (user === null) { } else if (user === null) {
return ( return (
<section className="card card--section"> <p className="help">{__('This application is unable to earn rewards due to an authentication failure.')}</p>
<p>{__('This application is unable to earn rewards due to an authentication failure.')}</p>
</section>
); );
} else if (!rewards || rewards.length <= 0) { } else if (!rewards || rewards.length <= 0) {
return ( return (
<Fragment> <Fragment>
<section className="card card--section"> <section className="card card--section">
<h2 className="card__title">{__('No Rewards Available')}</h2> <h2 className="card__title">{__('No Rewards Available')}</h2>
<p className="card__content"> <p>
{claimed && claimed.length {claimed && claimed.length
? __( ? __(
"You have claimed all available rewards! We're regularly adding more so be sure to check back later." "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> <Fragment>
{isValid && ( {isValid && (
<header className="search__header"> <header className="search__header">
<Button button="alt" navigate={uri} className="media__uri"> <Button button="alt" navigate={uri} className="media__uri--large">
{uri} {uri}
</Button> </Button>
<ClaimPreview uri={uri} type="large" /> <div className="card">
<ClaimPreview uri={uri} type="large" placeholder="publish" />
</div>
</header> </header>
)} )}
@ -72,7 +74,7 @@ export default function SearchPage(props: Props) {
} }
/> />
</div> </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> </Fragment>
)} )}
</section> </section>

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

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

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

@ -45,7 +45,7 @@ class ShowPage extends React.PureComponent<Props> {
if (claim && !claim.name) { if (claim && !claim.name) {
// While testing the normalization changes, Brannon found that `name` was missing sometimes // While testing the normalization changes, Brannon found that `name` was missing sometimes
// This shouldn't happen, so hopefully this helps track it down // 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 = ( innerContent = (
@ -72,13 +72,11 @@ class ShowPage extends React.PureComponent<Props> {
<Page> <Page>
<section className="card card--section"> <section className="card card--section">
<div className="card__title">{uri}</div> <div className="card__title">{uri}</div>
<div className="card__content"> <p>
<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.'
'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>
</p>
</div>
<div className="card__actions"> <div className="card__actions">
<Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} /> <Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
</div> </div>

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

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

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

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

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

@ -5,26 +5,22 @@
font-weight: 400; font-weight: 400;
svg { svg {
stroke-width: 1.9;
position: relative;
color: $lbry-gray-5;
// Buttons that don't have a label // Buttons that don't have a label
&:only-child { &:only-child {
color: inherit; color: inherit;
width: 1.4rem; width: 1.3rem;
height: 1.4rem; height: 1.3rem;
} }
} }
} }
.button--primary { .button--primary {
&:hover { &:hover {
background-color: $lbry-teal-3; background-color: $lbry-teal-4;
} }
svg { svg {
color: white; stroke: $lbry-teal-4;
} }
} }
@ -41,15 +37,15 @@
.button--primary, .button--primary,
.button--inverse { .button--inverse {
height: var(--button-height); height: var(--button-height);
line-height: var(--button-height);
border-radius: var(--button-radius); border-radius: var(--button-radius);
font-size: 1.1rem; padding-top: 0;
padding: 0 var(--spacing-medium); padding-bottom: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.button--inverse { .button--inverse {
border-color: $lbry-teal-4; border-color: $lbry-teal-4;
color: $lbry-teal-5;
&:hover { &:hover {
color: $lbry-white; color: $lbry-white;
@ -64,6 +60,12 @@
padding: 0; padding: 0;
} }
.button--link {
[data-mode='dark'] & {
color: $lbry-teal-5;
}
}
.button--uri-indicator { .button--uri-indicator {
max-width: 100%; max-width: 100%;
height: 1.2em; height: 1.2em;
@ -100,6 +102,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
height: 100%;
} }
.button__label { .button__label {
@ -111,5 +114,5 @@
// Handle icons on the left or right side of the button label // Handle icons on the left or right side of the button label
svg + .button__label, svg + .button__label,
.button__label + svg { .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); border-radius: var(--card-radius);
box-shadow: var(--card-box-shadow) $lbry-gray-1; box-shadow: var(--card-box-shadow) $lbry-gray-1;
overflow: hidden; overflow: hidden;
font-size: 1.25rem;
[data-mode='dark'] & { [data-mode='dark'] & {
background-color: var(--dm-color-05); background-color: var(--dm-color-05);
@ -41,8 +40,9 @@
.card--reward-total { .card--reward-total {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
// justify-content: space-between;
color: $lbry-white; color: $lbry-white;
font-size: var(--font-title);
font-weight: 700;
} }
.card--modal { .card--modal {
@ -55,13 +55,23 @@
.card__actions { .card__actions {
display: flex; display: flex;
align-items: center; 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) { > *:not(:last-child) {
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
} }
} }
.card__actions--inline {
@extend .card__actions;
margin-top: 0;
}
.card__actions--between { .card__actions--between {
@include between; @include between;
} }
@ -92,34 +102,9 @@
padding: var(--spacing-medium); 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 { .card__content--large {
font-size: 3rem; font-size: var(--font-heading);
line-height: 1.5; font-weight: 600;
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);
}
} }
// C A R D // C A R D
@ -168,19 +153,25 @@
// S U B T I T L E // S U B T I T L E
.card__subtitle { .card__subtitle {
@extend .help; margin: var(--spacing-small) 0;
color: darken($lbry-gray-5, 25%); padding: var(--spacing-small);
background-color: lighten($lbry-gray-1, 5%); border-radius: var(--card-radius);
font-size: 1.15rem; font-size: var(--font-body);
margin-bottom: var(--spacing-small); background-color: rgba($lbry-blue-1, 0.1);
flex: 1; color: darken($lbry-gray-5, 15%);
p {
margin-bottom: var(--spacing-small);
}
[data-mode='dark'] & { [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 // T I T L E
.card__title { .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; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--spacing-small);
font-size: var(--font-title);
& > *:not(:last-child) { & > *:not(:last-child) {
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
} }
} }
.card__title--flex-between { .card__title--between {
display: flex; @extend .card__title;
@include between; justify-content: space-between;
align-items: center;
} }

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

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

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

@ -3,23 +3,22 @@
align-items: center; align-items: center;
min-height: 4.5rem; min-height: 4.5rem;
padding: var(--spacing-medium); padding: var(--spacing-medium);
font-size: 1rem; // Ensures select & header text have same font-size font-size: var(--font-body);
color: $lbry-white;
border-top-left-radius: var(--card-radius); border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius); border-top-right-radius: var(--card-radius);
color: $lbry-white;
& > *:not(:last-child) { & > *:not(:last-child) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
fieldset-section { fieldset-section {
margin-bottom: 0; margin: 0;
} }
// Normal link buttons are too dark on the black file list background // Normal link buttons are too dark on the black file list background
.button--link { .button--link {
color: $lbry-teal-3; color: $lbry-teal-3;
font-size: 1.2em;
&:hover { &:hover {
color: $lbry-teal-1; color: $lbry-teal-1;
@ -46,19 +45,13 @@
.claim-list__header--small { .claim-list__header--small {
height: 3rem; height: 3rem;
min-height: 3rem; min-height: 3rem;
font-size: 1em;
} }
.claim-list__dropdown { .claim-list__dropdown {
background-position: 95% center; margin-bottom: 0;
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;
padding: 0 var(--spacing-medium); padding: 0 var(--spacing-medium);
padding-right: var(--spacing-large); 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; border: 1px solid $lbry-white;
color: $lbry-white; color: $lbry-white;
background-color: lighten($lbry-black, 10%); background-color: lighten($lbry-black, 10%);
@ -81,7 +74,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
font-size: 1.1em;
& > * { & > * {
margin-left: var(--spacing-small); margin-left: var(--spacing-small);
@ -89,25 +81,26 @@
} }
.claim-preview { .claim-preview {
@include mediaThumbHoverZoom;
display: flex; display: flex;
position: relative; position: relative;
overflow: visible; overflow: visible;
cursor: pointer;
font-size: 1.3rem;
padding: var(--spacing-medium); padding: var(--spacing-medium);
&:not(.claim-preview--inline) {
@include mediaThumbHoverZoom;
cursor: pointer;
}
.media__thumb { .media__thumb {
width: var(--file-list-thumbnail-width); width: var(--file-list-thumbnail-width);
flex-shrink: 0; flex-shrink: 0;
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
} }
}
ul & { .claim-preview--injected {
&:first-of-type { padding: var(--spacing-medium);
border-top: none; position: relative;
}
}
} }
.claim-preview--injected, .claim-preview--injected,
@ -116,23 +109,45 @@
[data-mode='dark'] & { [data-mode='dark'] & {
color: $lbry-white; color: $lbry-white;
border-top: 1px solid var(--dm-color-04); border-color: var(--dm-color-04);
background-color: var(--dm-color-05);
} }
} }
.claim-preview--large { .claim-preview--large {
font-size: 1.6rem; border: none;
border-bottom: 0;
padding: 0; padding: 0;
margin: var(--spacing-small) 0; margin: var(--spacing-medium);
font-size: var(--font-multiplier-large);
&:hover { &:hover {
background-color: transparent; background-color: transparent;
} }
.media__thumb { .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 { .claim-preview-metadata {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -179,10 +213,5 @@
.claim-preview-properties { .claim-preview-properties {
align-items: flex-end; align-items: flex-end;
flex: 1; flex: 1;
} font-size: var(--font-subtext);
.claim-preview-title {
font-weight: 600;
margin-right: auto;
padding-right: var(--spacing-medium);
} }

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

@ -1,4 +1,5 @@
.comments { .comments {
@extend .ul--no-style;
margin-top: var(--spacing-large); 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