diff --git a/package.json b/package.json
index 583dd7f2b59..54ff028be29 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,6 @@
"packages/*"
],
"nohoist": [
- "@celo/web/@timkendrick/monaco-editor",
- "@celo/web/@types/react-i18next",
- "@celo/web/next-i18next",
"**/openzeppelin-solidity"
]
},
diff --git a/packages/web/.babelrc b/packages/web/.babelrc
index 00c84afe497..b6cf7856bc8 100644
--- a/packages/web/.babelrc
+++ b/packages/web/.babelrc
@@ -1,5 +1,5 @@
{
- "presets": ["next/babel", "@zeit/next-typescript/babel"],
+ "presets": ["next/babel"],
"plugins": [
[
"module-resolver",
diff --git a/packages/web/next-env.d.ts b/packages/web/next-env.d.ts
new file mode 100644
index 00000000000..7b7aa2c7727
--- /dev/null
+++ b/packages/web/next-env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/packages/web/next.config.js b/packages/web/next.config.js
index efbbf4bb8db..956774e6f8b 100644
--- a/packages/web/next.config.js
+++ b/packages/web/next.config.js
@@ -1,4 +1,3 @@
-const withTypescript = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')
const webpack = require('webpack')
@@ -6,30 +5,28 @@ const envConfig = require('./env-config')
const serverEnvConfig = require('./server-env-config')
module.exports = withImages(
- withTypescript(
- withSass({
- cssLoaderOptions: {
- importLoaders: 1,
- localIdentName: '[local]___[hash:base64:5]',
- },
- cssModules: true,
- publicRuntimeConfig: envConfig,
- serverRuntimeConfig: serverEnvConfig,
- // options: {buildId, dev, isServer, defaultLoaders, webpack} https://nextjs.org/docs#customizing-webpack-config
- webpack: (config, { dev, isServer }) => {
- config.node = {
- fs: 'empty',
- }
- config.resolve.alias = {
- ...config.resolve.alias,
- 'react-native$': 'react-native-web',
- }
- if (!isServer) {
- config.resolve.alias['@sentry/node'] = '@sentry/browser'
- }
+ withSass({
+ cssLoaderOptions: {
+ importLoaders: 1,
+ localIdentName: '[local]___[hash:base64:5]',
+ },
+ cssModules: true,
+ publicRuntimeConfig: envConfig,
+ serverRuntimeConfig: serverEnvConfig,
+ // options: {buildId, dev, isServer, defaultLoaders, webpack} https://nextjs.org/docs#customizing-webpack-config
+ webpack: (config, { dev, isServer }) => {
+ config.node = {
+ fs: 'empty',
+ }
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ 'react-native$': 'react-native-web',
+ }
+ if (!isServer) {
+ config.resolve.alias['@sentry/node'] = '@sentry/browser'
+ }
- return config
- },
- })
- )
+ return config
+ },
+ })
)
diff --git a/packages/web/nodemon.json b/packages/web/nodemon.json
index b322d5cce0a..453cd333331 100644
--- a/packages/web/nodemon.json
+++ b/packages/web/nodemon.json
@@ -1,4 +1,4 @@
{
- "watch": ["server/**/*.ts"],
+ "watch": ["server/**/*.ts", "server/*.ts"],
"exec": "ts-node --project tsconfig.server.json server/index.ts"
}
diff --git a/packages/web/package.json b/packages/web/package.json
index d7661a2394e..f19dbf56447 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -19,88 +19,86 @@
},
"dependencies": {
"@celo/utils": "^0.1.0",
- "@segment/in-eu": "^0.2.1",
- "@sentry/browser": "^5.6.2",
- "@sentry/node": "^5.6.2",
+ "@segment/in-eu": "^0.3.0",
+ "@sentry/browser": "^5.10.2",
+ "@sentry/node": "^5.10.2",
"@zeit/next-sass": "^1.0.1",
- "@zeit/next-typescript": "^1.1.1",
- "airtable": "^0.6.0",
- "apollo-boost": "^0.3.1",
- "big-integer": "^1.6.31",
- "body-parser": "^1.18.3",
+ "airtable": "^0.8.1",
+ "apollo-boost": "^0.4.4",
+ "big-integer": "^1.6.48",
+ "body-parser": "^1.19.0",
"colortranslator": "^1.1.1",
"compression": "^1.7.4",
"connect-slashes": "^1.4.0",
- "cross-fetch": "^3.0.2",
- "debounce": "^1.1.0",
- "express": "^4.16.4",
+ "core-js": "^2.6.9",
+ "cross-fetch": "^3.0.4",
+ "debounce": "^1.2.0",
+ "express": "^4.17.1",
"express-enforces-ssl": "^1.1.0",
- "fast-xml-parser": "^3.12.16",
- "fecha": "^3.0.2",
- "firebase": "^7.2.2",
- "glob": "^7.1.3",
- "graphql": "^14.1.1",
+ "fast-xml-parser": "^3.15.1",
+ "fecha": "^3.0.3",
+ "firebase": "^7.6.0",
+ "glob": "^7.1.6",
+ "graphql": "^14.5.8",
"hamburgers": "^0.9.3",
- "helmet": "^3.16.0",
+ "helmet": "^3.21.2",
"hex-rgba": "^1.0.2",
- "html-to-formatted-text": "^2.6.0",
- "js-cookie": "^2.2.0",
+ "html-to-formatted-text": "^2.7.0",
+ "js-cookie": "^2.2.1",
"load-segment": "^1.0.1",
"lodash.throttle": "^4.1.1",
- "lottie-web": "^5.5.7",
+ "lottie-web": "^5.5.10",
"mailgun-js": "^0.22.0",
"memoize-one": "^5.1.1",
- "mobile-detect": "^1.4.2",
+ "mobile-detect": "^1.4.4",
"net": "^1.0.2",
- "network-speed": "^2.0.3",
- "next": "^8.0.3",
+ "network-speed": "^2.0.4",
+ "next": "^9.1.5",
"next-i18next": "^2.1.1",
- "next-images": "^1.1.1",
+ "next-images": "^1.2.0",
"next-plugin-transpile-modules": "^2.0.0",
"nuka-carousel": "^4.5.13",
"react": "16.9.0",
- "react-apollo": "^2.5.8",
+ "react-apollo": "^3.1.3",
"react-autosuggest": "^9.4.3",
- "react-debounce-input": "^3.2.0",
+ "react-debounce-input": "^3.2.2",
"react-dom": "16.9.0",
- "react-google-recaptcha": "^1.1.0",
- "react-is": "^16.8.6",
- "react-lazyload": "^2.5.0",
+ "react-google-recaptcha": "^2.0.1",
+ "react-is": "16.9.0",
+ "react-lazyload": "^2.6.5",
"react-lazyload-fadein": "^1.1.0",
- "react-modal": "^3.8.1",
- "react-native-web": "^0.11.2",
+ "react-modal": "^3.11.1",
+ "react-native-web": "^0.11.7",
"react-reveal": "^1.2.2",
"react-youtube": "^7.9.0",
- "scroll-into-view": "^1.11.0",
+ "scroll-into-view": "^1.13.1",
"sha1": "^1.1.1",
"shuffle-seed": "^1.1.6",
- "stickyfilljs": "^2.0.5",
+ "stickyfilljs": "^2.1.0",
"svgs": "^4.1.0",
"tls": "^0.0.1",
"yiq": "^3.0.1"
},
"devDependencies": {
- "@firebase/app-types": "^0.4.6",
- "@sentry/types": "^5.6.1",
- "@types/airtable": "^0.5.6",
+ "@firebase/app-types": "^0.5.0",
+ "@sentry/types": "^5.10.0",
+ "@types/airtable": "^0.5.7",
"@types/hex-rgba": "^1.0.0",
- "@types/i18next": "^12.1.0",
- "@types/mailgun-js": "^0.16.3",
- "@types/next": "^8.0.3",
+ "@types/mailgun-js": "^0.22.3",
"@types/node": "^10.12.18",
- "@types/react": "^16.8.19",
- "@types/react-autosuggest": "^9.3.11",
- "@types/react-css-modules": "^4.6.1",
- "@types/react-google-recaptcha": "^1.0.0",
- "@types/react-native": "^0.60.19",
- "babel-plugin-module-resolver": "^3.1.1",
- "babel-plugin-react-css-modules": "^5.0.0",
- "babel-plugin-react-native-web": "^0.11.2",
+ "@types/react": "^16.9.16",
+ "@types/react-autosuggest": "^9.3.13",
+ "@types/react-css-modules": "^4.6.2",
+ "@types/react-google-recaptcha": "^1.1.1",
+ "@types/react-native": "^0.60.25",
+ "babel-plugin-module-resolver": "^4.0.0",
+ "babel-plugin-react-css-modules": "^5.2.6",
+ "babel-plugin-react-native-web": "^0.11.7",
"cross-env": "^5.1.6",
- "node-sass": "^4.11.0",
- "nodemon": "^1.18.8",
- "postcss-scss": "^1.0.5",
- "react-native-svg": "^9.3.6",
- "webpack": "4.20.2"
+ "node-sass": "^4.13.0",
+ "nodemon": "^2.0.2",
+ "postcss-scss": "^2.0.0",
+ "react-native-svg": "^9.13.6",
+ "webpack": "4.41.2"
}
}
diff --git a/packages/web/pages/_document.tsx b/packages/web/pages/_document.tsx
index 1a8f17c96f8..1474c2bc988 100644
--- a/packages/web/pages/_document.tsx
+++ b/packages/web/pages/_document.tsx
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { DocumentContext, Head, Main, NextScript } from 'next/document'
import * as React from 'react'
import { AppRegistry, I18nManager } from 'react-native-web'
import analytics from 'src/analytics/analytics'
@@ -8,18 +8,16 @@ import { isLocaleRTL } from '../server/i18nSetup'
// @ts-ignore
const a = analytics
-interface NextInitalProps {
- pathname: string
- query: any
- asPath: string
- req?: any
- res?: object
- err?: object
- renderPage: () => any
+interface NextReq {
+ locale: string
+}
+
+interface PropContext {
+ req: DocumentContext['req'] & NextReq
}
export default class MyDocument extends Document {
- static async getInitialProps(context: NextInitalProps) {
+ static async getInitialProps(context: DocumentContext & PropContext) {
const locale = context.req.locale
const userAgent = context.req.headers['user-agent']
setDimensionsForScreen(userAgent)
@@ -34,7 +32,6 @@ export default class MyDocument extends Document {
const page = context.renderPage()
const styles = React.Children.toArray([
// ,
- page.styles,
getStyleElement(),
])
diff --git a/packages/web/server/Announcement.ts b/packages/web/server/Announcement.ts
index cace5253dd5..1001fbe06cf 100644
--- a/packages/web/server/Announcement.ts
+++ b/packages/web/server/Announcement.ts
@@ -8,28 +8,25 @@ interface Fields {
link: string
}
-interface QueryError {
- message: string
- error: number
+interface Record {
+ id: string
+ fields: Fields
}
-export default function latestAnnouncements(): Promise {
- return new Promise((resolve, reject) => {
- getAirtable()
+export default async function latestAnnouncements(): Promise {
+ try {
+ const records = (await getAirtable()
.select({
maxRecords: 1,
filterByFormula: IS_LIVE,
sort: [{ field: 'order', direction: 'desc' }],
})
- .firstPage((err: QueryError, records: Airtable.Response) => {
- if (err) {
- Sentry.captureEvent(err)
- reject(err)
- return
- }
- resolve(records.map((record) => record.fields))
- })
- })
+ .firstPage()) as Record[]
+
+ return records.map((record) => record.fields)
+ } catch (err) {
+ Sentry.captureEvent(err)
+ }
}
function getAirtable() {
diff --git a/packages/web/server/AssetBase.ts b/packages/web/server/AssetBase.ts
index aece66473b6..f7f0e49e562 100644
--- a/packages/web/server/AssetBase.ts
+++ b/packages/web/server/AssetBase.ts
@@ -34,7 +34,7 @@ export default function getAssets(sheet: AssetSheet) {
}
function getAirtable(sheet: AssetSheet): Table {
- return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_BRANDKIT_ID)(sheet)
+ return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_BRANDKIT_ID)(sheet) as Table
}
const IS_APROVED = 'Approved=1'
diff --git a/packages/web/server/EventHelpers.ts b/packages/web/server/EventHelpers.ts
index 584d3f57972..40d43d5a5ff 100644
--- a/packages/web/server/EventHelpers.ts
+++ b/packages/web/server/EventHelpers.ts
@@ -1,7 +1,7 @@
import getConfig from 'next/config'
import { EventProps } from '../fullstack/EventProps'
import Sentry from '../fullstack/sentry'
-import airtableInit, { AirRecord } from '../server/airtable'
+import airtableInit from '../server/airtable'
import { abort } from '../src/utils/abortableFetch'
const TABLE_NAME = 'Community Calendar'
// Intermediate step Event With all String Values
@@ -64,23 +64,19 @@ export default async function getFormattedEvents() {
return splitEvents(normalizeEvents(eventData as RawAirTableEvent[]))
}
-function fetchEventsFromAirtable() {
- return new Promise((resolve, reject) => {
- getAirtable()
+async function fetchEventsFromAirtable() {
+ try {
+ const records = await getAirtable()
.select({
filterByFormula:
'OR(Process="Complete", Process="Scheduled", Process="Conference, Speaking", Process="This Week")',
sort: [{ field: 'Start Date', direction: 'desc' }],
})
- .firstPage((error: unknown, records: Array>) => {
- if (error) {
- Sentry.captureEvent(error)
- reject(error)
- } else {
- resolve(records.map((record) => record.fields))
- }
- })
- })
+ .firstPage()
+ return records.map((record) => record.fields)
+ } catch (error) {
+ Sentry.captureEvent(error)
+ }
}
function getAirtable() {
diff --git a/packages/web/server/FellowshipApp.ts b/packages/web/server/FellowshipApp.ts
index abc32c3fa59..8b8e7e9473e 100644
--- a/packages/web/server/FellowshipApp.ts
+++ b/packages/web/server/FellowshipApp.ts
@@ -9,7 +9,7 @@ function getAirtable() {
}
export async function submitFellowApp(fields: FellowApp): Promise> {
- return getAirtable().create(migrate(fields))
+ return getAirtable().create(migrate(fields)) as Promise>
}
function migrate(fields: FellowApp) {
diff --git a/packages/web/server/airtable.ts b/packages/web/server/airtable.ts
index 01fc1c73dbc..4c63e89c816 100644
--- a/packages/web/server/airtable.ts
+++ b/packages/web/server/airtable.ts
@@ -1,7 +1,7 @@
-import * as AirtableAPI from 'airtable'
+import AirtableAPI from 'airtable'
import getConfig from 'next/config'
-let airTableSingleton
+let airTableSingleton: AirtableAPI
export default function airtableInit(baseID: string) {
const { serverRuntimeConfig } = getConfig()
diff --git a/packages/web/server/index.ts b/packages/web/server/index.ts
index 7d011d10a95..91f3e3c04da 100644
--- a/packages/web/server/index.ts
+++ b/packages/web/server/index.ts
@@ -1,10 +1,10 @@
-import * as bodyParser from 'body-parser'
-import * as compression from 'compression'
-import * as slashes from 'connect-slashes'
-import * as express from 'express'
-import * as expressEnforcesSsl from 'express-enforces-ssl'
-import * as helmet from 'helmet'
-import * as next from 'next'
+import bodyParser from 'body-parser'
+import compression from 'compression'
+import slashes from 'connect-slashes'
+import express from 'express'
+import expressEnforcesSsl from 'express-enforces-ssl'
+import helmet from 'helmet'
+import next from 'next'
import nextI18NextMiddleware from 'next-i18next/middleware'
import { Tables } from '../fullstack/EcoFundFields'
import Sentry, { initSentry } from '../fullstack/sentry'
diff --git a/packages/web/src/about/About.tsx b/packages/web/src/about/About.tsx
index 3d00ca009be..73e9db686a0 100644
--- a/packages/web/src/about/About.tsx
+++ b/packages/web/src/about/About.tsx
@@ -1,10 +1,10 @@
import * as React from 'react'
import { Image, StyleSheet, View } from 'react-native'
import Backers from 'src/about/Backers'
-import { mintPlaza, teamHero } from 'src/about/images'
+import { teamHero } from 'src/about/images'
import Team from 'src/about/Team'
import VideoCover from 'src/about/VideoCover'
-import { H1, H4 } from 'src/fonts/Fonts'
+import { H4 } from 'src/fonts/Fonts'
import OpenGraph from 'src/header/OpenGraph'
import MissionText from 'src/home/MissionText'
import { I18nProps, withNamespaces } from 'src/i18n'
@@ -12,7 +12,6 @@ import { Cell, GridRow, Spans } from 'src/layout/GridRow'
import AspectRatio from 'src/shared/AspectRatio'
import Button, { BTN, SIZE } from 'src/shared/Button.3'
import menuItems from 'src/shared/menu-items'
-import Responsive from 'src/shared/Responsive'
import { Colors, HEADER_HEIGHT, MENU_MAX_WIDTH } from 'src/shared/Styles'
import { standardStyles } from 'src/styles'
diff --git a/packages/web/src/analytics/analytics.ts b/packages/web/src/analytics/analytics.ts
index ce4853dadb6..e0d27e277ee 100644
--- a/packages/web/src/analytics/analytics.ts
+++ b/packages/web/src/analytics/analytics.ts
@@ -3,7 +3,7 @@ import getConfig from 'next/config'
const isInEU = require('@segment/in-eu')
let analytics: {
- track: (key: string, properties: object, options: object) => void
+ track: (key: string, properties?: object, options?: object) => void
}
const ALLOW_ANALYTICS_COOKIE_NAME = '__allow__analytics__cookie__'
const RESPONDED_TO_CONSENT = '__responded_to_consent__'
diff --git a/packages/web/src/brandkit/Color.tsx b/packages/web/src/brandkit/Color.tsx
index db4d647cbb2..a03bb60f74e 100644
--- a/packages/web/src/brandkit/Color.tsx
+++ b/packages/web/src/brandkit/Color.tsx
@@ -8,7 +8,7 @@ import {
GRAY_PALETTE,
PRIMARY_PALETTE,
} from 'src/brandkit/common/data'
-import Page from 'src/brandkit/common/Page'
+import Page, { COLOR_PATH } from 'src/brandkit/common/Page'
import PageHeadline from 'src/brandkit/common/PageHeadline'
import SectionTitle from 'src/brandkit/common/SectionTitle'
import Judgement, { Value } from 'src/brandkit/logo/Judgement'
@@ -18,16 +18,21 @@ import { hashNav } from 'src/shared/menu-items'
import { colors, fonts, standardStyles } from 'src/styles'
const { brandColor } = hashNav
-export default React.memo(function Color() {
- return (
- },
- { id: brandColor.backgrounds, children: },
- ]}
- />
- )
-})
+export default React.memo(
+ withNamespaces(NameSpaces.brand)(function Color({ t }: I18nProps) {
+ return (
+ },
+ { id: brandColor.backgrounds, children: },
+ ]}
+ />
+ )
+ })
+)
const Overview = withNamespaces(NameSpaces.brand)(function _Overview({ t }: I18nProps) {
return (
diff --git a/packages/web/src/brandkit/IconsPage.tsx b/packages/web/src/brandkit/IconsPage.tsx
index f082d3afb69..9d8d665c234 100644
--- a/packages/web/src/brandkit/IconsPage.tsx
+++ b/packages/web/src/brandkit/IconsPage.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { brandStyles, GAP } from 'src/brandkit/common/constants'
import Fetch from 'src/brandkit/common/Fetch'
-import Page from 'src/brandkit/common/Page'
+import Page, { ICONS_PATH } from 'src/brandkit/common/Page'
import PageHeadline from 'src/brandkit/common/PageHeadline'
import IconShowcase from 'src/brandkit/common/Showcase'
import { I18nProps, NameSpaces, Trans, withNamespaces } from 'src/i18n'
@@ -10,18 +10,18 @@ import InlineAnchor from 'src/shared/InlineAnchor'
import { CeloLinks, hashNav } from 'src/shared/menu-items'
import { fonts, standardStyles } from 'src/styles'
-export default React.memo(function IconsPage() {
- return (
- ,
- },
- ]}
- />
- )
-})
+export default React.memo(
+ withNamespaces(NameSpaces.brand)(function IconsPage({ t }: I18nProps) {
+ return (
+ }]}
+ />
+ )
+ })
+)
interface IconData {
description: string
diff --git a/packages/web/src/brandkit/Intro.tsx b/packages/web/src/brandkit/Intro.tsx
index 08b154060f3..0b118950c6a 100644
--- a/packages/web/src/brandkit/Intro.tsx
+++ b/packages/web/src/brandkit/Intro.tsx
@@ -1,25 +1,27 @@
import * as React from 'react'
import { Text, View } from 'react-native'
import { brandStyles } from 'src/brandkit/common/constants'
-import Page from 'src/brandkit/common/Page'
+import Page, { ROOT } from 'src/brandkit/common/Page'
import { H1, H4 } from 'src/fonts/Fonts'
import { I18nProps, NameSpaces, Trans, withNamespaces } from 'src/i18n'
import InlineAnchor from 'src/shared/InlineAnchor'
import menuItems from 'src/shared/menu-items'
import { fonts, standardStyles } from 'src/styles'
-export default React.memo(function Intro() {
- return (
- ,
- },
- ]}
- />
- )
-})
+export default React.memo(
+ withNamespaces(NameSpaces.brand)(function Intro({ t }: I18nProps) {
+ return (
+ <>
+ }]}
+ />
+ >
+ )
+ })
+)
const Overview = withNamespaces(NameSpaces.brand)(function _Overview({ t }: I18nProps) {
return (
diff --git a/packages/web/src/brandkit/KeyImagery.tsx b/packages/web/src/brandkit/KeyImagery.tsx
index 6cf39cb7ba9..987ec3f819c 100644
--- a/packages/web/src/brandkit/KeyImagery.tsx
+++ b/packages/web/src/brandkit/KeyImagery.tsx
@@ -1,16 +1,19 @@
import * as React from 'react'
import { Text } from 'react-native'
-import Page from 'src/brandkit/common/Page'
-import { NameSpaces, withNamespaces } from 'src/i18n'
+import Page, { IMAGERY_PATH } from 'src/brandkit/common/Page'
+import { I18nProps, NameSpaces, withNamespaces } from 'src/i18n'
import { hashNav } from 'src/shared/menu-items'
const { brandImagery } = hashNav
// TODO in v 1.1
const KeyImageryWrapped = withNamespaces(NameSpaces.brand)(
- React.memo(function KeyImagery() {
+ React.memo(function KeyImagery({ t }: I18nProps) {
return (
illustrations,
},
- {
- id: brandImagery.graphics,
- children: graphics,
- },
+ { id: brandImagery.graphics, children: graphics },
]}
/>
)
diff --git a/packages/web/src/brandkit/Logo.tsx b/packages/web/src/brandkit/Logo.tsx
index 430a9c2b03c..cf5bf1ed9a3 100644
--- a/packages/web/src/brandkit/Logo.tsx
+++ b/packages/web/src/brandkit/Logo.tsx
@@ -4,7 +4,7 @@ import Palette from 'src/brandkit/color/Palette'
import { brandStyles, GAP } from 'src/brandkit/common/constants'
import { BACKGROUND_PALETTE } from 'src/brandkit/common/data'
import DownloadButton from 'src/brandkit/common/DownloadButton'
-import Page from 'src/brandkit/common/Page'
+import Page, { LOGO_PATH } from 'src/brandkit/common/Page'
import SectionTitle from 'src/brandkit/common/SectionTitle'
import TripplePairing from 'src/brandkit/common/TripplePairing'
import Judgement, { Value } from 'src/brandkit/logo/Judgement'
@@ -22,26 +22,22 @@ import InlineAnchor from 'src/shared/InlineAnchor'
import menuItems, { hashNav } from 'src/shared/menu-items'
import { colors, fonts, standardStyles } from 'src/styles'
-export default React.memo(function Logo() {
- return (
- ,
- },
- {
- id: hashNav.brandLogo.space,
- children: ,
- },
- {
- id: hashNav.brandLogo.backgrounds,
- children: ,
- },
- ]}
- />
- )
-})
+export default React.memo(
+ withNamespaces(NameSpaces.brand)(function Logo({ t }: I18nProps) {
+ return (
+ },
+ { id: hashNav.brandLogo.space, children: },
+ { id: hashNav.brandLogo.backgrounds, children: },
+ ]}
+ />
+ )
+ })
+)
const Overview = withNamespaces(NameSpaces.brand)(
withScreenSize(function _Overview({ t, screen }: I18nProps & ScreenProps) {
diff --git a/packages/web/src/brandkit/Typography.tsx b/packages/web/src/brandkit/Typography.tsx
index 6fca26cf630..b32e106d784 100644
--- a/packages/web/src/brandkit/Typography.tsx
+++ b/packages/web/src/brandkit/Typography.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { brandStyles } from 'src/brandkit/common/constants'
import DownloadButton from 'src/brandkit/common/DownloadButton'
-import Page from 'src/brandkit/common/Page'
+import Page, { TYPE_PATH } from 'src/brandkit/common/Page'
import PageHeadline from 'src/brandkit/common/PageHeadline'
import SectionTitle from 'src/brandkit/common/SectionTitle'
import UseageExamples from 'src/brandkit/typography/UseageExample'
@@ -27,19 +27,24 @@ function getWeight(weight: string | undefined) {
}
}
-export default React.memo(function Typography() {
- return (
- },
- { id: brandTypography.scale, children: },
- ]}
- />
- )
-})
+export default React.memo(
+ withNamespaces(NameSpaces.brand)(function Typography({ t }: I18nProps) {
+ return (
+ },
+ { id: brandTypography.scale, children: },
+ ]}
+ />
+ )
+ })
+)
const Overview = withNamespaces(NameSpaces.brand)(
- React.memo(function _Overview({ t, i18n }: I18nProps) {
+ React.memo(function _Overview({ t }: I18nProps) {
return (
- {(isHovering) => (
-
+ {(isHovering: boolean) => (
+
{
}
render() {
- const { screen, sections, router } = this.props
+ const { screen, sections, router, path, metaDescription, title } = this.props
const isMobile = screen === ScreenSizes.MOBILE
return (
-
-
-
-
-
- {isMobile && (
-
- )}
-
-
- {!isMobile && (
-
- )}
- |
-
-
- {sections.map(({ id, children }) => {
- return (
-
- {children}
-
- )
- })}
-
- |
-
-
-
+ <>
+
+
+
+
+
+
+ {isMobile && (
+
+ )}
+
+
+ {!isMobile && (
+
+ )}
+ |
+
+
+ {sections.map(({ id, children }) => {
+ return (
+
+ {children}
+
+ )
+ })}
+
+ |
+
+
+
+
-
+ >
)
}
}
diff --git a/packages/web/src/brandkit/images/ogimage-brandkit.png b/packages/web/src/brandkit/images/ogimage-brandkit.png
new file mode 100644
index 00000000000..83c5bf3ed23
Binary files /dev/null and b/packages/web/src/brandkit/images/ogimage-brandkit.png differ
diff --git a/packages/web/src/brandkit/logo/Minimums.tsx b/packages/web/src/brandkit/logo/Minimums.tsx
index c3d85036df5..d5a4837128a 100644
--- a/packages/web/src/brandkit/logo/Minimums.tsx
+++ b/packages/web/src/brandkit/logo/Minimums.tsx
@@ -1,4 +1,3 @@
-import { func } from 'prop-types'
import * as React from 'react'
import Svg, { G, Path, Rect } from 'svgs'
diff --git a/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap b/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap
index 0639733073f..0396cbdd723 100644
--- a/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap
+++ b/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap
@@ -113,7 +113,7 @@ exports[`Showcase renders 1`] = `
}
>
{