diff --git a/lbrytv/component/footer.jsx b/lbrytv/component/footer.jsx
new file mode 100644
index 000000000..0461b7360
--- /dev/null
+++ b/lbrytv/component/footer.jsx
@@ -0,0 +1,86 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+
+const sections = [
+ {
+ name: 'Talk To Us',
+ links: [
+ {
+ label: 'Twitter',
+ link: 'https://twitter.com/lbryio',
+ },
+ {
+ label: 'Reddit',
+ link: 'https://reddit.com/lbry',
+ },
+ {
+ label: 'Discord',
+ link: 'https://chat.lbry.com/',
+ },
+ {
+ label: 'Telegram',
+ link: 'https://t.me/lbryofficial',
+ },
+ {
+ label: 'Facebook',
+ link: 'https://www.facebook.com/lbryio',
+ },
+ ],
+ },
+ {
+ name: 'Learn More',
+ links: [
+ {
+ label: 'FAQ',
+ link: 'https://lbry.com/faq',
+ },
+ {
+ label: 'lbry.tech',
+ link: 'https://lbry.tech',
+ },
+ {
+ label: 'Github',
+ link: 'https://github.com/lbryio/lbry-desktop',
+ },
+ ],
+ },
+ {
+ name: 'Other',
+ links: [
+ {
+ label: 'Support',
+ link: 'https://lbry.com/faq/support',
+ },
+ {
+ label: 'Terms of Service',
+ link: 'https://www.lbry.com/termsofservice',
+ },
+ {
+ label: '2257',
+ link: '',
+ },
+ ],
+ },
+];
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index 61a0389e8..756e705cd 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
import classnames from 'classnames';
import SideNavigation from 'component/sideNavigation';
import Header from 'component/header';
+import Footer from 'lbrytv/component/footer';
export const MAIN_CLASS = 'main';
type Props = {
@@ -13,10 +14,11 @@ type Props = {
isUpgradeAvailable: boolean,
authPage: boolean,
noHeader: boolean,
+ noFooter: boolean,
};
function Page(props: Props) {
- const { children, className, authPage = false, noHeader } = props;
+ const { children, className, authPage = false, noHeader, noFooter } = props;
return (
@@ -25,6 +27,9 @@ function Page(props: Props) {
{children}
{!authPage && !noHeader && }
+ {/* @if TARGET='web' */}
+ {!noFooter && }
+ {/* @endif */}
);
}
diff --git a/ui/page/channelsFollowing/view.jsx b/ui/page/channelsFollowing/view.jsx
index 38e3e682b..68c188765 100644
--- a/ui/page/channelsFollowing/view.jsx
+++ b/ui/page/channelsFollowing/view.jsx
@@ -20,7 +20,7 @@ function ChannelsFollowingPage(props: Props) {
return !hasSubsribedChannels ? (
) : (
-
+
diff --git a/ui/page/discover/view.jsx b/ui/page/discover/view.jsx
index 8cce7176e..f52d5aa48 100644
--- a/ui/page/discover/view.jsx
+++ b/ui/page/discover/view.jsx
@@ -85,7 +85,7 @@ function DiscoverPage(props: Props) {
}
return (
-
+
+
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 9c7576b2b..2dbe753eb 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -20,6 +20,7 @@
@import 'component/expanding-details';
@import 'component/file-properties';
@import 'component/file-render';
+@import 'component/footer';
@import 'component/form-field';
@import 'component/header';
@import 'component/icon';
diff --git a/ui/scss/component/_footer.scss b/ui/scss/component/_footer.scss
new file mode 100644
index 000000000..437928617
--- /dev/null
+++ b/ui/scss/component/_footer.scss
@@ -0,0 +1,23 @@
+.footer {
+ display: flex;
+ justify-content: center;
+ max-width: 80%;
+ margin: auto;
+ padding: var(--spacing-xlarge);
+ font-size: var(--font-small);
+
+ > * {
+ margin-right: calc(var(--spacing-xlarge) * 1.5);
+ }
+}
+
+.footer__section-title {
+ @extend .help;
+ font-weight: 300;
+ margin-bottom: var(--spacing-medium);
+}
+
+.footer__link {
+ @extend .button--link;
+ @extend .help;
+}