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

0.27.0 cleanup #2182

Merged
neb-b merged 12 commits from 0.27.0-cleanup into master 2019-01-14 19:40:07 +01:00
Conversation 0 Commits 12 Files changed 43 +274 -276
43 changed files with 274 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
.eslintrc.json
View file

@ -28,11 +28,14 @@
"rules": { "rules": {
"import/no-commonjs": "warn", "import/no-commonjs": "warn",
"import/no-amd": "warn", "import/no-amd": "warn",
"prettier/prettier": ["error", { "prettier/prettier": [
"trailingComma": "es5", "error",
"printWidth": 100, {
"singleQuote": true "trailingComma": "es5",
}], "printWidth": 100,
"singleQuote": true
}
],
"func-names": ["warn", "as-needed"], "func-names": ["warn", "as-needed"],
"jsx-a11y/label-has-for": 0, "jsx-a11y/label-has-for": 0,
"import/prefer-default-export": 0, "import/prefer-default-export": 0,
@ -45,6 +48,7 @@
"jsx-a11y/click-events-have-key-events": 0, "jsx-a11y/click-events-have-key-events": 0,
"consistent-return": 0, "consistent-return": 0,
"no-prototype-builtins": 0, "no-prototype-builtins": 0,
"flowtype/space-after-type-colon": [ 2, "always", { "allowLineBreak": true } ] "flowtype/space-after-type-colon": [2, "always", { "allowLineBreak": true }],
"no-restricted-syntax": 0
} }
} }

4
package.json
View file

@ -46,12 +46,11 @@
"electron-log": "^2.2.12", "electron-log": "^2.2.12",
"electron-updater": "^2.23.3", "electron-updater": "^2.23.3",
"electron-window-state": "^4.1.1", "electron-window-state": "^4.1.1",
"filewatcher-webpack-plugin": "^1.2.0",
"find-process": "^1.1.0", "find-process": "^1.1.0",
"formik": "^0.10.4", "formik": "^0.10.4",
"hast-util-sanitize": "^1.1.2", "hast-util-sanitize": "^1.1.2",
"keytar": "^4.2.1", "keytar": "^4.2.1",
"lbry-redux": "lbryio/lbry-redux#820b6eeadf9e58c1e5027fd4d92808ba817b410e", "lbry-redux": "lbryio/lbry-redux#a22f8284110f957f3f645d42abc457ab8fb3fa8a",
"lbryinc": "lbryio/lbryinc#b3bb8c67745235ef54baea95accaedaa4bb86d4d", "lbryinc": "lbryio/lbryinc#b3bb8c67745235ef54baea95accaedaa4bb86d4d",
"localforage": "^1.7.1", "localforage": "^1.7.1",
"mammoth": "^1.4.6", "mammoth": "^1.4.6",
@ -115,6 +114,7 @@
"eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0", "eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0", "eslint-plugin-react": "^7.7.0",
"filewatcher-webpack-plugin": "^1.2.0",
"flow-bin": "^0.89.0", "flow-bin": "^0.89.0",
"flow-typed": "^2.3.0", "flow-typed": "^2.3.0",
"husky": "^0.14.3", "husky": "^0.14.3",

2
src/renderer/component/categoryList/view.jsx
View file

