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
43 changed files with 274 additions and 276 deletions

View file

@ -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
}
}

View file

@ -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",

View file

@ -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"

View file

@ -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,

View file

@ -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

View file

@ -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">

View file

@ -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}
/>

View file

@ -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>

View file

@ -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>
);
}
}

View file

@ -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>

View file

@ -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"

View file

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

View file

@ -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';

View file

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

View file

@ -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">

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -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>
);
};

View file

@ -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>
);
}

View file

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

View file

@ -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>

View file

@ -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')}

View file

@ -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>
);

View file

@ -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')}

View file

@ -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

View file

@ -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>

View file

@ -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>
);
}
}

View file

@ -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>
);

View file

@ -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>
);
}

View file

@ -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>

View file

@ -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>
);
};

View file

@ -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>

View file

@ -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>

View file

@ -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',
},

View file

@ -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 {

View file

@ -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);
}
}

View file

@ -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;
}

View file

@ -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;

View file

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

View file

@ -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)

View file

@ -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;

View file

@ -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) {

View file

@ -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"