0.27.0 cleanup #2182
43 changed files with 274 additions and 276 deletions
|
@ -28,11 +28,14 @@
|
|||
"rules": {
|
||||
"import/no-commonjs": "warn",
|
||||
"import/no-amd": "warn",
|
||||
"prettier/prettier": ["error", {
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 100,
|
||||
"singleQuote": true
|
||||
}],
|
||||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 100,
|
||||
"singleQuote": true
|
||||
}
|
||||
],
|
||||
"func-names": ["warn", "as-needed"],
|
||||
"jsx-a11y/label-has-for": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
|
@ -45,6 +48,7 @@
|
|||
"jsx-a11y/click-events-have-key-events": 0,
|
||||
"consistent-return": 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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -46,12 +46,11 @@
|
|||
"electron-log": "^2.2.12",
|
||||
"electron-updater": "^2.23.3",
|
||||
"electron-window-state": "^4.1.1",
|
||||
"filewatcher-webpack-plugin": "^1.2.0",
|
||||
"find-process": "^1.1.0",
|
||||
"formik": "^0.10.4",
|
||||
"hast-util-sanitize": "^1.1.2",
|
||||
"keytar": "^4.2.1",
|
||||
"lbry-redux": "lbryio/lbry-redux#820b6eeadf9e58c1e5027fd4d92808ba817b410e",
|
||||
"lbry-redux": "lbryio/lbry-redux#a22f8284110f957f3f645d42abc457ab8fb3fa8a",
|
||||
"lbryinc": "lbryio/lbryinc#b3bb8c67745235ef54baea95accaedaa4bb86d4d",
|
||||
"localforage": "^1.7.1",
|
||||
"mammoth": "^1.4.6",
|
||||
|
@ -115,6 +114,7 @@
|
|||
"eslint-plugin-jsx-a11y": "^6.0.3",
|
||||
"eslint-plugin-prettier": "^2.6.0",
|
||||
"eslint-plugin-react": "^7.7.0",
|
||||
"filewatcher-webpack-plugin": "^1.2.0",
|
||||
"flow-bin": "^0.89.0",
|
||||
"flow-typed": "^2.3.0",
|
||||
"husky": "^0.14.3",
|
||||
|
|
|
@ -227,7 +227,7 @@ class CategoryList extends PureComponent<Props, State> {
|
|||
<Button
|
||||
label={category}
|
||||
navigate="/show"
|
||||
navigateParams={{ uri: categoryLink }}
|
||||
navigateParams={{ uri: categoryLink, page: 1 }}
|
||||
/>
|
||||
<SubscribeButton
|
||||
button="alt"
|
||||
|
|
|
@ -76,7 +76,7 @@ class CreditAmount extends React.PureComponent<Props> {
|
|||
return (
|
||||
<span
|
||||
title={fullPrice}
|
||||
className={classnames('badge', {
|
||||
className={classnames({
|
||||
badge,
|
||||
'badge--cost': badge && amount > 0,
|
||||
'badge--free': badge && isFree,
|
||||
|
|
|
@ -20,10 +20,10 @@ export default class CopyableText extends React.PureComponent<Props> {
|
|||
input: ?HTMLInputElement;
|
||||
|
||||
render() {
|
||||
const { copyable, doToast, noSnackbar } = this.props;
|
||||
const { copyable, doToast } = this.props;
|
||||
|
||||
return (
|
||||
<FormRow verticallyCentered padded stretch>
|
||||
<FormRow verticallyCentered stretch>
|
||||
<input
|
||||
className="input-copyable form-field__input"
|
||||
readOnly
|
||||
|
|
|
@ -155,14 +155,16 @@ class FileTile extends React.PureComponent<Props> {
|
|||
<TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
|
||||
)}
|
||||
</div>
|
||||
<div className="media__subtitle">
|
||||
<UriIndicator uri={uri} link />
|
||||
</div>
|
||||
<div className="media__subtitle card--space-between">
|
||||
<div className="media__date">
|
||||
<DateTime timeAgo block={height} />
|
||||
<div className="media__subtext">
|
||||
<div className="media__subtitle">
|
||||
<UriIndicator uri={uri} link />
|
||||
</div>
|
||||
<div className="media__subtitle card--space-between">
|
||||
<div className="media__date">
|
||||
<DateTime timeAgo block={height} />
|
||||
</div>
|
||||
{size !== 'large' && this.renderFileProperties()}
|
||||
</div>
|
||||
{size !== 'large' && this.renderFileProperties()}
|
||||
</div>
|
||||
{displayDescription && (
|
||||
<div className="media__subtext">
|
||||
|
|
|
@ -41,16 +41,12 @@ const Header = (props: Props) => {
|
|||
<Button
|
||||
className="header__navigation-item header__navigation-item--wallet"
|
||||
description={__('Your wallet')}
|
||||
iconRight="LBC"
|
||||
title={`Your balance is ${balance} LBRY Credits`}
|
||||
label={
|
||||
isUpgradeAvailable ? (
|
||||
`${balance}`
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<span title={`${balance} LBC`}>{roundedBalance}</span>
|
||||
<LbcSymbol />
|
||||
</React.Fragment>
|
||||
)
|
||||
<React.Fragment>
|
||||
<span>{roundedBalance}</span>
|
||||
<LbcSymbol />
|
||||
</React.Fragment>
|
||||
}
|
||||
onClick={() => navigate('/wallet')}
|
||||
/>
|
||||
|
@ -97,18 +93,19 @@ const Header = (props: Props) => {
|
|||
/>
|
||||
|
||||
<Button
|
||||
className="header__navigation-item header__navigation-item--publish"
|
||||
className="header__navigation-item header__navigation-item--right-action"
|
||||
description={__('Publish content')}
|
||||
icon={ICONS.UPLOAD}
|
||||
iconSize={20}
|
||||
iconSize={24}
|
||||
label={isUpgradeAvailable ? '' : __('Publish')}
|
||||
onClick={() => navigate('/publish')}
|
||||
/>
|
||||
|
||||
{showUpgradeButton && (
|
||||
<Button
|
||||
button="primary"
|
||||
className="header__navigation-item header__navigation-item--right-action"
|
||||
icon={ICONS.DOWNLOAD}
|
||||
iconSize={24}
|
||||
label={__('Upgrade App')}
|
||||
onClick={downloadUpgradeRequested}
|
||||
/>
|
||||
|
|
|
@ -25,8 +25,9 @@ const SideBar = (props: Props) => {
|
|||
return (
|
||||
<nav className="navigation">
|
||||
<div className="navigation__links">
|
||||
{navLinks.primary.map(({ label, path, active }) => (
|
||||
{navLinks.primary.map(({ label, path, active, icon }) => (
|
||||
<Button
|
||||
icon={icon}
|
||||
className={classnames('navigation__link', {
|
||||
'navigation__link--active': active,
|
||||
})}
|
||||
|
@ -43,14 +44,14 @@ const SideBar = (props: Props) => {
|
|||
<ul>
|
||||
<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
|
||||
className={classnames('navigation__link', {
|
||||
'navigation__link--active': active,
|
||||
})}
|
||||
key={label}
|
||||
>
|
||||
<Button label={label} navigate={path} />
|
||||
<Button icon={icon} label={label} navigate={path} />
|
||||
|
||||
{
|
||||
// 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
|
||||
// Not sure if that has better performance
|
||||
}
|
||||
{!!subLinks.length && active && (
|
||||
<ul key="0" className="navigation__link-items">
|
||||
{subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
|
||||
<li
|
||||
className={classnames('navigation__link-item', {
|
||||
'navigation__link-item--active': subLinkActive,
|
||||
})}
|
||||
key={subPath}
|
||||
>
|
||||
{subPath ? (
|
||||
<Button label={subLabel} navigate={subPath} />
|
||||
) : (
|
||||
<span>{subLabel}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{!!subLinks.length &&
|
||||
active && (
|
||||
<ul key="0" className="navigation__link-items">
|
||||
{subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
|
||||
<li
|
||||
className={classnames('navigation__link-item', {
|
||||
'navigation__link-item--active': subLinkActive,
|
||||
})}
|
||||
key={subPath}
|
||||
>
|
||||
{subPath ? (
|
||||
<Button label={subLabel} navigate={subPath} />
|
||||
) : (
|
||||
<span>{subLabel}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
@ -56,12 +56,12 @@ class SocialShare extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
return (
|
||||
<section className="card__content">
|
||||
<React.Fragment>
|
||||
{speechShareable && (
|
||||
<div className="card__content">
|
||||
<label className="card__subtitle">{__('Web link')}</label>
|
||||
<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')}>
|
||||
<Button
|
||||
iconColor="blue"
|
||||
|
@ -95,7 +95,7 @@ class SocialShare extends React.PureComponent<Props> {
|
|||
<div className="card__content">
|
||||
<label className="card__subtitle">{__('LBRY App link')}</label>
|
||||
<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')}>
|
||||
<Button
|
||||
iconColor="blue"
|
||||
|
@ -119,7 +119,7 @@ class SocialShare extends React.PureComponent<Props> {
|
|||
<div className="card__actions">
|
||||
<Button button="link" label={__('Done')} onClick={onDone} />
|
||||
</div>
|
||||
</section>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -86,19 +86,20 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
|
|||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<header className="card__header">
|
||||
<h2 className="card__title">{__('Enter The Verification Code')}</h2>
|
||||
<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>
|
||||
</header>
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
</section>
|
||||
|
||||
<Form className="card__content" onSubmit={this.handleSubmit}>
|
||||
<FormRow padded>
|
||||
<FormField type="select" name="country-codes" onChange={this.handleSelect}>
|
||||
{countryCodes.map(country => (
|
||||
<option key={country.countryCallingCode} value={country.countryCallingCode}>
|
||||
{countryCodes.map((country, index) => (
|
||||
// eslint-disable-next-line
|
||||
<option key={index} value={country.countryCallingCode}>
|
||||
{os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
|
||||
{country.countryCallingCode}
|
||||
</option>
|
||||
|
@ -115,7 +116,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
|
|||
}}
|
||||
/>
|
||||
</FormRow>
|
||||
<div className="card__actions card__actions--center">
|
||||
<div className="card__actions">
|
||||
<Submit label="Submit" disabled={isPending} />
|
||||
{cancelButton}
|
||||
</div>
|
||||
|
|
|
@ -33,18 +33,17 @@ class UserPhoneVerify extends React.PureComponent {
|
|||
const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<header className="card__header">
|
||||
<h2 className="card__title">{__('Enter The Verification Code')}</h2>
|
||||
<p className="card__subtitle">
|
||||
<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>
|
||||
</header>
|
||||
</section>
|
||||
<Form className="card__content" onSubmit={this.handleSubmit.bind(this)}>
|
||||
<FormRow padded>
|
||||
<FormRow>
|
||||
<FormField
|
||||
type="text"
|
||||
name="code"
|
||||
|
|
|
@ -75,7 +75,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
|||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<FormRow>
|
||||
<FormRow className="card__content">
|
||||
<FormField
|
||||
autoFocus
|
||||
label={
|
||||
|
|
|
@ -35,3 +35,4 @@ export const FACEBOOK = 'Facebook';
|
|||
export const TWITTER = 'Twitter';
|
||||
export const CREDIT_CARD = 'CreditCard';
|
||||
export const SETTINGS = 'Settings';
|
||||
export const USERS = 'Users';
|
||||
|
|
|
@ -205,10 +205,10 @@ const init = () => {
|
|||
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<div>
|
||||
<React.Fragment>
|
||||
<App />
|
||||
<SnackBar />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</Provider>,
|
||||
document.getElementById('app')
|
||||
);
|
||||
|
|
|
@ -17,7 +17,6 @@ type ModalProps = {
|
|||
onConfirmed?: any => any,
|
||||
onAborted?: any => any,
|
||||
className?: string,
|
||||
overlayClassName?: string,
|
||||
children?: React.Node,
|
||||
extraContent?: React.Node,
|
||||
expandButtonLabel?: string,
|
||||
|
@ -51,7 +50,6 @@ export class Modal extends React.PureComponent<ModalProps> {
|
|||
onAborted,
|
||||
fullScreen,
|
||||
className,
|
||||
overlayClassName,
|
||||
title,
|
||||
...modalProps
|
||||
} = this.props;
|
||||
|
@ -63,9 +61,7 @@ export class Modal extends React.PureComponent<ModalProps> {
|
|||
modal: !fullScreen,
|
||||
'modal--fullscreen': fullScreen,
|
||||
})}
|
||||
overlayClassName={
|
||||
![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
|
||||
}
|
||||
overlayClassName="modal-overlay"
|
||||
>
|
||||
{title && (
|
||||
<header className="card__header">
|
||||
|
|
|
@ -40,13 +40,15 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
|
|||
onConfirmed={this.onAffirmPurchase}
|
||||
onAborted={cancelPurchase}
|
||||
>
|
||||
<p>
|
||||
{__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
|
||||
<strong>
|
||||
<FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
|
||||
</strong>{' '}
|
||||
{__('credits')}.
|
||||
</p>
|
||||
<section className="card__content">
|
||||
<p>
|
||||
{__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
|
||||
<strong>
|
||||
<FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
|
||||
</strong>{' '}
|
||||
{__('credits')}.
|
||||
</p>
|
||||
</section>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -25,29 +25,27 @@ 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}
|
||||
>
|
||||
<header className="card__header">
|
||||
<h2 className="card__title">{__('More Ways To Get LBRY Credits')}</h2>
|
||||
<p className="card__subtitle">
|
||||
{__('Are you sure you want to upload this thumbnail to spee.ch')}?
|
||||
</p>
|
||||
</header>
|
||||
<section className="card__content">
|
||||
<p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
|
||||
|
||||
<blockquote>{path}</blockquote>
|
||||
<FormRow>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="content_is_mature"
|
||||
postfix={__('Mature audiences only')}
|
||||
checked={nsfw}
|
||||
onChange={event => updatePublishForm({ nsfw: event.target.checked })}
|
||||
/>
|
||||
</FormRow>
|
||||
<blockquote>{path}</blockquote>
|
||||
<FormRow>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="content_is_mature"
|
||||
postfix={__('For mature audiences only')}
|
||||
checked={nsfw}
|
||||
onChange={event => updatePublishForm({ nsfw: event.target.checked })}
|
||||
/>
|
||||
</FormRow>
|
||||
</section>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -34,23 +34,21 @@ const ModalCreditIntro = (props: Props) => {
|
|||
)}
|
||||
{Boolean(totalRewardValue) && (
|
||||
<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} />{' '}
|
||||
{__('in free rewards for participating in the LBRY beta.')}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="card__content">
|
||||
<div className="card__actions card__actions--center">
|
||||
<Button button="primary" onClick={addBalance} label={__('Get Credits')} />
|
||||
<Button
|
||||
button="link"
|
||||
onClick={closeModal}
|
||||
label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div className="card__actions">
|
||||
<Button button="primary" onClick={addBalance} label={__('Get Credits')} />
|
||||
<Button
|
||||
button="link"
|
||||
onClick={closeModal}
|
||||
label={currentBalance <= 0 ? __('Use Without LBC') : __('Meh, Not Now')}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -49,23 +49,14 @@ class ModalDownloading extends React.PureComponent<Props> {
|
|||
<p>{__('After the install is complete, please reopen the app.')}</p>
|
||||
</React.Fragment>
|
||||
) : 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>
|
||||
|
||||
<div className="card__actions">
|
||||
{downloadComplete ? (
|
||||
<Button button="primary" label={__('Begin Upgrade')} onClick={startUpgrade} />
|
||||
) : null}
|
||||
<Button button="link" label={__('Cancel')} onClick={cancelUpgrade} />
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -51,7 +51,6 @@ class ModalError extends React.PureComponent<Props> {
|
|||
</React.Fragment>
|
||||
}
|
||||
className="error-modal"
|
||||
overlayClassName="error-modal-overlay"
|
||||
onConfirmed={closeModal}
|
||||
extraContent={errorInfo}
|
||||
>
|
||||
|
|
|
@ -23,9 +23,11 @@ class ModalFileTimeout extends React.PureComponent<Props> {
|
|||
onConfirmed={closeModal}
|
||||
>
|
||||
<section className="card__content">
|
||||
<p className="card__error-msg">
|
||||
<p className="error-modal__error-list">
|
||||
{__('LBRY was unable to download the stream')}:
|
||||
<div>{`"${title}"`}</div>
|
||||
<div>
|
||||
<b>{`"${title}"`}</b>
|
||||
</div>
|
||||
</p>
|
||||
</section>
|
||||
</Modal>
|
||||
|
|
|
@ -13,7 +13,6 @@ class ModalFirstReward extends React.PureComponent<Props> {
|
|||
return (
|
||||
<Modal
|
||||
type="alert"
|
||||
overlayClassName="modal-overlay modal-overlay--clear"
|
||||
isOpen
|
||||
contentLabel={__('Welcome to LBRY')}
|
||||
title={__('Your First Reward')}
|
||||
|
|
|
@ -14,6 +14,15 @@ type 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() {
|
||||
const { closeModal, phone, user } = this.props;
|
||||
|
||||
|
@ -36,7 +45,7 @@ class ModalPhoneCollection extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
return (
|
||||
<Modal type="custom" isOpen contentLabel="Phone">
|
||||
<Modal type="custom" isOpen contentLabel="Phone" title={this.getTitle()}>
|
||||
{this.renderInner()}
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
@ -60,19 +60,19 @@ 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}
|
||||
>
|
||||
<header className="card__header">
|
||||
<h2 className="card__title">{__('Remove File')}</h2>
|
||||
<p className="card__subtitle">
|
||||
<section className="card__content">
|
||||
<p>
|
||||
{__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '}
|
||||
{__('from the LBRY app?')}
|
||||
</p>
|
||||
</header>
|
||||
</section>
|
||||
<section className="card__content">
|
||||
<FormRow>
|
||||
<FormField
|
||||
|
@ -82,7 +82,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
|
|||
onChange={this.handleDeleteCheckboxClicked}
|
||||
/>
|
||||
</FormRow>
|
||||
{claimIsMine && (
|
||||
{(true || claimIsMine) && (
|
||||
<FormRow>
|
||||
<FormField
|
||||
prefix={__('Abandon the claim for this URI')}
|
||||
|
|
|
@ -63,11 +63,6 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
|
|||
const { type } =
|
||||
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 (
|
||||
<Modal
|
||||
isOpen
|
||||
|
|
|
@ -49,7 +49,16 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
|
|||
confirmButtonDisabled={rewardIsPending}
|
||||
>
|
||||
<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
|
||||
stretch
|
||||
autoFocus
|
||||
|
@ -59,17 +68,6 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
|
|||
error={error}
|
||||
value={rewardCode}
|
||||
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>
|
||||
</section>
|
||||
|
|
|
@ -16,7 +16,11 @@ class ModalTransactionFailed extends React.PureComponent<Props> {
|
|||
contentLabel={__('Transaction failed')}
|
||||
title={__('Transaction Failed')}
|
||||
onConfirmed={closeModal}
|
||||
/>
|
||||
>
|
||||
<section className="card__content">
|
||||
<p>{__('Sorry about that. Contact help@lbry.io if you continue to have issues.')}</p>
|
||||
</section>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { Form } from 'component/common/form';
|
||||
import { Modal } from 'modal/modal';
|
||||
import Button from 'component/button';
|
||||
|
||||
|
@ -45,20 +44,16 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
|
|||
onAborted={closeModal}
|
||||
>
|
||||
<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>
|
||||
<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.io/faq/wallet-encryption"
|
||||
/>.
|
||||
</p>
|
||||
</section>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
@ -101,19 +101,24 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
|
|||
onConfirmed={() => this.submitEncryptForm()}
|
||||
onAborted={closeModal}
|
||||
>
|
||||
<section className="card__content">
|
||||
<Form onSubmit={() => this.submitEncryptForm()}>
|
||||
<Form onSubmit={() => this.submitEncryptForm()}>
|
||||
<section className="card__content">
|
||||
<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.'
|
||||
)}
|
||||
)}{' '}
|
||||
<Button
|
||||
button="link"
|
||||
label={__('Learn more')}
|
||||
href="https://lbry.io/faq/wallet-encryption"
|
||||
/>.
|
||||
</p>
|
||||
<FormRow padded>
|
||||
<FormField
|
||||
stretch
|
||||
autoFocus
|
||||
error={passwordMismatch === true ? 'Passwords do not match' : false}
|
||||
label={__('New Password')}
|
||||
label={__('Password')}
|
||||
type="password"
|
||||
name="wallet-new-password"
|
||||
onChange={event => this.onChangeNewPassword(event)}
|
||||
|
@ -129,6 +134,8 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
|
|||
onChange={event => this.onChangeNewPasswordConfirm(event)}
|
||||
/>
|
||||
</FormRow>
|
||||
</section>
|
||||
<section className="card__content">
|
||||
<p>
|
||||
{__(
|
||||
'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)}
|
||||
/>
|
||||
</FormRow>
|
||||
<div className="card__actions">
|
||||
<Button
|
||||
button="link"
|
||||
label={__('Learn more')}
|
||||
href="https://lbry.io/faq/wallet-encryption"
|
||||
/>
|
||||
</div>
|
||||
<div className="card__actions" />
|
||||
{failMessage && <div className="error-text">{__(failMessage)}</div>}
|
||||
</Form>
|
||||
</section>
|
||||
</section>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,7 +5,6 @@ import { Modal } from 'modal/modal';
|
|||
import Button from 'component/button';
|
||||
|
||||
type Props = {
|
||||
closeModal: () => void,
|
||||
quit: () => void,
|
||||
unlockWallet: string => void,
|
||||
walletUnlockSucceded: boolean,
|
||||
|
@ -29,7 +28,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { quit, unlockWallet, walletUnlockSucceded, closeModal } = this.props;
|
||||
const { quit, unlockWallet, walletUnlockSucceded } = this.props;
|
||||
|
||||
const { password } = this.state;
|
||||
|
||||
|
@ -50,7 +49,12 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
|
|||
<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.io/faq/wallet-encryption"
|
||||
/>.
|
||||
</p>
|
||||
<FormRow padded>
|
||||
<FormField
|
||||
|
@ -63,13 +67,6 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
|
|||
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>
|
||||
|
|
|
@ -1,8 +1,13 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { Modal } from 'modal/modal';
|
||||
import Button from 'component/button';
|
||||
|
||||
const ModalWelcome = props => {
|
||||
type Props = {
|
||||
closeModal: () => void,
|
||||
};
|
||||
|
||||
const ModalWelcome = (props: Props) => {
|
||||
const { closeModal } = props;
|
||||
|
||||
return (
|
||||
|
@ -16,10 +21,10 @@ const ModalWelcome = props => {
|
|||
<p>
|
||||
{__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}
|
||||
</p>
|
||||
<div className="modal__buttons">
|
||||
<Button button="primary" onClick={closeModal} label={__("I'm In")} />
|
||||
</div>
|
||||
</section>
|
||||
<div className="card__actions">
|
||||
<Button button="primary" onClick={closeModal} label={__("I'm In")} />
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -86,23 +86,21 @@ class ChannelPage extends React.PureComponent<Props> {
|
|||
return (
|
||||
<Page notContained>
|
||||
<header className="channel-info">
|
||||
<h1>
|
||||
<h1 className="media__title">
|
||||
{name}
|
||||
{fetching && <BusyIndicator />}
|
||||
</h1>
|
||||
|
||||
<div className="channel-info__actions">
|
||||
<div className="channel-info__actions__group">
|
||||
<SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} />
|
||||
<Button
|
||||
button="alt"
|
||||
icon={icons.GLOBE}
|
||||
label={__('Share Channel')}
|
||||
onClick={() =>
|
||||
openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="channel-info__actions__group">
|
||||
<SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} />
|
||||
<Button
|
||||
button="alt"
|
||||
icon={icons.GLOBE}
|
||||
label={__('Share Channel')}
|
||||
onClick={() =>
|
||||
openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
@ -193,7 +193,7 @@ class FilePage extends React.Component<Props> {
|
|||
<UriIndicator uri={uri} link />
|
||||
</div>
|
||||
|
||||
<div className="media__subtitle__date">
|
||||
<div className="media__subtitle__date media__subtext">
|
||||
{__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -224,7 +224,7 @@ export const selectNavLinks = createSelector(
|
|||
},
|
||||
{
|
||||
label: 'Invite',
|
||||
// icon: TBD when we add icons back to the side nav
|
||||
icon: icons.USERS,
|
||||
path: '/invite',
|
||||
active: currentPage === 'invite',
|
||||
},
|
||||
|
|
|
@ -3,11 +3,20 @@
|
|||
position: relative;
|
||||
|
||||
svg {
|
||||
stroke-width: 1.5;
|
||||
stroke-width: 1.9;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
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 {
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
.channel-info {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
h1 {
|
||||
.media__title {
|
||||
user-select: text;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.channel-info__actions__group {
|
||||
margin-bottom: var(--spacing-vertical-large);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -76,7 +76,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-vertical-large);
|
||||
background-color: rgba($lbry-black, 0.7);
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.content__loading-text {
|
||||
|
@ -86,10 +86,12 @@
|
|||
.content__view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
|
@ -97,3 +99,14 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
@ -34,22 +34,10 @@
|
|||
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 {
|
||||
width: var(--header-height);
|
||||
height: var(--header-height);
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
|
@ -105,25 +93,32 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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--back,
|
||||
.header__navigation-item--forward,
|
||||
.header__navigation-item--home,
|
||||
.header__navigation-item--menu {
|
||||
width: var(--header-height);
|
||||
}
|
||||
|
||||
.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;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.btn__content {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.btn__label {
|
||||
|
@ -131,6 +126,14 @@
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $lbry-gray-1;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] & {
|
||||
svg {
|
||||
stroke: $lbry-white;
|
||||
|
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -5.5rem;
|
||||
bottom: -5rem;
|
||||
left: -20rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
.modal-overlay,
|
||||
.error-modal-overlay {
|
||||
.modal-overlay {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
@ -17,10 +16,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.modal-overlay--clear {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: $lbry-white;
|
||||
border: 1px solid $lbry-gray-3;
|
||||
|
@ -94,26 +89,6 @@
|
|||
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 {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium)
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
border-right: 1px solid rgba($lbry-gray-1, 0.9);
|
||||
font-size: 1.25rem;
|
||||
padding-top: var(--spacing-vertical-large);
|
||||
padding-right: var(--spacing-vertical-small);
|
||||
position: relative;
|
||||
|
||||
html[data-theme='dark'] & {
|
||||
|
@ -14,7 +15,7 @@
|
|||
// on smaller screen widths
|
||||
|
||||
@media (min-width: 601px) {
|
||||
width: 171px; // 1px is for the border
|
||||
min-width: 171px; // 1px is for the border
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
@ -100,7 +101,7 @@
|
|||
|
||||
color: $lbry-gray-5;
|
||||
cursor: default;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
|
|
|
@ -91,7 +91,10 @@
|
|||
|
||||
.table--transactions {
|
||||
td:nth-of-type(1) {
|
||||
// TX amounts
|
||||
width: 25%;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td:nth-of-type(2) {
|
||||
|
|
|
@ -5667,17 +5667,17 @@ lazy-val@^1.0.3:
|
|||
version "1.0.3"
|
||||
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"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/820b6eeadf9e58c1e5027fd4d92808ba817b410e"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/84b7d396934d57a37802aadbef71db91230a9404"
|
||||
dependencies:
|
||||
proxy-polyfill "0.1.6"
|
||||
reselect "^3.0.0"
|
||||
uuid "^3.3.2"
|
||||
|
||||
lbry-redux@lbryio/lbry-redux#84b7d396934d57a37802aadbef71db91230a9404:
|
||||
lbry-redux@lbryio/lbry-redux#a22f8284110f957f3f645d42abc457ab8fb3fa8a:
|
||||
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:
|
||||
proxy-polyfill "0.1.6"
|
||||
reselect "^3.0.0"
|
||||
|
|
Loading…
Reference in a new issue