@ -227,7 +227,7 @@ class CategoryList extends PureComponent<Props, State> {
<Button <Button
label={category} label={category}
navigate="/show" navigate="/show"
navigateParams={{ uri: categoryLink }} navigateParams={{ uri: categoryLink, page: 1 }}
/> />
<SubscribeButton <SubscribeButton
button="alt" button="alt"

2
src/renderer/component/common/credit-amount.jsx
View file

@ -76,7 +76,7 @@ class CreditAmount extends React.PureComponent<Props> {
return ( return (
<span <span
title={fullPrice} title={fullPrice}
className={classnames('badge', { className={classnames({
badge, badge,
'badge--cost': badge && amount > 0, 'badge--cost': badge && amount > 0,
'badge--free': badge && isFree, 'badge--free': badge && isFree,

4
src/renderer/component/copyableText/view.jsx
View file

@ -20,10 +20,10 @@ export default class CopyableText extends React.PureComponent<Props> {
input: ?HTMLInputElement; input: ?HTMLInputElement;
render() { render() {
const { copyable, doToast, noSnackbar } = this.props; const { copyable, doToast } = this.props;
return ( return (
<FormRow verticallyCentered padded stretch> <FormRow verticallyCentered stretch>
<input <input
className="input-copyable form-field__input" className="input-copyable form-field__input"
readOnly readOnly

16
src/renderer/component/fileTile/view.jsx
View file

@ -155,14 +155,16 @@ class FileTile extends React.PureComponent<Props> {
<TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} /> <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
)} )}
</div> </div>
<div className="media__subtitle"> <div className="media__subtext">
<UriIndicator uri={uri} link /> <div className="media__subtitle">
</div> <UriIndicator uri={uri} link />
<div className="media__subtitle card--space-between"> </div>
<div className="media__date"> <div className="media__subtitle card--space-between">
<DateTime timeAgo block={height} /> <div className="media__date">
<DateTime timeAgo block={height} />
</div>
{size !== 'large' && this.renderFileProperties()}
</div> </div>
{size !== 'large' && this.renderFileProperties()}
</div> </div>
{displayDescription && ( {displayDescription && (
<div className="media__subtext"> <div className="media__subtext">

21
src/renderer/component/header/view.jsx
View file

@ -41,16 +41,12 @@ const Header = (props: Props) => {
<Button <Button
className="header__navigation-item header__navigation-item--wallet" className="header__navigation-item header__navigation-item--wallet"
description={__('Your wallet')} description={__('Your wallet')}
iconRight="LBC" title={`Your balance is ${balance} LBRY Credits`}
label={ label={
isUpgradeAvailable ? ( <React.Fragment>
`${balance}` <span>{roundedBalance}</span>
) : ( <LbcSymbol />
<React.Fragment> </React.Fragment>
<span title={`${balance} LBC`}>{roundedBalance}</span>
<LbcSymbol />
</React.Fragment>
)
} }
onClick={() => navigate('/wallet')} onClick={() => navigate('/wallet')}
/> />
@ -97,18 +93,19 @@ const Header = (props: Props) => {
/> />
<Button <Button
className="header__navigation-item header__navigation-item--publish" className="header__navigation-item header__navigation-item--right-action"
description={__('Publish content')} description={__('Publish content')}
icon={ICONS.UPLOAD} icon={ICONS.UPLOAD}
iconSize={20} iconSize={24}
label={isUpgradeAvailable ? '' : __('Publish')} label={isUpgradeAvailable ? '' : __('Publish')}
onClick={() => navigate('/publish')} onClick={() => navigate('/publish')}
/> />
{showUpgradeButton && ( {showUpgradeButton && (
<Button <Button
button="primary" className="header__navigation-item header__navigation-item--right-action"
icon={ICONS.DOWNLOAD} icon={ICONS.DOWNLOAD}
iconSize={24}
label={__('Upgrade App')} label={__('Upgrade App')}
onClick={downloadUpgradeRequested} onClick={downloadUpgradeRequested}
/> />

44
src/renderer/component/sideBar/view.jsx
View file

@ -25,8 +25,9 @@ const SideBar = (props: Props) => {
return ( return (
<nav className="navigation"> <nav className="navigation">
<div className="navigation__links"> <div className="navigation__links">
{navLinks.primary.map(({ label, path, active }) => ( {navLinks.primary.map(({ label, path, active, icon }) => (
<Button <Button
icon={icon}
className={classnames('navigation__link', { className={classnames('navigation__link', {
'navigation__link--active': active, 'navigation__link--active': active,
})} })}
@ -43,14 +44,14 @@ const SideBar = (props: Props) => {
<ul> <ul>
<li className="navigation__link navigation__link--title">Account</li> <li className="navigation__link navigation__link--title">Account</li>
{navLinks.secondary.map(({ label, path, active, subLinks = [] }) => ( {navLinks.secondary.map(({ label, path, active, subLinks = [], icon }) => (
<li <li
className={classnames('navigation__link', { className={classnames('navigation__link', {
'navigation__link--active': active, 'navigation__link--active': active,
})} })}
key={label} key={label}
> >
<Button label={label} navigate={path} /> <Button icon={icon} label={label} navigate={path} />
{ {
// The sublinks should be animated on open close // The sublinks should be animated on open close
@ -58,24 +59,25 @@ const SideBar = (props: Props) => {
// was really slow and looked pretty bad. Possible fix is upgrading to v2 // was really slow and looked pretty bad. Possible fix is upgrading to v2
// Not sure if that has better performance // Not sure if that has better performance
} }
{!!subLinks.length && active && ( {!!subLinks.length &&
<ul key="0" className="navigation__link-items"> active && (
{subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => ( <ul key="0" className="navigation__link-items">
<li {subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
className={classnames('navigation__link-item', { <li
'navigation__link-item--active': subLinkActive, className={classnames('navigation__link-item', {
})} 'navigation__link-item--active': subLinkActive,
key={subPath} })}
> key={subPath}
{subPath ? ( >
<Button label={subLabel} navigate={subPath} /> {subPath ? (
) : ( <Button label={subLabel} navigate={subPath} />
<span>{subLabel}</span> ) : (
)} <span>{subLabel}</span>
</li> )}
))} </li>
</ul> ))}
)} </ul>
)}
</li> </li>
))} ))}
</ul> </ul>

8
src/renderer/component/socialShare/view.jsx
View file

@ -56,12 +56,12 @@ class SocialShare extends React.PureComponent<Props> {
} }
return ( return (
<section className="card__content"> <React.Fragment>
{speechShareable && ( {speechShareable && (
<div className="card__content"> <div className="card__content">
<label className="card__subtitle">{__('Web link')}</label> <label className="card__subtitle">{__('Web link')}</label>
<CopyableText copyable={speechURL} /> <CopyableText copyable={speechURL} />
<div className="card__actions card__actions--center"> <div className="card__actions card__actions--center card__actions--top-space">
<ToolTip onComponent body={__('Facebook')}> <ToolTip onComponent body={__('Facebook')}>
<Button <Button
iconColor="blue" iconColor="blue"
@ -95,7 +95,7 @@ class SocialShare extends React.PureComponent<Props> {
<div className="card__content"> <div className="card__content">
<label className="card__subtitle">{__('LBRY App link')}</label> <label className="card__subtitle">{__('LBRY App link')}</label>
<CopyableText copyable={lbryURL} noSnackbar /> <CopyableText copyable={lbryURL} noSnackbar />
<div className="card__actions card__actions--center"> <div className="card__actions card__actions--center card__actions--top-space">
<ToolTip onComponent body={__('Facebook')}> <ToolTip onComponent body={__('Facebook')}>
<Button <Button
iconColor="blue" iconColor="blue"
@ -119,7 +119,7 @@ class SocialShare extends React.PureComponent<Props> {
<div className="card__actions"> <div className="card__actions">
<Button button="link" label={__('Done')} onClick={onDone} /> <Button button="link" label={__('Done')} onClick={onDone} />
</div> </div>
</section> </React.Fragment>
); );
} }
} }

15
src/renderer/component/userPhoneNew/view.jsx
View file

@ -86,19 +86,20 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
return ( return (
<React.Fragment> <React.Fragment>
<header className="card__header"> <section className="card__content">
<h2 className="card__title">{__('Enter The Verification Code')}</h2>
<p className="card__subtitle"> <p className="card__subtitle">
{__( {__(
'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.' 'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
)} )}
</p> </p>
</header> </section>
<Form onSubmit={this.handleSubmit}>
<Form className="card__content" onSubmit={this.handleSubmit}>
<FormRow padded> <FormRow padded>
<FormField type="select" name="country-codes" onChange={this.handleSelect}> <FormField type="select" name="country-codes" onChange={this.handleSelect}>
{countryCodes.map(country => ( {countryCodes.map((country, index) => (
<option key={country.countryCallingCode} value={country.countryCallingCode}> // eslint-disable-next-line
<option key={index} value={country.countryCallingCode}>
{os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '} {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
{country.countryCallingCode} {country.countryCallingCode}
</option> </option>
@ -115,7 +116,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
}} }}
/> />
</FormRow> </FormRow>
<div className="card__actions card__actions--center"> <div className="card__actions">
<Submit label="Submit" disabled={isPending} /> <Submit label="Submit" disabled={isPending} />
{cancelButton} {cancelButton}
</div> </div>

9
src/renderer/component/userPhoneVerify/view.jsx
View file

@ -33,18 +33,17 @@ class UserPhoneVerify extends React.PureComponent {
const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props; const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
return ( return (
<React.Fragment> <React.Fragment>
<header className="card__header"> <section className="card__content">
<h2 className="card__title">{__('Enter The Verification Code')}</h2> <p>
<p className="card__subtitle">
{' '} {' '}
{__( {__(
`Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? ` `Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `
)} )}
<Button button="link" onClick={this.reset.bind(this)} label="Go back." /> <Button button="link" onClick={this.reset.bind(this)} label="Go back." />
</p> </p>
</header> </section>
<Form className="card__content" onSubmit={this.handleSubmit.bind(this)}> <Form className="card__content" onSubmit={this.handleSubmit.bind(this)}>
<FormRow padded> <FormRow>
<FormField <FormField
type="text" type="text"
name="code" name="code"

2
src/renderer/component/walletSendTip/view.jsx
View file

@ -75,7 +75,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
return ( return (
<React.Fragment> <React.Fragment>
<FormRow> <FormRow className="card__content">
<FormField <FormField
autoFocus autoFocus
label={ label={

1
src/renderer/constants/icons.js
View file

@ -35,3 +35,4 @@ export const FACEBOOK = 'Facebook';
export const TWITTER = 'Twitter'; export const TWITTER = 'Twitter';
export const CREDIT_CARD = 'CreditCard'; export const CREDIT_CARD = 'CreditCard';
export const SETTINGS = 'Settings'; export const SETTINGS = 'Settings';
export const USERS = 'Users';

4
src/renderer/index.js
View file

@ -205,10 +205,10 @@ const init = () => {
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<div> <React.Fragment>
<App /> <App />
<SnackBar /> <SnackBar />
</div> </React.Fragment>
</Provider>, </Provider>,
document.getElementById('app') document.getElementById('app')
); );

6
src/renderer/modal/modal.jsx
View file

@ -17,7 +17,6 @@ type ModalProps = {
onConfirmed?: any => any, onConfirmed?: any => any,
onAborted?: any => any, onAborted?: any => any,
className?: string, className?: string,
overlayClassName?: string,
children?: React.Node, children?: React.Node,
extraContent?: React.Node, extraContent?: React.Node,
expandButtonLabel?: string, expandButtonLabel?: string,
@ -51,7 +50,6 @@ export class Modal extends React.PureComponent<ModalProps> {
onAborted, onAborted,
fullScreen, fullScreen,
className, className,
overlayClassName,
title, title,
...modalProps ...modalProps
} = this.props; } = this.props;
@ -63,9 +61,7 @@ export class Modal extends React.PureComponent<ModalProps> {
modal: !fullScreen, modal: !fullScreen,
'modal--fullscreen': fullScreen, 'modal--fullscreen': fullScreen,
})} })}
overlayClassName={ overlayClassName="modal-overlay"
![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
}
> >
{title && ( {title && (
<header className="card__header"> <header className="card__header">

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

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

30
src/renderer/modal/modalConfirmThumbnailUpload/view.jsx
View file

@ -25,29 +25,27 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
return ( return (
<Modal <Modal
isOpen isOpen
title={__('Upload Thumbnail')}
contentLabel={__('Confirm Thumbnail Upload')} contentLabel={__('Confirm Thumbnail Upload')}
type="confirm" type="confirm"
confirmButtonLabel={__('Upload')} confirmButtonLabel={__('Upload')}
onConfirmed={() => this.upload()} onConfirmed={() => this.upload()}
onAborted={closeModal} onAborted={closeModal}
> >
<header className="card__header"> <section className="card__content">
<h2 className="card__title">{__('More Ways To Get LBRY Credits')}</h2> <p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
<p className="card__subtitle">
{__('Are you sure you want to upload this thumbnail to spee.ch')}?
</p>
</header>
<blockquote>{path}</blockquote> <blockquote>{path}</blockquote>
<FormRow> <FormRow>
<FormField <FormField
type="checkbox" type="checkbox"
name="content_is_mature" name="content_is_mature"
postfix={__('Mature audiences only')} postfix={__('For mature audiences only')}
checked={nsfw} checked={nsfw}
onChange={event => updatePublishForm({ nsfw: event.target.checked })} onChange={event => updatePublishForm({ nsfw: event.target.checked })}
/> />
</FormRow> </FormRow>
</section>
</Modal> </Modal>
); );
} }

20
src/renderer/modal/modalCreditIntro/view.jsx
View file

@ -34,23 +34,21 @@ const ModalCreditIntro = (props: Props) => {
)} )}
{Boolean(totalRewardValue) && ( {Boolean(totalRewardValue) && (
<p> <p>
There are a variety of ways to get credits, including more than{' '} {__(' There are a variety of ways to get credits, including more than')}{' '}
<CreditAmount inheritStyle amount={totalRewardRounded} />{' '} <CreditAmount inheritStyle amount={totalRewardRounded} />{' '}
{__('in free rewards for participating in the LBRY beta.')} {__('in free rewards for participating in the LBRY beta.')}
</p> </p>
)} )}
</section> </section>
<section className="card__content"> <div className="card__actions">
<div className="card__actions card__actions--center"> <Button button="primary" onClick={addBalance} label={__('Get Credits')} />
<Button button="primary" onClick={addBalance} label={__('Get Credits')} /> <Button
<Button button="link"
button="link" onClick={closeModal}
onClick={closeModal} label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')} />
/> </div>
</div>
</section>
</Modal> </Modal>
); );
}; };

23
src/renderer/modal/modalDownloading/view.jsx
View file

@ -49,23 +49,14 @@ class ModalDownloading extends React.PureComponent<Props> {
<p>{__('After the install is complete, please reopen the app.')}</p> <p>{__('After the install is complete, please reopen the app.')}</p>
</React.Fragment> </React.Fragment>
) : null} ) : null}
<div className="modal__buttons">
{downloadComplete ? (
<Button
button="primary"
label={__('Begin Upgrade')}
className="modal__button"
onClick={startUpgrade}
/>
) : null}
<Button
button="link"
label={__('Cancel')}
className="modal__button"
onClick={cancelUpgrade}
/>
</div>
</section> </section>
<div className="card__actions">
{downloadComplete ? (
<Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} />
) : null}
<Button button="link" label={__('Cancel')} onClick={cancelUpgrade} />
</div>
</Modal> </Modal>
); );
} }

1
src/renderer/modal/modalError/view.jsx
View file

@ -51,7 +51,6 @@ class ModalError extends React.PureComponent<Props> {
</React.Fragment> </React.Fragment>
} }
className="error-modal" className="error-modal"
overlayClassName="error-modal-overlay"
onConfirmed={closeModal} onConfirmed={closeModal}
extraContent={errorInfo} extraContent={errorInfo}
> >

6
src/renderer/modal/modalFileTimeout/view.jsx
View file

@ -23,9 +23,11 @@ class ModalFileTimeout extends React.PureComponent<Props> {
onConfirmed={closeModal} onConfirmed={closeModal}
> >
<section className="card__content"> <section className="card__content">
<p className="card__error-msg"> <p className="error-modal__error-list">
{__('LBRY was unable to download the stream')}: {__('LBRY was unable to download the stream')}:
<div>{`"${title}"`}</div> <div>
<b>{`"${title}"`}</b>
</div>
</p> </p>
</section> </section>
</Modal> </Modal>

1
src/renderer/modal/modalFirstReward/view.jsx
View file

@ -13,7 +13,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
return ( return (
<Modal <Modal
type="alert" type="alert"
overlayClassName="modal-overlay modal-overlay--clear"
isOpen isOpen
contentLabel={__('Welcome to LBRY')} contentLabel={__('Welcome to LBRY')}
title={__('Your First Reward')} title={__('Your First Reward')}

11
src/renderer/modal/modalPhoneCollection/view.jsx
View file

@ -14,6 +14,15 @@ type Props = {
}; };
class ModalPhoneCollection extends React.PureComponent<Props> { class ModalPhoneCollection extends React.PureComponent<Props> {
getTitle() {
const { user, phone } = this.props;
if (!user.phone_number && !phone) {
return __('Enter Your Phone Number');
}
return __('Enter The Verification Code');
}
renderInner() { renderInner() {
const { closeModal, phone, user } = this.props; const { closeModal, phone, user } = this.props;
@ -36,7 +45,7 @@ class ModalPhoneCollection extends React.PureComponent<Props> {
} }
return ( return (
<Modal type="custom" isOpen contentLabel="Phone"> <Modal type="custom" isOpen contentLabel="Phone" title={this.getTitle()}>
{this.renderInner()} {this.renderInner()}
</Modal> </Modal>
); );

10
src/renderer/modal/modalRemoveFile/view.jsx
View file

@ -60,19 +60,19 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
return ( return (
<Modal <Modal
isOpen isOpen
title="Remove File"
contentLabel={__('Confirm File Remove')} contentLabel={__('Confirm File Remove')}
type="confirm" type="confirm"
confirmButtonLabel={__('Remove')} confirmButtonLabel={__('Remove')}
onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)} onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)}
onAborted={closeModal} onAborted={closeModal}
> >
<header className="card__header"> <section className="card__content">
<h2 className="card__title">{__('Remove File')}</h2> <p>
<p className="card__subtitle">
{__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '} {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '}
{__('from the LBRY app?')} {__('from the LBRY app?')}
</p> </p>
</header> </section>
<section className="card__content"> <section className="card__content">
<FormRow> <FormRow>
<FormField <FormField
@ -82,7 +82,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
onChange={this.handleDeleteCheckboxClicked} onChange={this.handleDeleteCheckboxClicked}
/> />
</FormRow> </FormRow>
{claimIsMine && ( {(true || claimIsMine) && (
<FormRow> <FormRow>
<FormField <FormField
prefix={__('Abandon the claim for this URI')} prefix={__('Abandon the claim for this URI')}

5
src/renderer/modal/modalRevokeClaim/view.jsx
View file

@ -63,11 +63,6 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
const { type } = const { type } =
transactionItems.find(claim => claim.txid === txid && claim.nout === nout) || {}; transactionItems.find(claim => claim.txid === txid && claim.nout === nout) || {};
if (!type) {
console.error('Tried to render modalRevokeClaim but no matching tx type found.');
return null;
}
return ( return (
<Modal <Modal
isOpen isOpen

22
src/renderer/modal/modalRewardCode/view.jsx
View file

@ -49,7 +49,16 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
confirmButtonDisabled={rewardIsPending} confirmButtonDisabled={rewardIsPending}
> >
<section className="card__content"> <section className="card__content">
<FormRow> <p>
{__('Redeem a custom reward code for LBC')}
{'. '}
<Button
button="link"
href="https://lbry.io/faq/rewards#reward-code"
label={__('Learn more')}
/>.
</p>
<FormRow padded>
<FormField <FormField
stretch stretch
autoFocus autoFocus
@ -59,17 +68,6 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
error={error} error={error}
value={rewardCode} value={rewardCode}
onChange={e => this.setState({ rewardCode: e.target.value })} onChange={e => this.setState({ rewardCode: e.target.value })}
helper={
<React.Fragment>
{__('Redeem a custom reward code for LBC')}
{'. '}
<Button
button="link"
href="https://lbry.io/faq/rewards#reward-code"
label={__('Learn more')}
/>.
</React.Fragment>
}
/> />
</FormRow> </FormRow>
</section> </section>

6
src/renderer/modal/modalTransactionFailed/view.jsx
View file

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

25
src/renderer/modal/modalWalletDecrypt/view.jsx
View file

@ -1,6 +1,5 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Form } from 'component/common/form';
import { Modal } from 'modal/modal'; import { Modal } from 'modal/modal';
import Button from 'component/button'; import Button from 'component/button';
@ -45,20 +44,16 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
onAborted={closeModal} onAborted={closeModal}
> >
<section className="card__content"> <section className="card__content">
<Form onSubmit={() => this.submitDecryptForm()}> <p>
<p> {__(
{__( 'Your wallet has been encrypted with a local password, performing this action will remove this password.'
'Your wallet has been encrypted with a local password, performing this action will remove this password.' )}{' '}
)} <Button
</p> button="link"
<div className="card__actions"> label={__('Learn more')}
<Button href="https://lbry.io/faq/wallet-encryption"
button="link" />.
label={__('Learn more')} </p>
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
</Form>
</section> </section>
</Modal> </Modal>
); );

27
src/renderer/modal/modalWalletEncrypt/view.jsx
View file

@ -101,19 +101,24 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
onConfirmed={() => this.submitEncryptForm()} onConfirmed={() => this.submitEncryptForm()}
onAborted={closeModal} onAborted={closeModal}
> >
<section className="card__content"> <Form onSubmit={() => this.submitEncryptForm()}>
<Form onSubmit={() => this.submitEncryptForm()}> <section className="card__content">
<p> <p>
{__( {__(
'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.' 'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
)} )}{' '}
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>.
</p> </p>
<FormRow padded> <FormRow padded>
<FormField <FormField
stretch stretch
autoFocus autoFocus
error={passwordMismatch === true ? 'Passwords do not match' : false} error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('New Password')} label={__('Password')}
type="password" type="password"
name="wallet-new-password" name="wallet-new-password"
onChange={event => this.onChangeNewPassword(event)} onChange={event => this.onChangeNewPassword(event)}
@ -129,6 +134,8 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
onChange={event => this.onChangeNewPasswordConfirm(event)} onChange={event => this.onChangeNewPasswordConfirm(event)}
/> />
</FormRow> </FormRow>
</section>
<section className="card__content">
<p> <p>
{__( {__(
'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.' 'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
@ -144,16 +151,10 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
onChange={event => this.onChangeUnderstandConfirm(event)} onChange={event => this.onChangeUnderstandConfirm(event)}
/> />
</FormRow> </FormRow>
<div className="card__actions"> <div className="card__actions" />
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
{failMessage && <div className="error-text">{__(failMessage)}</div>} {failMessage && <div className="error-text">{__(failMessage)}</div>}
</Form> </section>
</section> </Form>
</Modal> </Modal>
); );
} }

17
src/renderer/modal/modalWalletUnlock/view.jsx
View file

@ -5,7 +5,6 @@ import { Modal } from 'modal/modal';
import Button from 'component/button'; import Button from 'component/button';
type Props = { type Props = {
closeModal: () => void,
quit: () => void, quit: () => void,
unlockWallet: string => void, unlockWallet: string => void,
walletUnlockSucceded: boolean, walletUnlockSucceded: boolean,
@ -29,7 +28,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
} }
render() { render() {
const { quit, unlockWallet, walletUnlockSucceded, closeModal } = this.props; const { quit, unlockWallet, walletUnlockSucceded } = this.props;
const { password } = this.state; const { password } = this.state;
@ -50,7 +49,12 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
<p> <p>
{__( {__(
'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.' 'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
)} )}{' '}
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>.
</p> </p>
<FormRow padded> <FormRow padded>
<FormField <FormField
@ -63,13 +67,6 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
onChange={event => this.onChangePassword(event)} onChange={event => this.onChangePassword(event)}
/> />
</FormRow> </FormRow>
<div className="card__actions">
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
</Form> </Form>
</section> </section>
</Modal> </Modal>

13
src/renderer/modal/modalWelcome/view.jsx
View file

@ -1,8 +1,13 @@
// @flow
import React from 'react'; import React from 'react';
import { Modal } from 'modal/modal'; import { Modal } from 'modal/modal';
import Button from 'component/button'; import Button from 'component/button';
const ModalWelcome = props => { type Props = {
closeModal: () => void,
};
const ModalWelcome = (props: Props) => {
const { closeModal } = props; const { closeModal } = props;
return ( return (
@ -16,10 +21,10 @@ const ModalWelcome = props => {
<p> <p>
{__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')} {__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}
</p> </p>
<div className="modal__buttons">
<Button button="primary" onClick={closeModal} label={__("I'm In")} />
</div>
</section> </section>
<div className="card__actions">
<Button button="primary" onClick={closeModal} label={__("I'm In")} />
</div>
</Modal> </Modal>
); );
}; };

24
src/renderer/page/channel/view.jsx
View file

@ -86,23 +86,21 @@ class ChannelPage extends React.PureComponent<Props> {
return ( return (
<Page notContained> <Page notContained>
<header className="channel-info"> <header className="channel-info">
<h1> <h1 className="media__title">
{name} {name}
{fetching && <BusyIndicator />} {fetching && <BusyIndicator />}
</h1> </h1>
<div className="channel-info__actions"> <div className="channel-info__actions__group">
<div className="channel-info__actions__group"> <SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} />
<SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} /> <Button
<Button button="alt"
button="alt" icon={icons.GLOBE}
icon={icons.GLOBE} label={__('Share Channel')}
label={__('Share Channel')} onClick={() =>
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true })
openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true }) }
} />
/>
</div>
</div> </div>
</header> </header>

2
src/renderer/page/file/view.jsx
View file

@ -193,7 +193,7 @@ class FilePage extends React.Component<Props> {
<UriIndicator uri={uri} link /> <UriIndicator uri={uri} link />
</div> </div>
<div className="media__subtitle__date"> <div className="media__subtitle__date media__subtext">
{__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} /> {__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
</div> </div>
</div> </div>

2
src/renderer/redux/selectors/app.js
View file

@ -224,7 +224,7 @@ export const selectNavLinks = createSelector(
}, },
{ {
label: 'Invite', label: 'Invite',
// icon: TBD when we add icons back to the side nav icon: icons.USERS,
path: '/invite', path: '/invite',
active: currentPage === 'invite', active: currentPage === 'invite',
}, },

13
src/renderer/scss/component/_button.scss
View file

@ -3,11 +3,20 @@
position: relative; position: relative;
svg { svg {
stroke-width: 1.5; stroke-width: 1.9;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
position: relative; position: relative;
top: 0.1rem; top: 2px;
stroke-opacity: 0.7;
// Buttons that don't have a label
&:only-child {
stroke-opacity: 1;
width: 1.4rem;
height: 1.4rem;
top: 0;
}
} }
.btn__label { .btn__label {

11
src/renderer/scss/component/_channel.scss
View file

@ -1,10 +1,11 @@
.channel-info { .channel-info {
align-items: center; .media__title {
display: flex;
justify-content: space-between;
h1 {
user-select: text; user-select: text;
margin-bottom: var(--spacing-vertical-medium);
}
.channel-info__actions__group {
margin-bottom: var(--spacing-vertical-large);
} }
} }

17
src/renderer/scss/component/_content.scss
View file

@ -76,7 +76,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 0 var(--spacing-vertical-large); padding: 0 var(--spacing-vertical-large);
background-color: rgba($lbry-black, 0.7); background-color: #000;
} }
.content__loading-text { .content__loading-text {
@ -86,10 +86,12 @@
.content__view { .content__view {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #000; top: 0;
left: 0;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute;
iframe { iframe {
width: 100%; width: 100%;
@ -97,3 +99,14 @@
background-color: $lbry-white; background-color: $lbry-white;
} }
} }
.content__view--container {
width: 100%;
height: 100%;
top: 0;
left: 0;
align-items: center;
display: flex;
justify-content: center;
position: absolute;
}

49
src/renderer/scss/component/_header.scss
View file

@ -34,22 +34,10 @@
width: calc(var(--header-height) * 3 + 1px); width: calc(var(--header-height) * 3 + 1px);
} }
} }
&:last-of-type {
@media (min-width: 601px) {
width: 10rem;
}
@media (max-width: 600px) {
width: var(--header-height);
}
}
} }
.header__navigation-item { .header__navigation-item {
width: var(--header-height);
height: var(--header-height); height: var(--header-height);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 50%; background-size: 50%;
@ -105,25 +93,32 @@
display: none; display: none;
} }
} }
.header__navigation-item--back,
.header__navigation-item--publish, .header__navigation-item--forward,
.header__navigation-item--wallet { .header__navigation-item--home,
// Publish and Wallet links are collapsed .header__navigation-item--menu {
// into a menu at smaller screen widths width: var(--header-height);
@media (max-width: 600px) {
display: none;
}
} }
.header__navigation-item--publish { // Currently not used
// .header__navigation-item--publish,
// .header__navigation-item--wallet {
// // Publish and Wallet links are collapsed
// // into a menu at smaller screen widths
//
// @media (max-width: 600px) {
// display: none;
// }
// }
.header__navigation-item--right-action {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
width: 100%;
.btn__content { .btn__content {
display: flex; display: flex;
padding: 0 var(--spacing-vertical-large);
} }
.btn__label { .btn__label {
@ -131,6 +126,14 @@
padding-left: 0.5rem; padding-left: 0.5rem;
} }
svg {
top: 0;
}
&:not(:last-child) {
border-right: 1px solid $lbry-gray-1;
}
html[data-theme='dark'] & { html[data-theme='dark'] & {
svg { svg {
stroke: $lbry-white; stroke: $lbry-white;

2
src/renderer/scss/component/_media.scss
View file

@ -96,7 +96,7 @@
} }
.media__properties { .media__properties {
bottom: -5.5rem; bottom: -5rem;
left: -20rem; left: -20rem;
position: absolute; position: absolute;
} }

27
src/renderer/scss/component/_modal.scss
View file

@ -1,5 +1,4 @@
.modal-overlay, .modal-overlay {
.error-modal-overlay {
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -17,10 +16,6 @@
} }
} }
.modal-overlay--clear {
background-color: transparent;
}
.modal { .modal {
background-color: $lbry-white; background-color: $lbry-white;
border: 1px solid $lbry-gray-3; border: 1px solid $lbry-gray-3;
@ -94,26 +89,6 @@
font-size: 2em; font-size: 2em;
} }
.modal__buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: var(--spacing-vertical-medium);
}
.modal__button {
margin: 0 var(--spacing-vertical-small);
&.btn--link {
// So the text is not bigger than the text inside the button
font-size: 0.8rem;
}
}
.error-modal-overlay {
background-color: rgba($lbry-white, 0.7);
}
.error-modal__content { .error-modal__content {
display: flex; display: flex;
padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium) padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium)

5
src/renderer/scss/component/_navigation.scss
View file

@ -3,6 +3,7 @@
border-right: 1px solid rgba($lbry-gray-1, 0.9); border-right: 1px solid rgba($lbry-gray-1, 0.9);
font-size: 1.25rem; font-size: 1.25rem;
padding-top: var(--spacing-vertical-large); padding-top: var(--spacing-vertical-large);
padding-right: var(--spacing-vertical-small);
position: relative; position: relative;
html[data-theme='dark'] & { html[data-theme='dark'] & {
@ -14,7 +15,7 @@
// on smaller screen widths // on smaller screen widths
@media (min-width: 601px) { @media (min-width: 601px) {
width: 171px; // 1px is for the border min-width: 171px; // 1px is for the border
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -100,7 +101,7 @@
color: $lbry-gray-5; color: $lbry-gray-5;
cursor: default; cursor: default;
font-size: 1.1rem; font-size: 1.15rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
text-transform: uppercase; text-transform: uppercase;

3
src/renderer/scss/component/_table.scss
View file

@ -91,7 +91,10 @@
.table--transactions { .table--transactions {
td:nth-of-type(1) { td:nth-of-type(1) {
// TX amounts
width: 25%; width: 25%;
font-size: 0.8em;
font-weight: 600;
} }
td:nth-of-type(2) { td:nth-of-type(2) {

8
yarn.lock
View file

@ -5667,17 +5667,17 @@ lazy-val@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc" resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
lbry-redux@lbryio/lbry-redux#820b6eeadf9e58c1e5027fd4d92808ba817b410e: lbry-redux@lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404:
version "0.0.1" version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/820b6eeadf9e58c1e5027fd4d92808ba817b410e" resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/84b7d396934d57a37802aadbef71db91230a9404"
dependencies: dependencies:
proxy-polyfill "0.1.6" proxy-polyfill "0.1.6"
reselect "^3.0.0" reselect "^3.0.0"
uuid "^3.3.2" uuid "^3.3.2"
lbry-redux@lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404: lbry-redux@lbryio/lbry-redux#a22f8284110f957f3f645d42abc457ab8fb3fa8a:
version "0.0.1" version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/84b7d396934d57a37802aadbef71db91230a9404" resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/a22f8284110f957f3f645d42abc457ab8fb3fa8a"
dependencies: dependencies:
proxy-polyfill "0.1.6" proxy-polyfill "0.1.6"
reselect "^3.0.0" reselect "^3.0.0"