diff --git a/ui/component/yrblWalletEmpty/index.js b/ui/component/yrblWalletEmpty/index.js
new file mode 100644
index 000000000..a5897410d
--- /dev/null
+++ b/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);
diff --git a/ui/component/yrblWalletEmpty/view.jsx b/ui/component/yrblWalletEmpty/view.jsx
new file mode 100644
index 000000000..1877eb268
--- /dev/null
+++ b/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 (
+
+
+ {__('You need LBC to create a channel and upload content.')}
+
+ {__(
+ '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.'
+ )}
+
+
+
+
+ {includeWalletLink && (
+
+
+ }
+ />
+
+ );
+}
diff --git a/ui/page/channelNew/view.jsx b/ui/page/channelNew/view.jsx
index 2dd7588f3..3728dae11 100644
--- a/ui/page/channelNew/view.jsx
+++ b/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 (
- {emptyBalance && (
-
-
- {__('You need LBC to create a channel and upload content.')}
-
- {__(
- '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.'
- )}
-
-
-
-
-
-
- }
- />
-
- )}
+ {emptyBalance && }
push(redirectUrl || `/$/${PAGES.CHANNELS}`)} />
diff --git a/ui/page/creatorDashboard/index.js b/ui/page/creatorDashboard/index.js
index 42371ff32..6cd1bf7b0 100644
--- a/ui/page/creatorDashboard/index.js
+++ b/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 => ({
- openChannelCreateModal: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
-});
-
-export default connect(select, perform)(CreatorDashboardPage);
+export default connect(select)(CreatorDashboardPage);
diff --git a/ui/page/creatorDashboard/view.jsx b/ui/page/creatorDashboard/view.jsx
index 625baa00a..f515a7649 100644
--- a/ui/page/creatorDashboard/view.jsx
+++ b/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,
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) && (
-
-
-
{__("You haven't created a channel yet, let's fix that!")}
-
-
-
+ }
+ />
)}
{!fetchingChannels && channels && channels.length && (
diff --git a/ui/page/publish/view.jsx b/ui/page/publish/view.jsx
index 2324fd1bc..fa2b7f1f2 100644
--- a/ui/page/publish/view.jsx
+++ b/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 Button from 'component/button';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
type Props = {
balance: number,
@@ -24,33 +21,7 @@ function PublishPage(props: Props) {
return (
- {balance === 0 && (
-
-
- {__('You need LBC to create a channel and upload content.')}
-
- {__(
- '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.'
- )}
-
-
-
-
-
-
- }
- />
-
- )}
+ {balance === 0 && }
);
diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index 1d1e1dd03..ee8e25b67 100644
--- a/ui/page/wallet/view.jsx
+++ b/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 ? (
-
-
- {__('You need LBC to create a channel and upload content.')}
-
- {__(
- '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.'
- )}
-
-
-
-
-
-
- }
- />
-
+
) : (
<>
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index e6ac44e18..2148bef0b 100644
--- a/ui/scss/component/_button.scss
+++ b/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 {
diff --git a/ui/scss/init/_color.scss b/ui/scss/init/_color.scss
index 6ed47a17a..f9692a2b6 100644
--- a/ui/scss/init/_color.scss
+++ b/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);
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index 4cbbfddd1..f1864ef91 100644
--- a/ui/scss/themes/dark.scss
+++ b/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;