create YrblWalletEmpty for generic yrbl with empty wallet message

ui/component/yrblWalletEmpty/index.js

@@ -0,0 +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 => ({
+  balance: selectBalance(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+})(Wallet);

ui/component/yrblWalletEmpty/view.jsx

@@ -0,0 +1,54 @@
+// @flow
+import type { Node } from 'react';
+import * as MODALS from 'constants/modal_types';
+import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import Button from 'component/button';
+import Yrbl from 'component/yrbl';
+
+type Props = {
+  includeWalletLink: boolean,
+  type?: string,
+  actions?: Node,
+  doOpenModal: string => void,
+};
+export default function YrblHelp(props: Props) {
+  const { includeWalletLink = false, type = 'sad', doOpenModal } = props;
+
+  return (
+    <div className="main--empty">
+      <Yrbl
+        type={type}
+        title={__('Your wallet is empty')}
+        subtitle={
+          <div>
+            <p>{__('You need LBC to create a channel and upload content.')}</p>
+            <p>
+              {__(
+                'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
+              )}
+            </p>
+            <div className="section__actions">
+              <Button
+                button="primary"
+                icon={ICONS.REWARDS}
+                label={__('Earn Rewards')}
+                navigate={`/$/${PAGES.REWARDS}`}
+              />
+              <Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
+              {includeWalletLink && (
+                <Button
+                  icon={ICONS.RECEIVE}
+                  button="secondary"
+                  label={__('Your Address')}
+                  onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
+                />
+              )}
+            </div>
+          </div>
+        }
+      />
+    </div>
+  );
+}

ui/page/channelNew/view.jsx

@@ -1,12 +1,10 @@
 // @flow
 import * as PAGES from 'constants/pages';
-import * as ICONS from 'constants/icons';
 import React from 'react';
 import ChannelEdit from 'component/channelEdit';
 import Page from 'component/page';
-import Button from 'component/button';
 import { useHistory } from 'react-router';
-import Yrbl from 'component/yrbl';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
 
 type Props = {
   balance: number,
@@ -21,33 +19,7 @@ function ChannelNew(props: Props) {
 
   return (
     <Page noSideNavigation noFooter backout={{ title: __('Create a channel'), backLabel: __('Cancel') }}>
-      {emptyBalance && (
+      {emptyBalance && <YrblWalletEmpty />}
-        <div className="main--empty">
-          <Yrbl
-            type="sad"
-            title={__('Your wallet is empty')}
-            subtitle={
-              <div>
-                <p>{__('You need LBC to create a channel and upload content.')}</p>
-                <p>
-                  {__(
-                    'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
-                  )}
-                </p>
-                <div className="section__actions">
-                  <Button
-                    button="primary"
-                    icon={ICONS.REWARDS}
-                    label={__('Earn Rewards')}
-                    navigate={`/$/${PAGES.REWARDS}`}
-                  />
-                  <Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
-                </div>
-              </div>
-            }
-          />
-        </div>
-      )}
 
       <ChannelEdit disabled={emptyBalance} onDone={() => push(redirectUrl || `/$/${PAGES.CHANNELS}`)} />
     </Page>

ui/page/creatorDashboard/index.js

@@ -1,7 +1,5 @@
-import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
 import { selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
-import { doOpenModal } from 'redux/actions/app';
 import CreatorDashboardPage from './view';
 
 const select = state => ({
@@ -9,8 +7,4 @@ const select = state => ({
   fetchingChannels: selectFetchingMyChannels(state),
 });
 
-const perform = dispatch => ({
+export default connect(select)(CreatorDashboardPage);
-  openChannelCreateModal: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
-});
-
-export default connect(select, perform)(CreatorDashboardPage);

ui/page/creatorDashboard/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import * as PAGES from 'constants/pages';
 import React from 'react';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
@@ -6,15 +7,15 @@ import Button from 'component/button';
 import CreatorAnalytics from 'component/creatorAnalytics';
 import ChannelSelector from 'component/channelSelector';
 import usePersistedState from 'effects/use-persisted-state';
+import Yrbl from 'component/yrbl';
 
 type Props = {
   channels: Array<ChannelClaim>,
   fetchingChannels: boolean,
-  openChannelCreateModal: () => void,
 };
 
 export default function CreatorDashboardPage(props: Props) {
-  const { channels, fetchingChannels, openChannelCreateModal } = props;
+  const { channels, fetchingChannels } = props;
   const [selectedChannelUrl, setSelectedChannelUrl] = usePersistedState('analytics-selected-channel');
   const hasChannels = channels && channels.length > 0;
   const firstChannel = hasChannels && channels[0];
@@ -41,14 +42,17 @@ export default function CreatorDashboardPage(props: Props) {
       )}
 
       {!fetchingChannels && (!channels || !channels.length) && (
-        <section className="main--empty">
+        <Yrbl
-          <div className=" section--small">
+          type="happy"
-            <h2 className="section__title--large">{__("You haven't created a channel yet, let's fix that!")}</h2>
+          title={__("You haven't created a channel yet, let's fix that!")}
-            <div className="section__actions">
+          subtitle={
-              <Button button="primary" onClick={openChannelCreateModal} label={__('Create A Channel')} />
+            <div>
+              <div className="section__actions">
+                <Button button="primary" navigate={`/$/${PAGES.CHANNEL_NEW}`} label={__('Create A Channel')} />
+              </div>
             </div>
-          </div>
+          }
-        </section>
+        />
       )}
 
       {!fetchingChannels && channels && channels.length && (

ui/page/publish/view.jsx

@@ -1,11 +1,8 @@
 // @flow
-import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
 import React from 'react';
 import PublishForm from 'component/publishForm';
 import Page from 'component/page';
-import Yrbl from 'component/yrbl';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
-import Button from 'component/button';
 
 type Props = {
   balance: number,
@@ -24,33 +21,7 @@ function PublishPage(props: Props) {
 
   return (
     <Page>
-      {balance === 0 && (
+      {balance === 0 && <YrblWalletEmpty />}
-        <div className="main--empty">
-          <Yrbl
-            type="sad"
-            title={__('Your wallet is empty')}
-            subtitle={
-              <div>
-                <p>{__('You need LBC to create a channel and upload content.')}</p>
-                <p>
-                  {__(
-                    'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
-                  )}
-                </p>
-                <div className="section__actions">
-                  <Button
-                    button="primary"
-                    icon={ICONS.REWARDS}
-                    label={__('Earn Rewards')}
-                    navigate={`/$/${PAGES.REWARDS}`}
-                  />
-                  <Button button="secondary" icon={ICONS.BUY} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
-                </div>
-              </div>
-            }
-          />
-        </div>
-      )}
       <PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
     </Page>
   );

ui/page/wallet/view.jsx

@@ -1,25 +1,20 @@
 // @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';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
 
 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, balance, doOpenModal } = props;
+  const { location, balance } = props;
   const { search } = location;
   const showIntro = balance === 0;
   const loading = balance === undefined;
@@ -34,42 +29,7 @@ const WalletPage = (props: Props) => {
       {!loading && (
         <>
           {showIntro ? (
-            <div className="main--empty">
+            <YrblWalletEmpty includeWalletLink />
-              <Yrbl
-                type="sad"
-                title={__('Your wallet is empty')}
-                subtitle={
-                  <div>
-                    <p>{__('You need LBC to create a channel and upload content.')}</p>
-                    <p>
-                      {__(
-                        'Never fear though, there are tons of ways to earn LBC! You can earn or purchase LBC, or you can have your friends send you some.'
-                      )}
-                    </p>
-                    <div className="section__actions">
-                      <Button
-                        button="primary"
-                        icon={ICONS.REWARDS}
-                        label={__('Earn Rewards')}
-                        navigate={`/$/${PAGES.REWARDS}`}
-                      />
-                      <Button
-                        button="secondary"
-                        icon={ICONS.BUY}
-                        label={__('Buy Credits')}
-                        navigate={`/$/${PAGES.BUY}`}
-                      />
-                      <Button
-                        icon={ICONS.RECEIVE}
-                        button="secondary"
-                        label={__('Your Address')}
-                        onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
-                      />
-                    </div>
-                  </div>
-                }
-              />
-            </div>
           ) : (
             <>
               <WalletBalance />

ui/scss/component/_button.scss

@@ -44,6 +44,7 @@
 
 .button--secondary {
   background-color: var(--color-button-secondary-bg);
+  border: 1px solid var(--color-button-secondary-border);
   color: var(--color-button-secondary-text);
 
   &:hover {

ui/scss/init/_color.scss

@@ -36,6 +36,7 @@
   --color-button-primary-bg-hover: var(--color-primary-alt-2);
   --color-button-primary-hover-text: var(--color-primary-alt);
   --color-button-secondary-bg: var(--color-secondary-alt);
+  --color-button-secondary-border: #c5d7ed;
   --color-button-secondary-text: var(--color-secondary);
   --color-button-secondary-bg-hover: #b9d0e9;
   --color-button-alt-bg: var(--color-gray-1);

ui/scss/themes/dark.scss

@@ -25,6 +25,7 @@
   --color-button-primary-text: var(--color-primary);
   --color-button-primary-hover-text: var(--color-text);
   --color-button-secondary-bg: #395877;
+  --color-button-secondary-border: #395877;
   --color-button-secondary-bg-hover: #4b6d8f;
   --color-button-secondary-text: #a3c1e0;
   --color-button-alt-bg: #4d5660;