Add Youtube to Footer +

packages/web/pages/_app.tsx

@@ -7,7 +7,7 @@ import scrollIntoView from 'scroll-into-view'
 import { canTrack, initializeAnalytics } from 'src/analytics/analytics'
 import Header from 'src/header/Header.3'
 import { ScreenSizeProvider } from 'src/layout/ScreenSize'
-import Footer from 'src/shared/Footer.3'
+import Footer from 'src/shared/Footer'
 import { HEADER_HEIGHT } from 'src/shared/Styles'
 import { getSentry, initSentry } from 'src/utils/sentry'
 import { appWithTranslation } from '../src/i18n'

packages/web/src/brandkit/common/Page.tsx

@@ -7,7 +7,7 @@ import Topbar from 'src/brandkit/common/TopBar'
 import OpenGraph from 'src/header/OpenGraph'
 import { Cell, GridRow, Spans } from 'src/layout/GridRow'
 import { ScreenProps, ScreenSizes, withScreenSize } from 'src/layout/ScreenSize'
-import Footer from 'src/shared/Footer.3'
+import Footer from 'src/shared/Footer'
 import menu, { hashNav } from 'src/shared/menu-items'
 import { HEADER_HEIGHT } from 'src/shared/Styles'
 import { colors, standardStyles } from 'src/styles'

packages/web/src/header/Header.3.tsx

@@ -12,7 +12,7 @@ import Octocat from 'src/icons/Octocat'
 import LogoDarkBg from 'src/logos/LogoDarkBg'
 import LogoLightBg from 'src/logos/LogoLightBg'
 import Button, { BTN } from 'src/shared/Button.3'
-import Footer from 'src/shared/Footer.3'
+import Footer from 'src/shared/Footer'
 import Link from 'src/shared/Link'
 import menu, { CeloLinks } from 'src/shared/menu-items'
 import OvalCoin from 'src/shared/OvalCoin'

packages/web/src/icons/YouTube.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { colors } from 'src/styles'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  color: colors
+  size: number
+}
+
+export default React.memo(function Discourse({ color, size }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 33 23" fill="none">
+      <Path
+        d="M31.6935 3.59097C31.322 2.17758 30.224 1.06468 28.8317 0.68629C26.3083 0 16.1852 0 16.1852 0C16.1852 0 6.06209 0 3.53867 0.68629C2.14638 1.06468 1.04836 2.17758 0.676835 3.59097C0 6.15436 0 11.5 0 11.5C0 11.5 0 16.8456 0.676835 19.409C1.04836 20.8224 2.14638 21.9353 3.53867 22.3137C6.06209 23 16.1852 23 16.1852 23C16.1852 23 26.3083 23 28.8317 22.3137C30.224 21.9353 31.322 20.8224 31.6935 19.409C32.3704 16.8456 32.3704 11.5 32.3704 11.5C32.3704 11.5 32.3704 6.15436 31.6935 3.59097ZM12.8746 16.3541V6.64589L21.335 11.5L12.8746 16.3541Z"
+        fill={color}
+      />
+    </Svg>
+  )
+})

packages/web/src/shared/Footer.3.tsx → packages/web/src/shared/Footer.tsx

@@ -7,6 +7,7 @@ import Discourse from 'src/icons/Discourse'
 import MediumLogo from 'src/icons/MediumLogo'
 import Octocat from 'src/icons/Octocat'
 import TwiterLogo from 'src/icons/TwitterLogo'
+import YouTube from 'src/icons/YouTube'
 import { Cell, GridRow, Spans } from 'src/layout/GridRow'
 import RingsGlyph from 'src/logos/RingsGlyph'
 import Button, { BTN } from 'src/shared/Button.3'
@@ -39,13 +40,13 @@ export class Footer extends React.PureComponent<Props & I18nProps> {
     return (
       <GridRow
         mobileStyle={styles.mobileContainer}
-        tabletStyle={standardStyles.blockMarginTablet}
+        tabletStyle={[standardStyles.blockMarginTablet, styles.mobileContainer]}
         desktopStyle={standardStyles.blockMargin}
       >
-        <Cell span={Spans.half} tabletSpan={Spans.fourth}>
+        <Cell span={Spans.half} tabletSpan={Spans.full}>
           <Social />
         </Cell>
-        <Cell span={Spans.half} tabletSpan={Spans.three4th}>
+        <Cell span={Spans.half} tabletSpan={Spans.full}>
           <Navigation t={t} isVertical={false} />
           <Details t={t} />
         </Cell>
@@ -59,23 +60,40 @@ const Social = React.memo(function _Social() {
   return (
     <Responsive medium={styles.social}>
       <View style={[styles.social, styles.socialMobile]}>
-        <MediumLogo color={colors.dark} height={height} />
-        <Link href={CeloLinks.gitHub}>
-          <a>
-            <Octocat color={colors.dark} size={height} />
-          </a>
-        </Link>
-        <TwiterLogo color={colors.dark} height={height} />
-        <Link href={CeloLinks.discourse}>
-          <a>
-            <Discourse color={colors.dark} size={height} />
-          </a>
-        </Link>
-        <Link href={CeloLinks.discord}>
-          <a>
-            <Discord color={colors.dark} size={height} />
-          </a>
-        </Link>
+        <View style={styles.socialIcon}>
+          <MediumLogo color={colors.dark} height={height} />
+        </View>
+        <View style={styles.socialIcon}>
+          <Link href={CeloLinks.gitHub}>
+            <a>
+              <Octocat color={colors.dark} size={height} />
+            </a>
+          </Link>
+        </View>
+        <View style={styles.socialIcon}>
+          <TwiterLogo color={colors.dark} height={height} />
+        </View>
+        <View style={styles.socialIcon}>
+          <Link href={CeloLinks.discourse}>
+            <a>
+              <Discourse color={colors.dark} size={height} />
+            </a>
+          </Link>
+        </View>
+        <View style={styles.socialIcon}>
+          <Link href={CeloLinks.discord}>
+            <a>
+              <Discord color={colors.dark} size={height} />
+            </a>
+          </Link>
+        </View>
+        <View style={styles.socialIcon}>
+          <Link href={CeloLinks.youtube}>
+            <a>
+              <YouTube color={colors.dark} size={height} />
+            </a>
+          </Link>
+        </View>
       </View>
     </Responsive>
   )
@@ -93,7 +111,7 @@ const Navigation = React.memo(function _Navigation({
   currentPage = null,
 }: NavProps) {
   return (
-    <Responsive large={styles.menu}>
+    <Responsive large={styles.menu} medium={styles.menuTablet}>
       <View style={isVertical ? styles.verticalMenu : styles.menuMobile}>
         {menuItems.map((item, index) => {
           const linkIsToCurrentPage = isVertical && currentPage === item.link
@@ -159,12 +177,14 @@ const Details = React.memo(function _Details({ t }: { t: I18nProps['t'] }) {
 const styles = StyleSheet.create({
   social: {
     flexDirection: 'row',
-    maxWidth: 210,
+    alignItems: 'center',
     width: '100%',
-    justifyContent: 'space-between',
     marginTop: 30,
   },
-  socialMobile: { alignSelf: 'center' },
+  socialMobile: { alignSelf: 'center', justifyContent: 'center' },
+  socialIcon: {
+    paddingRight: 25,
+  },
   details: {
     paddingTop: 40,
     paddingBottom: 20,
@@ -193,6 +213,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
   },
+  menuTablet: {
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+  },
   menuMobile: {
     justifyContent: 'center',
     flexDirection: 'row',

packages/web/src/shared/menu-items.ts

@@ -78,6 +78,7 @@ export enum CeloLinks {
   tutorial = 'https://docs.celo.org/getting-started/faucet#creating-an-empty-account-with-the-celo-client',
   buildWalletDocs = 'https://docs.celo.org/celo-codebase/wallet/intro',
   stakeOffTerms = '/stake-off/terms',
+  youtube = 'https://youtube.com/channel/UCCZgos_YAJSXm5QX5D5Wkcw',
 }
 
 export const languageOptions = {