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

moonpay

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

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

21
ui/component/common/icon-custom.jsx
View file

@ -638,7 +638,26 @@ export const icons = {
<g> <g>
<polyline points="23 4 23 10 17 10" /> <polyline points="23 4 23 10 17 10" />
<polyline points="1 20 1 14 7 14" /> <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> </g>
), ),
}; };

5
ui/component/page/view.jsx
View file

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

2
ui/component/router/view.jsx
View file

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

2
ui/component/userPasswordSet/view.jsx
View file

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

18
ui/component/walletBalance/index.js
View file

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

154
ui/component/walletBalance/view.jsx
View file

@ -7,6 +7,7 @@ import CreditAmount from 'component/common/credit-amount';
import Button from 'component/button'; import Button from 'component/button';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import HelpLink from 'component/common/help-link'; import HelpLink from 'component/common/help-link';
import Card from 'component/common/card';
type Props = { type Props = {
balance: number, balance: number,
@ -24,88 +25,101 @@ const WalletBalance = (props: Props) => {
return ( return (
<React.Fragment> <React.Fragment>
<section className="columns"> <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> <div>
<h2 className="section__title">{__('Available Balance')}</h2> <React.Fragment>
<span className="section__title--large"> {/* @if TARGET='app' */}
{(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />} {hasSynced ? (
</span> <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">
<div className="section__flex"> <div className="section__flex">
<Icon sectionIcon iconColor={'blue'} icon={ICONS.LOCK} /> <Icon sectionIcon icon={ICONS.TIP} />
<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>
<h2 className="section__title--small"> <h2 className="section__title--small">
<strong> <strong>
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} /> <CreditAmount badge={false} amount={tipsBalance} precision={8} />
</strong>{' '} </strong>{' '}
{__('currently staked')} {__('earned and bound in tips')}
</h2> </h2>
<div className="section__subtitle"> </div>
<dl> </div>
<dt>{__('... in your publishes')}</dt>
<dd>
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
</dd>
<dt>{__('... in your supports')}</dt> <div className="section">
<dd> <div className="section__flex">
<CreditAmount badge={false} amount={supportsBalance} precision={8} /> <Icon sectionIcon icon={ICONS.LOCK} />
</dd> <div>
</dl> <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>
</div> </div>
</div> </React.Fragment>
</div> </div>
</section> </section>
</React.Fragment> </React.Fragment>

4
ui/constants/icons.js
View file

@ -60,7 +60,6 @@ export const MENU = 'Menu';
export const BACKUP = 'Database'; export const BACKUP = 'Database';
export const TRANSACTIONS = 'FileText'; export const TRANSACTIONS = 'FileText';
export const LBRY = 'Lbry'; export const LBRY = 'Lbry';
export const SEND = 'Send';
export const DISCOVER = 'Compass'; export const DISCOVER = 'Compass';
export const VISUALIZER_ON = 'Eye'; export const VISUALIZER_ON = 'Eye';
export const VISUALIZER_OFF = 'EyeOff'; export const VISUALIZER_OFF = 'EyeOff';
@ -102,3 +101,6 @@ export const ANALYTICS = 'BarChart2';
export const PURCHASED = 'Key'; export const PURCHASED = 'Key';
export const CIRCLE = 'Circle'; export const CIRCLE = 'Circle';
export const PINNED = 'Pinned'; 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',
];

1
ui/constants/pages.js
View file

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

6
ui/modal/modalRouter/view.jsx
View file

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

9
ui/page/rewards/view.jsx
View file

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

15
ui/page/wallet/index.js
View file

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

52
ui/page/wallet/view.jsx
View file

@ -1,23 +1,69 @@
// @flow // @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 React from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import WalletBalance from 'component/walletBalance'; import WalletBalance from 'component/walletBalance';
import TxoList from 'component/txoList'; import TxoList from 'component/txoList';
import Page from 'component/page'; import Page from 'component/page';
import Yrbl from 'component/yrbl';
import Button from 'component/button';
import Spinner from 'component/spinner';
type Props = { type Props = {
history: { action: string, push: string => void, replace: string => void }, history: { action: string, push: string => void, replace: string => void },
location: { search: string, pathname: string }, location: { search: string, pathname: string },
balance: number,
doOpenModal: string => void,
}; };
const WalletPage = (props: Props) => { const WalletPage = (props: Props) => {
const { location } = props; const { location, balance, doOpenModal } = props;
const { search } = location; const { search } = location;
const showIntro = balance === 0;
const loading = balance === undefined;
return ( return (
<Page> <Page>
<WalletBalance /> {loading && (
<TxoList search={search} /> <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> </Page>
); );
}; };

2
ui/page/welcome/view.jsx
View file

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

4
ui/scss/component/_ads.scss
View file

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

16
ui/scss/component/_button.scss
View file

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

64
ui/scss/component/_card.scss
View file

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

50
ui/scss/component/_channel.scss
View file

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

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

14
ui/scss/component/_claim-search.scss
View file

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

24
ui/scss/component/_comments.scss
View file

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

14
ui/scss/component/_content.scss
View file

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

2
ui/scss/component/_expandable.scss
View file

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

6
ui/scss/component/_file-drop.scss
View file

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

2
ui/scss/component/_file-list.scss
View file

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

10
ui/scss/component/_file-properties.scss
View file

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

36
ui/scss/component/_file-render.scss
View file

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

10
ui/scss/component/_footer.scss
View file

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

20
ui/scss/component/_form-field.scss
View file

@ -17,7 +17,7 @@ input[type='number'] {
fieldset-group { fieldset-group {
+ fieldset-group { + fieldset-group {
margin-top: var(--spacing-small); margin-top: var(--spacing-s);
} }
&.fieldset-group--smushed { &.fieldset-group--smushed {
@ -46,8 +46,8 @@ fieldset-group {
} }
&.fieldgroup--paginate { &.fieldgroup--paginate {
padding-bottom: var(--spacing-large); padding-bottom: var(--spacing-l);
margin-top: var(--spacing-large); margin-top: var(--spacing-l);
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
} }
@ -74,7 +74,7 @@ fieldset-group {
.form-field__prefix { .form-field__prefix {
white-space: nowrap; white-space: nowrap;
padding: 0.5rem; padding: 0.5rem;
padding-right: var(--spacing-small); padding-right: var(--spacing-s);
height: var(--height-input); height: var(--height-input);
border: 1px solid; border: 1px solid;
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);
@ -95,7 +95,7 @@ fieldset-group {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-color: var(--color-input-border); 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 { .form-field__help {
@extend .help; @extend .help;
margin-top: var(--spacing-miniscule); margin-top: var(--spacing-xxs);
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-s);
} }
.form-field__help + .checkbox, .form-field__help + .checkbox,
.form-field__help + .radio { .form-field__help + .radio {
margin-top: var(--spacing-large); margin-top: var(--spacing-l);
} }
.form-field__conjuction { .form-field__conjuction {
@ -147,11 +147,11 @@ fieldset-group {
fieldset-section { fieldset-section {
.form-field__internal-option { .form-field__internal-option {
margin-top: var(--spacing-small); margin-top: var(--spacing-s);
margin-left: 2.2rem; margin-left: 2.2rem;
&:first-of-type { &: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
} }
} }
} }

10
ui/scss/component/_form-row.scss
View file

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

24
ui/scss/component/_header.scss
View file

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

4
ui/scss/component/_icon.scss
View file

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

12
ui/scss/component/_item-list.scss
View file

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

31
ui/scss/component/_main.scss
View file

@ -15,16 +15,16 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: var(--header-height); 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) { @media (max-width: $breakpoint-small) {
padding: var(--spacing-small); padding: var(--spacing-s);
} }
} }
.main { .main {
position: relative; 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) { @media (max-width: $breakpoint-small) {
width: 100%; width: 100%;
@ -40,6 +40,29 @@
margin-right: auto; 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 { .main--empty {
align-self: center; align-self: center;
display: flex; display: flex;
@ -53,7 +76,7 @@
} }
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding: 0 var(--spacing-medium); padding: 0 var(--spacing-m);
} }
} }

2
ui/scss/component/_markdown-editor.scss
View file

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

28
ui/scss/component/_markdown-preview.scss
View file

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

13
ui/scss/component/_media.scss
View file

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

12
ui/scss/component/_modal.scss
View file

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

10
ui/scss/component/_navigation.scss
View file

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

4
ui/scss/component/_pagination.scss
View file

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

2
ui/scss/component/_placeholder.scss
View file

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

44
ui/scss/component/_purchase.scss
View file

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

12
ui/scss/component/_search.scss
View file

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

6
ui/scss/component/_snack-bar.scss
View file

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

2
ui/scss/component/_spinner.scss
View file

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

6
ui/scss/component/_splash.scss
View file

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

4
ui/scss/component/_table.scss
View file

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

14
ui/scss/component/_tags.scss
View file

@ -6,18 +6,18 @@
.tag { .tag {
margin-left: 0; margin-left: 0;
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-s);
margin-right: var(--spacing-small); margin-right: var(--spacing-s);
} }
} }
.tags--remove { .tags--remove {
@extend .tags; @extend .tags;
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-m);
.tag { .tag {
margin-top: 0; margin-top: 0;
margin-bottom: var(--spacing-small); margin-bottom: var(--spacing-s);
} }
} }
@ -33,7 +33,7 @@
.tags--selected { .tags--selected {
@extend .tags; @extend .tags;
margin: var(--spacing-large) 0; margin: var(--spacing-l) 0;
} }
.tags__input-wrapper { .tags__input-wrapper {
@ -41,9 +41,9 @@
.tag__input { .tag__input {
@extend .tag--remove; @extend .tag--remove;
height: var(--tag-height); 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); background-color: var(--color-input-bg);
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-m);
} }
} }

10
ui/scss/component/_wunderbar.scss
View file

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

4
ui/scss/component/_yrbl.scss
View file

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

4
ui/scss/component/expanding-details.scss
View file

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

10
ui/scss/component/menu-button.scss
View file

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

12
ui/scss/component/nag.scss
View file

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

40
ui/scss/component/section.scss
View file

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

14
ui/scss/component/tabs.scss
View file

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

28
ui/scss/init/_gui.scss
View file

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

11
ui/scss/init/_vars.scss
View file

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

1
web/component/footer.jsx
View file

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

1
webpack.base.config.js
View file

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

5
yarn.lock
View file

@ -2953,6 +2953,11 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0" randombytes "^2.0.0"
randomfill "^1.0.3" 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: crypto-random-string@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"