From 22a4255320fa9f890a8ca4cf12106ebf56d5d2d5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 8 May 2020 12:48:58 -0400
Subject: [PATCH] add footer for web

---
 lbrytv/component/footer.jsx        | 86 ++++++++++++++++++++++++++++++
 ui/component/page/view.jsx         |  7 ++-
 ui/page/channelsFollowing/view.jsx |  2 +-
 ui/page/discover/view.jsx          |  2 +-
 ui/page/tagsFollowing/view.jsx     |  2 +-
 ui/scss/all.scss                   |  1 +
 ui/scss/component/_footer.scss     | 23 ++++++++
 7 files changed, 119 insertions(+), 4 deletions(-)
 create mode 100644 lbrytv/component/footer.jsx
 create mode 100644 ui/scss/component/_footer.scss

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 (
+    <footer className="footer">
+      {sections.map(({ name, links }) => {
+        return (
+          <div key={name}>
+            <div className="footer__section-title">{name}</div>
+            <ul className="ul--no-style">
+              {links.map(({ label, link }) => (
+                <li key={label}>
+                  <Button className="footer__link" href={link} label={label} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+    </footer>
+  );
+}
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 (
     <Fragment>
@@ -25,6 +27,9 @@ function Page(props: Props) {
         <main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
         {!authPage && !noHeader && <SideNavigation />}
       </div>
+      {/* @if TARGET='web' */}
+      {!noFooter && <Footer />}
+      {/* @endif */}
     </Fragment>
   );
 }
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 ? (
     <ChannelsFollowingDiscoverPage />
   ) : (
-    <Page>
+    <Page noFooter>
       <ClaimListDiscover
         headerLabel={
           <span>
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 (
-    <Page>
+    <Page noFooter>
       <ClaimListDiscover
         claimType={claimType ? [claimType] : undefined}
         headerLabel={headerLabel}
diff --git a/ui/page/tagsFollowing/view.jsx b/ui/page/tagsFollowing/view.jsx
index d6eb55ae7..ee41a6c9a 100644
--- a/ui/page/tagsFollowing/view.jsx
+++ b/ui/page/tagsFollowing/view.jsx
@@ -10,7 +10,7 @@ import * as CS from 'constants/claim_search';
 
 function DiscoverPage() {
   return (
-    <Page>
+    <Page noFooter>
       <ClaimListDiscover
         headerLabel={
           <span>
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;
+}