basic checkout page prototype

ui/component/router/view.jsx

@@ -35,6 +35,7 @@ import TopPage from 'page/top';
 import Welcome from 'page/welcome';
 import CreatorDashboard from 'page/creatorDashboard';
 import RewardsVerifyPage from 'page/rewardsVerify';
+import CheckoutPage from 'page/checkoutPage';
 import { parseURI } from 'lbry-redux';
 import { SITE_TITLE, WELCOME_VERSION } from 'config';
 
@@ -174,6 +175,7 @@ function AppRouter(props: Props) {
       <Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
       <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
       <Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
+      <Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
 
       <PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
       <PrivateRoute {...props} path={`/$/${PAGES.PUBLISHED}`} component={FileListPublished} />

ui/constants/pages.js

@@ -35,3 +35,4 @@ exports.EMBED = 'embed';
 exports.TOP = 'top';
 exports.WELCOME = 'welcome';
 exports.CREATOR_DASHBOARD = 'dashboard';
+exports.CHECKOUT = 'checkout';

ui/page/checkoutPage/index.js

@@ -0,0 +1,2 @@
+import CheckoutPage from './view';
+export default CheckoutPage;

ui/page/checkoutPage/view.jsx

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+import Page from 'component/page';
+import Button from 'component/button';
+import Card from 'component/common/card';
+
+export default function CheckoutPage() {
+  return (
+    <Page authPage className="main--auth-page">
+      <Card
+        title={__('Checkout')}
+        subtitle={__('Your card contains 1 item.')}
+        body={
+          <div className="card--inline card--section card--highlighted">
+            <strong>{__('lbry.tv Premium - 1 month')}</strong>
+          </div>
+        }
+        actions={
+          <div className="section__actions">
+            <Button button="primary" label={__('Checkout')} />
+          </div>
+        }
+      />
+    </Page>
+  );
+}

ui/scss/component/_card.scss

@@ -38,6 +38,10 @@
   }
 }
 
+.card--highlighted {
+  background-color: var(--color-card-background-highlighted);
+}
+
 .card--claim-preview-wrap {
   @extend .card;
   margin: var(--spacing-xlarge) 0;