CARD ALL THE THINGS
This commit is contained in:
Sean Yesmunt
parent
ecf5e52dd4
commit
22548f4304
14 changed files with 496 additions and 526 deletions
|
|
@ -272,7 +272,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
|
|||
<p className="card__subtitle">
|
||||
{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}
|
||||
</p>
|
||||
<div className="card__actions--top-space card__actions--center">
|
||||
<div className="card__actions--center">
|
||||
<Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
|
||||
</div>
|
||||
<div className="help">
|
||||
|
|
|
|||
|
|
@ -68,11 +68,11 @@ function UserSignIn(props: Props) {
|
|||
// We may want to keep a component rendered while something is being fetched, instead of replacing it with the large spinner
|
||||
// The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from
|
||||
// reward claiming (plus the balance updating after), channel creation, account syncing, and youtube transfer
|
||||
const canHijackSignInFlowWithSpinner = hasVerifiedEmail && balance === 0 && !getSyncError;
|
||||
const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !hasClaimedEmailAward && balance === 0 && !getSyncError;
|
||||
const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet;
|
||||
const isWaitingForSomethingToFinish =
|
||||
// If the user has claimed the email award, we need to wait until the balance updates sometime in the future
|
||||
!hasFetchedReward || (hasFetchedReward && hasClaimedEmailAward) || (syncEnabled && !hasSynced);
|
||||
!hasFetchedReward || (hasFetchedReward && balance === 0) || (syncEnabled && !hasSynced);
|
||||
|
||||
// The possible screens for the sign in flow
|
||||
const showEmail = !emailToVerify && !hasVerifiedEmail;
|
||||
|
|
@ -98,7 +98,7 @@ function UserSignIn(props: Props) {
|
|||
if (hasVerifiedEmail && !hasClaimedEmailAward && !hasFetchedReward && !delayForSync) {
|
||||
claimReward();
|
||||
}
|
||||
}, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced]);
|
||||
}, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced, balance]);
|
||||
|
||||
// Loop through this list from the end, until it finds a matching component
|
||||
// If it never finds one, assume the user has completed every step and redirect them
|
||||
|
|
|
|||
|
|
@ -28,13 +28,13 @@ class UserVerify extends React.PureComponent<Props> {
|
|||
const { errorMessage, isPending, verifyPhone } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<section className="section--large">
|
||||
<section className="section__header">
|
||||
<h1 className="section__title--large">{__('Extra Verification Needed')}</h1>
|
||||
<p>
|
||||
{__(
|
||||
"We weren't able to auto-approve you for rewards. Please complete one of the steps below to unlock them."
|
||||
)}{' '}
|
||||
<Button navigate="/" button="link" label={__('Skip')} />.
|
||||
<Button navigate="/" button="link" label={__('Skip')} />
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Button from 'component/button';
|
|||
import CopyableText from 'component/copyableText';
|
||||
import AdmZip from 'adm-zip';
|
||||
import path from 'path';
|
||||
import Card from 'component/common/card';
|
||||
|
||||
type Props = {
|
||||
daemonSettings: {
|
||||
|
|
@ -89,46 +90,55 @@ class WalletBackup extends React.PureComponent<Props, State> {
|
|||
const { wallet_dir: lbryumWalletDir } = daemonSettings;
|
||||
|
||||
return (
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Backup Your LBRY Credits')}</h2>
|
||||
|
||||
<ul className="card__subtitle ol--bulleted">
|
||||
<li>
|
||||
{__(
|
||||
'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{__(
|
||||
'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{__(
|
||||
'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<CopyableText copyable={lbryumWalletDir} snackMessage={__('Path copied.')} />
|
||||
<p className="help">
|
||||
{__(
|
||||
'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
|
||||
)}{' '}
|
||||
{/* @i18fixme */}
|
||||
{__('For more details on backing up and best practices')},{' '}
|
||||
<Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />.
|
||||
</p>
|
||||
<p className={'card__message card__message--error' + (this.state.errorMessage ? '' : ' hidden')}>
|
||||
{this.state.errorMessage}
|
||||
</p>
|
||||
<p className={'card__message card__message--success' + (this.state.successMessage ? '' : ' hidden')}>
|
||||
{this.state.successMessage}
|
||||
</p>
|
||||
<div className="card__actions">
|
||||
<Button button="inverse" label={__('Create Backup')} onClick={() => this.backupWalletDir(lbryumWalletDir)} />
|
||||
<Button button="link" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
|
||||
</div>
|
||||
</section>
|
||||
<Card
|
||||
title={__('Backup Your LBRY Credits')}
|
||||
subtitle={
|
||||
<ul>
|
||||
<li>
|
||||
{__(
|
||||
'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{__(
|
||||
'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{__(
|
||||
'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<CopyableText copyable={lbryumWalletDir} snackMessage={__('Path copied.')} />
|
||||
<p className="help">
|
||||
{__(
|
||||
'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
|
||||
)}{' '}
|
||||
{/* @i18fixme */}
|
||||
{__('For more details on backing up and best practices')},{' '}
|
||||
<Button button="link" href="https://lbry.com/faq/how-to-backup-wallet" label={__('see this article')} />.
|
||||
</p>
|
||||
<p className={'card__message card__message--error' + (this.state.errorMessage ? '' : ' hidden')}>
|
||||
{this.state.errorMessage}
|
||||
</p>
|
||||
<p className={'card__message card__message--success' + (this.state.successMessage ? '' : ' hidden')}>
|
||||
{this.state.successMessage}
|
||||
</p>
|
||||
<div className="card__actions">
|
||||
<Button
|
||||
button="inverse"
|
||||
label={__('Create Backup')}
|
||||
onClick={() => this.backupWalletDir(lbryumWalletDir)}
|
||||
/>
|
||||
<Button button="link" label={__('Open Folder')} onClick={() => shell.openItem(lbryumWalletDir)} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default function UserYoutubeTransfer(props: Props) {
|
|||
|
||||
<section className="section">
|
||||
{youtubeChannels.map(({ lbry_channel_name: channelName, channel_claim_id: claimId }) => (
|
||||
<div key={channelName} className={classnames('card--claim-preview-wrap')}>
|
||||
<div key={channelName} className={classnames('card--inline')}>
|
||||
<ClaimPreview disabled onClick={() => {}} actions={false} uri={`lbry://${channelName}#${claimId}`} />
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -45,10 +45,8 @@ export default function UserYoutubeTransfer(props: Props) {
|
|||
|
||||
{hasPendingYoutubeTransfer ? (
|
||||
<section className="section">
|
||||
<div className="section__header">
|
||||
<h1 className="section__title">{__('Transfer In Progress...')}</h1>
|
||||
<p className="section__subtitle">{__('You can now publish and comment using your official channel.')}</p>
|
||||
</div>
|
||||
<h1 className="section__title">{__('Transfer In Progress...')}</h1>
|
||||
<p className="section__subtitle">{__('You can now publish and comment using your official channel.')}</p>
|
||||
|
||||
<div className="card__actions">
|
||||
<Button
|
||||
|
|
@ -60,10 +58,8 @@ export default function UserYoutubeTransfer(props: Props) {
|
|||
</section>
|
||||
) : (
|
||||
<section className="section">
|
||||
<div className="section__header">
|
||||
<h1 className="section__title">{__('Begin Transfer')}</h1>
|
||||
<p className="section__subtitle">{__('Do it to it.')}</p>
|
||||
</div>
|
||||
<h1 className="section__title">{__('Begin Transfer')}</h1>
|
||||
<p className="section__subtitle">{__('Do it to it.')}</p>
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Transfer')} onClick={claimChannels} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export class Modal extends React.PureComponent<ModalProps> {
|
|||
<ReactModal
|
||||
{...modalProps}
|
||||
onRequestClose={onAborted || onConfirmed}
|
||||
className={classnames('card card--modal modal', className)}
|
||||
className={classnames('card modal', className)}
|
||||
overlayClassName="modal-overlay"
|
||||
>
|
||||
{title && <h1 className="card__title">{title}</h1>}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { Lbry } from 'lbry-redux';
|
|||
import Native from 'native';
|
||||
import Button from 'component/button';
|
||||
import Page from 'component/page';
|
||||
import Card from 'component/common/card';
|
||||
|
||||
type DeamonSettings = {
|
||||
data_dir: string | any,
|
||||
|
|
@ -122,77 +123,84 @@ class HelpPage extends React.PureComponent<Props, State> {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Read the FAQ')}</h2>
|
||||
<p className="card__subtitle">{__('Our FAQ answers many common questions.')}</p>
|
||||
<Card
|
||||
title={__('Read the FAQ')}
|
||||
subtitle={__('Our FAQ answers many common questions.')}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button
|
||||
href="https://lbry.com/faq/lbry-basics"
|
||||
label={__('Read the App Basics FAQ')}
|
||||
icon={icons.HELP}
|
||||
button="inverse"
|
||||
/>
|
||||
<Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="card__actions">
|
||||
<Button
|
||||
href="https://lbry.com/faq/lbry-basics"
|
||||
label={__('Read the App Basics FAQ')}
|
||||
icon={icons.HELP}
|
||||
button="inverse"
|
||||
/>
|
||||
<Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
|
||||
</div>
|
||||
</section>
|
||||
<Card
|
||||
title={__('Find Assistance')}
|
||||
subtitle={
|
||||
<p>
|
||||
{__('Live help is available most hours in the')} <strong>#help</strong>{' '}
|
||||
{__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')}
|
||||
</p>
|
||||
}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
|
||||
<Button button="inverse" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Find Assistance')}</h2>
|
||||
|
||||
<p className="card__subtitle">
|
||||
{__('Live help is available most hours in the')} <strong>#help</strong>{' '}
|
||||
{__('channel of our Discord chat room. Or you can always email us at help@lbry.com.')}
|
||||
</p>
|
||||
|
||||
<div className="card__actions">
|
||||
<Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
|
||||
<Button button="inverse" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Report a Bug or Suggest a New Feature')}</h2>
|
||||
|
||||
<p className="card__subtitle">
|
||||
{__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '}
|
||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />.
|
||||
</p>
|
||||
|
||||
<div className="card__actions">
|
||||
<Button navigate="/$/report" label={__('Help Us Out')} button="inverse" />
|
||||
</div>
|
||||
</section>
|
||||
<Card
|
||||
title={__('Report a Bug or Suggest a New Feature')}
|
||||
subtitle={
|
||||
<p>
|
||||
{__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '}
|
||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />.
|
||||
</p>
|
||||
}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button navigate="/$/report" label={__('Help Us Out')} button="inverse" />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* @if TARGET='app' */}
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('View your Log')}</h2>
|
||||
<Card
|
||||
title={__('View your Log')}
|
||||
subtitle={
|
||||
<p>
|
||||
{__('Did something go wrong? Have a look in your log file, or send it to')}{' '}
|
||||
<Button button="link" label={__('support')} href="https://lbry.com/faq/support" />.
|
||||
</p>
|
||||
}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
|
||||
<Button button="link" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<p className="card__subtitle">
|
||||
{__('Did something go wrong? Have a look in your log file, or send it to')}{' '}
|
||||
<Button button="link" label={__('support')} href="https://lbry.com/faq/support" />.
|
||||
</p>
|
||||
|
||||
<div className="card__actions">
|
||||
<Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
|
||||
<Button button="link" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* @if TARGET='app' */}
|
||||
<WalletBackup />
|
||||
{/* @endif */}
|
||||
|
||||
<section className="card">
|
||||
<header className="table__header">
|
||||
<h2 className="card__title">{__('About')}</h2>
|
||||
<h2 className="section__title">{__('About')}</h2>
|
||||
|
||||
{this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? (
|
||||
<p className="card__subtitle--status">
|
||||
<p className="section__subtitle">
|
||||
{__('A newer version of LBRY is available.')}{' '}
|
||||
<Button button="link" href={newVerLink} label={__('Download now!')} />
|
||||
</p>
|
||||
) : (
|
||||
<p className="card__subtitle">{__('Your LBRY app is up to date.')}</p>
|
||||
<p className="section__subtitle">{__('Your LBRY app is up to date.')}</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
|
|
@ -257,7 +265,6 @@ class HelpPage extends React.PureComponent<Props, State> {
|
|||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
{/* @endif */}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@
|
|||
import * as SETTINGS from 'constants/settings';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import * as React from 'react';
|
||||
import { FormField, FormFieldPrice, Form } from 'component/common/form';
|
||||
import { FormField, FormFieldPrice } from 'component/common/form';
|
||||
import Button from 'component/button';
|
||||
import I18nMessage from 'component/i18nMessage';
|
||||
import Page from 'component/page';
|
||||
import SettingLanguage from 'component/settingLanguage';
|
||||
import FileSelector from 'component/common/file-selector';
|
||||
import Card from 'component/common/card';
|
||||
import { getSavedPassword } from 'util/saved-passwords';
|
||||
|
||||
type Price = {
|
||||
|
|
@ -227,182 +228,193 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
</section>
|
||||
) : (
|
||||
<div>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Language')}</h2>
|
||||
<Form>
|
||||
<SettingLanguage />
|
||||
</Form>
|
||||
</section>
|
||||
<Card title={__('Language')} actions={<SettingLanguage />} />
|
||||
{/* @if TARGET='app' */}
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Download Directory')}</h2>
|
||||
<Card
|
||||
title={__('Download Directory')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FileSelector
|
||||
type="openDirectory"
|
||||
currentPath={daemonSettings.download_dir}
|
||||
onFileChosen={(newDirectory: string) => {
|
||||
setDaemonSetting('download_dir', newDirectory);
|
||||
}}
|
||||
/>
|
||||
<p className="help">{__('LBRY downloads will be saved here.')}</p>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="card__content">
|
||||
<FileSelector
|
||||
type="openDirectory"
|
||||
currentPath={daemonSettings.download_dir}
|
||||
onFileChosen={(newDirectory: string) => {
|
||||
setDaemonSetting('download_dir', newDirectory);
|
||||
}}
|
||||
/>
|
||||
<p className="help">{__('LBRY downloads will be saved here.')}</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Network and Data Settings')}</h2>
|
||||
<Form>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="save_files"
|
||||
onChange={() => setDaemonSetting('save_files', !daemonSettings.save_files)}
|
||||
checked={daemonSettings.save_files}
|
||||
label={__('Save all viewed content to your downloads directory')}
|
||||
helper={__(
|
||||
'Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.'
|
||||
<Card
|
||||
title={__('Network and Data Settings')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="save_files"
|
||||
onChange={() => setDaemonSetting('save_files', !daemonSettings.save_files)}
|
||||
checked={daemonSettings.save_files}
|
||||
label={__('Save all viewed content to your downloads directory')}
|
||||
helper={__(
|
||||
'Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.'
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="save_blobs"
|
||||
onChange={() => setDaemonSetting('save_blobs', !daemonSettings.save_blobs)}
|
||||
checked={daemonSettings.save_blobs}
|
||||
label={__('Save hosting data to help the LBRY network')}
|
||||
helper={
|
||||
<React.Fragment>
|
||||
{__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
|
||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card
|
||||
title={__('Max Purchase Price')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="no_max_purchase_no_limit"
|
||||
checked={disableMaxKeyFee}
|
||||
label={__('No Limit')}
|
||||
onChange={() => {
|
||||
this.onKeyFeeDisableChange(true);
|
||||
}}
|
||||
/>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="max_purchase_limit"
|
||||
checked={!disableMaxKeyFee}
|
||||
onChange={() => {
|
||||
this.onKeyFeeDisableChange(false);
|
||||
this.onKeyFeeChange(defaultMaxKeyFee);
|
||||
}}
|
||||
label={__('Choose limit')}
|
||||
/>
|
||||
|
||||
{!disableMaxKeyFee && (
|
||||
<FormFieldPrice
|
||||
name="max_key_fee"
|
||||
min={0}
|
||||
onChange={this.onKeyFeeChange}
|
||||
price={daemonSettings.max_key_fee ? daemonSettings.max_key_fee : defaultMaxKeyFee}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<Form>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="save_blobs"
|
||||
onChange={() => setDaemonSetting('save_blobs', !daemonSettings.save_blobs)}
|
||||
checked={daemonSettings.save_blobs}
|
||||
label={__('Save hosting data to help the LBRY network')}
|
||||
helper={
|
||||
<React.Fragment>
|
||||
{__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
|
||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
</Form>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Max Purchase Price')}</h2>
|
||||
|
||||
<Form>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="no_max_purchase_no_limit"
|
||||
checked={disableMaxKeyFee}
|
||||
label={__('No Limit')}
|
||||
onChange={() => {
|
||||
this.onKeyFeeDisableChange(true);
|
||||
}}
|
||||
/>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="max_purchase_limit"
|
||||
checked={!disableMaxKeyFee}
|
||||
onChange={() => {
|
||||
this.onKeyFeeDisableChange(false);
|
||||
this.onKeyFeeChange(defaultMaxKeyFee);
|
||||
}}
|
||||
label={__('Choose limit')}
|
||||
/>
|
||||
<p className="help">
|
||||
{__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
|
||||
</p>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
{!disableMaxKeyFee && (
|
||||
<FormFieldPrice
|
||||
name="max_key_fee"
|
||||
min={0}
|
||||
onChange={this.onKeyFeeChange}
|
||||
price={daemonSettings.max_key_fee ? daemonSettings.max_key_fee : defaultMaxKeyFee}
|
||||
<Card
|
||||
title={__('Purchase Confirmations')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="confirm_all_purchases"
|
||||
checked={!instantPurchaseEnabled}
|
||||
label={__('Always confirm before purchasing content')}
|
||||
onChange={() => {
|
||||
this.onInstantPurchaseEnabledChange(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<p className="help">
|
||||
{__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
|
||||
</p>
|
||||
</Form>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Purchase Confirmations')}</h2>
|
||||
|
||||
<Form>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="confirm_all_purchases"
|
||||
checked={!instantPurchaseEnabled}
|
||||
label={__('Always confirm before purchasing content')}
|
||||
onChange={() => {
|
||||
this.onInstantPurchaseEnabledChange(false);
|
||||
}}
|
||||
/>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="instant_purchases"
|
||||
checked={instantPurchaseEnabled}
|
||||
label={__('Only confirm purchases over a certain price')}
|
||||
onChange={() => {
|
||||
this.onInstantPurchaseEnabledChange(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
{instantPurchaseEnabled && (
|
||||
<FormFieldPrice
|
||||
name="confirmation_price"
|
||||
min={0.1}
|
||||
onChange={this.onInstantPurchaseMaxChange}
|
||||
price={instantPurchaseMax}
|
||||
<FormField
|
||||
type="radio"
|
||||
name="instant_purchases"
|
||||
checked={instantPurchaseEnabled}
|
||||
label={__('Only confirm purchases over a certain price')}
|
||||
onChange={() => {
|
||||
this.onInstantPurchaseEnabledChange(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<p className="help">
|
||||
{__("When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price.")}
|
||||
</p>
|
||||
</Form>
|
||||
</section>
|
||||
{instantPurchaseEnabled && (
|
||||
<FormFieldPrice
|
||||
name="confirmation_price"
|
||||
min={0.1}
|
||||
onChange={this.onInstantPurchaseMaxChange}
|
||||
price={instantPurchaseMax}
|
||||
/>
|
||||
)}
|
||||
|
||||
<p className="help">
|
||||
{__("When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price.")}
|
||||
</p>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* @endif */}
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Content Settings')}</h2>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="floating_player"
|
||||
onChange={() => {
|
||||
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
|
||||
clearPlayingUri();
|
||||
}}
|
||||
checked={floatingPlayer}
|
||||
label={__('Floating video player')}
|
||||
helper={__('Keep content playing in the corner when navigating to a different page.')}
|
||||
/>
|
||||
<Card
|
||||
title={__('Content Settings')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="floating_player"
|
||||
onChange={() => {
|
||||
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
|
||||
clearPlayingUri();
|
||||
}}
|
||||
checked={floatingPlayer}
|
||||
label={__('Floating video player')}
|
||||
helper={__('Keep content playing in the corner when navigating to a different page.')}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="autoplay"
|
||||
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
|
||||
checked={autoplay}
|
||||
label={__('Autoplay media files')}
|
||||
helper={__(
|
||||
'Autoplay video and audio files when navigating to a file, as well as the next related item when a file finishes playing.'
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="autoplay"
|
||||
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
|
||||
checked={autoplay}
|
||||
label={__('Autoplay media files')}
|
||||
helper={__(
|
||||
'Autoplay video and audio files when navigating to a file, as well as the next related item when a file finishes playing.'
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="show_nsfw"
|
||||
onChange={() => setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)}
|
||||
checked={showNsfw}
|
||||
label={__('Show mature content')}
|
||||
helper={__(
|
||||
'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
|
||||
)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card
|
||||
title={__('Blocked Channels')}
|
||||
actions={
|
||||
<p>
|
||||
{__('You have')} {userBlockedChannelsCount} {__('blocked')}{' '}
|
||||
{userBlockedChannelsCount === 1 && __('channel')}
|
||||
{userBlockedChannelsCount !== 1 && __('channels')}.{' '}
|
||||
<Button button="link" label={__('Manage')} navigate={`/$/${PAGES.BLOCKED}`} />
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="show_nsfw"
|
||||
onChange={() => setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)}
|
||||
checked={showNsfw}
|
||||
label={__('Show mature content')}
|
||||
helper={__(
|
||||
'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
|
||||
)}
|
||||
/>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Blocked Channels')}</h2>
|
||||
<p className="card__subtitle card__help ">
|
||||
{__('You have')} {userBlockedChannelsCount} {__('blocked')}{' '}
|
||||
{userBlockedChannelsCount === 1 && __('channel')}
|
||||
{userBlockedChannelsCount !== 1 && __('channels')}.{' '}
|
||||
<Button button="link" label={__('Manage')} navigate={`/$/${PAGES.BLOCKED}`} />
|
||||
</p>
|
||||
</section>
|
||||
{/* @if TARGET='app' */}
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Notifications')}</h2>
|
||||
<Form>
|
||||
<Card
|
||||
title={__('Notifications')}
|
||||
actions={
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="desktopNotification"
|
||||
|
|
@ -411,12 +423,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
label={__('Show Desktop Notifications')}
|
||||
helper={__('Get notified when a publish is confirmed, or when new content is available to watch.')}
|
||||
/>
|
||||
</Form>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Share Diagnostic Data')}</h2>
|
||||
|
||||
<Form>
|
||||
}
|
||||
/>
|
||||
<Card
|
||||
title={__('Share Diagnostic Data')}
|
||||
actions={
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="share_usage_data"
|
||||
|
|
@ -430,189 +441,195 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
}
|
||||
helper={__('You will be ineligible to earn rewards while diagnostics are not being shared.')}
|
||||
/>
|
||||
</Form>
|
||||
</section>
|
||||
}
|
||||
/>
|
||||
{/* @endif */}
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Appearance')}</h2>
|
||||
|
||||
<Form>
|
||||
<fieldset-section>
|
||||
<FormField
|
||||
name="theme_select"
|
||||
type="select"
|
||||
label={__('Theme')}
|
||||
onChange={this.onThemeChange}
|
||||
value={currentTheme}
|
||||
disabled={automaticDarkModeEnabled}
|
||||
>
|
||||
{themes.map(theme => (
|
||||
<option key={theme} value={theme}>
|
||||
{theme}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</fieldset-section>
|
||||
<fieldset-section>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="automatic_dark_mode"
|
||||
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
|
||||
checked={automaticDarkModeEnabled}
|
||||
label={__('Automatic dark mode')}
|
||||
/>
|
||||
{automaticDarkModeEnabled && (
|
||||
<fieldset-group class="fieldset-group--smushed">
|
||||
<FormField
|
||||
type="select"
|
||||
name="automatic_dark_mode_range"
|
||||
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
|
||||
value={darkModeTimes.from.hour}
|
||||
label={__('From')}
|
||||
>
|
||||
{startHours.map(time => (
|
||||
<option key={time} value={time}>
|
||||
{this.to12Hour(time)}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
<FormField
|
||||
type="select"
|
||||
name="automatic_dark_mode_range"
|
||||
label={__('To')}
|
||||
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
|
||||
value={darkModeTimes.to.hour}
|
||||
>
|
||||
{endHours.map(time => (
|
||||
<option key={time} value={time}>
|
||||
{this.to12Hour(time)}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</fieldset-group>
|
||||
)}
|
||||
</fieldset-section>
|
||||
</Form>
|
||||
</section>
|
||||
{/* @if TARGET='app' */}
|
||||
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Wallet Security')}</h2>
|
||||
|
||||
<Form>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="encrypt_wallet"
|
||||
onChange={() => this.onChangeEncryptWallet()}
|
||||
checked={walletEncrypted}
|
||||
label={__('Encrypt my wallet with a custom password')}
|
||||
helper={
|
||||
<React.Fragment>
|
||||
{__('Secure your local wallet data with a custom password.')}{' '}
|
||||
<strong>{__('Lost passwords cannot be recovered.')} </strong>
|
||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />.
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
{walletEncrypted && this.state.storedPassword && (
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="save_password"
|
||||
onChange={this.onConfirmForgetPassword}
|
||||
checked={this.state.storedPassword}
|
||||
label={__('Save Password')}
|
||||
helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="hide_balance"
|
||||
onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
|
||||
checked={hideBalance}
|
||||
label={__('Hide wallet balance in header')}
|
||||
/>
|
||||
</Form>
|
||||
</section>
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Experimental Settings')}</h2>
|
||||
|
||||
<Form>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="support_option"
|
||||
onChange={() => setClientSetting(SETTINGS.SUPPORT_OPTION, !supportOption)}
|
||||
checked={supportOption}
|
||||
label={__('Enable claim support')}
|
||||
helper={
|
||||
<I18nMessage
|
||||
tokens={{
|
||||
discovery_link: (
|
||||
<Button button="link" label={__('discovery')} href="https://lbry.com/faq/trending" />
|
||||
),
|
||||
vanity_names_link: (
|
||||
<Button button="link" label={__('vanity names')} href="https://lbry.com/faq/naming" />
|
||||
),
|
||||
}}
|
||||
<Card
|
||||
title={__('Appearance')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<fieldset-section>
|
||||
<FormField
|
||||
name="theme_select"
|
||||
type="select"
|
||||
label={__('Theme')}
|
||||
onChange={this.onThemeChange}
|
||||
value={currentTheme}
|
||||
disabled={automaticDarkModeEnabled}
|
||||
>
|
||||
This will add a Support button along side tipping. Similar to tips, supports help %discovery_link%
|
||||
but the LBC is returned to your wallet if revoked. Both also help secure your %vanity_names_link%.
|
||||
</I18nMessage>
|
||||
}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="auto_download"
|
||||
onChange={() => setClientSetting(SETTINGS.AUTO_DOWNLOAD, !autoDownload)}
|
||||
checked={autoDownload}
|
||||
label={__('Automatically download new content from my subscriptions')}
|
||||
helper={__(
|
||||
"The latest file from each of your subscriptions will be downloaded for quick access as soon as it's published."
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<Form>
|
||||
<fieldset-section>
|
||||
<FormField
|
||||
name="max_connections"
|
||||
type="select"
|
||||
label={__('Max Connections')}
|
||||
helper={__(
|
||||
'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
|
||||
{themes.map(theme => (
|
||||
<option key={theme} value={theme}>
|
||||
{theme}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</fieldset-section>
|
||||
<fieldset-section>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="automatic_dark_mode"
|
||||
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
|
||||
checked={automaticDarkModeEnabled}
|
||||
label={__('Automatic dark mode')}
|
||||
/>
|
||||
{automaticDarkModeEnabled && (
|
||||
<fieldset-group class="fieldset-group--smushed">
|
||||
<FormField
|
||||
type="select"
|
||||
name="automatic_dark_mode_range"
|
||||
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
|
||||
value={darkModeTimes.from.hour}
|
||||
label={__('From')}
|
||||
>
|
||||
{startHours.map(time => (
|
||||
<option key={time} value={time}>
|
||||
{this.to12Hour(time)}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
<FormField
|
||||
type="select"
|
||||
name="automatic_dark_mode_range"
|
||||
label={__('To')}
|
||||
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
|
||||
value={darkModeTimes.to.hour}
|
||||
>
|
||||
{endHours.map(time => (
|
||||
<option key={time} value={time}>
|
||||
{this.to12Hour(time)}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</fieldset-group>
|
||||
)}
|
||||
min={1}
|
||||
max={100}
|
||||
onChange={this.onMaxConnectionsChange}
|
||||
value={daemonSettings.max_connections_per_download}
|
||||
>
|
||||
{connectionOptions.map(connectionOption => (
|
||||
<option key={connectionOption} value={connectionOption}>
|
||||
{connectionOption}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</fieldset-section>
|
||||
</Form>
|
||||
</section>
|
||||
</fieldset-section>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
{/* @if TARGET='app' */}
|
||||
<Card
|
||||
title={__('Wallet Security')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="encrypt_wallet"
|
||||
onChange={() => this.onChangeEncryptWallet()}
|
||||
checked={walletEncrypted}
|
||||
label={__('Encrypt my wallet with a custom password')}
|
||||
helper={
|
||||
<React.Fragment>
|
||||
{__('Secure your local wallet data with a custom password.')}{' '}
|
||||
<strong>{__('Lost passwords cannot be recovered.')} </strong>
|
||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />.
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
{walletEncrypted && this.state.storedPassword && (
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="save_password"
|
||||
onChange={this.onConfirmForgetPassword}
|
||||
checked={this.state.storedPassword}
|
||||
label={__('Save Password')}
|
||||
helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="hide_balance"
|
||||
onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
|
||||
checked={hideBalance}
|
||||
label={__('Hide wallet balance in header')}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card
|
||||
title={__('Experimental Settings')}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="support_option"
|
||||
onChange={() => setClientSetting(SETTINGS.SUPPORT_OPTION, !supportOption)}
|
||||
checked={supportOption}
|
||||
label={__('Enable claim support')}
|
||||
helper={
|
||||
<I18nMessage
|
||||
tokens={{
|
||||
discovery_link: (
|
||||
<Button button="link" label={__('discovery')} href="https://lbry.com/faq/trending" />
|
||||
),
|
||||
vanity_names_link: (
|
||||
<Button button="link" label={__('vanity names')} href="https://lbry.com/faq/naming" />
|
||||
),
|
||||
}}
|
||||
>
|
||||
This will add a Support button along side tipping. Similar to tips, supports help
|
||||
%discovery_link% but the LBC is returned to your wallet if revoked. Both also help secure your
|
||||
%vanity_names_link%.
|
||||
</I18nMessage>
|
||||
}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="auto_download"
|
||||
onChange={() => setClientSetting(SETTINGS.AUTO_DOWNLOAD, !autoDownload)}
|
||||
checked={autoDownload}
|
||||
label={__('Automatically download new content from my subscriptions')}
|
||||
helper={__(
|
||||
"The latest file from each of your subscriptions will be downloaded for quick access as soon as it's published."
|
||||
)}
|
||||
/>
|
||||
<fieldset-section>
|
||||
<FormField
|
||||
name="max_connections"
|
||||
type="select"
|
||||
label={__('Max Connections')}
|
||||
helper={__(
|
||||
'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
|
||||
)}
|
||||
min={1}
|
||||
max={100}
|
||||
onChange={this.onMaxConnectionsChange}
|
||||
value={daemonSettings.max_connections_per_download}
|
||||
>
|
||||
{connectionOptions.map(connectionOption => (
|
||||
<option key={connectionOption} value={connectionOption}>
|
||||
{connectionOption}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</fieldset-section>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* @endif */}
|
||||
<section className="card card--section">
|
||||
<h2 className="card__title">{__('Application Cache')}</h2>
|
||||
|
||||
<p className="card__subtitle--status">
|
||||
{__(
|
||||
'This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<Button
|
||||
button="inverse"
|
||||
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
|
||||
onClick={this.clearCache}
|
||||
disabled={this.state.clearingCache}
|
||||
/>
|
||||
</section>
|
||||
<Card
|
||||
title={__('Application Cache')}
|
||||
subtitle={
|
||||
<p className="card__subtitle--status">
|
||||
{__(
|
||||
'This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.'
|
||||
)}
|
||||
</p>
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
button="inverse"
|
||||
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
|
||||
onClick={this.clearCache}
|
||||
disabled={this.state.clearingCache}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -17,19 +17,11 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card--section {
|
||||
position: relative;
|
||||
padding: var(--spacing-large);
|
||||
}
|
||||
|
||||
.card--space-between {
|
||||
@include between;
|
||||
}
|
||||
|
||||
.card--wallet-balance {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -45,17 +37,6 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card--modal {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card--fill {
|
||||
min-width: 25rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// "cards" inside cards
|
||||
.card--inline {
|
||||
border: 1px solid $lbry-gray-1;
|
||||
border-radius: var(--card-radius);
|
||||
|
|
@ -71,15 +52,6 @@
|
|||
min-width: 35rem;
|
||||
}
|
||||
|
||||
.card--claim-preview-selected {
|
||||
background-color: rgba($lbry-teal-1, 0.1);
|
||||
|
||||
&:hover {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
// C A R D
|
||||
// A C T I O N S
|
||||
|
||||
|
|
@ -107,37 +79,12 @@
|
|||
@include between;
|
||||
}
|
||||
|
||||
.card__actions--bottom-corner {
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card__actions--center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card__actions--top-corner {
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card__actions--top-space {
|
||||
padding-top: var(--spacing-small);
|
||||
}
|
||||
|
||||
.card__actions--table {
|
||||
padding: var(--spacing-medium);
|
||||
}
|
||||
|
||||
.card__content--large {
|
||||
font-size: var(--font-heading);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// C A R D
|
||||
// L I S T
|
||||
|
||||
|
|
|
|||
|
|
@ -51,8 +51,9 @@
|
|||
}
|
||||
|
||||
.main--empty {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
overflow: auto;
|
||||
padding: var(--spacing-large);
|
||||
word-break: break-word;
|
||||
box-shadow: none;
|
||||
|
||||
@media (min-width: 501px) {
|
||||
min-width: 500px;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ table,
|
|||
.table {
|
||||
background-color: transparent;
|
||||
margin: var(--spacing-small) 0;
|
||||
padding-top: var(--spacing-small);
|
||||
|
||||
[data-mode='dark'] & {
|
||||
th {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.section--large {
|
||||
margin-bottom: var(--spacing-main-padding);
|
||||
}
|
||||
|
||||
.section--padded {
|
||||
padding: var(--spacing-large);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,11 +49,11 @@ p {
|
|||
ul,
|
||||
ol {
|
||||
list-style: initial;
|
||||
margin-bottom: var(--spacing-large);
|
||||
|
||||
li {
|
||||
list-style-position: outside;
|
||||
margin: var(--spacing-medium) 0;
|
||||
margin: var(--spacing-medium);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -293,7 +293,3 @@ radio-toggle,
|
|||
border-color: var(--dm-color-04);
|
||||
}
|
||||
}
|
||||
|
||||
.rc-progress-line-path {
|
||||
stroke: $lbry-teal-3;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue