From e7cdd6c13db15af55f7e9fb398282e48c9d2b8d2 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 1 Jun 2020 13:03:19 -0400
Subject: [PATCH] moonpay

---
 package.json                             |   1 +
 ui/component/common/icon-custom.jsx      |  21 ++-
 ui/component/page/view.jsx               |   5 +-
 ui/component/router/view.jsx             |   2 +
 ui/component/userPasswordSet/view.jsx    |   2 +-
 ui/component/walletBalance/index.js      |  18 +--
 ui/component/walletBalance/view.jsx      | 154 ++++++++++++----------
 ui/constants/icons.js                    |   4 +-
 ui/constants/moonpay.js                  |  62 +++++++++
 ui/constants/pages.js                    |   1 +
 ui/modal/modalRouter/view.jsx            |   6 +-
 ui/page/buy/index.js                     |  16 +++
 ui/page/buy/view.jsx                     | 161 +++++++++++++++++++++++
 ui/page/rewards/view.jsx                 |   9 +-
 ui/page/wallet/index.js                  |  15 ++-
 ui/page/wallet/view.jsx                  |  52 +++++++-
 ui/page/welcome/view.jsx                 |   2 +-
 ui/scss/component/_ads.scss              |   4 +-
 ui/scss/component/_button.scss           |  16 +--
 ui/scss/component/_card.scss             |  64 ++++-----
 ui/scss/component/_channel.scss          |  50 +++----
 ui/scss/component/_claim-list.scss       |  81 +++++++-----
 ui/scss/component/_claim-search.scss     |  14 +-
 ui/scss/component/_comments.scss         |  24 ++--
 ui/scss/component/_content.scss          |  14 +-
 ui/scss/component/_expandable.scss       |   2 +-
 ui/scss/component/_file-drop.scss        |   6 +-
 ui/scss/component/_file-list.scss        |   2 +-
 ui/scss/component/_file-properties.scss  |  10 +-
 ui/scss/component/_file-render.scss      |  36 ++---
 ui/scss/component/_footer.scss           |  10 +-
 ui/scss/component/_form-field.scss       |  20 +--
 ui/scss/component/_form-row.scss         |  10 +-
 ui/scss/component/_header.scss           |  24 ++--
 ui/scss/component/_icon.scss             |   4 +-
 ui/scss/component/_item-list.scss        |  12 +-
 ui/scss/component/_main.scss             |  31 ++++-
 ui/scss/component/_markdown-editor.scss  |   2 +-
 ui/scss/component/_markdown-preview.scss |  28 ++--
 ui/scss/component/_media.scss            |  13 +-
 ui/scss/component/_modal.scss            |  12 +-
 ui/scss/component/_navigation.scss       |  10 +-
 ui/scss/component/_pagination.scss       |   4 +-
 ui/scss/component/_placeholder.scss      |   2 +-
 ui/scss/component/_purchase.scss         |  44 +++----
 ui/scss/component/_search.scss           |  12 +-
 ui/scss/component/_snack-bar.scss        |   6 +-
 ui/scss/component/_spinner.scss          |   2 +-
 ui/scss/component/_splash.scss           |   6 +-
 ui/scss/component/_table.scss            |   4 +-
 ui/scss/component/_tags.scss             |  14 +-
 ui/scss/component/_wunderbar.scss        |  10 +-
 ui/scss/component/_yrbl.scss             |   4 +-
 ui/scss/component/expanding-details.scss |   4 +-
 ui/scss/component/menu-button.scss       |  10 +-
 ui/scss/component/nag.scss               |  12 +-
 ui/scss/component/section.scss           |  40 +++---
 ui/scss/component/tabs.scss              |  14 +-
 ui/scss/init/_gui.scss                   |  28 ++--
 ui/scss/init/_vars.scss                  |  11 +-
 web/component/footer.jsx                 |   1 +
 webpack.base.config.js                   |   1 +
 yarn.lock                                |   5 +
 63 files changed, 809 insertions(+), 455 deletions(-)
 create mode 100644 ui/constants/moonpay.js
 create mode 100644 ui/page/buy/index.js
 create mode 100644 ui/page/buy/view.jsx

diff --git a/package.json b/package.json
index 12bcdfedd..a8489622b 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "copy-webpack-plugin": "^4.6.0",
     "country-data": "^0.0.31",
     "cross-env": "^5.2.0",
+    "crypto-js": "^4.0.0",
     "css-doodle": "^0.7.1",
     "css-loader": "^2.1.0",
     "cssnano": "^4.1.10",
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index a1da0dc19..e16c57221 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -638,7 +638,26 @@ export const icons = {
     <g>
       <polyline points="23 4 23 10 17 10" />
       <polyline points="1 20 1 14 7 14" />
-      <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />{' '}
+      <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+    </g>
+  ),
+  [ICONS.BUY]: buildIcon(
+    <g>
+      <circle cx="9" cy="21" r="1" />
+      <circle cx="20" cy="21" r="1" />
+      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
+    </g>
+  ),
+  [ICONS.SEND]: buildIcon(
+    <g>
+      <line x1="22" y1="2" x2="11" y2="13" />
+      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+    </g>
+  ),
+  [ICONS.RECEIVE]: buildIcon(
+    <g>
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
     </g>
   ),
 };
diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index 998ded845..a887bb5f2 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -15,17 +15,18 @@ type Props = {
   authPage: boolean,
   noHeader: boolean,
   noFooter: boolean,
+  noSideNavigation: boolean,
 };
 
 function Page(props: Props) {
-  const { children, className, authPage = false, noHeader, noFooter } = props;
+  const { children, className, authPage = false, noHeader = false, noFooter = false, noSideNavigation = false } = props;
 
   return (
     <Fragment>
       {!noHeader && <Header authHeader={authPage} />}
       <div className={classnames('main-wrapper__inner')}>
         <main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
-        {!authPage && !noHeader && <SideNavigation />}
+        {!authPage && !noSideNavigation && <SideNavigation />}
       </div>
       {/* @if TARGET='web' */}
       {!noFooter && <Footer />}
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 86ed22d53..0b490c7c2 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -39,6 +39,7 @@ import Welcome from 'page/welcome';
 import CreatorDashboard from 'page/creatorDashboard';
 import RewardsVerifyPage from 'page/rewardsVerify';
 import CheckoutPage from 'page/checkoutPage';
+import BuyPage from 'page/buy';
 
 import { parseURI } from 'lbry-redux';
 import { SITE_TITLE, WELCOME_VERSION } from 'config';
@@ -196,6 +197,7 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
 
       <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
       <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
diff --git a/ui/component/userPasswordSet/view.jsx b/ui/component/userPasswordSet/view.jsx
index 70838a524..4cf29fdc2 100644
--- a/ui/component/userPasswordSet/view.jsx
+++ b/ui/component/userPasswordSet/view.jsx
@@ -90,7 +90,7 @@ function UserPasswordReset(props: Props) {
                 <Button
                   button="primary"
                   type="submit"
-                  label={loading ? __('Update Password') : __('Updating Password')}
+                  label={loading ? __('Updating Password') : __('Update Password')}
                   disabled={!password || loading}
                 />
                 <Button button="link" label={__('Cancel')} onClick={handleRestart} />
diff --git a/ui/component/walletBalance/index.js b/ui/component/walletBalance/index.js
index e6d8e1b95..48d2fd64a 100644
--- a/ui/component/walletBalance/index.js
+++ b/ui/component/walletBalance/index.js
@@ -1,18 +1,11 @@
 import { connect } from 'react-redux';
-import {
-  selectBalance,
-  selectTotalBalance,
-  selectClaimsBalance,
-  selectSupportsBalance,
-  selectTipsBalance,
-} from 'lbry-redux';
+import { selectBalance, selectClaimsBalance, selectSupportsBalance, selectTipsBalance } from 'lbry-redux';
 import { doOpenModal } from 'redux/actions/app';
 import { selectClaimedRewards, selectSyncHash } from 'lbryinc';
 import WalletBalance from './view';
 
 const select = state => ({
   balance: selectBalance(state),
-  totalBalance: selectTotalBalance(state),
   claimsBalance: selectClaimsBalance(state) || 0,
   supportsBalance: selectSupportsBalance(state) || 0,
   tipsBalance: selectTipsBalance(state) || 0,
@@ -20,9 +13,6 @@ const select = state => ({
   hasSynced: Boolean(selectSyncHash(state)),
 });
 
-export default connect(
-  select,
-  {
-    doOpenModal,
-  }
-)(WalletBalance);
+export default connect(select, {
+  doOpenModal,
+})(WalletBalance);
diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx
index 5906bd598..f2a1ce6d4 100644
--- a/ui/component/walletBalance/view.jsx
+++ b/ui/component/walletBalance/view.jsx
@@ -7,6 +7,7 @@ import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
 import Icon from 'component/common/icon';
 import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
 
 type Props = {
   balance: number,
@@ -24,88 +25,101 @@ const WalletBalance = (props: Props) => {
   return (
     <React.Fragment>
       <section className="columns">
+        <Card
+          title={
+            <span>
+              {(balance || balance === 0) && (
+                <CreditAmount badge={false} amount={balance} precision={8} showLBC={false} />
+              )}{' '}
+              <span className="section__title--small">LBC</span>
+            </span>
+          }
+          subtitle={__('Available Balance')}
+          actions={
+            <div className="section__actions">
+              <Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
+              <Button
+                button="secondary"
+                label={__('Receive')}
+                icon={ICONS.RECEIVE}
+                onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
+              />
+              <Button
+                button="secondary"
+                label={__('Send')}
+                icon={ICONS.SEND}
+                onClick={() => doOpenModal(MODALS.WALLET_SEND)}
+              />
+            </div>
+          }
+        />
         <div>
-          <h2 className="section__title">{__('Available Balance')}</h2>
-          <span className="section__title--large">
-            {(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
-          </span>
+          <React.Fragment>
+            {/* @if TARGET='app' */}
+            {hasSynced ? (
+              <div className="section">
+                <div className="section__flex">
+                  <Icon sectionIcon icon={ICONS.LOCK} />
+                  <h2 className="section__title--small">
+                    {__('A backup of your wallet is synced with lbry.tv.')}
+                    <HelpLink href="https://lbry.com/faq/account-sync" />
+                  </h2>
+                </div>
+              </div>
+            ) : (
+              <div className="section">
+                <div className="section__flex">
+                  <Icon sectionIcon icon={ICONS.UNLOCK} />
+                  <h2 className="section__title--small">
+                    {__(
+                      'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
+                    )}
+                    <HelpLink navigate={`/$/${PAGES.BACKUP}`} />
+                  </h2>
+                </div>
+              </div>
+            )}
+            {/* @endif */}
 
-          <div className="section__actions">
-            <Button button="primary" label={__('Your Address')} onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)} />
-            <Button
-              button="secondary"
-              icon={ICONS.SEND}
-              label={__('Send Credits')}
-              onClick={() => doOpenModal(MODALS.WALLET_SEND)}
-            />
-          </div>
-          {/* @if TARGET='app' */}
-          {hasSynced ? (
             <div className="section">
               <div className="section__flex">
-                <Icon sectionIcon iconColor={'blue'} icon={ICONS.LOCK} />
-                <h2 className="section__title--small">
-                  {__('A backup of your wallet is synced with lbry.tv.')}
-                  <HelpLink href="https://lbry.com/faq/account-sync" />
-                </h2>
-              </div>
-            </div>
-          ) : (
-            <div className="section">
-              <div className="section__flex">
-                <Icon sectionIcon iconColor={'blue'} icon={ICONS.UNLOCK} />
-                <h2 className="section__title--small">
-                  {__(
-                    'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
-                  )}
-                  <HelpLink navigate={`/$/${PAGES.BACKUP}`} />
-                </h2>
-              </div>
-            </div>
-          )}
-          {/* @endif */}
-        </div>
-
-        <div>
-          <div className="section">
-            <div className="section__flex">
-              <Icon sectionIcon icon={ICONS.TIP} />
-              <h2 className="section__title--small">
-                <strong>
-                  <CreditAmount badge={false} amount={tipsBalance} precision={8} />
-                </strong>{' '}
-                {__('earned and bound in tips')}
-                <HelpLink href="https://lbry.com/faq/tipping" />
-              </h2>
-            </div>
-          </div>
-
-          <div className="section">
-            <div className="section__flex">
-              <Icon sectionIcon icon={ICONS.LOCK} />
-              <div>
+                <Icon sectionIcon icon={ICONS.TIP} />
                 <h2 className="section__title--small">
                   <strong>
-                    <CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
+                    <CreditAmount badge={false} amount={tipsBalance} precision={8} />
                   </strong>{' '}
-                  {__('currently staked')}
+                  {__('earned and bound in tips')}
                 </h2>
-                <div className="section__subtitle">
-                  <dl>
-                    <dt>{__('... in your publishes')}</dt>
-                    <dd>
-                      <CreditAmount badge={false} amount={claimsBalance} precision={8} />
-                    </dd>
+              </div>
+            </div>
 
-                    <dt>{__('... in your supports')}</dt>
-                    <dd>
-                      <CreditAmount badge={false} amount={supportsBalance} precision={8} />
-                    </dd>
-                  </dl>
+            <div className="section">
+              <div className="section__flex">
+                <Icon sectionIcon icon={ICONS.LOCK} />
+                <div>
+                  <h2 className="section__title--small">
+                    <strong>
+                      <CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
+                    </strong>{' '}
+                    {__('currently staked')}
+                  </h2>
+                  <div className="section__subtitle">
+                    <dl>
+                      <dt>{__('... in your publishes')}</dt>
+                      <dd>
+                        <CreditAmount badge={false} amount={claimsBalance} precision={8} />
+                      </dd>
+
+                      <dt>{__('... in your supports')}</dt>
+                      <dd>
+                        <CreditAmount badge={false} amount={supportsBalance} precision={8} />
+                      </dd>
+                    </dl>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </React.Fragment>
         </div>
       </section>
     </React.Fragment>
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index a78aaa815..0d771770c 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -60,7 +60,6 @@ export const MENU = 'Menu';
 export const BACKUP = 'Database';
 export const TRANSACTIONS = 'FileText';
 export const LBRY = 'Lbry';
-export const SEND = 'Send';
 export const DISCOVER = 'Compass';
 export const VISUALIZER_ON = 'Eye';
 export const VISUALIZER_OFF = 'EyeOff';
@@ -102,3 +101,6 @@ export const ANALYTICS = 'BarChart2';
 export const PURCHASED = 'Key';
 export const CIRCLE = 'Circle';
 export const PINNED = 'Pinned';
+export const BUY = 'Buy';
+export const SEND = 'Send';
+export const RECEIVE = 'Receive';
diff --git a/ui/constants/moonpay.js b/ui/constants/moonpay.js
new file mode 100644
index 000000000..45f9e6cb9
--- /dev/null
+++ b/ui/constants/moonpay.js
@@ -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',
+];
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index e8b3a8ec5..9f53a7b43 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -37,3 +37,4 @@ exports.WELCOME = 'welcome';
 exports.CREATOR_DASHBOARD = 'dashboard';
 exports.CHECKOUT = 'checkout';
 exports.CODE_2257 = '2257';
+exports.BUY = 'buy';
diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx
index 70202e8ea..58c595ed1 100644
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@@ -37,7 +37,7 @@ import ModalMobileNavigation from 'modal/modalMobileNavigation';
 import ModalSetReferrer from 'modal/modalSetReferrer';
 import ModalRepost from 'modal/modalRepost';
 import ModalSignOut from 'modal/modalSignOut';
-import ModalLiquidateSupports from 'modal/modalSupportsLiquidate';
+import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
 import ModalConfirmAge from 'modal/modalConfirmAge';
 import ModalFileSelection from 'modal/modalFileSelection';
 
@@ -137,12 +137,12 @@ function ModalRouter(props: Props) {
       return <ModalRepost {...modalProps} />;
     case MODALS.SIGN_OUT:
       return <ModalSignOut {...modalProps} />;
-    case MODALS.LIQUIDATE_SUPPORTS:
-      return <ModalLiquidateSupports {...modalProps} />;
     case MODALS.CONFIRM_AGE:
       return <ModalConfirmAge {...modalProps} />;
     case MODALS.FILE_SELECTION:
       return <ModalFileSelection {...modalProps} />;
+    case MODALS.LIQUIDATE_SUPPORTS:
+      return <ModalSupportsLiquidate {...modalProps} />;
     default:
       return null;
   }
diff --git a/ui/page/buy/index.js b/ui/page/buy/index.js
new file mode 100644
index 000000000..b1770fb4c
--- /dev/null
+++ b/ui/page/buy/index.js
@@ -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);
diff --git a/ui/page/buy/view.jsx b/ui/page/buy/view.jsx
new file mode 100644
index 000000000..38ee47e17
--- /dev/null
+++ b/ui/page/buy/view.jsx
@@ -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>
+  );
+}
diff --git a/ui/page/rewards/view.jsx b/ui/page/rewards/view.jsx
index f71f52152..3d97f837f 100644
--- a/ui/page/rewards/view.jsx
+++ b/ui/page/rewards/view.jsx
@@ -40,11 +40,16 @@ class RewardsPage extends PureComponent<Props> {
 
     if (user && !user.is_reward_approved && rewardsEnabled) {
       if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) {
-        return <RewardAuthIntro />;
+        return (
+          <div className="section">
+            <RewardAuthIntro />
+          </div>
+        );
       }
 
       return (
         <Card
+          className="section"
           title={__('Reward Validation Pending')}
           body={
             <React.Fragment>
@@ -156,7 +161,7 @@ class RewardsPage extends PureComponent<Props> {
     return (
       <Page>
         {this.renderPageHeader()}
-        {this.renderUnclaimedRewards()}
+        <div className="section">{this.renderUnclaimedRewards()}</div>
         {<RewardListClaimed />}
       </Page>
     );
diff --git a/ui/page/wallet/index.js b/ui/page/wallet/index.js
index 6d797c4ab..a5897410d 100644
--- a/ui/page/wallet/index.js
+++ b/ui/page/wallet/index.js
@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
+import { selectBalance } from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
 import Wallet from './view';
 
-const select = state => ({});
+const select = state => ({
+  balance: selectBalance(state),
+});
 
-const perform = dispatch => ({});
-
-export default connect(
-  select,
-  perform
-)(Wallet);
+export default connect(select, {
+  doOpenModal,
+})(Wallet);
diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index 998062e90..0548be781 100644
--- a/ui/page/wallet/view.jsx
+++ b/ui/page/wallet/view.jsx
@@ -1,23 +1,69 @@
 // @flow
+import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
+import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import { withRouter } from 'react-router';
 import WalletBalance from 'component/walletBalance';
 import TxoList from 'component/txoList';
 import Page from 'component/page';
+import Yrbl from 'component/yrbl';
+import Button from 'component/button';
+import Spinner from 'component/spinner';
 
 type Props = {
   history: { action: string, push: string => void, replace: string => void },
   location: { search: string, pathname: string },
+  balance: number,
+  doOpenModal: string => void,
 };
 
 const WalletPage = (props: Props) => {
-  const { location } = props;
+  const { location, balance, doOpenModal } = props;
   const { search } = location;
+  const showIntro = balance === 0;
+  const loading = balance === undefined;
 
   return (
     <Page>
-      <WalletBalance />
-      <TxoList search={search} />
+      {loading && (
+        <div className="main--empty">
+          <Spinner delayed />
+        </div>
+      )}
+      {!loading && (
+        <>
+          {showIntro ? (
+            <div className="main--empty">
+              <Yrbl
+                title={__('Your Wallet is Empty')}
+                subtitle={
+                  <div>
+                    <p>
+                      There are a lot of ways to get LBC! You can have your friend send you a few, earn rewards, or
+                      purchase your own.
+                    </p>
+                    <div className="section__actions">
+                      <Button button="primary" label={__('Earn Rewards')} navigate={`/$/${PAGES.REWARDS}`} />
+                      <Button
+                        button="secondary"
+                        label={__('Send To Your Address')}
+                        onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
+                      />
+                      <Button button="alt" icon={ICONS.SEND} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
+                    </div>
+                  </div>
+                }
+              />
+            </div>
+          ) : (
+            <>
+              <WalletBalance />
+              <TxoList search={search} />
+            </>
+          )}
+        </>
+      )}
     </Page>
   );
 };
diff --git a/ui/page/welcome/view.jsx b/ui/page/welcome/view.jsx
index 01cc5cf11..7a8a96e77 100644
--- a/ui/page/welcome/view.jsx
+++ b/ui/page/welcome/view.jsx
@@ -5,7 +5,7 @@ import Page from 'component/page';
 
 export default function Welcome() {
   return (
-    <Page noHeader className="main--auth-page">
+    <Page noHeader noSideNavigation className="main--auth-page">
       <PrivacyAgreement />
     </Page>
   );
diff --git a/ui/scss/component/_ads.scss b/ui/scss/component/_ads.scss
index 9a288bc30..fd6f58a37 100644
--- a/ui/scss/component/_ads.scss
+++ b/ui/scss/component/_ads.scss
@@ -18,7 +18,7 @@
 // Inline Video Ads
 .ads__claim-item {
   border-bottom: 1px solid var(--color-border);
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
   background-color: var(--color-ads-background);
   display: flex;
 
@@ -44,7 +44,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-left: var(--spacing-large);
+  padding-left: var(--spacing-l);
 
   @media (max-width: $breakpoint-small) {
     padding-left: 0;
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index daf27df15..8ed842a18 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -33,8 +33,8 @@
 .button--close {
   z-index: 1;
   position: absolute;
-  top: var(--spacing-miniscule);
-  right: var(--spacing-miniscule);
+  top: var(--spacing-xxs);
+  right: var(--spacing-xxs);
   padding: 0.3rem;
   transition: all var(--transition-duration) var(--transition-style);
   border-radius: var(--card-radius);
@@ -56,13 +56,13 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-medium) var(--spacing-small);
+    padding: var(--spacing-m) var(--spacing-s);
   }
 }
 
 .button--header-close {
   background-color: var(--color-primary-alt);
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
 }
 
 .button--download-link {
@@ -88,11 +88,11 @@
 // Handle icons on the left or right side of the button label
 svg + .button__label,
 .button__label + svg {
-  margin-left: var(--spacing-small);
+  margin-left: var(--spacing-s);
 }
 
 .button-toggle {
-  padding: 0 var(--spacing-medium);
+  padding: 0 var(--spacing-m);
   height: var(--height-button);
   font-size: var(--font-base);
   border: 1px solid var(--color-border);
@@ -101,7 +101,7 @@ svg + .button__label,
   margin: 0;
   background-color: var(--color-card-background);
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-medium) var(--spacing-small);
+    padding: var(--spacing-m) var(--spacing-s);
   }
   svg {
     opacity: 0.5;
@@ -116,7 +116,7 @@ svg + .button__label,
   &:last-of-type {
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
-    margin-right: var(--spacing-small);
+    margin-right: var(--spacing-s);
   }
 }
 
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 7473b31d6..e9368c7aa 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -6,7 +6,7 @@
   border: 1px solid var(--color-border);
 
   @media (max-width: $breakpoint-small) {
-    margin-bottom: var(--spacing-medium);
+    margin-bottom: var(--spacing-m);
   }
 }
 
@@ -17,7 +17,7 @@
 
 .card--section {
   position: relative;
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
 }
 
 .card--reward-total {
@@ -31,7 +31,7 @@
 .card--inline {
   border: 1px solid var(--color-border);
   border-radius: var(--card-radius);
-  margin-bottom: var(--spacing-medium);
+  margin-bottom: var(--spacing-m);
 
   &:last-of-type {
     margin-bottom: 0;
@@ -44,7 +44,7 @@
 
 .card--claim-preview-wrap {
   @extend .card;
-  margin: var(--spacing-xlarge) 0;
+  margin: var(--spacing-xl) 0;
   min-width: 35rem;
 }
 
@@ -56,19 +56,19 @@
 .card__actions {
   display: flex;
   align-items: center;
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 
   &:only-child {
     margin-top: 0;
   }
 
   > *:not(:last-child) {
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
 
   @media (max-width: $breakpoint-small) {
     > * {
-      padding-bottom: var(--spacing-medium);
+      padding-bottom: var(--spacing-m);
     }
     flex-flow: wrap;
     justify-content: space-between;
@@ -77,7 +77,7 @@
 
 .card__title-section {
   @extend .section__flex;
-  padding: var(--spacing-medium) var(--spacing-large);
+  padding: var(--spacing-m) var(--spacing-l);
 
   @media (max-width: $breakpoint-small) {
     padding: 0;
@@ -85,7 +85,7 @@
 }
 
 .card__title-section--body-list {
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
 
   @media (max-width: $breakpoint-small) {
     padding: 0;
@@ -117,18 +117,18 @@
 
 .card-stack {
   .card:not(:last-of-type) {
-    margin-bottom: var(--spacing-large);
+    margin-bottom: var(--spacing-l);
   }
 }
 
 .card__list {
   column-count: 2;
-  column-gap: var(--spacing-large);
+  column-gap: var(--spacing-l);
   display: block;
 
   .card {
     display: inline-block;
-    margin-bottom: var(--spacing-large);
+    margin-bottom: var(--spacing-l);
   }
 
   @media (max-width: $breakpoint-small) {
@@ -141,7 +141,7 @@
 
 .card__message {
   border-left: 0.5rem solid;
-  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
+  padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-l);
   background-color: var(--color-primary-alt);
   border-color: var(--color-primary);
 }
@@ -162,19 +162,19 @@
   font-size: var(--font-title);
   font-weight: var(--font-weight-light);
   & > *:not(:last-child) {
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
   /* .badge rule inherited from file page prices, should be refactored */
   .badge {
     float: right;
-    margin-left: var(--spacing-small);
+    margin-left: var(--spacing-s);
     margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
   }
 }
 
 .card__title-actions {
   align-self: flex-start;
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
 
   @media (max-width: $breakpoint-small) {
     padding: 0;
@@ -182,7 +182,7 @@
 }
 
 .card__title.card__title--deprecated {
-  margin-bottom: var(--spacing-small);
+  margin-bottom: var(--spacing-s);
 }
 
 .card__title--between {
@@ -204,7 +204,7 @@
   align-items: flex-start;
 
   .icon__wrapper {
-    margin-right: var(--spacing-large);
+    margin-right: var(--spacing-l);
   }
 }
 
@@ -221,12 +221,12 @@
 
 .card__subtitle {
   color: var(--color-text-subtitle);
-  margin: var(--spacing-small) 0;
+  margin: var(--spacing-s) 0;
   font-size: var(--font-body);
 }
 
 .card__body {
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
 
   &:not(.card__body--no-title) {
     padding-top: 0;
@@ -238,14 +238,14 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-large);
+    padding: var(--spacing-l);
   }
 }
 
 .card__main-actions {
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
   padding-bottom: 0;
-  margin-bottom: var(--spacing-large);
+  margin-bottom: var(--spacing-l);
   border-top: 1px solid var(--color-border);
 
   &:only-child {
@@ -254,15 +254,15 @@
 }
 
 .card__body-actions {
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-small);
+    padding: var(--spacing-s);
   }
 }
 
 .card__header-actions {
   border-top: 1px solid var(--color-border);
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
   width: 100%;
 }
 
@@ -276,12 +276,12 @@
   align-items: center;
 
   :not(:first-child) {
-    margin-left: var(--spacing-small);
+    margin-left: var(--spacing-s);
   }
 }
 
 .card__expand-btn {
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
 
   @media (max-width: $breakpoint-small) {
     padding: 0;
@@ -292,10 +292,10 @@
 .card__body,
 .card__main-actions {
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-small);
+    padding: var(--spacing-s);
     padding-bottom: 0;
     margin: 0;
-    margin-bottom: var(--spacing-small);
+    margin-bottom: var(--spacing-s);
   }
 }
 
@@ -303,7 +303,7 @@
   @extend .help;
   display: flex;
   align-items: center;
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-m);
 
   &:only-child,
   &:first-child {
@@ -311,6 +311,6 @@
   }
 
   > *:not(:last-child) {
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
 }
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 2fa0869d2..c4ba58bc6 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -28,7 +28,7 @@ $metadata-z-index: 1;
   @media (max-width: $breakpoint-small) {
     // Yikes
     // I, Sean Yesmunt, take full responsibility for this monster
-    min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xlarge) + var(--spacing-medium));
+    min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
   }
 }
 
@@ -37,7 +37,7 @@ $metadata-z-index: 1;
   height: 5rem;
   width: 5rem;
   background-size: cover;
-  margin-right: var(--spacing-medium);
+  margin-right: var(--spacing-m);
 }
 
 .channel-thumbnail--small {
@@ -49,9 +49,9 @@ $metadata-z-index: 1;
   position: absolute;
   height: var(--channel-thumbnail-width);
   width: var(--channel-thumbnail-width);
-  left: var(--spacing-medium);
+  left: var(--spacing-m);
   top: 4rem;
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
   box-shadow: var(--card-box-shadow);
 
   @media (max-width: $breakpoint-small) {
@@ -102,22 +102,22 @@ $metadata-z-index: 1;
   z-index: $metadata-z-index;
   // Jump over the thumbnail photo because it is absolutely positioned
   // Then add normal page spacing, _then_ add the actual padding
-  padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
-  padding-right: var(--spacing-medium);
-  padding-bottom: var(--spacing-medium);
-  margin-top: var(--spacing-xlarge);
+  padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
+  padding-right: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
+  margin-top: var(--spacing-xl);
   min-width: 0;
   width: 100%;
 
   @media (max-width: $breakpoint-small) {
-    padding-left: var(--spacing-medium);
+    padding-left: var(--spacing-m);
     margin-top: 0;
   }
 }
 
 .channel__title {
   display: inline;
-  margin-right: var(--spacing-small);
+  margin-right: var(--spacing-s);
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: xx-large;
@@ -126,11 +126,11 @@ $metadata-z-index: 1;
   // Quick hack to get this to work
   // We should have a generic style for "header with button next to it"
   .button {
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
   }
 
   @media (max-width: $breakpoint-small) {
-    padding-top: var(--spacing-xlarge);
+    padding-top: var(--spacing-xl);
   }
 }
 
@@ -151,37 +151,37 @@ $metadata-z-index: 1;
 .channel__quick-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--spacing-small);
-  margin-left: var(--spacing-medium);
+  margin-top: var(--spacing-s);
+  margin-left: var(--spacing-m);
   position: absolute;
   top: 0;
-  right: var(--spacing-medium);
-  margin-top: var(--spacing-medium);
+  right: var(--spacing-m);
+  margin-top: var(--spacing-m);
   z-index: $metadata-z-index;
   flex-wrap: wrap;
   font-size: var(--font-base);
 
   > * {
-    padding: 0 var(--spacing-xsmall);
+    padding: 0 var(--spacing-xs);
 
     &:not(:last-child) {
-      margin-right: var(--spacing-medium);
+      margin-right: var(--spacing-m);
     }
   }
 
   @media (max-width: $breakpoint-small) {
     > * {
-      margin-bottom: var(--spacing-xsmall);
+      margin-bottom: var(--spacing-xs);
     }
   }
 }
 
 .channel-name--inline {
-  margin-left: var(--spacing-xsmall);
+  margin-left: var(--spacing-xs);
 }
 
 .menu__list.channel__list {
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-s);
   margin-left: 0;
   border-radius: var(--border-radius);
   background: transparent;
@@ -210,7 +210,7 @@ $metadata-z-index: 1;
     }
 
     .channel__list-item {
-      padding-right: calc(var(--spacing-xlarge) + var(--spacing-small) * 2);
+      padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
       border-left: 1px solid var(--color-border);
       border-right: 1px solid var(--color-border);
     }
@@ -221,7 +221,7 @@ $metadata-z-index: 1;
   display: flex;
   align-items: center;
   background-color: var(--color-card-background);
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
   border-bottom: 1px solid var(--color-border);
 
   .channel-thumbnail {
@@ -231,8 +231,8 @@ $metadata-z-index: 1;
 
   .icon {
     color: var(--color-menu-icon);
-    margin-left: var(--spacing-large);
-    margin-right: var(--spacing-small);
+    margin-left: var(--spacing-l);
+    margin-right: var(--spacing-s);
   }
 
   &:hover {
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index b952104ad..479842552 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -4,21 +4,32 @@
   }
 }
 
+.claim-list--card-body {
+  .claim-preview {
+    padding: 0 var(--spacing-m);
+    padding-right: 0;
+
+    @media (max-width: $breakpoint-small) {
+      padding: 0;
+    }
+  }
+}
+
 .claim-list__header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin: var(--spacing-medium) 0;
+  margin: var(--spacing-m) 0;
   margin-top: 0;
   font-size: var(--font-body);
 
   .spinner {
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
   }
 }
 
 .claim-list__dropdown {
-  padding: 0 var(--spacing-medium);
+  padding: 0 var(--spacing-m);
 
   @media (max-width: $breakpoint-small) {
     margin-left: 0;
@@ -32,7 +43,7 @@
   color: var(--color-text-subtitle);
 
   .icon {
-    margin-right: var(--spacing-xsmall);
+    margin-right: var(--spacing-xs);
   }
 
   @media (max-width: $breakpoint-small) {
@@ -51,10 +62,10 @@
   display: flex;
   align-items: center;
   margin-left: auto;
-  padding-top: var(--spacing-medium);
+  padding-top: var(--spacing-m);
 
   & > * {
-    margin-left: var(--spacing-small);
+    margin-left: var(--spacing-s);
   }
 
   @media (max-width: $breakpoint-small) {
@@ -63,7 +74,7 @@
 }
 
 .claim-preview__wrapper {
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
   list-style: none;
 }
 
@@ -76,7 +87,7 @@
 }
 
 .claim-preview__wrapper--small {
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
 }
 
 .claim-preview {
@@ -95,7 +106,7 @@
     @include handleClaimListGifThumbnail($width);
 
     flex-shrink: 0;
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
 
   .channel-thumbnail {
@@ -149,7 +160,7 @@
 }
 
 .claim-preview--padded {
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
 }
 
 .claim-preview--inline {
@@ -205,7 +216,7 @@
   flex: 1;
 
   @media (max-width: $breakpoint-small) {
-    margin-bottom: var(--spacing-small);
+    margin-bottom: var(--spacing-s);
   }
 }
 
@@ -248,12 +259,12 @@
   display: flex;
   position: relative;
   overflow: visible;
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
 
   .media__thumb {
     width: var(--file-list-thumbnail-width);
     flex-shrink: 0;
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
 }
 
@@ -263,7 +274,7 @@
 
 .claim-upload__progress--inner {
   background: var(--color-primary-alt);
-  padding: var(--spacing-miniscule);
+  padding: var(--spacing-xxs);
 }
 
 //
@@ -280,21 +291,21 @@
 
 .claim-grid__wrapper {
   &:not(:first-of-type) {
-    margin-top: var(--spacing-large);
+    margin-top: var(--spacing-l);
   }
 
   @media (max-width: $breakpoint-small) {
     &:not(:first-of-type) {
-      margin-top: var(--spacing-medium);
+      margin-top: var(--spacing-m);
     }
   }
 }
 
 .claim-grid__title {
-  margin-bottom: var(--spacing-medium);
+  margin-bottom: var(--spacing-m);
 
   &:not(:first-of-type) {
-    margin-top: var(--spacing-xlarge);
+    margin-top: var(--spacing-xl);
   }
 }
 
@@ -307,14 +318,14 @@
 }
 
 .claim-preview--tile {
-  $width: calc((100% - var(--spacing-medium) * 3) / 4);
+  $width: calc((100% - var(--spacing-m) * 3) / 4);
   width: $width;
   @include handleClaimTileGifThumbnail($width);
 
-  margin-bottom: var(--spacing-large);
+  margin-bottom: var(--spacing-l);
   margin-right: 0;
   margin-top: 0;
-  margin-left: var(--spacing-medium);
+  margin-left: var(--spacing-m);
   justify-content: flex-start;
 
   @media (min-width: $breakpoint-medium) {
@@ -334,7 +345,7 @@
   }
 
   @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
-    $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 2) / 3);
+    $width: calc((100vw - var(--side-nav-width) - (var(--spacing-l) * 4) - var(--spacing-m) * 2) / 3);
     width: $width;
     @include handleClaimTileGifThumbnail($width);
 
@@ -349,7 +360,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    $width: calc((100vw / 2) - var(--spacing-small) * 2);
+    $width: calc((100vw / 2) - var(--spacing-s) * 2);
     width: $width;
     @include handleClaimTileGifThumbnail($width);
     margin-bottom: var(--spacing-large);
@@ -367,7 +378,7 @@
 
 .claim-tile__title {
   margin-bottom: 0;
-  margin: var(--spacing-small);
+  margin: var(--spacing-s);
   font-weight: 600;
   font-size: var(--font-small);
   color: var(--color-text);
@@ -380,14 +391,14 @@
 
 .claim-tile__info {
   display: flex;
-  margin-top: var(--spacing-small);
-  padding: var(--spacing-small);
+  margin-top: var(--spacing-s);
+  padding: var(--spacing-s);
   border-top: 1px solid var(--color-border);
   color: var(--color-subtitle);
 
   .channel-thumbnail {
     @include handleChannelGif(2.1rem);
-    margin-right: var(--spacing-small);
+    margin-right: var(--spacing-s);
   }
 }
 
@@ -414,8 +425,8 @@
 
 .claim-tile__file-properties {
   position: absolute;
-  bottom: var(--spacing-miniscule);
-  right: var(--spacing-miniscule);
+  bottom: var(--spacing-xxs);
+  right: var(--spacing-xxs);
   background-color: var(--color-black);
   padding: 0.3rem;
   border-radius: var(--border-radius);
@@ -442,31 +453,31 @@
 }
 
 .claim-preview__repost-author {
-  transform: translateY(calc(var(--spacing-xsmall) * -1));
+  transform: translateY(calc(var(--spacing-xs) * -1));
   font-size: var(--font-xsmall);
   color: var(--color-text-subtitle);
 
   .icon {
-    margin-right: var(--spacing-miniscule);
+    margin-right: var(--spacing-xxs);
     margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
   }
 }
 
 .claim-tile__repost-author {
-  margin: var(--spacing-small);
+  margin: var(--spacing-s);
   margin-bottom: 0;
 }
 
 .claim-preview__hover-actions {
   display: none;
   position: absolute;
-  top: var(--spacing-miniscule);
-  right: var(--spacing-miniscule);
+  top: var(--spacing-xxs);
+  right: var(--spacing-xxs);
 
   & > * {
     color: var(--color-black);
     background-color: var(--color-white);
-    padding: var(--spacing-xsmall);
+    padding: var(--spacing-xs);
     border-radius: var(--border-radius);
   }
 }
diff --git a/ui/scss/component/_claim-search.scss b/ui/scss/component/_claim-search.scss
index 8b1cdadfa..26af04eaa 100644
--- a/ui/scss/component/_claim-search.scss
+++ b/ui/scss/component/_claim-search.scss
@@ -5,9 +5,9 @@
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
-  padding: var(--spacing-medium);
-  padding-bottom: var(--spacing-small);
-  margin-top: var(--spacing-medium);
+  padding: var(--spacing-m);
+  padding-bottom: var(--spacing-s);
+  margin-top: var(--spacing-m);
   color: var(--color-text-subtitle);
 
   @media (max-width: $breakpoint-small) {
@@ -17,7 +17,7 @@
 }
 
 .claim-search__dropdown {
-  padding: 0 var(--spacing-medium);
+  padding: 0 var(--spacing-m);
   max-width: 400px;
   font-size: var(--font-body);
   background-color: var(--color-card-background);
@@ -45,14 +45,14 @@
   }
 
   &:not(:first-of-type) {
-    padding-left: var(--spacing-medium);
+    padding-left: var(--spacing-m);
   }
 
   @media (max-width: $breakpoint-small) {
     padding-left: 0px;
 
     &:not(:first-of-type) {
-      margin-top: var(--spacing-small);
+      margin-top: var(--spacing-s);
     }
 
     &:not(:first-of-type) {
@@ -80,6 +80,6 @@
   flex-wrap: nowrap;
 
   @media (max-width: $breakpoint-small) {
-    margin-bottom: var(--spacing-small);
+    margin-bottom: var(--spacing-s);
   }
 }
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 60e9f9ca4..e1493dc8d 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -1,5 +1,5 @@
 .comments {
-  padding-top: var(--spacing-large);
+  padding-top: var(--spacing-l);
 }
 
 .comment {
@@ -10,10 +10,10 @@
 
   &:not(:last-of-type) {
     border-bottom: 1px solid var(--color-border);
-    padding: var(--spacing-medium) 0;
+    padding: var(--spacing-m) 0;
   }
   &:last-of-type {
-    padding-top: var(--spacing-medium);
+    padding-top: var(--spacing-m);
   }
 
   .channel-thumbnail {
@@ -22,24 +22,24 @@
 }
 
 .comment__create--reply {
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-s);
 }
 
 .comment__reply {
   border-left: 5px solid var(--color-primary-alt);
-  margin-left: var(--spacing-medium);
+  margin-left: var(--spacing-m);
 
   .comment__author-thumbnail {
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
   }
 }
 
 .comment__reply-button {
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-s);
 }
 
 .comment__body_container {
-  padding-right: var(--spacing-small);
+  padding-right: var(--spacing-s);
   flex: 1;
 }
 
@@ -47,7 +47,7 @@
   display: flex;
   justify-content: space-between;
   text-overflow: ellipsis;
-  margin-bottom: var(--spacing-small);
+  margin-bottom: var(--spacing-s);
 }
 
 .comment__meta-information {
@@ -57,12 +57,12 @@
 
 .comment__message {
   white-space: pre-line;
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-s);
 }
 
 .comment__author {
   text-overflow: ellipsis;
-  padding-right: var(--spacing-xsmall);
+  padding-right: var(--spacing-xs);
 }
 
 .comment__time {
@@ -82,7 +82,7 @@
 .comment__menu-option {
   display: flex;
   align-items: center;
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
   font-size: var(--font-small);
 }
 
diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss
index cb0735014..26a03dcfa 100644
--- a/ui/scss/component/_content.scss
+++ b/ui/scss/component/_content.scss
@@ -1,14 +1,14 @@
 .content__viewer {
   @extend .card;
   position: absolute;
-  top: var(--spacing-large);
+  top: var(--spacing-l);
 }
 
 .content__viewer--inline {
   max-height: var(--inline-player-max-height);
 
   @media (max-width: $breakpoint-small) {
-    margin-top: var(--spacing-xsmall);
+    margin-top: var(--spacing-xs);
   }
 }
 
@@ -17,7 +17,7 @@
   margin-bottom: 0;
   height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
   overflow: hidden;
-  left: calc(var(--spacing-large) + var(--spacing-small));
+  left: calc(var(--spacing-l) + var(--spacing-s));
   z-index: 9999;
 
   &:hover {
@@ -48,7 +48,7 @@
     height: 1.5rem;
     top: 0;
     position: relative;
-    margin-left: var(--spacing-small);
+    margin-left: var(--spacing-s);
 
     svg {
       color: var(--color-white);
@@ -78,7 +78,7 @@
 .content__info {
   cursor: grab;
   height: var(--floating-viewer-info-height);
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -154,12 +154,12 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: 0 var(--spacing-large);
+  padding: 0 var(--spacing-l);
   background-color: #000;
 
   &.content__loading--document {
     background-color: var(--color-card-background);
-    padding: calc(var(--spacing-xlarge) * 3) 0;
+    padding: calc(var(--spacing-xl) * 3) 0;
 
     .content__loading-text {
       color: var(--color-text);
diff --git a/ui/scss/component/_expandable.scss b/ui/scss/component/_expandable.scss
index df0a4b549..b10d7ef75 100644
--- a/ui/scss/component/_expandable.scss
+++ b/ui/scss/component/_expandable.scss
@@ -1,6 +1,6 @@
 .expandable--closed,
 .expandable--open {
-  margin-bottom: var(--spacing-small);
+  margin-bottom: var(--spacing-s);
 }
 
 .expandable--closed {
diff --git a/ui/scss/component/_file-drop.scss b/ui/scss/component/_file-drop.scss
index a0ca4fc91..fc0bc6d99 100644
--- a/ui/scss/component/_file-drop.scss
+++ b/ui/scss/component/_file-drop.scss
@@ -26,14 +26,14 @@
     min-width: 400px;
     align-items: center;
     flex-direction: column;
-    padding: var(--spacing-large);
+    padding: var(--spacing-l);
 
     .main-icon {
-      margin: var(--spacing-small);
+      margin: var(--spacing-s);
     }
 
     p {
-      margin-bottom: var(--spacing-large);
+      margin-bottom: var(--spacing-l);
     }
   }
 }
diff --git a/ui/scss/component/_file-list.scss b/ui/scss/component/_file-list.scss
index ed8647b65..799ff25f4 100644
--- a/ui/scss/component/_file-list.scss
+++ b/ui/scss/component/_file-list.scss
@@ -2,5 +2,5 @@
   width: 100%;
   overflow: auto;
   max-height: 220px;
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
 }
diff --git a/ui/scss/component/_file-properties.scss b/ui/scss/component/_file-properties.scss
index 7cc3d6484..38519194f 100644
--- a/ui/scss/component/_file-properties.scss
+++ b/ui/scss/component/_file-properties.scss
@@ -4,11 +4,11 @@
   align-items: center;
   font-size: var(--font-small);
   color: var(--color-text-help);
-  margin-left: var(--spacing-medium);
+  margin-left: var(--spacing-m);
   white-space: nowrap;
 
   & > *:not(:last-child) {
-    margin-right: var(--spacing-small);
+    margin-right: var(--spacing-s);
   }
 
   @media (max-width: $breakpoint-xsmall) {
@@ -18,11 +18,11 @@
 
 .file-properties--large {
   flex-wrap: wrap;
-  margin-bottom: var(--spacing-large);
+  margin-bottom: var(--spacing-l);
   margin-left: 0;
 
   & > * {
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
   }
 }
 
@@ -37,7 +37,7 @@
   }
 
   & > *:not(:last-child) {
-    margin-right: var(--spacing-miniscule);
+    margin-right: var(--spacing-xxs);
   }
 
   @media (max-width: $breakpoint-xsmall) {
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index a37ef76b2..68019e30a 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -5,11 +5,11 @@
   .card + .file-render,
   .card + .file-page__video-container,
   .card + .content__cover {
-    margin-top: var(--spacing-large);
+    margin-top: var(--spacing-l);
   }
 
   .card + .file-render {
-    margin-top: var(--spacing-large);
+    margin-top: var(--spacing-l);
   }
 
   .file-page__md {
@@ -62,7 +62,7 @@
 
     @media (max-width: $breakpoint-small) {
       width: 100%;
-      padding: var(--spacing-small);
+      padding: var(--spacing-s);
     }
   }
 }
@@ -100,7 +100,7 @@
   overflow: hidden;
   .comic-viewer {
     width: 100%;
-    height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
+    height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
     max-height: var(--inline-player-max-height);
   }
 }
@@ -112,7 +112,7 @@
   for now, since we don't know size, let's make as large as we can without being larger than available area
   */
   iframe {
-    height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
+    height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
   }
 }
 
@@ -121,7 +121,7 @@
   overflow: hidden;
 
   .three-viewer {
-    height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
+    height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
     max-height: var(--inline-player-max-height);
   }
 }
@@ -141,7 +141,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
 
   @media (max-width: $breakpoint-small) {
     font-size: var(--font-small);
@@ -175,15 +175,15 @@
 .file-viewer__overlay-title {
   text-align: center;
   font-size: var(--font-large);
-  margin-bottom: var(--spacing-medium);
+  margin-bottom: var(--spacing-m);
 }
 .file-viewer__overlay-secondary {
   color: var(--color-text-subtitle);
-  margin-bottom: var(--spacing-medium);
+  margin-bottom: var(--spacing-m);
 }
 .file-viewer__overlay-actions {
   .button + .button {
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
   }
 }
 
@@ -216,7 +216,7 @@
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
 
   .button {
-    padding: var(--spacing-small);
+    padding: var(--spacing-s);
     color: var(--color-white);
 
     .button__label {
@@ -230,7 +230,7 @@
 
   .credit-amount,
   .icon--Key {
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
 }
 
@@ -246,11 +246,11 @@
   display: flex;
   align-items: center;
   font-size: var(--font-small);
-  margin-left: var(--spacing-medium);
+  margin-left: var(--spacing-m);
   white-space: nowrap;
 
   & > *:not(:last-child) {
-    margin-right: var(--spacing-small);
+    margin-right: var(--spacing-s);
   }
 }
 
@@ -276,7 +276,7 @@
 
   .CodeMirror .CodeMirror-lines {
     // is there really a .CodeMirror inside a .CodeMirror?
-    padding: var(--spacing-small) 0;
+    padding: var(--spacing-s) 0;
   }
 
   .CodeMirror-code {
@@ -287,11 +287,11 @@
   .CodeMirror-gutters {
     background-color: var(--color-gray-1);
     border-right: 1px solid var(--color-gray-4);
-    padding-right: var(--spacing-medium);
+    padding-right: var(--spacing-m);
   }
 
   .CodeMirror-line {
-    padding-left: var(--spacing-medium);
+    padding-left: var(--spacing-m);
   }
 
   .CodeMirror-linenumber {
@@ -405,7 +405,7 @@
   font-size: var(--font-small);
 }
 .autoplay-countdown__counter {
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-m);
 }
 
 .autoplay-countdown__button {
diff --git a/ui/scss/component/_footer.scss b/ui/scss/component/_footer.scss
index de72af21b..3b3deab6d 100644
--- a/ui/scss/component/_footer.scss
+++ b/ui/scss/component/_footer.scss
@@ -3,28 +3,28 @@
   justify-content: center;
   max-width: 80%;
   margin: auto;
-  padding: var(--spacing-xlarge);
+  padding: var(--spacing-xl);
   font-size: var(--font-small);
 
   @media (max-width: $breakpoint-small) {
     max-width: 100%;
-    padding: var(--spacing-medium);
+    padding: var(--spacing-m);
     flex-direction: column;
   }
 }
 
 .footer__section {
-  margin-left: var(--spacing-xlarge);
+  margin-left: var(--spacing-xl);
 
   @media (max-width: $breakpoint-small) {
-    margin-left: var(--spacing-large);
+    margin-left: var(--spacing-l);
   }
 }
 
 .footer__section-title {
   @extend .help;
   font-weight: 300;
-  margin-bottom: var(--spacing-medium);
+  margin-bottom: var(--spacing-m);
 }
 
 .footer__link {
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index e66898658..f41964746 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -17,7 +17,7 @@ input[type='number'] {
 
 fieldset-group {
   + fieldset-group {
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
   }
 
   &.fieldset-group--smushed {
@@ -46,8 +46,8 @@ fieldset-group {
     }
 
     &.fieldgroup--paginate {
-      padding-bottom: var(--spacing-large);
-      margin-top: var(--spacing-large);
+      padding-bottom: var(--spacing-l);
+      margin-top: var(--spacing-l);
       align-items: flex-end;
       justify-content: center;
     }
@@ -74,7 +74,7 @@ fieldset-group {
       .form-field__prefix {
         white-space: nowrap;
         padding: 0.5rem;
-        padding-right: var(--spacing-small);
+        padding-right: var(--spacing-s);
         height: var(--height-input);
         border: 1px solid;
         border-top-left-radius: var(--border-radius);
@@ -95,7 +95,7 @@ fieldset-group {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         border-color: var(--color-input-border);
-        padding-left: var(--spacing-xsmall);
+        padding-left: var(--spacing-xs);
       }
     }
   }
@@ -122,13 +122,13 @@ fieldset-group {
 
 .form-field__help {
   @extend .help;
-  margin-top: var(--spacing-miniscule);
-  margin-bottom: var(--spacing-small);
+  margin-top: var(--spacing-xxs);
+  margin-bottom: var(--spacing-s);
 }
 
 .form-field__help + .checkbox,
 .form-field__help + .radio {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 }
 
 .form-field__conjuction {
@@ -147,11 +147,11 @@ fieldset-group {
 
 fieldset-section {
   .form-field__internal-option {
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
     margin-left: 2.2rem;
 
     &:first-of-type {
-      margin-top: var(--spacing-small); // Extra specificity needed here since _section.scss is applied after this file
+      margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file
     }
   }
 }
diff --git a/ui/scss/component/_form-row.scss b/ui/scss/component/_form-row.scss
index 47f18e9de..82b7eecb2 100644
--- a/ui/scss/component/_form-row.scss
+++ b/ui/scss/component/_form-row.scss
@@ -4,12 +4,12 @@
   align-items: flex-end;
 
   &:not(.form-row--padded):not(:last-of-type) {
-    margin-bottom: var(--spacing-medium);
+    margin-bottom: var(--spacing-m);
   }
 
   .form-field {
     &:not(:first-of-type) {
-      padding-left: var(--spacing-medium);
+      padding-left: var(--spacing-m);
     }
 
     &.form-field--stretch {
@@ -24,7 +24,7 @@
 
   button + input,
   input + button {
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
   }
 }
 
@@ -34,8 +34,8 @@
 
 .form-row--padded {
   // Ignore the class name, margin allows these to collapse with other items
-  margin-top: var(--spacing-large);
-  margin-bottom: var(--spacing-large);
+  margin-top: var(--spacing-l);
+  margin-bottom: var(--spacing-l);
 }
 
 .form-row--right {
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index d47c07daa..5c434a86a 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -36,10 +36,10 @@
   display: flex;
   align-items: center;
   margin: auto;
-  padding: 0 var(--spacing-large);
+  padding: 0 var(--spacing-l);
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-small);
+    padding: var(--spacing-s);
   }
 }
 
@@ -70,7 +70,7 @@
 
   @media (max-width: $breakpoint-small) {
     display: block;
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
 
     svg {
       stroke: var(--color-text);
@@ -80,14 +80,14 @@
 
 .header__menu--with-balance {
   button:first-child {
-    margin-left: var(--spacing-large);
-    margin-right: var(--spacing-medium);
+    margin-left: var(--spacing-l);
+    margin-right: var(--spacing-m);
   }
 }
 
 .header__navigation-arrows {
   display: flex;
-  margin-right: var(--spacing-small);
+  margin-right: var(--spacing-s);
 }
 
 .header__navigation-item {
@@ -117,7 +117,7 @@
   width: var(--height-button);
   background-color: var(--color-header-button);
   border-radius: 1.5rem;
-  margin-left: var(--spacing-small);
+  margin-left: var(--spacing-s);
 
   &:hover {
     background-color: var(--color-primary-alt);
@@ -138,7 +138,7 @@
 
 .header__navigation-item--lbry {
   font-weight: var(--font-weight-bold);
-  margin-right: var(--spacing-medium);
+  margin-right: var(--spacing-m);
 
   .lbry-icon {
     height: 2rem;
@@ -155,7 +155,7 @@
 }
 
 .header__navigation-item--balance {
-  margin: 0 var(--spacing-medium);
+  margin: 0 var(--spacing-m);
   font-weight: var(--font-weight-bold);
 }
 
@@ -169,7 +169,7 @@
 
 .header__navigation-button {
   margin: 0;
-  padding: var(--spacing-miniscule) var(--spacing-medium);
+  padding: var(--spacing-xxs) var(--spacing-m);
   display: flex;
   align-items: center;
 
@@ -182,7 +182,7 @@
 .header__navigation-button-help {
   @extend .help;
   margin-top: 0;
-  margin-left: var(--spacing-small);
+  margin-left: var(--spacing-s);
 }
 
 .header__auth-buttons {
@@ -191,6 +191,6 @@
   font-weight: var(--font-weight-bold);
 
   & > *:not(:last-child) {
-    margin: 0 var(--spacing-medium);
+    margin: 0 var(--spacing-m);
   }
 }
diff --git a/ui/scss/component/_icon.scss b/ui/scss/component/_icon.scss
index 4a84bdf1f..a254b471c 100644
--- a/ui/scss/component/_icon.scss
+++ b/ui/scss/component/_icon.scss
@@ -35,11 +35,11 @@
 
 .icon--help {
   color: var(--color-subtitle);
-  margin-left: var(--spacing-xsmall);
+  margin-left: var(--spacing-xs);
   opacity: 0.7;
   top: 2px;
 }
 
 .icon--hidden {
-  margin-right: var(--spacing-small);
+  margin-right: var(--spacing-s);
 }
diff --git a/ui/scss/component/_item-list.scss b/ui/scss/component/_item-list.scss
index 45ba2b5b5..7f09d0fc9 100644
--- a/ui/scss/component/_item-list.scss
+++ b/ui/scss/component/_item-list.scss
@@ -1,18 +1,18 @@
 .item-list {
   background-color: black; //white;
-  margin-bottom: var(--spacing-large);
-  padding: var(--spacing-large);
+  margin-bottom: var(--spacing-l);
+  padding: var(--spacing-l);
 
   .card__actions {
-    margin-top: var(--spacing-medium);
-    margin-left: var(--spacing-small);
+    margin-top: var(--spacing-m);
+    margin-left: var(--spacing-s);
   }
 }
 
 .item-list__row {
   align-items: center;
   display: flex;
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
 
   fieldset-section {
     margin-bottom: 0;
@@ -25,7 +25,7 @@
   white-space: nowrap;
 
   &:not(:first-of-type) {
-    padding-left: var(--spacing-small);
+    padding-left: var(--spacing-s);
   }
 }
 
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 64b317c4a..7c7b4bb98 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -15,16 +15,16 @@
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--header-height);
-  padding: var(--spacing-large); // Unfortunately this is coupled with .claim-preview--tile width calculation
+  padding: var(--spacing-l); // Unfortunately this is coupled with .claim-preview--tile width calculation
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-small);
+    padding: var(--spacing-s);
   }
 }
 
 .main {
   position: relative;
-  width: calc(100% - var(--side-nav-width) - var(--spacing-large));
+  width: calc(100% - var(--side-nav-width) - var(--spacing-l));
 
   @media (max-width: $breakpoint-small) {
     width: 100%;
@@ -40,6 +40,29 @@
   margin-right: auto;
 }
 
+.main--buy {
+  @extend .main--auth-page;
+  max-width: 30rem;
+  min-height: 400px;
+
+  .card {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  iframe {
+    min-height: 420px;
+    background-color: var(--color-card-background);
+    margin: -0.8rem;
+    margin-bottom: 2rem;
+  }
+
+  .sm:bg-grey-lighter {
+    background-color: var(--color-card-background);
+  }
+}
+
 .main--empty {
   align-self: center;
   display: flex;
@@ -53,7 +76,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: 0 var(--spacing-medium);
+    padding: 0 var(--spacing-m);
   }
 }
 
diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss
index ce5b3f89d..ce6902abc 100644
--- a/ui/scss/component/_markdown-editor.scss
+++ b/ui/scss/component/_markdown-editor.scss
@@ -53,7 +53,7 @@
 }
 
 .form-field--SimpleMDE {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 
   // Override hyperlink styles
   .cm-s-easymde .cm-link {
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 1dfd90696..21e459281 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -20,10 +20,10 @@
   h6 {
     font-size: inherit;
     font-weight: var(--font-weight-bold);
-    margin-bottom: var(--spacing-medium);
+    margin-bottom: var(--spacing-m);
 
     &:not(:first-child) {
-      margin-top: var(--spacing-large);
+      margin-top: var(--spacing-l);
     }
   }
 
@@ -53,12 +53,12 @@
   ol,
   pre,
   table {
-    margin-top: var(--spacing-medium);
+    margin-top: var(--spacing-m);
   }
-  
+
   blockquote {
     white-space: normal;
-    
+
     p:first-child {
       margin-top: 0;
     }
@@ -67,7 +67,7 @@
   // Tables
   table {
     margin-bottom: 1.2rem;
-    padding: var(--spacing-medium);
+    padding: var(--spacing-m);
     word-break: normal;
 
     tr {
@@ -77,7 +77,7 @@
       th:first-of-type,
       td:last-of-type,
       th:last-of-type {
-        padding: var(--spacing-small) var(--spacing-medium);
+        padding: var(--spacing-s) var(--spacing-m);
       }
     }
 
@@ -99,8 +99,8 @@
 
   // Image
   img {
-    margin-bottom: var(--spacing-medium);
-    padding-top: var(--spacing-medium);
+    margin-bottom: var(--spacing-m);
+    padding-top: var(--spacing-m);
     max-height: var(--inline-player-max-height);
     object-position: left;
 
@@ -123,8 +123,8 @@
     word-break: break-all;
 
     code {
-      margin-bottom: var(--spacing-medium);
-      padding: var(--spacing-medium);
+      margin-bottom: var(--spacing-m);
+      padding: var(--spacing-m);
       display: block;
       white-space: pre-wrap;
     }
@@ -134,10 +134,10 @@
   code {
     background-color: var(--color-blockquote);
     display: inline-block;
-    margin: var(--spacing-miniscule);
+    margin: var(--spacing-xxs);
     border-radius: 0.2rem;
     font-size: var(--font-small);
-    padding: calc(var(--spacing-miniscule) - 4px) var(--spacing-miniscule);
+    padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs);
   }
 
   a {
@@ -183,7 +183,7 @@
   }
 
   .preview-link__description {
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
   }
 }
 
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index e3f36039f..1dd23f484 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -24,14 +24,14 @@
   @media (max-width: $breakpoint-small) {
     position: static;
     transform: none;
-    margin-bottom: var(--spacing-xsmall);
+    margin-bottom: var(--spacing-xs);
     max-width: 100%;
     white-space: nowrap;
   }
 
   // This is terrible and should not be removed
   .icon {
-    margin-right: var(--spacing-xsmall) / 2;
+    margin-right: var(--spacing-xs) / 2;
     margin-bottom: -0.08rem;
   }
 }
@@ -67,13 +67,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: var(--spacing-s);
 }
 
 .media__info-text {
   word-break: break-word;
 
   &:not(:last-of-type) {
-    margin-bottom: var(--spacing-medium);
+    margin-bottom: var(--spacing-m);
   }
 
   &.media__info-text--constrained {
@@ -89,11 +90,11 @@
 
   @media (max-width: $breakpoint-small) {
     justify-content: flex-start;
-    padding-top: var(--spacing-small);
+    padding-top: var(--spacing-s);
 
     > * {
-      margin-right: var(--spacing-small);
-      margin-bottom: var(--spacing-small);
+      margin-right: var(--spacing-s);
+      margin-bottom: var(--spacing-s);
     }
   }
 }
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index 2b11bf7db..43d2520a5 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -27,7 +27,7 @@
   min-width: 500px;
   max-width: var(--modal-width);
   overflow: auto;
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
   word-break: break-word;
 
   &:focus {
@@ -50,13 +50,13 @@
     .navigation {
       width: 100%;
       display: block;
-      padding: var(--spacing-large);
+      padding: var(--spacing-l);
 
       .navigation-links:not(.navigation-links--small) {
         .navigation-link {
           font-size: var(--font-large);
           border-bottom: 1px solid var(--color-gray-3);
-          padding: var(--spacing-medium) 0;
+          padding: var(--spacing-m) 0;
         }
       }
     }
@@ -75,7 +75,7 @@
 
 .error-modal__content {
   display: flex;
-  padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
+  padding: 0 var(--spacing-m) var(--spacing-m) var(--spacing-m);
 }
 
 .error-modal {
@@ -87,8 +87,8 @@
 .error-modal__error-list {
   max-width: var(--modal-width);
   max-height: 400px;
-  margin-top: var(--spacing-small);
-  padding: var(--spacing-small);
+  margin-top: var(--spacing-s);
+  padding: var(--spacing-s);
 
   background-color: var(--color-error);
   border-left: 2px solid var(--color-text-error);
diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss
index 3bb47249f..6f5ed65b7 100644
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@@ -10,11 +10,11 @@
 }
 
 .navigation + .ads-wrapper {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 }
 
 .navigation__secondary {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 }
 
 .navigation-links {
@@ -30,11 +30,11 @@
 }
 
 .navigation-links__inline {
-  margin-left: calc(var(--spacing-medium) + var(--spacing-small));
+  margin-left: calc(var(--spacing-m) + var(--spacing-s));
 }
 
 .navigation-link__wrapper {
-  margin: var(--spacing-miniscule) 0;
+  margin: var(--spacing-xxs) 0;
 }
 
 .navigation-link {
@@ -46,7 +46,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   color: var(--color-navigation-link);
-  margin-top: var(--spacing-small);
+  margin-top: var(--spacing-s);
 
   .icon {
     stroke: var(--color-link-icon);
diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss
index 1ff42e467..982058f52 100644
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@@ -4,7 +4,7 @@
   align-items: center;
 
   + .form-field {
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
   }
 
   @media (max-width: $breakpoint-small) {
@@ -65,7 +65,7 @@
 .pagination__item--next {
   line-height: 1.5;
   position: relative;
-  padding-top: var(--spacing-small);
+  padding-top: var(--spacing-s);
 }
 
 .pagination__item--selected {
diff --git a/ui/scss/component/_placeholder.scss b/ui/scss/component/_placeholder.scss
index 6369b7cb7..fdeeaadee 100644
--- a/ui/scss/component/_placeholder.scss
+++ b/ui/scss/component/_placeholder.scss
@@ -15,7 +15,7 @@
   }
 
   &.media__subtitle {
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
 
     width: 30%;
     height: 1.5em;
diff --git a/ui/scss/component/_purchase.scss b/ui/scss/component/_purchase.scss
index 0ef2d1aae..7f647c7dd 100644
--- a/ui/scss/component/_purchase.scss
+++ b/ui/scss/component/_purchase.scss
@@ -7,7 +7,7 @@
   .credit-amount,
   .icon--Key {
     position: relative;
-    margin-left: var(--spacing-medium);
+    margin-left: var(--spacing-m);
     white-space: nowrap;
   }
 
@@ -40,16 +40,16 @@
 
 .file-price--filepage {
   font-size: var(--font-body);
-  top: calc(var(--spacing-miniscule) * -1);
-  margin-left: var(--spacing-medium);
+  top: calc(var(--spacing-xxs) * -1);
+  margin-left: var(--spacing-m);
 
   .credit-amount {
-    margin: 0 var(--spacing-medium);
+    margin: 0 var(--spacing-m);
   }
 
   &::before {
     height: 250%;
-    left: calc(var(--spacing-medium) * -1);
+    left: calc(var(--spacing-m) * -1);
     border-radius: 0;
     border-bottom-left-radius: var(--border-radius);
     border-width: 5px;
@@ -57,7 +57,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    padding: var(--spacing-small);
+    padding: var(--spacing-s);
 
     &::before {
       height: 140%;
@@ -74,18 +74,18 @@
   }
 
   .icon {
-    margin: 0 var(--spacing-medium);
+    margin: 0 var(--spacing-m);
   }
 
   @media (max-width: $breakpoint-small) {
     &::before {
-      top: calc(-1 * var(--spacing-small));
+      top: calc(-1 * var(--spacing-s));
       height: 110%;
     }
 
     .icon {
-      top: calc(-1 * var(--spacing-small));
-      margin: 0 var(--spacing-xsmall);
+      top: calc(-1 * var(--spacing-s));
+      margin: 0 var(--spacing-xs);
     }
   }
 }
@@ -94,8 +94,8 @@
   border: 5px solid var(--color-purchased);
 
   .credit-amount {
-    margin: 0 var(--spacing-medium);
-    margin-left: var(--spacing-large);
+    margin: 0 var(--spacing-m);
+    margin-left: var(--spacing-l);
     font-weight: var(--font-bold);
   }
 }
@@ -123,12 +123,12 @@
 
 .file-price__key--modal {
   @extend .file-price--modal;
-  top: var(--spacing-medium);
+  top: var(--spacing-m);
 
   .icon {
     height: 100%;
     width: auto;
-    left: calc(var(--spacing-xlarge) * 1.5);
+    left: calc(var(--spacing-xl) * 1.5);
     animation: moveKey 2.5s 1 ease-out;
     overflow: visible;
     stroke: var(--color-black);
@@ -151,7 +151,7 @@
 
   > *:first-child {
     width: 60%;
-    padding-right: var(--spacing-small);
+    padding-right: var(--spacing-s);
   }
 
   .file-price,
@@ -164,7 +164,7 @@
     border-width: 0;
 
     @media (max-width: $breakpoint-small) {
-      margin-top: calc(var(--spacing-xlarge) * 2);
+      margin-top: calc(var(--spacing-xl) * 2);
     }
   }
 }
@@ -174,8 +174,8 @@
   font-size: var(--font-title);
   color: var(--color-black);
   position: absolute;
-  top: calc(var(--spacing-xlarge) * 1.6);
-  left: var(--spacing-large);
+  top: calc(var(--spacing-xl) * 1.6);
+  left: var(--spacing-l);
   bottom: 0;
   right: 0;
   z-index: 9999999999;
@@ -186,7 +186,7 @@
 .purchase_stuff__subtext--purchased {
   color: var(--color-black);
   font-size: var(--font-body);
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-m);
 }
 
 @keyframes display {
@@ -225,15 +225,15 @@
   }
 
   20% {
-    left: calc(var(--spacing-xlarge) * 1.5);
+    left: calc(var(--spacing-xl) * 1.5);
   }
 
   50% {
-    left: calc(var(--spacing-xlarge) * 1.5);
+    left: calc(var(--spacing-xl) * 1.5);
   }
 
   70% {
-    left: calc(var(--spacing-xlarge) * 1.5);
+    left: calc(var(--spacing-xl) * 1.5);
   }
 
   100% {
diff --git a/ui/scss/component/_search.scss b/ui/scss/component/_search.scss
index 7fc82bdae..3e6ffa493 100644
--- a/ui/scss/component/_search.scss
+++ b/ui/scss/component/_search.scss
@@ -1,5 +1,5 @@
 .search__header {
-  margin-bottom: var(--spacing-large);
+  margin-bottom: var(--spacing-l);
 
   .placeholder {
     background-color: var(--color-placeholder-background);
@@ -7,17 +7,17 @@
 }
 
 .search__options {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 
   .search__legend {
     background-color: var(--color-secondary-alt);
     color: var(--color-secondary);
-    margin-bottom: var(--spacing-small);
-    padding: var(--spacing-miniscule);
+    margin-bottom: var(--spacing-s);
+    padding: var(--spacing-xxs);
   }
 
   fieldset:not(:first-child) {
-    margin-top: var(--spacing-large);
+    margin-top: var(--spacing-l);
   }
 
   .radio,
@@ -25,7 +25,7 @@
     display: inline-block;
 
     &:not(:first-of-type) {
-      margin-left: var(--spacing-medium);
+      margin-left: var(--spacing-m);
     }
   }
 }
diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss
index c2da7b5fa..7ec4b9a15 100644
--- a/ui/scss/component/_snack-bar.scss
+++ b/ui/scss/component/_snack-bar.scss
@@ -4,7 +4,7 @@
   background-color: var(--color-snack-bg);
   color: var(--color-snack);
   border-radius: 0.5rem;
-  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);
+  padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing-m);
   position: fixed;
   transition: all var(--transition-duration) var(--transition-type);
   z-index: 10000; // hack to get it over react modal
@@ -27,7 +27,7 @@
 
 .snack-bar__action {
   display: inline-block;
-  margin: var(--spacing-small) 0;
+  margin: var(--spacing-s) 0;
   min-width: min-content;
   color: var(--color-white);
 
@@ -44,7 +44,7 @@
 
   div {
     &:nth-of-type(1) {
-      margin-right: var(--spacing-medium);
+      margin-right: var(--spacing-m);
     }
   }
 }
diff --git a/ui/scss/component/_spinner.scss b/ui/scss/component/_spinner.scss
index 40b077d18..bdddce7d1 100644
--- a/ui/scss/component/_spinner.scss
+++ b/ui/scss/component/_spinner.scss
@@ -3,7 +3,7 @@
   height: 40px;
 
   font-size: 10px;
-  margin: var(--spacing-small);
+  margin: var(--spacing-s);
   text-align: center;
 
   .rect {
diff --git a/ui/scss/component/_splash.scss b/ui/scss/component/_splash.scss
index ba2cd18f3..56cedbde3 100644
--- a/ui/scss/component/_splash.scss
+++ b/ui/scss/component/_splash.scss
@@ -30,9 +30,9 @@
 
 .splash__animation-toggle {
   position: fixed;
-  top: var(--spacing-large);
-  right: var(--spacing-large);
-  padding: var(--spacing-medium);
+  top: var(--spacing-l);
+  right: var(--spacing-l);
+  padding: var(--spacing-m);
   border-color: #fff;
   color: #fff;
   background-color: rgba(255, 255, 255, 0.205);
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index 535a33139..c40da55a4 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -14,7 +14,7 @@
 
 .table__header-text {
   width: 100%;
-  margin: var(--spacing-medium) var(--spacing-large);
+  margin: var(--spacing-m) var(--spacing-l);
 }
 
 .table__header-text--between {
@@ -83,7 +83,7 @@
 .table--invites {
   svg {
     margin-bottom: -2px;
-    margin-left: var(--spacing-small);
+    margin-left: var(--spacing-s);
   }
 }
 
diff --git a/ui/scss/component/_tags.scss b/ui/scss/component/_tags.scss
index b92e24890..bccae4a06 100644
--- a/ui/scss/component/_tags.scss
+++ b/ui/scss/component/_tags.scss
@@ -6,18 +6,18 @@
 
   .tag {
     margin-left: 0;
-    margin-bottom: var(--spacing-small);
-    margin-right: var(--spacing-small);
+    margin-bottom: var(--spacing-s);
+    margin-right: var(--spacing-s);
   }
 }
 
 .tags--remove {
   @extend .tags;
-  margin-bottom: var(--spacing-medium);
+  margin-bottom: var(--spacing-m);
 
   .tag {
     margin-top: 0;
-    margin-bottom: var(--spacing-small);
+    margin-bottom: var(--spacing-s);
   }
 }
 
@@ -33,7 +33,7 @@
 
 .tags--selected {
   @extend .tags;
-  margin: var(--spacing-large) 0;
+  margin: var(--spacing-l) 0;
 }
 
 .tags__input-wrapper {
@@ -41,9 +41,9 @@
   .tag__input {
     @extend .tag--remove;
     height: var(--tag-height);
-    padding: calc(var(--spacing-miniscule) + 1px) var(--spacing-small);
+    padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s);
     background-color: var(--color-input-bg);
-    margin-bottom: var(--spacing-medium);
+    margin-bottom: var(--spacing-m);
   }
 }
 
diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index 329001bf2..21c340ca0 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/ui/scss/component/_wunderbar.scss
@@ -10,7 +10,7 @@
 
   > .icon {
     top: 0;
-    left: var(--spacing-small);
+    left: var(--spacing-s);
     height: 100%;
     position: absolute;
     z-index: 1;
@@ -49,7 +49,7 @@
   background-color: var(--color-input-bg);
   color: var(--color-input);
   border: none;
-  padding-right: var(--spacing-small);
+  padding-right: var(--spacing-s);
   padding-left: 2.5rem;
   transition: all 0.2s;
   -webkit-app-region: no-drag;
@@ -72,7 +72,7 @@
   display: flex;
   flex-direction: row;
   justify-items: flex-start;
-  padding: var(--spacing-small) var(--spacing-small);
+  padding: var(--spacing-s) var(--spacing-s);
 
   &:not(:first-of-type) {
     border-top: 1px solid transparent;
@@ -85,13 +85,13 @@
 
 .wunderbar__suggestion-label {
   overflow: hidden;
-  padding-left: var(--spacing-small);
+  padding-left: var(--spacing-s);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .wunderbar__suggestion-label--action {
-  margin-left: var(--spacing-medium);
+  margin-left: var(--spacing-m);
   opacity: 0.6;
   white-space: nowrap;
 }
diff --git a/ui/scss/component/_yrbl.scss b/ui/scss/component/_yrbl.scss
index ee2e95461..53f8fcede 100644
--- a/ui/scss/component/_yrbl.scss
+++ b/ui/scss/component/_yrbl.scss
@@ -8,7 +8,7 @@
 
 .yrbl {
   height: 20rem;
-  margin-right: calc(var(--spacing-xlarge) * 2);
+  margin-right: calc(var(--spacing-xl) * 2);
 
   @media (max-width: $breakpoint-small) {
     display: none;
@@ -23,7 +23,7 @@
   align-self: center;
   height: 250px;
   width: auto;
-  margin: 0 var(--spacing-large);
+  margin: 0 var(--spacing-l);
 }
 
 .yrbl--search {
diff --git a/ui/scss/component/expanding-details.scss b/ui/scss/component/expanding-details.scss
index 2a6fde2de..89d82c363 100644
--- a/ui/scss/component/expanding-details.scss
+++ b/ui/scss/component/expanding-details.scss
@@ -2,7 +2,7 @@
   background-color: var(--color-card-background);
   position: relative;
   overflow: hidden;
-  padding-left: var(--spacing-small);
+  padding-left: var(--spacing-s);
 }
 
 .expanding-details {
@@ -11,5 +11,5 @@
 
 .expanding-details__body {
   border-radius: var(--card-radius);
-  padding: 0 var(--spacing-small);
+  padding: 0 var(--spacing-s);
 }
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index 7a7234010..406271254 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -51,7 +51,7 @@
 }
 
 .menu__list {
-  margin-left: calc(var(--spacing-medium) * -1);
+  margin-left: calc(var(--spacing-m) * -1);
   box-shadow: var(--card-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
   border-bottom-left-radius: var(--border-radius);
@@ -66,16 +66,16 @@
 .menu__link {
   display: flex;
   align-items: center;
-  padding: var(--spacing-medium);
-  padding-right: var(--spacing-large);
+  padding: var(--spacing-m);
+  padding-right: var(--spacing-l);
 
   .icon {
     stroke: var(--color-menu-icon);
-    margin-right: var(--spacing-small);
+    margin-right: var(--spacing-s);
   }
 
   .badge {
-    margin-left: var(--spacing-small);
+    margin-left: var(--spacing-s);
   }
 }
 
diff --git a/ui/scss/component/nag.scss b/ui/scss/component/nag.scss
index e0a3a2cc9..3ee2bfc25 100644
--- a/ui/scss/component/nag.scss
+++ b/ui/scss/component/nag.scss
@@ -8,7 +8,7 @@ $nag-error-z-index: 100001;
   left: 0;
   bottom: 0;
   width: 100%;
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
   background-color: var(--color-nag);
   color: var(--color-white);
   font-weight: var(--font-weight-bold);
@@ -61,11 +61,11 @@ $nag-error-z-index: 100001;
 
 .nag__button {
   line-height: 1;
-  margin-left: var(--spacing-small);
-  margin-right: var(--spacing-small);
+  margin-left: var(--spacing-s);
+  margin-right: var(--spacing-s);
   border-radius: var(--border-radius);
   border: 1px solid var(--color-white);
-  padding: var(--spacing-miniscule);
+  padding: var(--spacing-xxs);
   color: var(--color-white);
   font-weight: var(--font-weight-bold);
 
@@ -76,7 +76,7 @@ $nag-error-z-index: 100001;
 
   @media (max-width: $breakpoint-small) {
     margin-left: 0;
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
   }
 }
 
@@ -99,7 +99,7 @@ $nag-error-z-index: 100001;
 
 .nag__close {
   margin-left: auto;
-  right: var(--spacing-medium);
+  right: var(--spacing-m);
   position: absolute;
   border: none;
 
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 566bca200..14a09dc4b 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -2,16 +2,12 @@
   position: relative;
 
   ~ .section {
-    margin-top: var(--spacing-large);
-
-    @media (max-width: $breakpoint-small) {
-      margin-top: var(--spacing-medium);
-    }
+    margin-top: var(--spacing-l);
   }
 }
 
 .section--padded {
-  padding: var(--spacing-medium);
+  padding: var(--spacing-m);
 }
 
 .section--small {
@@ -19,14 +15,14 @@
 }
 
 .section__header {
-  margin-bottom: var(--spacing-large);
+  margin-bottom: var(--spacing-l);
 }
 
 .section__flex {
   display: flex;
   align-items: flex-start;
   > .icon__wrapper:first-child {
-    margin-right: var(--spacing-large);
+    margin-right: var(--spacing-l);
   }
 }
 
@@ -39,13 +35,13 @@
 .section__title--small {
   @extend .section__title;
   font-size: var(--font-body);
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-m);
 }
 
 .section__title--large {
   @extend .section__title;
-  margin-right: var(--spacing-medium);
   display: inline-block;
+  margin-right: var(--spacing-m);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-heading);
 
@@ -56,13 +52,13 @@
 
 .section__subtitle {
   color: var(--color-text-subtitle);
-  margin: var(--spacing-small) 0;
+  margin: var(--spacing-s) 0;
   font-size: var(--font-body);
 }
 
 .section__subtitle--status {
   @extend .section__subtitle;
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
   background-color: var(--color-text-warning);
 }
 
@@ -71,7 +67,7 @@
   flex-direction: column;
 
   hr {
-    margin: var(--spacing-large) 0;
+    margin: var(--spacing-l) 0;
   }
 
   p {
@@ -81,23 +77,23 @@
     font-weight: var(--font-weight-base);
     background-color: var(--color-background);
     transform: translateY(-150%);
-    padding: 0 var(--spacing-large);
+    padding: 0 var(--spacing-l);
     display: inline-block;
     margin: auto;
   }
 }
 
 .section__body {
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-m);
 }
 
 .section__actions {
   display: flex;
   align-items: center;
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
 
   ~ .section {
-    margin-top: var(--spacing-large);
+    margin-top: var(--spacing-l);
   }
 
   &:only-child,
@@ -106,14 +102,14 @@
   }
 
   > *:not(:last-child) {
-    margin-right: var(--spacing-medium);
+    margin-right: var(--spacing-m);
   }
 
   @media (max-width: $breakpoint-small) {
     flex-wrap: wrap;
 
     > * {
-      margin-bottom: var(--spacing-small);
+      margin-bottom: var(--spacing-s);
     }
   }
 
@@ -127,8 +123,8 @@
   }
 
   .button--primary ~ .button--link {
-    margin-left: var(--spacing-small);
-    padding: var(--spacing-xsmall);
+    margin-left: var(--spacing-s);
+    padding: var(--spacing-xs);
   }
 }
 
@@ -148,7 +144,7 @@
 .section__start-at {
   display: flex;
   align-items: center;
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-l);
   fieldset-section {
     width: 6em;
     margin-top: 0;
diff --git a/ui/scss/component/tabs.scss b/ui/scss/component/tabs.scss
index c6bfcf28f..95619964a 100644
--- a/ui/scss/component/tabs.scss
+++ b/ui/scss/component/tabs.scss
@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   background-color: var(--color-tabs-background);
-  padding: var(--spacing-medium) var(--spacing-main-padding);
+  padding: var(--spacing-m) var(--spacing-main-padding);
 
   & > *:not(.tab) {
     // If there is anything after the tabs, render it on the opposite side of the page
@@ -15,21 +15,21 @@
 }
 
 .tabs__list--channel-page {
-  padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
-  padding-right: var(--spacing-medium);
-  margin-bottom: var(--spacing-large);
+  padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
+  padding-right: var(--spacing-m);
+  margin-bottom: var(--spacing-l);
   height: 4rem;
   border-bottom-left-radius: var(--card-radius);
   border-bottom-right-radius: var(--card-radius);
 
   @media (max-width: $breakpoint-small) {
-    padding-left: var(--spacing-medium);
+    padding-left: var(--spacing-m);
   }
 }
 
 .tab {
   @extend .button--link;
-  margin-right: var(--spacing-large);
+  margin-right: var(--spacing-l);
   padding: 5px 0;
   color: var(--color-tab-text);
   position: relative;
@@ -50,7 +50,7 @@
 
 .tab__divider {
   position: absolute;
-  margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-large));
+  margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-l));
 }
 
 .tab::after,
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index f14cf2c60..bd04a0fae 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -36,7 +36,7 @@ h6 {
 
 p {
   & + p {
-    margin-top: var(--spacing-small);
+    margin-top: var(--spacing-s);
   }
 }
 
@@ -44,7 +44,7 @@ ul,
 ol {
   li {
     list-style-position: outside;
-    margin: var(--spacing-xsmall) var(--spacing-medium);
+    margin: var(--spacing-xs) var(--spacing-m);
     margin-bottom: 0;
   }
 }
@@ -63,17 +63,17 @@ dl {
   flex-direction: row;
   flex-wrap: wrap;
   overflow-x: visible;
-  margin-top: var(--spacing-medium);
+  margin-top: var(--spacing-m);
 }
 
 dt {
-  flex-basis: 40%;
+  flex-basis: 45%;
   text-align: left;
   font-weight: bold;
 }
 
 dd {
-  flex-basis: 55%;
+  flex-basis: 50%;
   flex-grow: 1;
   margin: 0;
   text-align: right;
@@ -81,7 +81,7 @@ dd {
 
 dt,
 dd {
-  padding: var(--spacing-medium) var(--spacing-small);
+  padding: var(--spacing-m) var(--spacing-s);
 
   border-top: 1px solid var(--color-border);
 
@@ -125,15 +125,15 @@ textarea {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  flex-wrap: wrap;
 
   > * {
     flex-grow: 1;
     flex-basis: 0;
     min-width: 15rem;
-    margin-bottom: var(--spacing-large);
+    margin-bottom: var(--spacing-l);
 
     &:first-child {
+      flex-basis: 1;
       margin-right: 1.5rem;
     }
   }
@@ -143,7 +143,7 @@ textarea {
 
     & > * {
       margin: 0;
-      margin-bottom: var(--spacing-medium);
+      margin-bottom: var(--spacing-m);
       width: 100%;
       flex-basis: auto;
 
@@ -202,8 +202,8 @@ textarea {
   display: block;
   font-size: var(--font-small);
   color: var(--color-text-help);
-  margin-top: var(--spacing-small);
-  margin-bottom: var(--spacing-small);
+  margin-top: var(--spacing-s);
+  margin-bottom: var(--spacing-s);
 }
 
 .help--warning {
@@ -224,7 +224,7 @@ textarea {
 
 .empty--centered {
   text-align: center;
-  padding: calc(var(--spacing-large) * 3) 0;
+  padding: calc(var(--spacing-l) * 3) 0;
 }
 
 .qr-code {
@@ -243,7 +243,7 @@ textarea {
 
 .error__wrapper {
   background-color: var(--color-error);
-  padding: var(--spacing-small);
+  padding: var(--spacing-s);
   border-radius: var(--border-radius);
 }
 
@@ -281,7 +281,7 @@ textarea {
 
 .notice-message {
   border-radius: var(--border-radius);
-  padding: var(--spacing-large);
+  padding: var(--spacing-l);
   background-color: var(--color-primary-alt);
 }
 
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index 88bd62254..08664fa4b 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -12,13 +12,8 @@ $breakpoint-medium: 1150px;
   --mac-titlebar-height: 1.5rem;
   --mobile: 600px;
   --side-nav-width: 170px;
-  --spacing-miniscule: calc(2rem / 5);
-  --spacing-xsmall: calc(2rem / 4);
-  --spacing-small: calc(2rem / 3);
-  --spacing-medium: calc(2rem / 2);
-  --spacing-large: 2rem;
-  --spacing-xlarge: 3rem;
-  --spacing-main-padding: var(--spacing-xlarge);
+
+  --spacing-main-padding: var(--spacing-xl);
   --floating-viewer-width: 32rem;
   --floating-viewer-height: 18rem; // 32 * 9/16
   --floating-viewer-info-height: 5rem;
@@ -36,7 +31,7 @@ $breakpoint-medium: 1150px;
   --header-height: 5rem;
 
   // Inline Player
-  --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-large) * 2);
+  --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);
 
   // Card
   --card-radius: var(--border-radius);
diff --git a/web/component/footer.jsx b/web/component/footer.jsx
index 8de323523..9a6476486 100644
--- a/web/component/footer.jsx
+++ b/web/component/footer.jsx
@@ -85,6 +85,7 @@ export default function Footer() {
           <div key={name} className="footer__section">
             <div className="footer__section-title">{name}</div>
             <ul className="ul--no-style">
+              {/* $FlowFixMe */}
               {links.map(({ label, link, navigate }) => {
                 return (
                   <li key={label}>
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 1c9e49a43..75a92ef51 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -88,6 +88,7 @@ let baseConfig = {
       'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
       'process.env.LBRY_API_URL': JSON.stringify(process.env.LBRY_API_URL),
       'process.env.SENTRY_AUTH_TOKEN': JSON.stringify(process.env.SENTRY_AUTH_TOKEN),
+      'process.env.MOONPAY_SECRET_KEY': JSON.stringify(process.env.MOONPAY_SECRET_KEY),
     }),
     new Dotenv({
       allowEmptyValues: true, // allow empty variables (e.g. `FOO=`) (treat it as empty string, rather than missing)
diff --git a/yarn.lock b/yarn.lock
index 20314b399..c5e5065c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2953,6 +2953,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
+  integrity sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg==
+
 crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"