Update Footer (#1331)

* Add link to “terms” page on the footer * Add Discord to universal footer * Lint fix
celo-org · Oct 24, 2019 · de10a42 · de10a42
1 parent faafaa9
commit de10a42
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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,13 +138,24 @@ 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>
     </View>
   )
 })
 
+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
@@ -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
@@ -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>"
 }