From 3805194cebb8098c39e1ee2fdd47d00986a29077 Mon Sep 17 00:00:00 2001
From: Aaron DeRuvo <aaron.deruvo@gmail.com>
Date: Mon, 21 Oct 2019 12:54:02 -0700
Subject: [PATCH] Update Footer (#1331)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add link to “terms” page on the footer

* Add Discord to universal footer

* Lint fix
---
 packages/web/src/shared/Button.3.tsx       |  1 +
 packages/web/src/shared/Footer.3.tsx       | 19 ++++++++++++++++++-
 packages/web/src/shared/menu-items.ts      |  4 ++++
 packages/web/static/locales/en/common.json |  3 ++-
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/shared/Button.3.tsx b/packages/web/src/shared/Button.3.tsx
index 0cf933e5881..b2867ba2125 100644
--- a/packages/web/src/shared/Button.3.tsx
+++ b/packages/web/src/shared/Button.3.tsx
@@ -45,6 +45,7 @@ type PrimaryProps = {
 
 type InlineProps = {
   kind: BTN.INLINE
+  style?: TextStyle
 } & AllButtonProps
 
 type NavProps = {
diff --git a/packages/web/src/shared/Footer.3.tsx b/packages/web/src/shared/Footer.3.tsx
index d476b00ac3c..a7e5edd7580 100644
--- a/packages/web/src/shared/Footer.3.tsx
+++ b/packages/web/src/shared/Footer.3.tsx
@@ -1,7 +1,8 @@
 import Link from 'next/link'
 import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { I18nProps, NameSpaces, withNamespaces } from 'src/i18n'
+import { I18nProps, NameSpaces, Trans, withNamespaces } from 'src/i18n'
+import Discord from 'src/icons/Discord'
 import Discourse from 'src/icons/Discourse'
 import MediumLogo from 'src/icons/MediumLogo'
 import Octocat from 'src/icons/Octocat'
@@ -70,6 +71,11 @@ const Social = React.memo(function _Social() {
             <Discourse color={colors.dark} size={height} />
           </a>
         </Link>
+        <Link href={CeloLinks.discord}>
+          <a>
+            <Discord color={colors.dark} size={height} />
+          </a>
+        </Link>
       </View>
     </Responsive>
   )
@@ -132,6 +138,13 @@ const Details = React.memo(function _Details({ t }: { t: I18nProps['t'] }) {
       <Responsive medium={[textStyles.left, styles.detailsText, fonts.legal]}>
         <Text style={[textStyles.center, styles.detailsText, fonts.legal]}>{t('disclaimer')}</Text>
       </Responsive>
+      <Responsive medium={[textStyles.left, styles.detailsText, fonts.legal]}>
+        <Text style={[textStyles.center, styles.detailsText, fonts.legal]}>
+          <Trans i18nKey={'footerReadMoreTerms'}>
+            <LinkButon>Terms of Service</LinkButon>
+          </Trans>
+        </Text>
+      </Responsive>
       <Responsive medium={[textStyles.left, fonts.legal]}>
         <Text style={[textStyles.center, fonts.legal]}>{t('copyRight')}</Text>
       </Responsive>
@@ -139,6 +152,10 @@ const Details = React.memo(function _Details({ t }: { t: I18nProps['t'] }) {
   )
 })
 
+function LinkButon({ children }) {
+  return <Button kind={BTN.INLINE} href={menu.TERMS.link} text={children} style={fonts.legal} />
+}
+
 const styles = StyleSheet.create({
   social: {
     flexDirection: 'row',
diff --git a/packages/web/src/shared/menu-items.ts b/packages/web/src/shared/menu-items.ts
index 04b35b67bc9..6417dd7f25a 100644
--- a/packages/web/src/shared/menu-items.ts
+++ b/packages/web/src/shared/menu-items.ts
@@ -31,6 +31,10 @@ export const menuItems = {
     name: 'Privacy Policy',
     link: '/privacy',
   },
+  TERMS: {
+    name: 'Terms',
+    link: '/terms',
+  },
   MEDIUM: {
     name: 'Medium',
     link: 'https://medium.com/@celo.org',
diff --git a/packages/web/static/locales/en/common.json b/packages/web/static/locales/en/common.json
index d16bf5bb077..75e5f075798 100644
--- a/packages/web/static/locales/en/common.json
+++ b/packages/web/static/locales/en/common.json
@@ -23,5 +23,6 @@
   "cookiesAgree": "agree",
   "cookiesDisagree": "disagree",
   "trueGold": ["真金不怕火煉", "True gold fears no fire"],
-  "copyRight": "Designed & Built by C Labs, © Celo 2019"
+  "copyRight": "Designed & Built by C Labs, © Celo 2019",
+  "footerReadMoreTerms": "Read more in <0>Celo Terms of Service</0>"
 }