diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index a6c4636fec9..5eecbe362b2 100644 --- a/packages/web/pages/_app.tsx +++ b/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' diff --git a/packages/web/src/_page-tests/experience/__snapshots__/color.test.tsx.snap b/packages/web/src/_page-tests/experience/__snapshots__/color.test.tsx.snap index 6bd1d03cc29..c2faca627aa 100644 --- a/packages/web/src/_page-tests/experience/__snapshots__/color.test.tsx.snap +++ b/packages/web/src/_page-tests/experience/__snapshots__/color.test.tsx.snap @@ -5494,141 +5494,217 @@ exports[`Experience/Color renders 1`] = ` className="css-view-1dbjc4n" style={ Object { + "WebkitAlignItems": "center", "WebkitAlignSelf": "center", + "WebkitBoxAlign": "center", "WebkitBoxDirection": "normal", "WebkitBoxOrient": "horizontal", - "WebkitBoxPack": "justify", + "WebkitBoxPack": "center", "WebkitFlexDirection": "row", - "WebkitJustifyContent": "space-between", + "WebkitJustifyContent": "center", + "alignItems": "center", "alignSelf": "center", "flexDirection": "row", - "justifyContent": "space-between", + "justifyContent": "center", "marginTop": "30px", - "maxWidth": "210px", + "msFlexAlign": "center", "msFlexDirection": "row", "msFlexItemAlign": "center", - "msFlexPack": "justify", + "msFlexPack": "center", "width": "100%", } } > - - - - Medium Logo - - - - - + + Medium Logo + + + + + +
- - - - - + + + +
+
- - - Twitter Logo - - - - - + + Twitter Logo + + + + +
+
- - - - - + + + +
+
- - - - + viewBox="0 0 40 46" + width={30} + > + + + +
+
+ + + + + +
- - - - Medium Logo - - - - - + + Medium Logo + + + + +
+
- - - - - + + + +
+
- - - Twitter Logo - - - - - + + Twitter Logo + + + + +
+
- - - - - + + + +
+
- - - - + viewBox="0 0 40 46" + width={30} + > + + + +
+
+ + + + + +
- - - - Medium Logo - - - - - + + Medium Logo + + + + +
+
- - - - - + + + +
+
- - - Twitter Logo - - - - - + + Twitter Logo + + + + +
+
- - - - - + + + +
+
- - - - + viewBox="0 0 40 46" + width={30} + > + + + +
+
+ + + + + +
- - - - Medium Logo - - - - - + + Medium Logo + + + + +
+
- - - - - + + + +
+
- - - Twitter Logo - - - - - + + Twitter Logo + + + + +
+
- - - - - + + + +
+
- - - - + viewBox="0 0 40 46" + width={30} + > + + + +
+
+ + + + + +
- - - - Medium Logo - - - - - + + Medium Logo + + + + +
+
- - - - - + + + +
+
- - - Twitter Logo - - - - - + + Twitter Logo + + + + +
+
- - - - - + + + +
+
- - - - + viewBox="0 0 40 46" + width={30} + > + + + +
+
+ + + + + +
- - - - Medium Logo - - - - - + + Medium Logo + + + + +
+
- - - - - + + + +
+
- - - Twitter Logo - - - - - + + Twitter Logo + + + + +
+
- - - - - + + + +
+
- - - - + viewBox="0 0 40 46" + width={30} + > + + + +
+
+ + + + + +
+ + + ) +}) diff --git a/packages/web/src/shared/Footer.3.tsx b/packages/web/src/shared/Footer.tsx similarity index 78% rename from packages/web/src/shared/Footer.3.tsx rename to packages/web/src/shared/Footer.tsx index b5d41aee141..319adba5b8d 100644 --- a/packages/web/src/shared/Footer.3.tsx +++ b/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 { return ( - + - +
@@ -59,23 +60,40 @@ const Social = React.memo(function _Social() { return ( - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) @@ -93,7 +111,7 @@ const Navigation = React.memo(function _Navigation({ currentPage = null, }: NavProps) { return ( - + {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', diff --git a/packages/web/src/shared/menu-items.ts b/packages/web/src/shared/menu-items.ts index 9b366585ea7..114b3ef56b6 100644 --- a/packages/web/src/shared/menu-items.ts +++ b/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 = {