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

ensure modals have consistent styling

Browse source
This commit is contained in:
Sean Yesmunt 2018-09-26 13:48:07 -04:00
parent 49573a65b9
commit caa5abfdfd
38 changed files with 555 additions and 433 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -37,47 +37,41 @@ class SocialShare extends React.PureComponent<Props> {
: `${speechPrefix}${claimName}#${claimId}`;
return (
<div>
<div className="card__title">
<h2>{__('Share This Content')}</h2>
<div className="card__content">
<Address address={speechURL} noSnackbar />
</div>
<div className="card__actions card__actions--center">
<Tooltip onComponent body={__('Facebook')}>
<Button
iconColor="blue"
icon={icons.FACEBOOK}
button="alt"
label={__('')}
href={`https://facebook.com/sharer/sharer.php?u=${speechURL}`}
/>
</Tooltip>
<Tooltip onComponent body={__('Twitter')}>
<Button
iconColor="blue"
icon={icons.TWITTER}
button="alt"
label={__('')}
href={`https://twitter.com/home?status=${speechURL}`}
/>
</Tooltip>
<Tooltip onComponent body={__('View on Spee.ch')}>
<Button
icon={icons.GLOBE}
iconColor="blue"
button="alt"
label={__('')}
href={`${speechURL}`}
/>
</Tooltip>
</div>
<div className="card__actions">
<Button button="link" label={__('Done')} onClick={onDone} />
</div>
<section className="card__content">
<Address address={speechURL} noSnackbar />
<div className="card__actions card__actions--center">
<Tooltip onComponent body={__('Facebook')}>
<Button
iconColor="blue"
icon={icons.FACEBOOK}
button="alt"
label={__('')}
href={`https://facebook.com/sharer/sharer.php?u=${speechURL}`}
/>
</Tooltip>
<Tooltip onComponent body={__('Twitter')}>
<Button
iconColor="blue"
icon={icons.TWITTER}
button="alt"
label={__('')}
href={`https://twitter.com/home?status=${speechURL}`}
/>
</Tooltip>
<Tooltip onComponent body={__('View on Spee.ch')}>
<Button
icon={icons.GLOBE}
iconColor="blue"
button="alt"
label={__('')}
href={`${speechURL}`}
/>
</Tooltip>
</div>
</div>
<div className="card__actions">
<Button button="link" label={__('Done')} onClick={onDone} />
</div>
</section>
);
}
}

5
src/renderer/component/userEmailNew/view.jsx
View file

