This commit is contained in:
Sean Yesmunt 2020-06-01 13:03:19 -04:00
parent 78422ccfb2
commit e7cdd6c13d
63 changed files with 809 additions and 455 deletions

View file

@ -94,6 +94,7 @@
"copy-webpack-plugin": "^4.6.0",
"country-data": "^0.0.31",
"cross-env": "^5.2.0",
"crypto-js": "^4.0.0",
"css-doodle": "^0.7.1",
"css-loader": "^2.1.0",
"cssnano": "^4.1.10",

View file

@ -638,7 +638,26 @@ export const icons = {
<g>
<polyline points="23 4 23 10 17 10" />
<polyline points="1 20 1 14 7 14" />
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />{' '}
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
</g>
),
[ICONS.BUY]: buildIcon(
<g>
<circle cx="9" cy="21" r="1" />
<circle cx="20" cy="21" r="1" />
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
</g>
),
[ICONS.SEND]: buildIcon(
<g>
<line x1="22" y1="2" x2="11" y2="13" />
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</g>
),
[ICONS.RECEIVE]: buildIcon(
<g>
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
</g>
),
};

View file

@ -15,17 +15,18 @@ type Props = {
authPage: boolean,
noHeader: boolean,
noFooter: boolean,
noSideNavigation: boolean,
};
function Page(props: Props) {
const { children, className, authPage = false, noHeader, noFooter } = props;
const { children, className, authPage = false, noHeader = false, noFooter = false, noSideNavigation = false } = props;
return (
<Fragment>
{!noHeader && <Header authHeader={authPage} />}
<div className={classnames('main-wrapper__inner')}>
<main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
{!authPage && !noHeader && <SideNavigation />}
{!authPage && !noSideNavigation && <SideNavigation />}
</div>
{/* @if TARGET='web' */}
{!noFooter && <Footer />}

View file

@ -39,6 +39,7 @@ import Welcome from 'page/welcome';
import CreatorDashboard from 'page/creatorDashboard';
import RewardsVerifyPage from 'page/rewardsVerify';
import CheckoutPage from 'page/checkoutPage';
import BuyPage from 'page/buy';
import { parseURI } from 'lbry-redux';
import { SITE_TITLE, WELCOME_VERSION } from 'config';
@ -196,6 +197,7 @@ function AppRouter(props: Props) {
<PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
<Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
<Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />

View file

@ -90,7 +90,7 @@ function UserPasswordReset(props: Props) {
<Button
button="primary"
type="submit"
label={loading ? __('Update Password') : __('Updating Password')}
label={loading ? __('Updating Password') : __('Update Password')}
disabled={!password || loading}
/>
<Button button="link" label={__('Cancel')} onClick={handleRestart} />

View file

@ -1,18 +1,11 @@
import { connect } from 'react-redux';
import {
selectBalance,
selectTotalBalance,
selectClaimsBalance,
selectSupportsBalance,
selectTipsBalance,
} from 'lbry-redux';
import { selectBalance, selectClaimsBalance, selectSupportsBalance, selectTipsBalance } from 'lbry-redux';
import { doOpenModal } from 'redux/actions/app';
import { selectClaimedRewards, selectSyncHash } from 'lbryinc';
import WalletBalance from './view';
const select = state => ({
balance: selectBalance(state),
totalBalance: selectTotalBalance(state),
claimsBalance: selectClaimsBalance(state) || 0,
supportsBalance: selectSupportsBalance(state) || 0,
tipsBalance: selectTipsBalance(state) || 0,
@ -20,9 +13,6 @@ const select = state => ({
hasSynced: Boolean(selectSyncHash(state)),
});
export default connect(
select,
{
doOpenModal,
}
)(WalletBalance);
export default connect(select, {
doOpenModal,
})(WalletBalance);

View file

@ -7,6 +7,7 @@ import CreditAmount from 'component/common/credit-amount';
import Button from 'component/button';
import Icon from 'component/common/icon';
import HelpLink from 'component/common/help-link';
import Card from 'component/common/card';
type Props = {
balance: number,
@ -24,88 +25,101 @@ const WalletBalance = (props: Props) => {
return (
<React.Fragment>
<section className="columns">
<Card
title={
<span>
{(balance || balance === 0) && (
<CreditAmount badge={false} amount={balance} precision={8} showLBC={false} />
)}{' '}
<span className="section__title--small">LBC</span>
</span>
}
subtitle={__('Available Balance')}
actions={
<div className="section__actions">
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
<Button
button="secondary"
label={__('Receive')}
icon={ICONS.RECEIVE}
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
/>
<Button
button="secondary"
label={__('Send')}
icon={ICONS.SEND}
onClick={() => doOpenModal(MODALS.WALLET_SEND)}
/>
</div>
}
/>
<div>
<h2 className="section__title">{__('Available Balance')}</h2>
<span className="section__title--large">
{(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
</span>
<React.Fragment>
{/* @if TARGET='app' */}
{hasSynced ? (
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.LOCK} />
<h2 className="section__title--small">
{__('A backup of your wallet is synced with lbry.tv.')}
<HelpLink href="https://lbry.com/faq/account-sync" />
</h2>
</div>
</div>
) : (
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.UNLOCK} />
<h2 className="section__title--small">
{__(
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
)}
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
</h2>
</div>
</div>
)}
{/* @endif */}
<div className="section__actions">
<Button button="primary" label={__('Your Address')} onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)} />
<Button
button="secondary"
icon={ICONS.SEND}
label={__('Send Credits')}
onClick={() => doOpenModal(MODALS.WALLET_SEND)}
/>
</div>
{/* @if TARGET='app' */}
{hasSynced ? (
<div className="section">
<div className="section__flex">
<Icon sectionIcon iconColor={'blue'} icon={ICONS.LOCK} />
<h2 className="section__title--small">
{__('A backup of your wallet is synced with lbry.tv.')}
<HelpLink href="https://lbry.com/faq/account-sync" />
</h2>
</div>
</div>
) : (
<div className="section">
<div className="section__flex">
<Icon sectionIcon iconColor={'blue'} icon={ICONS.UNLOCK} />
<h2 className="section__title--small">
{__(
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
)}
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
</h2>
</div>
</div>
)}
{/* @endif */}
</div>
<div>
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.TIP} />
<h2 className="section__title--small">
<strong>
<CreditAmount badge={false} amount={tipsBalance} precision={8} />
</strong>{' '}
{__('earned and bound in tips')}
<HelpLink href="https://lbry.com/faq/tipping" />
</h2>
</div>
</div>
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.LOCK} />
<div>
<Icon sectionIcon icon={ICONS.TIP} />
<h2 className="section__title--small">
<strong>
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
<CreditAmount badge={false} amount={tipsBalance} precision={8} />
</strong>{' '}
{__('currently staked')}
{__('earned and bound in tips')}
</h2>
<div className="section__subtitle">
<dl>
<dt>{__('... in your publishes')}</dt>
<dd>
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
</dd>
</div>
</div>
<dt>{__('... in your supports')}</dt>
<dd>
<CreditAmount badge={false} amount={supportsBalance} precision={8} />
</dd>
</dl>
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.LOCK} />
<div>
<h2 className="section__title--small">
<strong>
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
</strong>{' '}
{__('currently staked')}
</h2>
<div className="section__subtitle">
<dl>
<dt>{__('... in your publishes')}</dt>
<dd>
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
</dd>
<dt>{__('... in your supports')}</dt>
<dd>
<CreditAmount badge={false} amount={supportsBalance} precision={8} />
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
</div>
</section>
</React.Fragment>

View file

@ -60,7 +60,6 @@ export const MENU = 'Menu';
export const BACKUP = 'Database';
export const TRANSACTIONS = 'FileText';
export const LBRY = 'Lbry';
export const SEND = 'Send';
export const DISCOVER = 'Compass';
export const VISUALIZER_ON = 'Eye';
export const VISUALIZER_OFF = 'EyeOff';
@ -102,3 +101,6 @@ export const ANALYTICS = 'BarChart2';
export const PURCHASED = 'Key';
export const CIRCLE = 'Circle';
export const PINNED = 'Pinned';
export const BUY = 'Buy';
export const SEND = 'Send';
export const RECEIVE = 'Receive';

62
ui/constants/moonpay.js Normal file
View file

@ -0,0 +1,62 @@
export const SUPPORTED_MOONPAY_COUNTRIES = [
'Argentina',
'Australia',
'Austria',
'Belgium',
'Brazil',
'Bulgaria',
'Canada',
'Chile',
'Colombia',
'Croatia',
'Cyprus',
'Czech Republic',
'Denmark',
'Estonia',
'Finland',
'France',
'Germany',
'Greece',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Ireland',
'Israel',
'Italy',
'Japan',
'Kuwait',
'Latvia',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Malaysia',
'Malta',
'Mauritius',
'Mexico',
'Netherlands',
'New Zealand',
'Norway',
'Philippines',
'Poland',
'Portugal',
'Qatar',
'Romania',
'Russia',
'Saudi Arabia',
'Singapore',
'Slovakia',
'Slovenia',
'South Africa',
'South Korea',
'Spain',
'Sweden',
'Switzerland',
'Taiwan',
'Thailand',
'Turkey',
'United Arab Emirates',
'United Kingdom',
'Viet Nam',
];

View file

@ -37,3 +37,4 @@ exports.WELCOME = 'welcome';
exports.CREATOR_DASHBOARD = 'dashboard';
exports.CHECKOUT = 'checkout';
exports.CODE_2257 = '2257';
exports.BUY = 'buy';

View file

@ -37,7 +37,7 @@ import ModalMobileNavigation from 'modal/modalMobileNavigation';
import ModalSetReferrer from 'modal/modalSetReferrer';
import ModalRepost from 'modal/modalRepost';
import ModalSignOut from 'modal/modalSignOut';
import ModalLiquidateSupports from 'modal/modalSupportsLiquidate';
import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
import ModalConfirmAge from 'modal/modalConfirmAge';
import ModalFileSelection from 'modal/modalFileSelection';
@ -137,12 +137,12 @@ function ModalRouter(props: Props) {
return <ModalRepost {...modalProps} />;
case MODALS.SIGN_OUT:
return <ModalSignOut {...modalProps} />;
case MODALS.LIQUIDATE_SUPPORTS:
return <ModalLiquidateSupports {...modalProps} />;
case MODALS.CONFIRM_AGE:
return <ModalConfirmAge {...modalProps} />;
case MODALS.FILE_SELECTION:
return <ModalFileSelection {...modalProps} />;
case MODALS.LIQUIDATE_SUPPORTS:
return <ModalSupportsLiquidate {...modalProps} />;
default:
return null;
}

16
ui/page/buy/index.js Normal file
View file

@ -0,0 +1,16 @@
import { connect } from 'react-redux';
import { selectGettingNewAddress, selectReceiveAddress, doGetNewAddress } from 'lbry-redux';
import { selectUserEmail, selectUser, doUserSetCountry } from 'lbryinc';
import BuyPage from './view';
const select = state => ({
receiveAddress: selectReceiveAddress(state),
gettingNewAddress: selectGettingNewAddress(state),
email: selectUserEmail(state),
user: selectUser(state),
});
export default connect(select, {
doGetNewAddress,
doUserSetCountry,
})(BuyPage);

161
ui/page/buy/view.jsx Normal file
View file

@ -0,0 +1,161 @@
// @flow
import React from 'react';
import Page from 'component/page';
import Card from 'component/common/card';
import Spinner from 'component/spinner';
import hmacSHA256 from 'crypto-js/hmac-sha256';
import Base64 from 'crypto-js/enc-base64';
import { countries as countryData } from 'country-data';
import { FormField } from 'component/common/form';
import { SUPPORTED_MOONPAY_COUNTRIES } from 'constants/moonpay';
import { useHistory } from 'react-router';
import Button from 'component/button';
import Nag from 'component/common/nag';
const MOONPAY_KEY = process.env.MOONPAY_SECRET_KEY;
const COUNTRIES = Array.from(
new Set(
countryData.all
.map(country => country.name)
.sort((a, b) => {
if (a > b) {
return 1;
}
if (b > a) {
return -1;
}
return 0;
})
)
);
type Props = {
receiveAddress: ?string,
gettingNewAddress: boolean,
email: string,
user: ?User,
doGetNewAddress: () => void,
doUserSetCountry: string => void,
};
export default function BuyPage(props: Props) {
const { receiveAddress, gettingNewAddress, doGetNewAddress, email, user, doUserSetCountry } = props;
const initialCountry = user && user.country;
const [url, setUrl] = React.useState();
const [country, setCountry] = React.useState(initialCountry);
const [ShowPurchaseScreen, setShowPurchaseScreen] = React.useState(false);
const isValid = SUPPORTED_MOONPAY_COUNTRIES.includes(country);
const { goBack } = useHistory();
React.useEffect(() => {
if (country) {
doUserSetCountry(country);
}
// uncomment to auto show the purchase screen based on their chosen country
// if (isValid) {
// setShowPurchaseScreen(true);
// }
}, [country, doUserSetCountry, isValid, setShowPurchaseScreen]);
React.useEffect(() => {
if (!receiveAddress && !gettingNewAddress) {
doGetNewAddress();
}
}, [doGetNewAddress, receiveAddress, gettingNewAddress]);
React.useEffect(() => {
if (MOONPAY_KEY && !url && receiveAddress) {
let url = `https://buy.moonpay.io?apiKey=pk_live_xNFffrN5NWKy6fu0ggbV8VQIwRieRzy&colorCode=%23257761&currencyCode=lbc&showWalletAddressForm=true&walletAddress=${receiveAddress}`;
if (email) {
url += `&email=${encodeURIComponent(email)}`;
}
const query = new URL(url).search;
const signature = Base64.stringify(hmacSHA256(query, MOONPAY_KEY));
setUrl(`${url}&signature=${encodeURIComponent(signature)}`);
}
}, [url, setUrl, receiveAddress, email]);
return (
<Page noSideNavigation className="main--buy">
{!user && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{user && (
<>
{ShowPurchaseScreen ? (
<Card
title={__('Purchase LBC')}
subtitle={__('You can purchase LBC now.')}
actions={
url ? (
<iframe
allow="accelerometer; autoplay; camera; gyroscope; payment"
frameBorder="0"
src={url}
width="100%"
>
<p>{__('Your browser does not support iframes.')}</p>
</iframe>
) : (
<div className="main--empty">
<Spinner delayed />
</div>
)
}
/>
) : (
<Card
title={__('What Country Do You Live In?')}
subtitle={__('Only people from certain countries are elligible to purchase LBC.')}
nag={country && !isValid && <Nag relative type="helpful" message={"This country isn't supported yet."} />}
actions={
<div>
<div className="section">
<FormField
label={__('Country')}
type="select"
name="country-codes"
value={country}
onChange={e => setCountry(e.target.value)}
>
<option value="" disabled defaultValue>
{__('Select your country')}
</option>
{COUNTRIES.map((country, index) => (
<option key={country} value={country}>
{country}
</option>
))}
</FormField>
</div>
{country && (
<div className="section">
{isValid ? (
<div className="section__actions">
<Button button="primary" label={__('Continue')} onClick={() => setShowPurchaseScreen(true)} />
</div>
) : (
<div className="section__actions">
<Button button="primary" label={__('Go Back')} onClick={() => goBack()} />
<Button button="link" label={__('Try Anyway')} onClick={() => setShowPurchaseScreen(true)} />
</div>
)}
</div>
)}
</div>
}
/>
)}
</>
)}
</Page>
);
}

View file

@ -40,11 +40,16 @@ class RewardsPage extends PureComponent<Props> {
if (user && !user.is_reward_approved && rewardsEnabled) {
if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) {
return <RewardAuthIntro />;
return (
<div className="section">
<RewardAuthIntro />
</div>
);
}
return (
<Card
className="section"
title={__('Reward Validation Pending')}
body={
<React.Fragment>
@ -156,7 +161,7 @@ class RewardsPage extends PureComponent<Props> {
return (
<Page>
{this.renderPageHeader()}
{this.renderUnclaimedRewards()}
<div className="section">{this.renderUnclaimedRewards()}</div>
{<RewardListClaimed />}
</Page>
);

View file

@ -1,11 +1,12 @@
import { connect } from 'react-redux';
import { selectBalance } from 'lbry-redux';
import { doOpenModal } from 'redux/actions/app';
import Wallet from './view';
const select = state => ({});
const select = state => ({
balance: selectBalance(state),
});
const perform = dispatch => ({});
export default connect(
select,
perform
)(Wallet);
export default connect(select, {
doOpenModal,
})(Wallet);

View file

@ -1,23 +1,69 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
import React from 'react';
import { withRouter } from 'react-router';
import WalletBalance from 'component/walletBalance';
import TxoList from 'component/txoList';
import Page from 'component/page';
import Yrbl from 'component/yrbl';
import Button from 'component/button';
import Spinner from 'component/spinner';
type Props = {
history: { action: string, push: string => void, replace: string => void },
location: { search: string, pathname: string },
balance: number,
doOpenModal: string => void,
};
const WalletPage = (props: Props) => {
const { location } = props;
const { location, balance, doOpenModal } = props;
const { search } = location;
const showIntro = balance === 0;
const loading = balance === undefined;
return (
<Page>
<WalletBalance />
<TxoList search={search} />
{loading && (
<div className="main--empty">
<Spinner delayed />
</div>
)}
{!loading && (
<>
{showIntro ? (
<div className="main--empty">
<Yrbl
title={__('Your Wallet is Empty')}
subtitle={
<div>
<p>
There are a lot of ways to get LBC! You can have your friend send you a few, earn rewards, or
purchase your own.
</p>
<div className="section__actions">
<Button button="primary" label={__('Earn Rewards')} navigate={`/$/${PAGES.REWARDS}`} />
<Button
button="secondary"
label={__('Send To Your Address')}
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
/>
<Button button="alt" icon={ICONS.SEND} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
</div>
</div>
}
/>
</div>
) : (
<>
<WalletBalance />
<TxoList search={search} />
</>
)}
</>
)}
</Page>
);
};

View file

@ -5,7 +5,7 @@ import Page from 'component/page';
export default function Welcome() {
return (
<Page noHeader className="main--auth-page">
<Page noHeader noSideNavigation className="main--auth-page">
<PrivacyAgreement />
</Page>
);

View file

@ -18,7 +18,7 @@
// Inline Video Ads
.ads__claim-item {
border-bottom: 1px solid var(--color-border);
padding: var(--spacing-medium);
padding: var(--spacing-m);
background-color: var(--color-ads-background);
display: flex;
@ -44,7 +44,7 @@
display: flex;
flex-direction: column;
justify-content: center;
padding-left: var(--spacing-large);
padding-left: var(--spacing-l);
@media (max-width: $breakpoint-small) {
padding-left: 0;

View file

@ -33,8 +33,8 @@
.button--close {
z-index: 1;
position: absolute;
top: var(--spacing-miniscule);
right: var(--spacing-miniscule);
top: var(--spacing-xxs);
right: var(--spacing-xxs);
padding: 0.3rem;
transition: all var(--transition-duration) var(--transition-style);
border-radius: var(--card-radius);
@ -56,13 +56,13 @@
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-medium) var(--spacing-small);
padding: var(--spacing-m) var(--spacing-s);
}
}
.button--header-close {
background-color: var(--color-primary-alt);
padding: var(--spacing-small);
padding: var(--spacing-s);
}
.button--download-link {
@ -88,11 +88,11 @@
// Handle icons on the left or right side of the button label
svg + .button__label,
.button__label + svg {
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
}
.button-toggle {
padding: 0 var(--spacing-medium);
padding: 0 var(--spacing-m);
height: var(--height-button);
font-size: var(--font-base);
border: 1px solid var(--color-border);
@ -101,7 +101,7 @@ svg + .button__label,
margin: 0;
background-color: var(--color-card-background);
@media (max-width: $breakpoint-small) {
padding: var(--spacing-medium) var(--spacing-small);
padding: var(--spacing-m) var(--spacing-s);
}
svg {
opacity: 0.5;
@ -116,7 +116,7 @@ svg + .button__label,
&:last-of-type {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}
}

View file

@ -6,7 +6,7 @@
border: 1px solid var(--color-border);
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
}
@ -17,7 +17,7 @@
.card--section {
position: relative;
padding: var(--spacing-large);
padding: var(--spacing-l);
}
.card--reward-total {
@ -31,7 +31,7 @@
.card--inline {
border: 1px solid var(--color-border);
border-radius: var(--card-radius);
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
&:last-of-type {
margin-bottom: 0;
@ -44,7 +44,7 @@
.card--claim-preview-wrap {
@extend .card;
margin: var(--spacing-xlarge) 0;
margin: var(--spacing-xl) 0;
min-width: 35rem;
}
@ -56,19 +56,19 @@
.card__actions {
display: flex;
align-items: center;
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
&:only-child {
margin-top: 0;
}
> *:not(:last-child) {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
> * {
padding-bottom: var(--spacing-medium);
padding-bottom: var(--spacing-m);
}
flex-flow: wrap;
justify-content: space-between;
@ -77,7 +77,7 @@
.card__title-section {
@extend .section__flex;
padding: var(--spacing-medium) var(--spacing-large);
padding: var(--spacing-m) var(--spacing-l);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -85,7 +85,7 @@
}
.card__title-section--body-list {
padding: var(--spacing-medium);
padding: var(--spacing-m);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -117,18 +117,18 @@
.card-stack {
.card:not(:last-of-type) {
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
}
}
.card__list {
column-count: 2;
column-gap: var(--spacing-large);
column-gap: var(--spacing-l);
display: block;
.card {
display: inline-block;
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
}
@media (max-width: $breakpoint-small) {
@ -141,7 +141,7 @@
.card__message {
border-left: 0.5rem solid;
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-l);
background-color: var(--color-primary-alt);
border-color: var(--color-primary);
}
@ -162,19 +162,19 @@
font-size: var(--font-title);
font-weight: var(--font-weight-light);
& > *:not(:last-child) {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
/* .badge rule inherited from file page prices, should be refactored */
.badge {
float: right;
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
}
}
.card__title-actions {
align-self: flex-start;
padding: var(--spacing-medium);
padding: var(--spacing-m);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -182,7 +182,7 @@
}
.card__title.card__title--deprecated {
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
.card__title--between {
@ -204,7 +204,7 @@
align-items: flex-start;
.icon__wrapper {
margin-right: var(--spacing-large);
margin-right: var(--spacing-l);
}
}
@ -221,12 +221,12 @@
.card__subtitle {
color: var(--color-text-subtitle);
margin: var(--spacing-small) 0;
margin: var(--spacing-s) 0;
font-size: var(--font-body);
}
.card__body {
padding: var(--spacing-large);
padding: var(--spacing-l);
&:not(.card__body--no-title) {
padding-top: 0;
@ -238,14 +238,14 @@
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-large);
padding: var(--spacing-l);
}
}
.card__main-actions {
padding: var(--spacing-large);
padding: var(--spacing-l);
padding-bottom: 0;
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
border-top: 1px solid var(--color-border);
&:only-child {
@ -254,15 +254,15 @@
}
.card__body-actions {
padding: var(--spacing-large);
padding: var(--spacing-l);
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
padding: var(--spacing-s);
}
}
.card__header-actions {
border-top: 1px solid var(--color-border);
padding: var(--spacing-large);
padding: var(--spacing-l);
width: 100%;
}
@ -276,12 +276,12 @@
align-items: center;
:not(:first-child) {
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
}
}
.card__expand-btn {
padding: var(--spacing-medium);
padding: var(--spacing-m);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -292,10 +292,10 @@
.card__body,
.card__main-actions {
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
padding: var(--spacing-s);
padding-bottom: 0;
margin: 0;
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
}
@ -303,7 +303,7 @@
@extend .help;
display: flex;
align-items: center;
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
&:only-child,
&:first-child {
@ -311,6 +311,6 @@
}
> *:not(:last-child) {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
}

View file

@ -28,7 +28,7 @@ $metadata-z-index: 1;
@media (max-width: $breakpoint-small) {
// Yikes
// I, Sean Yesmunt, take full responsibility for this monster
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xlarge) + var(--spacing-medium));
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
}
}
@ -37,7 +37,7 @@ $metadata-z-index: 1;
height: 5rem;
width: 5rem;
background-size: cover;
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
.channel-thumbnail--small {
@ -49,9 +49,9 @@ $metadata-z-index: 1;
position: absolute;
height: var(--channel-thumbnail-width);
width: var(--channel-thumbnail-width);
left: var(--spacing-medium);
left: var(--spacing-m);
top: 4rem;
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
box-shadow: var(--card-box-shadow);
@media (max-width: $breakpoint-small) {
@ -102,22 +102,22 @@ $metadata-z-index: 1;
z-index: $metadata-z-index;
// Jump over the thumbnail photo because it is absolutely positioned
// Then add normal page spacing, _then_ add the actual padding
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
padding-right: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
margin-top: var(--spacing-xlarge);
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
padding-right: var(--spacing-m);
padding-bottom: var(--spacing-m);
margin-top: var(--spacing-xl);
min-width: 0;
width: 100%;
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-medium);
padding-left: var(--spacing-m);
margin-top: 0;
}
}
.channel__title {
display: inline;
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
overflow: hidden;
text-overflow: ellipsis;
font-size: xx-large;
@ -126,11 +126,11 @@ $metadata-z-index: 1;
// Quick hack to get this to work
// We should have a generic style for "header with button next to it"
.button {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
padding-top: var(--spacing-xlarge);
padding-top: var(--spacing-xl);
}
}
@ -151,37 +151,37 @@ $metadata-z-index: 1;
.channel__quick-actions {
display: flex;
flex-direction: row;
margin-top: var(--spacing-small);
margin-left: var(--spacing-medium);
margin-top: var(--spacing-s);
margin-left: var(--spacing-m);
position: absolute;
top: 0;
right: var(--spacing-medium);
margin-top: var(--spacing-medium);
right: var(--spacing-m);
margin-top: var(--spacing-m);
z-index: $metadata-z-index;
flex-wrap: wrap;
font-size: var(--font-base);
> * {
padding: 0 var(--spacing-xsmall);
padding: 0 var(--spacing-xs);
&:not(:last-child) {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
}
@media (max-width: $breakpoint-small) {
> * {
margin-bottom: var(--spacing-xsmall);
margin-bottom: var(--spacing-xs);
}
}
}
.channel-name--inline {
margin-left: var(--spacing-xsmall);
margin-left: var(--spacing-xs);
}
.menu__list.channel__list {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
margin-left: 0;
border-radius: var(--border-radius);
background: transparent;
@ -210,7 +210,7 @@ $metadata-z-index: 1;
}
.channel__list-item {
padding-right: calc(var(--spacing-xlarge) + var(--spacing-small) * 2);
padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
}
@ -221,7 +221,7 @@ $metadata-z-index: 1;
display: flex;
align-items: center;
background-color: var(--color-card-background);
padding: var(--spacing-small);
padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border);
.channel-thumbnail {
@ -231,8 +231,8 @@ $metadata-z-index: 1;
.icon {
color: var(--color-menu-icon);
margin-left: var(--spacing-large);
margin-right: var(--spacing-small);
margin-left: var(--spacing-l);
margin-right: var(--spacing-s);
}
&:hover {

View file

@ -4,21 +4,32 @@
}
}
.claim-list--card-body {
.claim-preview {
padding: 0 var(--spacing-m);
padding-right: 0;
@media (max-width: $breakpoint-small) {
padding: 0;
}
}
}
.claim-list__header {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: var(--spacing-medium) 0;
margin: var(--spacing-m) 0;
margin-top: 0;
font-size: var(--font-body);
.spinner {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
}
.claim-list__dropdown {
padding: 0 var(--spacing-medium);
padding: 0 var(--spacing-m);
@media (max-width: $breakpoint-small) {
margin-left: 0;
@ -32,7 +43,7 @@
color: var(--color-text-subtitle);
.icon {
margin-right: var(--spacing-xsmall);
margin-right: var(--spacing-xs);
}
@media (max-width: $breakpoint-small) {
@ -51,10 +62,10 @@
display: flex;
align-items: center;
margin-left: auto;
padding-top: var(--spacing-medium);
padding-top: var(--spacing-m);
& > * {
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
}
@media (max-width: $breakpoint-small) {
@ -63,7 +74,7 @@
}
.claim-preview__wrapper {
padding: var(--spacing-medium);
padding: var(--spacing-m);
list-style: none;
}
@ -76,7 +87,7 @@
}
.claim-preview__wrapper--small {
padding: var(--spacing-small);
padding: var(--spacing-s);
}
.claim-preview {
@ -95,7 +106,7 @@
@include handleClaimListGifThumbnail($width);
flex-shrink: 0;
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
.channel-thumbnail {
@ -149,7 +160,7 @@
}
.claim-preview--padded {
padding: var(--spacing-small);
padding: var(--spacing-s);
}
.claim-preview--inline {
@ -205,7 +216,7 @@
flex: 1;
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
}
@ -248,12 +259,12 @@
display: flex;
position: relative;
overflow: visible;
padding: var(--spacing-medium);
padding: var(--spacing-m);
.media__thumb {
width: var(--file-list-thumbnail-width);
flex-shrink: 0;
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
}
@ -263,7 +274,7 @@
.claim-upload__progress--inner {
background: var(--color-primary-alt);
padding: var(--spacing-miniscule);
padding: var(--spacing-xxs);
}
//
@ -280,21 +291,21 @@
.claim-grid__wrapper {
&:not(:first-of-type) {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
@media (max-width: $breakpoint-small) {
&:not(:first-of-type) {
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
}
}
.claim-grid__title {
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
&:not(:first-of-type) {
margin-top: var(--spacing-xlarge);
margin-top: var(--spacing-xl);
}
}
@ -307,14 +318,14 @@
}
.claim-preview--tile {
$width: calc((100% - var(--spacing-medium) * 3) / 4);
$width: calc((100% - var(--spacing-m) * 3) / 4);
width: $width;
@include handleClaimTileGifThumbnail($width);
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
margin-right: 0;
margin-top: 0;
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
justify-content: flex-start;
@media (min-width: $breakpoint-medium) {
@ -334,7 +345,7 @@
}
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
$width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 2) / 3);
$width: calc((100vw - var(--side-nav-width) - (var(--spacing-l) * 4) - var(--spacing-m) * 2) / 3);
width: $width;
@include handleClaimTileGifThumbnail($width);
@ -349,7 +360,7 @@
}
@media (max-width: $breakpoint-small) {
$width: calc((100vw / 2) - var(--spacing-small) * 2);
$width: calc((100vw / 2) - var(--spacing-s) * 2);
width: $width;
@include handleClaimTileGifThumbnail($width);
margin-bottom: var(--spacing-large);
@ -367,7 +378,7 @@
.claim-tile__title {
margin-bottom: 0;
margin: var(--spacing-small);
margin: var(--spacing-s);
font-weight: 600;
font-size: var(--font-small);
color: var(--color-text);
@ -380,14 +391,14 @@
.claim-tile__info {
display: flex;
margin-top: var(--spacing-small);
padding: var(--spacing-small);
margin-top: var(--spacing-s);
padding: var(--spacing-s);
border-top: 1px solid var(--color-border);
color: var(--color-subtitle);
.channel-thumbnail {
@include handleChannelGif(2.1rem);
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}
}
@ -414,8 +425,8 @@
.claim-tile__file-properties {
position: absolute;
bottom: var(--spacing-miniscule);
right: var(--spacing-miniscule);
bottom: var(--spacing-xxs);
right: var(--spacing-xxs);
background-color: var(--color-black);
padding: 0.3rem;
border-radius: var(--border-radius);
@ -442,31 +453,31 @@
}
.claim-preview__repost-author {
transform: translateY(calc(var(--spacing-xsmall) * -1));
transform: translateY(calc(var(--spacing-xs) * -1));
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
.icon {
margin-right: var(--spacing-miniscule);
margin-right: var(--spacing-xxs);
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
}
}
.claim-tile__repost-author {
margin: var(--spacing-small);
margin: var(--spacing-s);
margin-bottom: 0;
}
.claim-preview__hover-actions {
display: none;
position: absolute;
top: var(--spacing-miniscule);
right: var(--spacing-miniscule);
top: var(--spacing-xxs);
right: var(--spacing-xxs);
& > * {
color: var(--color-black);
background-color: var(--color-white);
padding: var(--spacing-xsmall);
padding: var(--spacing-xs);
border-radius: var(--border-radius);
}
}

View file

@ -5,9 +5,9 @@
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding: var(--spacing-medium);
padding-bottom: var(--spacing-small);
margin-top: var(--spacing-medium);
padding: var(--spacing-m);
padding-bottom: var(--spacing-s);
margin-top: var(--spacing-m);
color: var(--color-text-subtitle);
@media (max-width: $breakpoint-small) {
@ -17,7 +17,7 @@
}
.claim-search__dropdown {
padding: 0 var(--spacing-medium);
padding: 0 var(--spacing-m);
max-width: 400px;
font-size: var(--font-body);
background-color: var(--color-card-background);
@ -45,14 +45,14 @@
}
&:not(:first-of-type) {
padding-left: var(--spacing-medium);
padding-left: var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
padding-left: 0px;
&:not(:first-of-type) {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
&:not(:first-of-type) {
@ -80,6 +80,6 @@
flex-wrap: nowrap;
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
}

View file

@ -1,5 +1,5 @@
.comments {
padding-top: var(--spacing-large);
padding-top: var(--spacing-l);
}
.comment {
@ -10,10 +10,10 @@
&:not(:last-of-type) {
border-bottom: 1px solid var(--color-border);
padding: var(--spacing-medium) 0;
padding: var(--spacing-m) 0;
}
&:last-of-type {
padding-top: var(--spacing-medium);
padding-top: var(--spacing-m);
}
.channel-thumbnail {
@ -22,24 +22,24 @@
}
.comment__create--reply {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
.comment__reply {
border-left: 5px solid var(--color-primary-alt);
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
.comment__author-thumbnail {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
}
.comment__reply-button {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
.comment__body_container {
padding-right: var(--spacing-small);
padding-right: var(--spacing-s);
flex: 1;
}
@ -47,7 +47,7 @@
display: flex;
justify-content: space-between;
text-overflow: ellipsis;
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
.comment__meta-information {
@ -57,12 +57,12 @@
.comment__message {
white-space: pre-line;
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
.comment__author {
text-overflow: ellipsis;
padding-right: var(--spacing-xsmall);
padding-right: var(--spacing-xs);
}
.comment__time {
@ -82,7 +82,7 @@
.comment__menu-option {
display: flex;
align-items: center;
padding: var(--spacing-small);
padding: var(--spacing-s);
font-size: var(--font-small);
}

View file

@ -1,14 +1,14 @@
.content__viewer {
@extend .card;
position: absolute;
top: var(--spacing-large);
top: var(--spacing-l);
}
.content__viewer--inline {
max-height: var(--inline-player-max-height);
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-xsmall);
margin-top: var(--spacing-xs);
}
}
@ -17,7 +17,7 @@
margin-bottom: 0;
height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
overflow: hidden;
left: calc(var(--spacing-large) + var(--spacing-small));
left: calc(var(--spacing-l) + var(--spacing-s));
z-index: 9999;
&:hover {
@ -48,7 +48,7 @@
height: 1.5rem;
top: 0;
position: relative;
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
svg {
color: var(--color-white);
@ -78,7 +78,7 @@
.content__info {
cursor: grab;
height: var(--floating-viewer-info-height);
padding: var(--spacing-medium);
padding: var(--spacing-m);
display: flex;
flex-direction: column;
align-items: flex-start;
@ -154,12 +154,12 @@
align-items: center;
flex-direction: column;
justify-content: center;
padding: 0 var(--spacing-large);
padding: 0 var(--spacing-l);
background-color: #000;
&.content__loading--document {
background-color: var(--color-card-background);
padding: calc(var(--spacing-xlarge) * 3) 0;
padding: calc(var(--spacing-xl) * 3) 0;
.content__loading-text {
color: var(--color-text);

View file

@ -1,6 +1,6 @@
.expandable--closed,
.expandable--open {
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
.expandable--closed {

View file

@ -26,14 +26,14 @@
min-width: 400px;
align-items: center;
flex-direction: column;
padding: var(--spacing-large);
padding: var(--spacing-l);
.main-icon {
margin: var(--spacing-small);
margin: var(--spacing-s);
}
p {
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
}
}
}

View file

@ -2,5 +2,5 @@
width: 100%;
overflow: auto;
max-height: 220px;
padding: var(--spacing-small);
padding: var(--spacing-s);
}

View file

@ -4,11 +4,11 @@
align-items: center;
font-size: var(--font-small);
color: var(--color-text-help);
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
white-space: nowrap;
& > *:not(:last-child) {
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}
@media (max-width: $breakpoint-xsmall) {
@ -18,11 +18,11 @@
.file-properties--large {
flex-wrap: wrap;
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
margin-left: 0;
& > * {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
}
@ -37,7 +37,7 @@
}
& > *:not(:last-child) {
margin-right: var(--spacing-miniscule);
margin-right: var(--spacing-xxs);
}
@media (max-width: $breakpoint-xsmall) {

View file

@ -5,11 +5,11 @@
.card + .file-render,
.card + .file-page__video-container,
.card + .content__cover {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
.card + .file-render {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
.file-page__md {
@ -62,7 +62,7 @@
@media (max-width: $breakpoint-small) {
width: 100%;
padding: var(--spacing-small);
padding: var(--spacing-s);
}
}
}
@ -100,7 +100,7 @@
overflow: hidden;
.comic-viewer {
width: 100%;
height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
max-height: var(--inline-player-max-height);
}
}
@ -112,7 +112,7 @@
for now, since we don't know size, let's make as large as we can without being larger than available area
*/
iframe {
height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
}
}
@ -121,7 +121,7 @@
overflow: hidden;
.three-viewer {
height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
max-height: var(--inline-player-max-height);
}
}
@ -141,7 +141,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-large);
padding: var(--spacing-l);
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
@ -175,15 +175,15 @@
.file-viewer__overlay-title {
text-align: center;
font-size: var(--font-large);
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
.file-viewer__overlay-secondary {
color: var(--color-text-subtitle);
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
.file-viewer__overlay-actions {
.button + .button {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
}
@ -216,7 +216,7 @@
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
.button {
padding: var(--spacing-small);
padding: var(--spacing-s);
color: var(--color-white);
.button__label {
@ -230,7 +230,7 @@
.credit-amount,
.icon--Key {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
}
@ -246,11 +246,11 @@
display: flex;
align-items: center;
font-size: var(--font-small);
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
white-space: nowrap;
& > *:not(:last-child) {
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}
}
@ -276,7 +276,7 @@
.CodeMirror .CodeMirror-lines {
// is there really a .CodeMirror inside a .CodeMirror?
padding: var(--spacing-small) 0;
padding: var(--spacing-s) 0;
}
.CodeMirror-code {
@ -287,11 +287,11 @@
.CodeMirror-gutters {
background-color: var(--color-gray-1);
border-right: 1px solid var(--color-gray-4);
padding-right: var(--spacing-medium);
padding-right: var(--spacing-m);
}
.CodeMirror-line {
padding-left: var(--spacing-medium);
padding-left: var(--spacing-m);
}
.CodeMirror-linenumber {
@ -405,7 +405,7 @@
font-size: var(--font-small);
}
.autoplay-countdown__counter {
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
.autoplay-countdown__button {

View file

@ -3,28 +3,28 @@
justify-content: center;
max-width: 80%;
margin: auto;
padding: var(--spacing-xlarge);
padding: var(--spacing-xl);
font-size: var(--font-small);
@media (max-width: $breakpoint-small) {
max-width: 100%;
padding: var(--spacing-medium);
padding: var(--spacing-m);
flex-direction: column;
}
}
.footer__section {
margin-left: var(--spacing-xlarge);
margin-left: var(--spacing-xl);
@media (max-width: $breakpoint-small) {
margin-left: var(--spacing-large);
margin-left: var(--spacing-l);
}
}
.footer__section-title {
@extend .help;
font-weight: 300;
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
.footer__link {

View file

@ -17,7 +17,7 @@ input[type='number'] {
fieldset-group {
+ fieldset-group {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
&.fieldset-group--smushed {
@ -46,8 +46,8 @@ fieldset-group {
}
&.fieldgroup--paginate {
padding-bottom: var(--spacing-large);
margin-top: var(--spacing-large);
padding-bottom: var(--spacing-l);
margin-top: var(--spacing-l);
align-items: flex-end;
justify-content: center;
}
@ -74,7 +74,7 @@ fieldset-group {
.form-field__prefix {
white-space: nowrap;
padding: 0.5rem;
padding-right: var(--spacing-small);
padding-right: var(--spacing-s);
height: var(--height-input);
border: 1px solid;
border-top-left-radius: var(--border-radius);
@ -95,7 +95,7 @@ fieldset-group {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-color: var(--color-input-border);
padding-left: var(--spacing-xsmall);
padding-left: var(--spacing-xs);
}
}
}
@ -122,13 +122,13 @@ fieldset-group {
.form-field__help {
@extend .help;
margin-top: var(--spacing-miniscule);
margin-bottom: var(--spacing-small);
margin-top: var(--spacing-xxs);
margin-bottom: var(--spacing-s);
}
.form-field__help + .checkbox,
.form-field__help + .radio {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
.form-field__conjuction {
@ -147,11 +147,11 @@ fieldset-group {
fieldset-section {
.form-field__internal-option {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
margin-left: 2.2rem;
&:first-of-type {
margin-top: var(--spacing-small); // Extra specificity needed here since _section.scss is applied after this file
margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file
}
}
}

View file

@ -4,12 +4,12 @@
align-items: flex-end;
&:not(.form-row--padded):not(:last-of-type) {
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
.form-field {
&:not(:first-of-type) {
padding-left: var(--spacing-medium);
padding-left: var(--spacing-m);
}
&.form-field--stretch {
@ -24,7 +24,7 @@
button + input,
input + button {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
}
@ -34,8 +34,8 @@
.form-row--padded {
// Ignore the class name, margin allows these to collapse with other items
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-l);
}
.form-row--right {

View file

@ -36,10 +36,10 @@
display: flex;
align-items: center;
margin: auto;
padding: 0 var(--spacing-large);
padding: 0 var(--spacing-l);
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
padding: var(--spacing-s);
}
}
@ -70,7 +70,7 @@
@media (max-width: $breakpoint-small) {
display: block;
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
svg {
stroke: var(--color-text);
@ -80,14 +80,14 @@
.header__menu--with-balance {
button:first-child {
margin-left: var(--spacing-large);
margin-right: var(--spacing-medium);
margin-left: var(--spacing-l);
margin-right: var(--spacing-m);
}
}
.header__navigation-arrows {
display: flex;
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}
.header__navigation-item {
@ -117,7 +117,7 @@
width: var(--height-button);
background-color: var(--color-header-button);
border-radius: 1.5rem;
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
&:hover {
background-color: var(--color-primary-alt);
@ -138,7 +138,7 @@
.header__navigation-item--lbry {
font-weight: var(--font-weight-bold);
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
.lbry-icon {
height: 2rem;
@ -155,7 +155,7 @@
}
.header__navigation-item--balance {
margin: 0 var(--spacing-medium);
margin: 0 var(--spacing-m);
font-weight: var(--font-weight-bold);
}
@ -169,7 +169,7 @@
.header__navigation-button {
margin: 0;
padding: var(--spacing-miniscule) var(--spacing-medium);
padding: var(--spacing-xxs) var(--spacing-m);
display: flex;
align-items: center;
@ -182,7 +182,7 @@
.header__navigation-button-help {
@extend .help;
margin-top: 0;
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
}
.header__auth-buttons {
@ -191,6 +191,6 @@
font-weight: var(--font-weight-bold);
& > *:not(:last-child) {
margin: 0 var(--spacing-medium);
margin: 0 var(--spacing-m);
}
}

View file

@ -35,11 +35,11 @@
.icon--help {
color: var(--color-subtitle);
margin-left: var(--spacing-xsmall);
margin-left: var(--spacing-xs);
opacity: 0.7;
top: 2px;
}
.icon--hidden {
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}

View file

@ -1,18 +1,18 @@
.item-list {
background-color: black; //white;
margin-bottom: var(--spacing-large);
padding: var(--spacing-large);
margin-bottom: var(--spacing-l);
padding: var(--spacing-l);
.card__actions {
margin-top: var(--spacing-medium);
margin-left: var(--spacing-small);
margin-top: var(--spacing-m);
margin-left: var(--spacing-s);
}
}
.item-list__row {
align-items: center;
display: flex;
padding: var(--spacing-small);
padding: var(--spacing-s);
fieldset-section {
margin-bottom: 0;
@ -25,7 +25,7 @@
white-space: nowrap;
&:not(:first-of-type) {
padding-left: var(--spacing-small);
padding-left: var(--spacing-s);
}
}

View file

@ -15,16 +15,16 @@
margin-left: auto;
margin-right: auto;
margin-top: var(--header-height);
padding: var(--spacing-large); // Unfortunately this is coupled with .claim-preview--tile width calculation
padding: var(--spacing-l); // Unfortunately this is coupled with .claim-preview--tile width calculation
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
padding: var(--spacing-s);
}
}
.main {
position: relative;
width: calc(100% - var(--side-nav-width) - var(--spacing-large));
width: calc(100% - var(--side-nav-width) - var(--spacing-l));
@media (max-width: $breakpoint-small) {
width: 100%;
@ -40,6 +40,29 @@
margin-right: auto;
}
.main--buy {
@extend .main--auth-page;
max-width: 30rem;
min-height: 400px;
.card {
height: 100%;
margin: 0;
padding: 0;
}
iframe {
min-height: 420px;
background-color: var(--color-card-background);
margin: -0.8rem;
margin-bottom: 2rem;
}
.sm:bg-grey-lighter {
background-color: var(--color-card-background);
}
}
.main--empty {
align-self: center;
display: flex;
@ -53,7 +76,7 @@
}
@media (max-width: $breakpoint-small) {
padding: 0 var(--spacing-medium);
padding: 0 var(--spacing-m);
}
}

View file

@ -53,7 +53,7 @@
}
.form-field--SimpleMDE {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
// Override hyperlink styles
.cm-s-easymde .cm-link {

View file

@ -20,10 +20,10 @@
h6 {
font-size: inherit;
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
&:not(:first-child) {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
}
@ -53,7 +53,7 @@
ol,
pre,
table {
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
blockquote {
@ -67,7 +67,7 @@
// Tables
table {
margin-bottom: 1.2rem;
padding: var(--spacing-medium);
padding: var(--spacing-m);
word-break: normal;
tr {
@ -77,7 +77,7 @@
th:first-of-type,
td:last-of-type,
th:last-of-type {
padding: var(--spacing-small) var(--spacing-medium);
padding: var(--spacing-s) var(--spacing-m);
}
}
@ -99,8 +99,8 @@
// Image
img {
margin-bottom: var(--spacing-medium);
padding-top: var(--spacing-medium);
margin-bottom: var(--spacing-m);
padding-top: var(--spacing-m);
max-height: var(--inline-player-max-height);
object-position: left;
@ -123,8 +123,8 @@
word-break: break-all;
code {
margin-bottom: var(--spacing-medium);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-m);
padding: var(--spacing-m);
display: block;
white-space: pre-wrap;
}
@ -134,10 +134,10 @@
code {
background-color: var(--color-blockquote);
display: inline-block;
margin: var(--spacing-miniscule);
margin: var(--spacing-xxs);
border-radius: 0.2rem;
font-size: var(--font-small);
padding: calc(var(--spacing-miniscule) - 4px) var(--spacing-miniscule);
padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs);
}
a {
@ -183,7 +183,7 @@
}
.preview-link__description {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
}

View file

@ -24,14 +24,14 @@
@media (max-width: $breakpoint-small) {
position: static;
transform: none;
margin-bottom: var(--spacing-xsmall);
margin-bottom: var(--spacing-xs);
max-width: 100%;
white-space: nowrap;
}
// This is terrible and should not be removed
.icon {
margin-right: var(--spacing-xsmall) / 2;
margin-right: var(--spacing-xs) / 2;
margin-bottom: -0.08rem;
}
}
@ -67,13 +67,14 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-s);
}
.media__info-text {
word-break: break-word;
&:not(:last-of-type) {
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
&.media__info-text--constrained {
@ -89,11 +90,11 @@
@media (max-width: $breakpoint-small) {
justify-content: flex-start;
padding-top: var(--spacing-small);
padding-top: var(--spacing-s);
> * {
margin-right: var(--spacing-small);
margin-bottom: var(--spacing-small);
margin-right: var(--spacing-s);
margin-bottom: var(--spacing-s);
}
}
}

View file

@ -27,7 +27,7 @@
min-width: 500px;
max-width: var(--modal-width);
overflow: auto;
padding: var(--spacing-large);
padding: var(--spacing-l);
word-break: break-word;
&:focus {
@ -50,13 +50,13 @@
.navigation {
width: 100%;
display: block;
padding: var(--spacing-large);
padding: var(--spacing-l);
.navigation-links:not(.navigation-links--small) {
.navigation-link {
font-size: var(--font-large);
border-bottom: 1px solid var(--color-gray-3);
padding: var(--spacing-medium) 0;
padding: var(--spacing-m) 0;
}
}
}
@ -75,7 +75,7 @@
.error-modal__content {
display: flex;
padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
padding: 0 var(--spacing-m) var(--spacing-m) var(--spacing-m);
}
.error-modal {
@ -87,8 +87,8 @@
.error-modal__error-list {
max-width: var(--modal-width);
max-height: 400px;
margin-top: var(--spacing-small);
padding: var(--spacing-small);
margin-top: var(--spacing-s);
padding: var(--spacing-s);
background-color: var(--color-error);
border-left: 2px solid var(--color-text-error);

View file

@ -10,11 +10,11 @@
}
.navigation + .ads-wrapper {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
.navigation__secondary {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
.navigation-links {
@ -30,11 +30,11 @@
}
.navigation-links__inline {
margin-left: calc(var(--spacing-medium) + var(--spacing-small));
margin-left: calc(var(--spacing-m) + var(--spacing-s));
}
.navigation-link__wrapper {
margin: var(--spacing-miniscule) 0;
margin: var(--spacing-xxs) 0;
}
.navigation-link {
@ -46,7 +46,7 @@
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-navigation-link);
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
.icon {
stroke: var(--color-link-icon);

View file

@ -4,7 +4,7 @@
align-items: center;
+ .form-field {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
@ -65,7 +65,7 @@
.pagination__item--next {
line-height: 1.5;
position: relative;
padding-top: var(--spacing-small);
padding-top: var(--spacing-s);
}
.pagination__item--selected {

View file

@ -15,7 +15,7 @@
}
&.media__subtitle {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
width: 30%;
height: 1.5em;

View file

@ -7,7 +7,7 @@
.credit-amount,
.icon--Key {
position: relative;
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
white-space: nowrap;
}
@ -40,16 +40,16 @@
.file-price--filepage {
font-size: var(--font-body);
top: calc(var(--spacing-miniscule) * -1);
margin-left: var(--spacing-medium);
top: calc(var(--spacing-xxs) * -1);
margin-left: var(--spacing-m);
.credit-amount {
margin: 0 var(--spacing-medium);
margin: 0 var(--spacing-m);
}
&::before {
height: 250%;
left: calc(var(--spacing-medium) * -1);
left: calc(var(--spacing-m) * -1);
border-radius: 0;
border-bottom-left-radius: var(--border-radius);
border-width: 5px;
@ -57,7 +57,7 @@
}
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
padding: var(--spacing-s);
&::before {
height: 140%;
@ -74,18 +74,18 @@
}
.icon {
margin: 0 var(--spacing-medium);
margin: 0 var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
&::before {
top: calc(-1 * var(--spacing-small));
top: calc(-1 * var(--spacing-s));
height: 110%;
}
.icon {
top: calc(-1 * var(--spacing-small));
margin: 0 var(--spacing-xsmall);
top: calc(-1 * var(--spacing-s));
margin: 0 var(--spacing-xs);
}
}
}
@ -94,8 +94,8 @@
border: 5px solid var(--color-purchased);
.credit-amount {
margin: 0 var(--spacing-medium);
margin-left: var(--spacing-large);
margin: 0 var(--spacing-m);
margin-left: var(--spacing-l);
font-weight: var(--font-bold);
}
}
@ -123,12 +123,12 @@
.file-price__key--modal {
@extend .file-price--modal;
top: var(--spacing-medium);
top: var(--spacing-m);
.icon {
height: 100%;
width: auto;
left: calc(var(--spacing-xlarge) * 1.5);
left: calc(var(--spacing-xl) * 1.5);
animation: moveKey 2.5s 1 ease-out;
overflow: visible;
stroke: var(--color-black);
@ -151,7 +151,7 @@
> *:first-child {
width: 60%;
padding-right: var(--spacing-small);
padding-right: var(--spacing-s);
}
.file-price,
@ -164,7 +164,7 @@
border-width: 0;
@media (max-width: $breakpoint-small) {
margin-top: calc(var(--spacing-xlarge) * 2);
margin-top: calc(var(--spacing-xl) * 2);
}
}
}
@ -174,8 +174,8 @@
font-size: var(--font-title);
color: var(--color-black);
position: absolute;
top: calc(var(--spacing-xlarge) * 1.6);
left: var(--spacing-large);
top: calc(var(--spacing-xl) * 1.6);
left: var(--spacing-l);
bottom: 0;
right: 0;
z-index: 9999999999;
@ -186,7 +186,7 @@
.purchase_stuff__subtext--purchased {
color: var(--color-black);
font-size: var(--font-body);
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
@keyframes display {
@ -225,15 +225,15 @@
}
20% {
left: calc(var(--spacing-xlarge) * 1.5);
left: calc(var(--spacing-xl) * 1.5);
}
50% {
left: calc(var(--spacing-xlarge) * 1.5);
left: calc(var(--spacing-xl) * 1.5);
}
70% {
left: calc(var(--spacing-xlarge) * 1.5);
left: calc(var(--spacing-xl) * 1.5);
}
100% {

View file

@ -1,5 +1,5 @@
.search__header {
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
.placeholder {
background-color: var(--color-placeholder-background);
@ -7,17 +7,17 @@
}
.search__options {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
.search__legend {
background-color: var(--color-secondary-alt);
color: var(--color-secondary);
margin-bottom: var(--spacing-small);
padding: var(--spacing-miniscule);
margin-bottom: var(--spacing-s);
padding: var(--spacing-xxs);
}
fieldset:not(:first-child) {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
.radio,
@ -25,7 +25,7 @@
display: inline-block;
&:not(:first-of-type) {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
}
}
}

View file

@ -4,7 +4,7 @@
background-color: var(--color-snack-bg);
color: var(--color-snack);
border-radius: 0.5rem;
padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);
padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing-m);
position: fixed;
transition: all var(--transition-duration) var(--transition-type);
z-index: 10000; // hack to get it over react modal
@ -27,7 +27,7 @@
.snack-bar__action {
display: inline-block;
margin: var(--spacing-small) 0;
margin: var(--spacing-s) 0;
min-width: min-content;
color: var(--color-white);
@ -44,7 +44,7 @@
div {
&:nth-of-type(1) {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
}
}

View file

@ -3,7 +3,7 @@
height: 40px;
font-size: 10px;
margin: var(--spacing-small);
margin: var(--spacing-s);
text-align: center;
.rect {

View file

@ -30,9 +30,9 @@
.splash__animation-toggle {
position: fixed;
top: var(--spacing-large);
right: var(--spacing-large);
padding: var(--spacing-medium);
top: var(--spacing-l);
right: var(--spacing-l);
padding: var(--spacing-m);
border-color: #fff;
color: #fff;
background-color: rgba(255, 255, 255, 0.205);

View file

@ -14,7 +14,7 @@
.table__header-text {
width: 100%;
margin: var(--spacing-medium) var(--spacing-large);
margin: var(--spacing-m) var(--spacing-l);
}
.table__header-text--between {
@ -83,7 +83,7 @@
.table--invites {
svg {
margin-bottom: -2px;
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
}
}

View file

@ -6,18 +6,18 @@
.tag {
margin-left: 0;
margin-bottom: var(--spacing-small);
margin-right: var(--spacing-small);
margin-bottom: var(--spacing-s);
margin-right: var(--spacing-s);
}
}
.tags--remove {
@extend .tags;
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
.tag {
margin-top: 0;
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
}
@ -33,7 +33,7 @@
.tags--selected {
@extend .tags;
margin: var(--spacing-large) 0;
margin: var(--spacing-l) 0;
}
.tags__input-wrapper {
@ -41,9 +41,9 @@
.tag__input {
@extend .tag--remove;
height: var(--tag-height);
padding: calc(var(--spacing-miniscule) + 1px) var(--spacing-small);
padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s);
background-color: var(--color-input-bg);
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
}
}

View file

@ -10,7 +10,7 @@
> .icon {
top: 0;
left: var(--spacing-small);
left: var(--spacing-s);
height: 100%;
position: absolute;
z-index: 1;
@ -49,7 +49,7 @@
background-color: var(--color-input-bg);
color: var(--color-input);
border: none;
padding-right: var(--spacing-small);
padding-right: var(--spacing-s);
padding-left: 2.5rem;
transition: all 0.2s;
-webkit-app-region: no-drag;
@ -72,7 +72,7 @@
display: flex;
flex-direction: row;
justify-items: flex-start;
padding: var(--spacing-small) var(--spacing-small);
padding: var(--spacing-s) var(--spacing-s);
&:not(:first-of-type) {
border-top: 1px solid transparent;
@ -85,13 +85,13 @@
.wunderbar__suggestion-label {
overflow: hidden;
padding-left: var(--spacing-small);
padding-left: var(--spacing-s);
text-overflow: ellipsis;
white-space: nowrap;
}
.wunderbar__suggestion-label--action {
margin-left: var(--spacing-medium);
margin-left: var(--spacing-m);
opacity: 0.6;
white-space: nowrap;
}

View file

@ -8,7 +8,7 @@
.yrbl {
height: 20rem;
margin-right: calc(var(--spacing-xlarge) * 2);
margin-right: calc(var(--spacing-xl) * 2);
@media (max-width: $breakpoint-small) {
display: none;
@ -23,7 +23,7 @@
align-self: center;
height: 250px;
width: auto;
margin: 0 var(--spacing-large);
margin: 0 var(--spacing-l);
}
.yrbl--search {

View file

@ -2,7 +2,7 @@
background-color: var(--color-card-background);
position: relative;
overflow: hidden;
padding-left: var(--spacing-small);
padding-left: var(--spacing-s);
}
.expanding-details {
@ -11,5 +11,5 @@
.expanding-details__body {
border-radius: var(--card-radius);
padding: 0 var(--spacing-small);
padding: 0 var(--spacing-s);
}

View file

@ -51,7 +51,7 @@
}
.menu__list {
margin-left: calc(var(--spacing-medium) * -1);
margin-left: calc(var(--spacing-m) * -1);
box-shadow: var(--card-box-shadow);
animation: menu-animate-in var(--animation-duration) var(--animation-style);
border-bottom-left-radius: var(--border-radius);
@ -66,16 +66,16 @@
.menu__link {
display: flex;
align-items: center;
padding: var(--spacing-medium);
padding-right: var(--spacing-large);
padding: var(--spacing-m);
padding-right: var(--spacing-l);
.icon {
stroke: var(--color-menu-icon);
margin-right: var(--spacing-small);
margin-right: var(--spacing-s);
}
.badge {
margin-left: var(--spacing-small);
margin-left: var(--spacing-s);
}
}

View file

@ -8,7 +8,7 @@ $nag-error-z-index: 100001;
left: 0;
bottom: 0;
width: 100%;
padding: var(--spacing-small);
padding: var(--spacing-s);
background-color: var(--color-nag);
color: var(--color-white);
font-weight: var(--font-weight-bold);
@ -61,11 +61,11 @@ $nag-error-z-index: 100001;
.nag__button {
line-height: 1;
margin-left: var(--spacing-small);
margin-right: var(--spacing-small);
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
border-radius: var(--border-radius);
border: 1px solid var(--color-white);
padding: var(--spacing-miniscule);
padding: var(--spacing-xxs);
color: var(--color-white);
font-weight: var(--font-weight-bold);
@ -76,7 +76,7 @@ $nag-error-z-index: 100001;
@media (max-width: $breakpoint-small) {
margin-left: 0;
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
}
@ -99,7 +99,7 @@ $nag-error-z-index: 100001;
.nag__close {
margin-left: auto;
right: var(--spacing-medium);
right: var(--spacing-m);
position: absolute;
border: none;

View file

@ -2,16 +2,12 @@
position: relative;
~ .section {
margin-top: var(--spacing-large);
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-medium);
}
margin-top: var(--spacing-l);
}
}
.section--padded {
padding: var(--spacing-medium);
padding: var(--spacing-m);
}
.section--small {
@ -19,14 +15,14 @@
}
.section__header {
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
}
.section__flex {
display: flex;
align-items: flex-start;
> .icon__wrapper:first-child {
margin-right: var(--spacing-large);
margin-right: var(--spacing-l);
}
}
@ -39,13 +35,13 @@
.section__title--small {
@extend .section__title;
font-size: var(--font-body);
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
.section__title--large {
@extend .section__title;
margin-right: var(--spacing-medium);
display: inline-block;
margin-right: var(--spacing-m);
font-weight: var(--font-weight-bold);
font-size: var(--font-heading);
@ -56,13 +52,13 @@
.section__subtitle {
color: var(--color-text-subtitle);
margin: var(--spacing-small) 0;
margin: var(--spacing-s) 0;
font-size: var(--font-body);
}
.section__subtitle--status {
@extend .section__subtitle;
padding: var(--spacing-small);
padding: var(--spacing-s);
background-color: var(--color-text-warning);
}
@ -71,7 +67,7 @@
flex-direction: column;
hr {
margin: var(--spacing-large) 0;
margin: var(--spacing-l) 0;
}
p {
@ -81,23 +77,23 @@
font-weight: var(--font-weight-base);
background-color: var(--color-background);
transform: translateY(-150%);
padding: 0 var(--spacing-large);
padding: 0 var(--spacing-l);
display: inline-block;
margin: auto;
}
}
.section__body {
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
.section__actions {
display: flex;
align-items: center;
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
~ .section {
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
}
&:only-child,
@ -106,14 +102,14 @@
}
> *:not(:last-child) {
margin-right: var(--spacing-medium);
margin-right: var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
flex-wrap: wrap;
> * {
margin-bottom: var(--spacing-small);
margin-bottom: var(--spacing-s);
}
}
@ -127,8 +123,8 @@
}
.button--primary ~ .button--link {
margin-left: var(--spacing-small);
padding: var(--spacing-xsmall);
margin-left: var(--spacing-s);
padding: var(--spacing-xs);
}
}
@ -148,7 +144,7 @@
.section__start-at {
display: flex;
align-items: center;
margin-top: var(--spacing-large);
margin-top: var(--spacing-l);
fieldset-section {
width: 6em;
margin-top: 0;

View file

@ -6,7 +6,7 @@
display: flex;
align-items: center;
background-color: var(--color-tabs-background);
padding: var(--spacing-medium) var(--spacing-main-padding);
padding: var(--spacing-m) var(--spacing-main-padding);
& > *:not(.tab) {
// If there is anything after the tabs, render it on the opposite side of the page
@ -15,21 +15,21 @@
}
.tabs__list--channel-page {
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
padding-right: var(--spacing-medium);
margin-bottom: var(--spacing-large);
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
padding-right: var(--spacing-m);
margin-bottom: var(--spacing-l);
height: 4rem;
border-bottom-left-radius: var(--card-radius);
border-bottom-right-radius: var(--card-radius);
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-medium);
padding-left: var(--spacing-m);
}
}
.tab {
@extend .button--link;
margin-right: var(--spacing-large);
margin-right: var(--spacing-l);
padding: 5px 0;
color: var(--color-tab-text);
position: relative;
@ -50,7 +50,7 @@
.tab__divider {
position: absolute;
margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-large));
margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-l));
}
.tab::after,

View file

@ -36,7 +36,7 @@ h6 {
p {
& + p {
margin-top: var(--spacing-small);
margin-top: var(--spacing-s);
}
}
@ -44,7 +44,7 @@ ul,
ol {
li {
list-style-position: outside;
margin: var(--spacing-xsmall) var(--spacing-medium);
margin: var(--spacing-xs) var(--spacing-m);
margin-bottom: 0;
}
}
@ -63,17 +63,17 @@ dl {
flex-direction: row;
flex-wrap: wrap;
overflow-x: visible;
margin-top: var(--spacing-medium);
margin-top: var(--spacing-m);
}
dt {
flex-basis: 40%;
flex-basis: 45%;
text-align: left;
font-weight: bold;
}
dd {
flex-basis: 55%;
flex-basis: 50%;
flex-grow: 1;
margin: 0;
text-align: right;
@ -81,7 +81,7 @@ dd {
dt,
dd {
padding: var(--spacing-medium) var(--spacing-small);
padding: var(--spacing-m) var(--spacing-s);
border-top: 1px solid var(--color-border);
@ -125,15 +125,15 @@ textarea {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
> * {
flex-grow: 1;
flex-basis: 0;
min-width: 15rem;
margin-bottom: var(--spacing-large);
margin-bottom: var(--spacing-l);
&:first-child {
flex-basis: 1;
margin-right: 1.5rem;
}
}
@ -143,7 +143,7 @@ textarea {
& > * {
margin: 0;
margin-bottom: var(--spacing-medium);
margin-bottom: var(--spacing-m);
width: 100%;
flex-basis: auto;
@ -202,8 +202,8 @@ textarea {
display: block;
font-size: var(--font-small);
color: var(--color-text-help);
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
margin-top: var(--spacing-s);
margin-bottom: var(--spacing-s);
}
.help--warning {
@ -224,7 +224,7 @@ textarea {
.empty--centered {
text-align: center;
padding: calc(var(--spacing-large) * 3) 0;
padding: calc(var(--spacing-l) * 3) 0;
}
.qr-code {
@ -243,7 +243,7 @@ textarea {
.error__wrapper {
background-color: var(--color-error);
padding: var(--spacing-small);
padding: var(--spacing-s);
border-radius: var(--border-radius);
}
@ -281,7 +281,7 @@ textarea {
.notice-message {
border-radius: var(--border-radius);
padding: var(--spacing-large);
padding: var(--spacing-l);
background-color: var(--color-primary-alt);
}

View file

@ -12,13 +12,8 @@ $breakpoint-medium: 1150px;
--mac-titlebar-height: 1.5rem;
--mobile: 600px;
--side-nav-width: 170px;
--spacing-miniscule: calc(2rem / 5);
--spacing-xsmall: calc(2rem / 4);
--spacing-small: calc(2rem / 3);
--spacing-medium: calc(2rem / 2);
--spacing-large: 2rem;
--spacing-xlarge: 3rem;
--spacing-main-padding: var(--spacing-xlarge);
--spacing-main-padding: var(--spacing-xl);
--floating-viewer-width: 32rem;
--floating-viewer-height: 18rem; // 32 * 9/16
--floating-viewer-info-height: 5rem;
@ -36,7 +31,7 @@ $breakpoint-medium: 1150px;
--header-height: 5rem;
// Inline Player
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-large) * 2);
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);
// Card
--card-radius: var(--border-radius);

View file

@ -85,6 +85,7 @@ export default function Footer() {
<div key={name} className="footer__section">
<div className="footer__section-title">{name}</div>
<ul className="ul--no-style">
{/* $FlowFixMe */}
{links.map(({ label, link, navigate }) => {
return (
<li key={label}>

View file

@ -88,6 +88,7 @@ let baseConfig = {
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
'process.env.LBRY_API_URL': JSON.stringify(process.env.LBRY_API_URL),
'process.env.SENTRY_AUTH_TOKEN': JSON.stringify(process.env.SENTRY_AUTH_TOKEN),
'process.env.MOONPAY_SECRET_KEY': JSON.stringify(process.env.MOONPAY_SECRET_KEY),
}),
new Dotenv({
allowEmptyValues: true, // allow empty variables (e.g. `FOO=`) (treat it as empty string, rather than missing)

View file

@ -2953,6 +2953,11 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"
crypto-js@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
integrity sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg==
crypto-random-string@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"