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

better consistency

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

1
package.json
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title card__title--flex-between">
<section className="card">
<div className="table__header">
<h2 className="card__title">
{__('Invite History')}
{referralReward && showClaimable && (
<RewardLink
@ -60,42 +60,39 @@ class InviteList extends React.PureComponent<Props> {
/>
)}
</h2>
</header>
<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>
<p className="card__subtitle">{rewardHelp}</p>
</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>
);
}

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

@ -48,7 +48,9 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
name="email"
value={this.state.email}
error={errorMessage}
inputButton={<Button button="inverse" type="submit" label="Invite" disabled={isPending} />}
inputButton={
<Button button="inverse" type="submit" label="Invite" disabled={isPending || !this.state.email} />
}
onChange={event => {
this.handleEmailChanged(event);
}}
@ -72,30 +74,23 @@ class InviteNew extends React.PureComponent<Props> {
return (
<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>
</header>
<FormInviteNew
errorMessage={errorMessage}
inviteNew={inviteNew}
isPending={isPending}
rewardAmount={rewardAmount}
/>
<CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
<div className="card__content">
<FormInviteNew
errorMessage={errorMessage}
inviteNew={inviteNew}
isPending={isPending}
rewardAmount={rewardAmount}
/>
</div>
<div className="card__content">
<CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
<p className="help">
{__('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>
<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>
</section>
);
}

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

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

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

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

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

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

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

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

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

@ -33,10 +33,8 @@ function PublishFile(props: Props) {
'card--disabled': balance === 0,
})}
>
<header className="card__header">
<h2 className="card__title card__title--flex-between">{isStillEditing ? __('Edit') : __('Publish')}</h2>
{isStillEditing && <p className="card__subtitle">{__('You are currently editing a claim.')}</p>}
</header>
<h2 className="card__title">{isStillEditing ? __('Edit') : __('Publish')}</h2>
{isStillEditing && <p className="card__subtitle">{__('You are currently editing a claim.')}</p>}
<div className="card__content">
<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 */}
<SelectThumbnail />
</div>
<div className="card">
<div className="card card--section">
<TagSelect
title={false}
suggestMature
@ -152,20 +152,18 @@ function PublishForm(props: Props) {
/>
</div>
<section className="card card--section">
<div className="card__content">
<ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
<p className="help">
{__('This is a username or handle that your content can be found under.')}{' '}
{__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
</p>
</div>
<ChannelSection channel={channel} onChannelChange={channel => updatePublishForm({ channel })} />
<p className="help">
{__('This is a username or handle that your content can be found under.')}{' '}
{__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
</p>
</section>
<PublishName disabled={formDisabled} />
<PublishPrice disabled={formDisabled} />
<PublishAdditionalOptions disabled={formDisabled} />
<section className="card card--section">
<section>
{!formDisabled && !formValid && <PublishFormErrors />}
<div className="card__actions">

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

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

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

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

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

@ -14,40 +14,38 @@ function PublishText(props: Props) {
return (
<section className="card card--section">
<div className="card__content">
<FormField
type="radio"
name="content_free"
label={__('Free')}
checked={contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: true })}
/>
<FormField
type="radio"
name="content_free"
label={__('Free')}
checked={contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: true })}
/>
<FormField
type="radio"
name="content_cost"
label={__('Add a price to this file')}
checked={!contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: false })}
<FormField
type="radio"
name="content_cost"
label={__('Add a price to this file')}
checked={!contentIsFree}
disabled={disabled}
onChange={() => updatePublishForm({ contentIsFree: false })}
/>
{!contentIsFree && (
<FormFieldPrice
name="content_cost_amount"
min="0"
price={fee}
onChange={newFee => updatePublishForm({ fee: newFee })}
/>
{!contentIsFree && (
<FormFieldPrice
name="content_cost_amount"
min="0"
price={fee}
onChange={newFee => updatePublishForm({ fee: newFee })}
/>
)}
{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>
)}
{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>
)}
</section>
);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -44,9 +44,8 @@ class SocialShare extends React.PureComponent<Props> {
return (
<React.Fragment>
{speechShareable && (
<div className="card__content">
<label className="card__subtitle">{__('Web link')}</label>
<CopyableText copyable={lbryTvUrl} />
<div>
<CopyableText label={__('Web link')} copyable={lbryTvUrl} />
<div className="card__actions card__actions--center">
<Button
icon={ICONS.FACEBOOK}
@ -64,23 +63,21 @@ class SocialShare extends React.PureComponent<Props> {
</div>
</div>
)}
<div className="card__content">
<label className="card__subtitle">{__('LBRY App link')}</label>
<CopyableText copyable={lbryURL} noSnackbar />
<div className="card__actions card__actions--center">
<Button
icon={ICONS.FACEBOOK}
button="link"
description={shareOnFb}
href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
/>
<Button
icon={ICONS.TWITTER}
button="link"
description={shareOnTwitter}
href={`https://twitter.com/home?status=${encodedLbryURL}`}
/>
</div>
<CopyableText label={__('LBRY App Link')} copyable={lbryURL} noSnackbar />
<div className="card__actions card__actions--center">
<Button
icon={ICONS.FACEBOOK}
button="link"
description={shareOnFb}
href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
/>
<Button
icon={ICONS.TWITTER}
button="link"
description={shareOnTwitter}
href={`https://twitter.com/home?status=${encodedLbryURL}`}
/>
</div>
<div className="card__actions">
<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>
<Form onSubmit={handleSubmit}>
<FormField
label={__('Tag Search')}
label={__('Find New Tags')}
onChange={onChange}
placeholder={__('Search for more tags')}
type="text"

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

@ -65,39 +65,37 @@ export default function TagSelect(props: Props) {
return (
((showClose && !hasClosed) || !showClose) && (
<div className="card--section">
<div>
{title !== false && (
<h2 className="card__title card__title--flex-between">
<h2 className="card__title">
{title}
{showClose && !hasClosed && <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />}
</h2>
)}
<div className="card__content">
<ul className="tags--remove">
{transitions.map(({ item, props, key }) => (
<animated.li key={key} style={props}>
<Tag
name={item.name}
type="remove"
onClick={() => {
handleTagClick(item);
}}
/>
</animated.li>
))}
{!transitions.length && (
<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>
<ul className="tags--remove">
{transitions.map(({ item, props, key }) => (
<animated.li key={key} style={props}>
<Tag
name={item.name}
type="remove"
onClick={() => {
handleTagClick(item);
}}
/>
</animated.li>
))}
{!transitions.length && (
<div className="empty">{empty || __("You aren't following any tags, try searching for one.")}</div>
)}
</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>
)
);

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

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

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

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

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

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

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

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

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

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

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

@ -51,32 +51,27 @@ class UserEmailVerify extends React.PureComponent<Props> {
return (
<React.Fragment>
<header className="card__header">
<h2 className="card__title">{__('Waiting For Verification')}</h2>
</header>
<h2 className="card__title">{__('Waiting For Verification')}</h2>
<div className="card__content">
<p className="card__subtitle">
{__('An email was sent to')} {email}.{' '}
{__('Follow the link and you will be good to go. This will update automatically.')}
</p>
<p className="card__subtitle">
{__('An email was sent to')} {email}.{' '}
{__('Follow the link and you will be good to go. This will update automatically.')}
</p>
<div className="card__actions">
<Button
button="primary"
label={__('Resend verification email')}
onClick={this.handleResendVerificationEmail}
/>
<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 className="card__actions">
<Button
button="primary"
label={__('Resend verification email')}
onClick={this.handleResendVerificationEmail}
/>
<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>
</React.Fragment>
);
}

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

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

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

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

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

@ -47,39 +47,20 @@ class WalletAddress extends React.PureComponent<Props, State> {
return (
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Receive Credits')}</h2>
<p className="card__subtitle">
{__('Use this wallet address to receive credits sent by another user (or yourself).')}
</p>
</header>
<h2 className="card__title">{__('Receive Credits')}</h2>
<p className="card__subtitle">
{__(
'Use this address to receive LBC. You can generate a new address at any time, and any previous addresses will continue to work.'
)}
</p>
<CopyableText label={__('Your Address')} copyable={receiveAddress} snackMessage={__('Address copied.')} />
<div className="card__content">
<CopyableText copyable={receiveAddress} snackMessage={__('Address copied.')} />
<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>
<div className="card__content">
<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>
)}
{showQR && <QRCode value={receiveAddress} paddingTop />}
</section>
);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -18,19 +18,17 @@ class ModalDownloading extends React.PureComponent<Props> {
return (
<Modal title={__('Downloading Update')} isOpen contentLabel={__('Downloading Update')} type="custom">
<section className="card__content">
{downloadProgress ? `${downloadProgress}% ${__('complete')}` : null}
<Line percent={downloadProgress || 0} strokeWidth="4" />
{downloadComplete ? (
<React.Fragment>
<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>{__('To launch installation manually, close LBRY and run the command below in the terminal.')}</p>
<blockquote>sudo dpkg -i {downloadItem}</blockquote>
<p>{__('After the install is complete, please reopen the app.')}</p>
</React.Fragment>
) : null}
</section>
{downloadProgress ? `${downloadProgress}% ${__('complete')}` : null}
<Line percent={downloadProgress || 0} strokeWidth="4" />
{downloadComplete ? (
<React.Fragment>
<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>{__('To launch installation manually, close LBRY and run the command below in the terminal.')}</p>
<blockquote>sudo dpkg -i {downloadItem}</blockquote>
<p>{__('After the install is complete, please reopen the app.')}</p>
</React.Fragment>
) : null}
<div className="card__actions">
{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 (
<Modal isOpen contentLabel={__('Error')} title={__('Error')} className="error-modal" onConfirmed={closeModal}>
<section className="card__content">
<p>
{__(
"We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem."
)}
</p>
</section>
<ul className="card__content error-modal__error-list">{errorInfoList}</ul>
<p>
{__(
"We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem."
)}
</p>
<ul className="error-modal__error-list">{errorInfoList}</ul>
</Modal>
);
}

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

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

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

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

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

@ -12,23 +12,21 @@ const ModalFirstSubscription = (props: Props) => {
return (
<Modal type="custom" isOpen contentLabel="Subscriptions 101" title={__('Subscriptions 101')}>
<section className="card__content">
<p>{__('You just subscribed to your first channel. Awesome!')}</p>
<p>{__('A few quick things to know:')}</p>
<p className="card__content">
{__(
'1) This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.'
)}
</p>
<p className="card__content">
{__(
'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>
<div className="modal__buttons">
<Button button="primary" onClick={closeModal} label={__('Got it')} />
</div>
</section>
<p>{__('You just subscribed to your first channel. Awesome!')}</p>
<p>{__('A few quick things to know:')}</p>
<p>
{__(
'1) This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.'
)}
</p>
<p>
{__(
'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>
<div className="modal__buttons">
<Button button="primary" onClick={closeModal} label={__('Got it')} />
</div>
</Modal>
);
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -47,64 +47,56 @@ class ReportPage extends React.Component {
return (
<Page>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2>
<p className="card__subtitle">
{__(
'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
)}
</p>
</header>
<h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2>
<p className="card__subtitle">
{__(
'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
)}
</p>
<div className="card__content">
<FormField
type="textarea"
rows="10"
name="message"
stretch
value={this.state.message}
onChange={event => {
this.onMessageChange(event);
<FormField
type="textarea"
rows="10"
name="message"
stretch
value={this.state.message}
onChange={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')}
/>
<div className="card__actions">
<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>
className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`}
>
{this.state.submitting ? __('Submitting...') : __('Submit Report')}
</Button>
</div>
</section>
<section className="card card--section">
<header className="card__header">
<h2 className="card__title">{__('Developer?')}</h2>
</header>
<h2 className="card__title">{__('Developer?')}</h2>
<div className="card__content">
<p>
{__('You can also')}{' '}
<Button
button="link"
href="https://github.com/lbryio/lbry-desktop/issues"
label={__('submit an issue on GitHub')}
/>
.
</p>
<p>
{__('Explore our')} <Button button="link" href="https://lbry.tech" label={__('technical resources')} />.
</p>
<p>
{__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />.
</p>
</div>
<p>
{__('You can also')}{' '}
<Button
button="link"
href="https://github.com/lbryio/lbry-desktop/issues"
label={__('submit an issue on GitHub')}
/>
.
</p>
<p>
{__('Explore our')} <Button button="link" href="https://lbry.tech" label={__('technical resources')} />.
</p>
<p>
{__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />.
</p>
</section>
</Page>
);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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