@ -47,7 +47,7 @@ class UserEmailNew extends React.PureComponent<Props, State> {
</p>
<p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
<Form onSubmit={this.handleSubmit}>
<FormRow>
<FormRow padded>
<FormField
stretch
type="email"
@ -63,6 +63,9 @@ class UserEmailNew extends React.PureComponent<Props, State> {
<Submit label="Submit" disabled={isPending} />
{cancelButton}
</div>
<div className="card__content help">
{`${__('Your email may be used to sync usage data across devices.')} `}
</div>
</Form>
</div>
);

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

@ -56,7 +56,7 @@ class UserEmailVerify extends React.PureComponent<Props, State> {
return (
<Form onSubmit={this.handleSubmit}>
<p>Please enter the verification code emailed to {email}.</p>
<FormRow>
<FormRow padded>
<FormField
stretch
name="code"

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

@ -2,7 +2,6 @@
import React from 'react';
import Button from 'component/button';
import { FormField } from 'component/common/form';
import UriIndicator from 'component/uriIndicator';
import type { Claim } from 'types/claim';
type Props = {
@ -71,56 +70,44 @@ class WalletSendTip extends React.PureComponent<Props, State> {
}
render() {
const { title, isPending, uri, onCancel, balance } = this.props;
const { title, isPending, uri, onCancel } = this.props;
const { tipAmount, tipError } = this.state;
return (
<div>
<div className="card__title">
<h1>
{__('Send a tip to')} <UriIndicator uri={uri} />
</h1>
</div>
<div className="card__content">
<FormField
autoFocus
label={
(tipAmount &&
tipAmount !== 0 &&
`Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
__('Amount')
}
postfix={__('LBC')}
className="input--price-amount"
error={tipError}
min="0"
step="any"
type="number"
placeholder="1.23"
onChange={event => this.handleSupportPriceChange(event)}
helper={
<span>
{__(`This will appear as a tip for ${title} located at ${uri}.`)}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.io/faq/tipping" />
</span>
}
<section className="card__content">
<FormField
autoFocus
label={
(tipAmount &&
tipAmount !== 0 &&
`Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
__('Amount')
}
postfix={__('LBC')}
className="input--price-amount"
error={tipError}
min="0"
step="any"
type="number"
placeholder="1.23"
onChange={event => this.handleSupportPriceChange(event)}
helper={
<span>
{__(`This will appear as a tip for "${title}".`)}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.io/faq/tipping" />
</span>
}
/>
<div className="card__actions">
<Button
button="primary"
label={__('Send')}
disabled={isPending || tipError}
onClick={this.handleSendButtonClicked}
/>
<div className="card__actions">
<Button
button="primary"
label={__('Send')}
disabled={isPending || tipError}
onClick={this.handleSendButtonClicked}
/>
<Button
button="link"
label={__('Cancel')}
onClick={onCancel}
navigateParams={{ uri }}
/>
</div>
<Button button="link" label={__('Cancel')} onClick={onCancel} navigateParams={{ uri }} />
</div>
</div>
</section>
);
}
}

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

@ -23,6 +23,7 @@ type ModalProps = {
expandButtonLabel?: string,
hideButtonLabel?: string,
fullScreen: boolean,
title: string,
};
export class Modal extends React.PureComponent<ModalProps> {
@ -51,6 +52,7 @@ export class Modal extends React.PureComponent<ModalProps> {
fullScreen,
className,
overlayClassName,
title,
...modalProps
} = this.props;
return (
@ -65,6 +67,7 @@ export class Modal extends React.PureComponent<ModalProps> {
![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
}
>
<h1 className="modal__header">{title}</h1>
<div>{children}</div>
{type === 'custom' ? null : ( // custom modals define their own buttons
<div className="card__actions card__actions--center">

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

@ -1,8 +1,18 @@
// @flow
import React from 'react';
import FilePrice from 'component/filePrice';
import { Modal } from 'modal/modal';
import type { Metadata } from 'types/claim';
class ModalAffirmPurchase extends React.PureComponent {
type Props = {
closeModal: () => void,
loadVideo: string => void,
uri: string,
cancelPurchase: () => void,
metadata: Metadata,
};
class ModalAffirmPurchase extends React.PureComponent<Props> {
constructor() {
super();
@ -25,15 +35,18 @@ class ModalAffirmPurchase extends React.PureComponent {
<Modal
type="confirm"
isOpen
title={__('Confirm Purchase')}
contentLabel={__('Confirm Purchase')}
onConfirmed={this.onAffirmPurchase}
onAborted={cancelPurchase}
>
{__('This will purchase')} <strong>{title}</strong> {__('for')}{' '}
<strong>
<FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
</strong>{' '}
{__('credits')}.
<section className="card__content">
{__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
<strong>
<FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
</strong>{' '}
{__('credits')}.
</section>
</Modal>
);
}

21
src/renderer/modal/modalAuthFailure/view.jsx
View file

@ -1,7 +1,12 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
class ModalAuthFailure extends React.PureComponent {
type Props = {
close: () => void,
};
class ModalAuthFailure extends React.PureComponent<Props> {
render() {
const { close } = this.props;
@ -9,6 +14,7 @@ class ModalAuthFailure extends React.PureComponent {
<Modal
isOpen
contentLabel={__('Unable to Authenticate')}
title={__('Authentication Failure')}
type="confirm"
confirmButtonLabel={__('Reload')}
abortButtonLabel={__('Continue')}
@ -17,12 +23,13 @@ class ModalAuthFailure extends React.PureComponent {
}}
onAborted={close}
>
<h3>{__('Authentication Failure')}</h3>
<p>
{__(
'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.'
)}
</p>
<section className="card__content">
<p>
{__(
'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.'
)}
</p>
</section>
</Modal>
);
}

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

@ -1,11 +1,15 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import { Line } from 'rc-progress';
import Button from 'component/button';
import { ipcRenderer } from 'electron';
const { ipcRenderer } = require('electron');
type Props = {
closeModal: () => void,
declineAutoUpdate: () => void,
};
class ModalAutoUpdateConfirm extends React.PureComponent {
class ModalAutoUpdateConfirm extends React.PureComponent<Props> {
render() {
const { closeModal, declineAutoUpdate } = this.props;
@ -14,6 +18,7 @@ class ModalAutoUpdateConfirm extends React.PureComponent {
isOpen
type="confirm"
contentLabel={__('Update Downloaded')}
title={__('LBRY Update Ready')}
confirmButtonLabel={__('Upgrade')}
abortButtonLabel={__('Not now')}
onConfirmed={() => {
@ -24,10 +29,9 @@ class ModalAutoUpdateConfirm extends React.PureComponent {
closeModal();
}}
>
<section>
<h3 className="text-center">{__('LBRY Update Ready')}</h3>
<section className="card__content">
<p>{__('Your LBRY update is ready. Restart LBRY now to use it!')}</p>
<p className="meta text-center">
<p className="meta">
{__('Want to know what has changed?')} See the{' '}
<Button
button="link"

4
src/renderer/modal/modalAutoUpdateDownloaded/view.jsx
View file

@ -26,6 +26,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props> {
isOpen
type="confirm"
contentLabel={__('Update Downloaded')}
title={__('LBRY Leveled Up')}
confirmButtonLabel={__('Use it Now')}
abortButtonLabel={__('Upgrade on Close')}
confirmButtonDisabled={this.state.disabled}
@ -39,8 +40,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props> {
closeModal();
}}
>
<section>
<h3 className="text-center">{__('LBRY Leveled Up')}</h3>
<section className="card__content">
<p>
{__(
'A new version of LBRY has been released, downloaded, and is ready for you to use pending a restart.'

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

@ -25,21 +25,24 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Upload Thumbnail')}
contentLabel={__('Confirm Thumbnail Upload')}
type="confirm"
confirmButtonLabel={__('Upload')}
onConfirmed={() => this.upload()}
onAborted={closeModal}
>
<p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
<blockquote>{path}</blockquote>
<FormField
type="checkbox"
name="content_is_mature"
postfix={__('Mature audiences only')}
checked={nsfw}
onChange={event => updatePublishForm({ nsfw: event.target.checked })}
/>
<section className="card__content">
<p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
<blockquote>{path}</blockquote>
<FormField
type="checkbox"
name="content_is_mature"
postfix={__('Mature audiences only')}
checked={nsfw}
onChange={event => updatePublishForm({ nsfw: event.target.checked })}
/>
</section>
</Modal>
);
}

19
src/renderer/modal/modalConfirmTransaction/view.jsx
View file

@ -21,21 +21,20 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Send LBC')}
contentLabel={__('Confirm Transaction')}
type="confirm"
confirmButtonLabel={__('Continue')}
confirmButtonLabel={__('Send')}
onConfirmed={() => this.onConfirmed()}
onAborted={closeModal}
>
<p>{__('Are you sure you want to ')}</p>
<h1>
{__('send ')} {amount} LBC
</h1>
<p>{__('Sending: ')}</p>
<blockquote>{amount} LBC</blockquote>
<p>{__('To address: ')}</p>
<blockquote>{address}</blockquote>
<p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
<section className="card__content">
<p>{__('Sending: ')}</p>
<blockquote>{amount} LBC</blockquote>
<p>{__('To address: ')}</p>
<blockquote>{address}</blockquote>
<p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
</section>
</Modal>
);
}

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

@ -17,9 +17,8 @@ const ModalCreditIntro = (props: Props) => {
const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
return (
<Modal type="custom" isOpen contentLabel="Welcome to LBRY">
<section>
<h3 className="modal__header">{__('Computer Wizard Needs Tokens Badly')}</h3>
<Modal type="custom" isOpen contentLabel="Welcome to LBRY" title={__('LBRY Credits Needed')}>
<section className="card__content">
<p>
Some actions require LBRY credits (<em>
<CurrencySymbol />

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

@ -1,9 +1,18 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import { Line } from 'rc-progress';
import Button from 'component/button';
class ModalDownloading extends React.PureComponent {
type Props = {
downloadProgress: ?number,
downloadComplete: boolean,
downloadItem: string,
startUpgrade: () => void,
cancelUpgrade: () => void,
};
class ModalDownloading extends React.PureComponent<Props> {
render() {
const {
downloadProgress,
@ -14,44 +23,49 @@ class ModalDownloading extends React.PureComponent {
} = this.props;
return (
<Modal isOpen contentLabel={__('Downloading Update')} type="custom">
{__('Downloading Update')}
{downloadProgress ? `: ${downloadProgress}%` : null}
<Line percent={downloadProgress || 0} strokeWidth="4" />
{downloadComplete ? (
<div>
<br />
<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>
</div>
) : null}
<div className="modal__buttons">
<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 ? (
<Button
button="primary"
label={__('Begin Upgrade')}
className="modal__button"
onClick={startUpgrade}
/>
<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}
<Button
button="link"
label={__('Cancel')}
className="modal__button"
onClick={cancelUpgrade}
/>
</div>
<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>
</Modal>
);
}

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

@ -16,7 +16,6 @@ class ModalEmailCollection extends React.PureComponent<Props> {
const { closeModal, email, user } = this.props;
const cancelButton = <Button button="link" onClick={closeModal} label={__('Not Now')} />;
if (user && !user.has_verified_email && !email) {
return <UserEmailNew cancelButton={cancelButton} />;
} else if (user && !user.has_verified_email) {
@ -35,16 +34,8 @@ class ModalEmailCollection extends React.PureComponent<Props> {
}
return (
<Modal type="custom" isOpen contentLabel="Email">
<section>
<h3 className="modal__header">Can We Stay In Touch?</h3>
<div className="card__content">{this.renderInner()}</div>
<div className="card__content">
<div className="help">
{`${__('Your email may be used to sync usage data across devices.')} `}
</div>
</div>
</section>
<Modal type="custom" isOpen contentLabel="Email" title={__('Can We Stay In Touch?')}>
<section className="card__content">{this.renderInner()}</section>
</Modal>
);
}

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

@ -1,8 +1,14 @@
// @flow
import React from 'react';
import Native from 'native';
import { ExpandableModal } from 'modal/modal';
class ModalError extends React.PureComponent {
type Props = {
error: string | { message: string },
closeModal: () => void,
};
class ModalError extends React.PureComponent<Props> {
render() {
const { closeModal, error } = this.props;
@ -23,37 +29,39 @@ class ModalError extends React.PureComponent {
const label = errorKeyLabels[key];
errorInfoList.push(
<li key={key}>
<strong>{label}</strong>: <code>{val}</code>
<strong>{label}</strong>: {val}
</li>
);
}
const errorInfo = <ul className="error-modal__error-list">{errorInfoList}</ul>;
return (
<ExpandableModal
isOpen
contentLabel={__('Error')}
className="error-modal"
overlayClassName="error-modal-overlay"
onConfirmed={closeModal}
extraContent={errorInfo}
>
<h3 className="modal__header">{__('Error')}</h3>
<div className="error-modal__content">
<div>
title={
<React.Fragment>
{__('Error')}{' '}
<img
alt=""
className="error-modal__warning-symbol"
src={Native.imagePath('warning.png')}
/>
</div>
</React.Fragment>
}
className="error-modal"
overlayClassName="error-modal-overlay"
onConfirmed={closeModal}
extraContent={errorInfo}
>
<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>
</div>
</section>
</ExpandableModal>
);
}

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

@ -1,15 +1,33 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import type { Metadata } from 'types/claim';
class ModalFileTimeout extends React.PureComponent {
type Props = {
metadata: Metadata,
closeModal: () => void,
};
class ModalFileTimeout extends React.PureComponent<Props> {
render() {
const {
metadata: { title },
closeModal,
} = this.props;
return (
<Modal isOpen contentLabel={__('Download failed')} onConfirmed={closeModal}>
{__('LBRY was unable to download the stream')} <strong>{title}</strong>.
<Modal
isOpen
title={__('Unable to Download')}
contentLabel={__('Download failed')}
onConfirmed={closeModal}
>
<section className="card__content">
<p className="card__error-msg">
{__('LBRY was unable to download the stream')}:
<div>{`"${title}"`}</div>
</p>
</section>
</Modal>
);
}

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

@ -1,10 +1,12 @@
// I"ll come back to This
/* esline-disable */
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import CreditAmount from 'component/common/credit-amount';
class ModalFirstReward extends React.PureComponent {
type Props = {
closeModal: () => void,
};
class ModalFirstReward extends React.PureComponent<Props> {
render() {
const { closeModal } = this.props;
@ -14,10 +16,10 @@ class ModalFirstReward extends React.PureComponent {
overlayClassName="modal-overlay modal-overlay--clear"
isOpen
contentLabel={__('Welcome to LBRY')}
title={__('Your First Reward')}
onConfirmed={closeModal}
>
<section>
<h3 className="modal__header">{__('Your First Reward')}</h3>
<section className="card__content">
<p>{__('You just earned your first reward!')}</p>
<p>
{__(
@ -41,4 +43,3 @@ class ModalFirstReward extends React.PureComponent {
}
export default ModalFirstReward;
/* eslint-enable */

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

@ -1,14 +1,19 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import Button from 'component/button';
const ModalFirstSubscription = props => {
type Props = {
closeModal: () => void,
navigate: string => void,
};
const ModalFirstSubscription = (props: Props) => {
const { closeModal, navigate } = props;
return (
<Modal type="custom" isOpen contentLabel="Subscriptions 101">
<section>
<h3 className="modal__header">{__('Subscriptions 101')}</h3>
<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">

9
src/renderer/modal/modalIncompatibleDaemon/view.jsx
View file

@ -15,6 +15,7 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Incompatible Daemon')}
contentLabel={__('Incompatible daemon running')}
type="confirm"
confirmButtonLabel={__('Close LBRY and daemon')}
@ -22,9 +23,11 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
onConfirmed={quitAnyDaemon}
onAborted={quit}
>
{__(
'This browser is running with an incompatible version of the LBRY protocol, please close the LBRY app and rerun the installation package to repair it. '
)}
<p>
{__(
'This browser is running with an incompatible version of the LBRY protocol, please close the LBRY app and rerun the installation package to repair it. '
)}
</p>
<Button
button="link"
label={__('Learn more')}

18
src/renderer/modal/modalOpenExternalLink/view.jsx
View file

@ -23,20 +23,22 @@ class ModalOpenExternalLink extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Warning!')}
contentLabel={__('Confirm External Link')}
type="confirm"
confirmButtonLabel={__('Continue')}
onConfirmed={() => this.openExternalLink()}
onAborted={closeModal}
>
<h1>Warning!</h1>
<p>{__('This link leads to an external website.')}</p>
<blockquote>{uri}</blockquote>
<p>
{__(
'LBRY Inc is not responsible for its content, click continue to proceed at your own risk.'
)}
</p>
<section className="card__content">
<p>{__('This link leads to an external website.')}</p>
<blockquote>{uri}</blockquote>
<p>
{__(
'LBRY Inc is not responsible for its content, click continue to proceed at your own risk.'
)}
</p>
</section>
</Modal>
);
}

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

@ -1,10 +1,19 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import Button from 'component/button';
import UserPhoneNew from 'component/userPhoneNew';
import UserPhoneVerify from 'component/userPhoneVerify';
class ModalPhoneCollection extends React.PureComponent {
type Props = {
phone: ?number,
user: {
phone_number: ?number,
},
closeModal: () => void,
};
class ModalPhoneCollection extends React.PureComponent<Props> {
renderInner() {
const { closeModal, phone, user } = this.props;
@ -15,7 +24,7 @@ class ModalPhoneCollection extends React.PureComponent {
} else if (!user.phone_number) {
return <UserPhoneVerify cancelButton={cancelButton} />;
}
closeModal();
return closeModal();
}
render() {
@ -27,11 +36,8 @@ class ModalPhoneCollection extends React.PureComponent {
}
return (
<Modal type="custom" isOpen contentLabel="Phone">
<section>
<h3 className="modal__header">Verify Your Phone</h3>
{this.renderInner()}
</section>
<Modal type="custom" isOpen contentLabel="Phone" title={__('Verify Your Phone')}>
<section className="card__content">{this.renderInner()}</section>
</Modal>
);
}

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

@ -16,6 +16,7 @@ class ModalSendTip extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Success')}
contentLabel={__('File published')}
onConfirmed={() => {
clearPublish();
@ -23,13 +24,15 @@ class ModalSendTip extends React.PureComponent<Props> {
closeModal();
}}
>
<p>{__('Your file has been published to LBRY at the address')}</p>
<p className="card__success-msg">{uri}</p>
<p>
{__(
'The file 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 className="card__content">
<p>{__('Your file has been published to LBRY at the address')}</p>
<p className="card__success-msg">{uri}</p>
<p>
{__(
'The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.'
)}
</p>
</section>
</Modal>
);
}

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

@ -60,34 +60,38 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
return (
<Modal
isOpen
title={__('Remove File')}
contentLabel={__('Confirm File Remove')}
type="confirm"
confirmButtonLabel={__('Remove')}
onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)}
onAborted={closeModal}
>
<p>
{__("Are you sure you'd like to remove")} <cite>{title}</cite> {__('from the LBRY app?')}
</p>
<section className="card__content">
<p>
{__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '}
{__('from the LBRY app?')}
</p>
<FormRow padded>
<FormField
prefix={__('Also delete this file from my computer')}
type="checkbox"
checked={deleteChecked}
onChange={this.handleDeleteCheckboxClicked}
/>
</FormRow>
{claimIsMine && (
<FormRow>
<FormRow padded>
<FormField
prefix={__('Abandon the claim for this URI')}
prefix={__('Also delete this file from my computer')}
type="checkbox"
checked={abandonClaimChecked}
onChange={this.handleAbandonClaimCheckboxClicked}
checked={deleteChecked}
onChange={this.handleDeleteCheckboxClicked}
/>
</FormRow>
)}
{claimIsMine && (
<FormRow>
<FormField
prefix={__('Abandon the claim for this URI')}
type="checkbox"
checked={abandonClaimChecked}
onChange={this.handleAbandonClaimCheckboxClicked}
/>
</FormRow>
)}
</section>
</Modal>
);
}

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

@ -1,10 +1,52 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import * as txnTypes from 'constants/transaction_types';
class ModalRevokeClaim extends React.PureComponent {
constructor(props) {
super(props);
type Props = {
closeModal: () => void,
abandonClaim: (string, number) => void,
txid: string,
nout: number,
};
class ModalRevokeClaim extends React.PureComponent<Props> {
constructor() {
super();
(this: any).revokeClaim = this.revokeClaim.bind(this);
}
getButtonLabel(type) {
if (type === txnTypes.TIP) {
return 'Confirm Tip Unlock';
}
return 'Confirm Claim Revoke';
}
getMsgBody(type) {
if (type === txnTypes.TIP) {
return (
<React.Fragment>
<p>{__('Are you sure you want to unlock these credits?')}</p>
<p>
{__(
'These credits are permanently yours and can be unlocked at any time. Unlocking them allows you to spend them, but can hurt the performance of your content in lookups and search results. It is recommended you leave tips locked until you need or want to spend them.'
)}
</p>
</React.Fragment>
);
}
return (
<React.Fragment>
<p>{__('Are you sure want to revoke this claim?')}</p>
<p>
{__(
'This will prevent others from resolving and accessing the content you published. It will return the LBC to your spendable balance, less a small transaction fee.'
)}
</p>
</React.Fragment>
);
}
revokeClaim() {
@ -14,52 +56,6 @@ class ModalRevokeClaim extends React.PureComponent {
this.props.abandonClaim(txid, nout);
}
getButtonLabel(type) {
if (type == txnTypes.TIP) {
return 'Confirm Tip Unlock';
}
return 'Confirm Claim Revoke';
}
getMsgBody(type) {
if (type == txnTypes.TIP) {
return (
<div>
<h3>{__('Confirm Tip Unlock')}</h3>
<p>
{__('Are you sure you want to unlock these credits?')}
<br />
<br />
{__(
'These credits are permanently yours and can be\
unlocked at any time. Unlocking them allows you to\
spend them, but can hurt the performance of your\
content in lookups and search results. It is\
recommended you leave tips locked until you\
need or want to spend them.'
)}
</p>
</div>
);
}
return (
<div>
<h3>{__('Confirm Claim Revoke')}</h3>
<p>
{__('Are you sure want to revoke this claim?')}
<br />
<br />
{__(
'This will prevent others from resolving and\
accessing the content you published. It will return\
the LBC to your spendable balance, less a small\
transaction fee.'
)}
</p>
</div>
);
}
render() {
const { transactionItems, txid, nout, closeModal } = this.props;
const { type } = transactionItems.find(claim => claim.txid == txid && claim.nout == nout);
@ -67,13 +63,14 @@ class ModalRevokeClaim extends React.PureComponent {
return (
<Modal
isOpen
title={type === txnTypes.TIP ? __('Confirm Tip Unlock') : __('Confirm Claim Revoke')}
contentLabel={__('Confirm Claim Revoke')}
type="confirm"
confirmButtonLabel={this.getButtonLabel(type)}
onConfirmed={this.revokeClaim.bind(this)}
onConfirmed={this.revokeClaim}
onAborted={closeModal}
>
{this.getMsgBody(type)}
<section className="card__content">{this.getMsgBody(type)}</section>
</Modal>
);
}

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

@ -1,13 +1,20 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
class ModalRewardApprovalRequired extends React.PureComponent {
type Props = {
closeModal: () => void,
doAuth: () => void,
};
class ModalRewardApprovalRequired extends React.PureComponent<Props> {
render() {
const { closeModal, doAuth } = this.props;
return (
<Modal
isOpen
title={__('Hmm. Are you real?')}
contentLabel={__('Human Verification Required')}
onConfirmed={doAuth}
onAborted={closeModal}
@ -15,8 +22,7 @@ class ModalRewardApprovalRequired extends React.PureComponent {
confirmButtonLabel={__("I'm Totally Real")}
abortButtonLabel={__('Never Mind')}
>
<section>
<h3 className="modal__header">{__('This is awkward. Are you real?')}</h3>
<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."

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

@ -39,6 +39,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
return (
<Modal
isOpen
title={__('Enter Reward Code')}
contentLabel={__('Enter Reward Code')}
type="confirm"
confirmButtonLabel={__('Redeem')}
@ -47,8 +48,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
onAborted={closeModal}
confirmButtonDisabled={rewardIsPending}
>
<h3 className="modal__header">{__('Enter Reward Code')}</h3>
<div className="card__content">
<section className="card__content">
<FormRow>
<FormField
stretch
@ -72,7 +72,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
}
/>
</FormRow>
</div>
</section>
</Modal>
);
}

12
src/renderer/modal/modalSendTip/view.jsx
View file

@ -2,6 +2,7 @@
import React from 'react';
import { Modal } from 'modal/modal';
import SendTip from 'component/walletSendTip';
import UriIndicator from 'component/uriIndicator';
type Props = {
closeModal: () => void,
@ -13,7 +14,16 @@ class ModalSendTip extends React.PureComponent<Props> {
const { closeModal, uri } = this.props;
return (
<Modal onAborted={closeModal} isOpen type="custom">
<Modal
onAborted={closeModal}
isOpen
type="custom"
title={
<React.Fragment>
{__('Send a tip to')} <UriIndicator uri={uri} />
</React.Fragment>
}
>
<SendTip uri={uri} onCancel={closeModal} sendTipCallback={closeModal} />
</Modal>
);

2
src/renderer/modal/modalSocialShare/view.jsx
View file

@ -12,7 +12,7 @@ class ModalSocialShare extends React.PureComponent<Props> {
render() {
const { closeModal, uri } = this.props;
return (
<Modal isOpen onAborted={closeModal} type="custom">
<Modal isOpen onAborted={closeModal} type="custom" title={__('Share')}>
<SocialShare uri={uri} onDone={closeModal} />
</Modal>
);

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

@ -1,14 +1,22 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
class ModalTransactionFailed extends React.PureComponent {
type Props = {
closeModal: () => void,
};
class ModalTransactionFailed extends React.PureComponent<Props> {
render() {
const { closeModal } = this.props;
return (
<Modal isOpen contentLabel={__('Transaction failed')} onConfirmed={closeModal}>
{__('Transaction failed.')}:
</Modal>
<Modal
isOpen
contentLabel={__('Transaction failed')}
title={__('Transaction Failed')}
onConfirmed={closeModal}
/>
);
}
}

37
src/renderer/modal/modalUpgrade/view.jsx
View file

@ -1,8 +1,14 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import Button from 'component/button';
class ModalUpgrade extends React.PureComponent {
type Props = {
downloadUpgrade: () => void,
skipUpgrade: () => void,
};
class ModalUpgrade extends React.PureComponent<Props> {
render() {
const { downloadUpgrade, skipUpgrade } = this.props;
@ -10,26 +16,27 @@ class ModalUpgrade extends React.PureComponent {
<Modal
isOpen
contentLabel={__('Upgrade available')}
title={__('LBRY Leveled Up')}
type="confirm"
confirmButtonLabel={__('Upgrade')}
abortButtonLabel={__('Skip')}
onConfirmed={downloadUpgrade}
onAborted={skipUpgrade}
>
<h3 className="text-center">{__('LBRY Leveled Up')}</h3>
<br />
<p>
{__('An updated version of LBRY is now available.')}{' '}
{__('Your version is out of date and may be unreliable or insecure.')}
</p>
<p className="meta text-center">
{__('Want to know what has changed?')} See the{' '}
<Button
button="link"
label={__('release notes')}
href="https://github.com/lbryio/lbry-desktop/releases"
/>.
</p>
<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="meta">
{__('Want to know what has changed?')} See the{' '}
<Button
button="link"
label={__('release notes')}
href="https://github.com/lbryio/lbry-desktop/releases"
/>.
</p>
</div>
</Modal>
);
}

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

@ -1,12 +1,12 @@
// @flow
import React from 'react';
import { Form, FormRow, FormField } from 'component/common/form';
import { Form } from 'component/common/form';
import { Modal } from 'modal/modal';
import Button from 'component/button';
type Props = {
closeModal: () => void,
unlockWallet: string => void,
decryptWallet: () => void,
walletDecryptSucceded: boolean,
updateWalletStatus: boolean,
};
@ -16,11 +16,6 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
submitted: false, // Prior actions could be marked complete
};
submitDecryptForm() {
this.setState({ submitted: true });
this.props.decryptWallet();
}
componentDidUpdate() {
const { props, state } = this;
@ -30,12 +25,18 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
}
}
submitDecryptForm() {
this.setState({ submitted: true });
this.props.decryptWallet();
}
render() {
const { closeModal, walletDecryptSucceded } = this.props;
const { closeModalgaa } = this.props;
return (
<Modal
isOpen
title={__('Decrypt Wallet')}
contentLabel={__('Decrypt Wallet')}
type="confirm"
confirmButtonLabel={__('Decrypt Wallet')}
@ -43,18 +44,22 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
onConfirmed={() => this.submitDecryptForm()}
onAborted={closeModal}
>
<Form onSubmit={() => this.submitDecryptForm()}>
{__(
'Your wallet has been encrypted with a local password, performing this action will remove this password.'
)}
<div className="card__actions">
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
</Form>
<section className="card__content">
<Form onSubmit={() => this.submitDecryptForm()}>
<p>
{__(
'Your wallet has been encrypted with a local password, performing this action will remove this password.'
)}
</p>
<div className="card__actions">
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
</Form>
</section>
</Modal>
);
}

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

@ -82,6 +82,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Encrypt Wallet')}
contentLabel={__('Encrypt Wallet')}
type="confirm"
confirmButtonLabel={__('Encrypt Wallet')}
@ -89,54 +90,59 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
onConfirmed={() => this.submitEncryptForm()}
onAborted={closeModal}
>
<Form onSubmit={() => this.submitEncryptForm()}>
{__(
'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
)}
<FormRow padded>
<FormField
stretch
autoFocus
error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('New Password')}
type="password"
name="wallet-new-password"
onChange={event => this.onChangeNewPassword(event)}
/>
</FormRow>
<FormRow padded>
<FormField
stretch
error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('Confirm Password')}
type="password"
name="wallet-new-password-confirm"
onChange={event => this.onChangeNewPasswordConfirm(event)}
/>
</FormRow>
<br />
{__(
'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
)}
<FormRow padded>
<FormField
stretch
error={understandError === true ? 'You must enter "I understand"' : false}
label={__('Enter "I understand"')}
type="text"
name="wallet-understand"
onChange={event => this.onChangeUnderstandConfirm(event)}
/>
</FormRow>
<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>}
</Form>
<section className="card__content">
<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.'
)}
</p>
<FormRow padded>
<FormField
stretch
autoFocus
error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('New Password')}
type="password"
name="wallet-new-password"
onChange={event => this.onChangeNewPassword(event)}
/>
</FormRow>
<FormRow padded>
<FormField
stretch
error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('Confirm Password')}
type="password"
name="wallet-new-password-confirm"
onChange={event => this.onChangeNewPasswordConfirm(event)}
/>
</FormRow>
<p>
{__(
'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
)}
</p>
<FormRow padded>
<FormField
stretch
error={understandError === true ? 'You must enter "I understand"' : false}
label={__('Enter "I understand"')}
type="text"
name="wallet-understand"
onChange={event => this.onChangeUnderstandConfirm(event)}
/>
</FormRow>
<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>}
</Form>
</section>
</Modal>
);
}

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

@ -36,6 +36,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
return (
<Modal
isOpen
title={__('Unlock Wallet')}
contentLabel={__('Unlock Wallet')}
type="confirm"
shouldCloseOnOverlayClick={false}
@ -44,29 +45,33 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
onConfirmed={() => unlockWallet(password)}
onAborted={quit}
>
<Form onSubmit={() => unlockWallet(password)}>
{__(
'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
)}
<FormRow padded>
<FormField
stretch
autoFocus
error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
label={__('Wallet Password')}
type="password"
name="wallet-password"
onChange={event => this.onChangePassword(event)}
/>
</FormRow>
<div className="card__actions">
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
</Form>
<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.'
)}
</p>
<FormRow padded>
<FormField
stretch
autoFocus
error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
label={__('Wallet Password')}
type="password"
name="wallet-password"
onChange={event => this.onChangePassword(event)}
/>
</FormRow>
<div className="card__actions">
<Button
button="link"
label={__('Learn more')}
href="https://lbry.io/faq/wallet-encryption"
/>
</div>
</Form>
</section>
</Modal>
);
}

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

@ -6,9 +6,8 @@ const ModalWelcome = props => {
const { closeModal } = props;
return (
<Modal type="custom" isOpen contentLabel="Welcome to LBRY">
<section>
<h3 className="modal__header">{__('Welcome to LBRY')}</h3>
<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.')}
@ -18,7 +17,7 @@ const ModalWelcome = props => {
{__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}
</p>
<div className="modal__buttons">
<Button button="primary" onClick={closeModal} label={__("Blockchain Centaurs? I'm In")} />
<Button button="primary" onClick={closeModal} label={__("I'm In")} />
</div>
</section>
</Modal>

6
src/renderer/scss/_gui.scss
View file

@ -153,6 +153,10 @@ dd {
p {
font-family: 'metropolis-medium';
&:not(:first-of-type) {
margin-top: $spacing-vertical * 1/3;
}
}
.page {
@ -361,7 +365,7 @@ p {
.meta {
font-family: 'metropolis-medium';
font-size: 14px;
font-size: 0.8em;
color: var(--color-meta-light);
}

4
src/renderer/scss/_vars.scss
View file

@ -37,6 +37,7 @@ $large-breakpoint: 1921px;
--color-green-blue: #2ec1a8;
--color-purple: #8165b0;
--color-blue-grey: #203049;
--color-red-light: #fff6f6;
/* Colors */
--color-divider: #e3e3e3;
@ -157,6 +158,9 @@ $large-breakpoint: 1921px;
--success-msg-color: var(--color-green);
--success-msg-border: var(--color-green-blue);
--success-msg-bg: var(--color-green-light);
--error-msg-color: var(--color-error);
--error-msg-border: var(--color-error);
--error-msg-bg: var(--color-red-light);
/* File */
--file-tile-media-height: 125px;

8
src/renderer/scss/component/_card.scss
View file

@ -457,6 +457,14 @@
margin: $spacing-vertical * 1/3 0;
}
.card__error-msg {
border-left: 2px solid var(--error-msg-border);
color: var(--error-msg-color);
background-color: var(--error-msg-bg);
padding: $spacing-vertical * 1/3;
margin: $spacing-vertical * 1/3 0;
}
.card__media--autothumb {
color: red !important;
}

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

@ -21,7 +21,6 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: var(--modal-border);
background: var(--modal-bg);
overflow: auto;
@ -75,7 +74,6 @@
.modal__header {
font-size: 2em;
margin-bottom: $spacing-vertical * 2/3;
}
.modal__buttons {
@ -104,8 +102,8 @@
}
.error-modal__warning-symbol {
margin-top: 6px;
margin-right: 7px;
margin-top: -5px;
height: 28px;
}
.download-started-modal__file-path {
@ -118,15 +116,13 @@
}
.error-modal__error-list {
/*shitty hack/temp fix for long errors making modal unusable*/
border: 1px solid var(--input-border-color);
padding: 8px;
margin-top: $spacing-vertical * 1/3;
padding: $spacing-vertical * 1/3;
list-style: none;
max-height: 400px;
max-width: var(--modal-width);
overflow-y: scroll;
}
.error-modal__content p {
padding: 0 0 $spacing-vertical $spacing-vertical;
color: #a94442;
background-color: #ffe0df;
border-left: 2px solid #a94442;
}