add footer for web

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>
+  );
+}

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>
   );
 }

ui/page/channelsFollowing/view.jsx

@@ -20,7 +20,7 @@ function ChannelsFollowingPage(props: Props) {
   return !hasSubsribedChannels ? (
     <ChannelsFollowingDiscoverPage />
   ) : (
-    <Page>
+    <Page noFooter>
       <ClaimListDiscover
         headerLabel={
           <span>

ui/page/discover/view.jsx

@@ -85,7 +85,7 @@ function DiscoverPage(props: Props) {
   }
 
   return (
-    <Page>
+    <Page noFooter>
       <ClaimListDiscover
         claimType={claimType ? [claimType] : undefined}
         headerLabel={headerLabel}

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>

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';

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;
+}