From 0d4035bba18a2737595127bbe0e0821a6ca95eb5 Mon Sep 17 00:00:00 2001 From: Anzhelo Dimitrov <32179794+AnzheloD@users.noreply.github.com> Date: Fri, 2 Dec 2022 21:42:37 +0200 Subject: [PATCH] 1212 Added Montserrat as a global font family (#1223) * 1212 Added Montserrat as a global font family Removed all other fonts Added next/font from nextjs 13, which has automatic optimizations * 1212 Added subset to montserrat font config * 1212 Added cyrillic subset and changed font display type --- package.json | 3 +- src/common/theme.ts | 22 ++- .../auth/profile/CertificatesTab.tsx | 1 - .../auth/profile/DisableAccountModal.tsx | 7 - .../auth/profile/MyCampaignsTab.tsx | 1 - .../auth/profile/PersonalInfoTab.tsx | 2 - src/components/campaigns/CampaignDetails.tsx | 1 - src/components/common/FormFieldButton.tsx | 1 - src/components/countries/grid/CountryGrid.tsx | 1 - src/components/expenses/grid/Grid.tsx | 2 - src/components/index/IndexPage.styled.tsx | 1 - src/pages/_app.tsx | 19 +-- src/pages/_document.tsx | 6 +- yarn.lock | 150 +++++++++--------- 14 files changed, 97 insertions(+), 120 deletions(-) diff --git a/package.json b/package.json index 53d3fcf4e..51908e36b 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@mui/styles": "^5.10.14", "@mui/x-data-grid": "^5.17.2", "@mui/x-date-pickers": "^5.0.8", + "@next/font": "^13.0.5", "@paypal/react-paypal-js": "^7.8.1", "@react-pdf/renderer": "^3.0.1", "@sentry/nextjs": "7.21.1", @@ -51,7 +52,7 @@ "lodash": "^4.17.21", "mobx": "6.3.2", "mobx-react": "7.2.0", - "next": "^13.0.4", + "next": "^13.0.5", "next-auth": "^4.16.4", "next-i18next": "^13.0.0", "nookies": "^2.5.2", diff --git a/src/common/theme.ts b/src/common/theme.ts index 634d82f2b..a248ac851 100644 --- a/src/common/theme.ts +++ b/src/common/theme.ts @@ -7,7 +7,12 @@ import { ThemeOptions, } from '@mui/material/styles' -const fontFamily = 'Montserrat' +import { Montserrat } from '@next/font/google' + +export const montserrat = Montserrat({ + display: 'auto', + subsets: ['latin', 'cyrillic'], +}) // Instead of exporting `colors` variable use theme: // import theme from 'common/theme' @@ -179,22 +184,15 @@ export const themeOptions: ThemeOptions = { }, typography: { - h1: { fontFamily }, - h2: { fontFamily }, - h3: { fontFamily, color: colors.blue.dark }, - h4: { fontFamily }, - h5: { fontFamily }, - h6: { fontFamily }, - subtitle1: { fontFamily }, - subtitle2: { fontFamily }, + fontFamily: montserrat.style.fontFamily, + h3: { color: colors.blue.dark }, + body1: { fontSize: '0.875rem', lineHeight: '1.43', letterSpacing: '0.01071em', - fontFamily, }, - body2: { fontFamily }, - button: { fontFamily, textTransform: 'initial' }, + button: { textTransform: 'initial' }, }, } // https://material-ui.com/customization/default-theme/#default-theme diff --git a/src/components/auth/profile/CertificatesTab.tsx b/src/components/auth/profile/CertificatesTab.tsx index c5ff71e61..b9e1f7e06 100644 --- a/src/components/auth/profile/CertificatesTab.tsx +++ b/src/components/auth/profile/CertificatesTab.tsx @@ -33,7 +33,6 @@ const Root = styled('div')(({ theme }) => ({ margin: 0, }, [`& .${classes.smallText}`]: { - fontFamily: 'Lato, sans-serif', fontStyle: 'normal', fontWeight: '500', fontSize: '15px', diff --git a/src/components/auth/profile/DisableAccountModal.tsx b/src/components/auth/profile/DisableAccountModal.tsx index ca53cfd73..3d2aa3926 100644 --- a/src/components/auth/profile/DisableAccountModal.tsx +++ b/src/components/auth/profile/DisableAccountModal.tsx @@ -44,18 +44,12 @@ const StyledModal = styled(Modal)(({ theme }) => ({ }, }, [`& .${classes.subtitle}`]: { - fontFamily: 'Lato, sans-serif', - fontStyle: 'normal', - fontWeight: '400', fontSize: theme.typography.pxToRem(14), lineHeight: theme.spacing(3), color: theme.palette.primary.main, margin: theme.spacing(1, 0), }, [`& .${classes.graySpan}`]: { - fontFamily: 'Lato, sans-serif', - fontStyle: 'normal', - fontWeight: '400', fontSize: theme.typography.pxToRem(14), lineHeight: '133.4%', color: '#909090', @@ -65,7 +59,6 @@ const StyledModal = styled(Modal)(({ theme }) => ({ }, }, [`& .${classes.irrevirsibleAction}`]: { - fontFamily: 'Lato, sans-serif', fontStyle: 'normal', fontWeight: '400', fontSize: theme.typography.pxToRem(14), diff --git a/src/components/auth/profile/MyCampaignsTab.tsx b/src/components/auth/profile/MyCampaignsTab.tsx index 4265d111d..38834c089 100644 --- a/src/components/auth/profile/MyCampaignsTab.tsx +++ b/src/components/auth/profile/MyCampaignsTab.tsx @@ -35,7 +35,6 @@ const Root = styled('div')(({ theme }) => ({ margin: 0, }, [`& .${classes.smallText}`]: { - fontFamily: 'Lato, sans-serif', fontStyle: 'normal', fontWeight: '500', fontSize: '15px', diff --git a/src/components/auth/profile/PersonalInfoTab.tsx b/src/components/auth/profile/PersonalInfoTab.tsx index dccf7420b..1a5d8e539 100644 --- a/src/components/auth/profile/PersonalInfoTab.tsx +++ b/src/components/auth/profile/PersonalInfoTab.tsx @@ -54,7 +54,6 @@ const Root = styled('div')(({ theme }) => ({ }, [`& .${classes.graySpan}`]: { - fontFamily: 'Lato, sans-serif', fontStyle: 'normal', fontWeight: '400', fontSize: '18px', @@ -63,7 +62,6 @@ const Root = styled('div')(({ theme }) => ({ }, [`& .${classes.h5}`]: { - fontFamily: 'Lato, sans-serif', fontStyle: 'normal', fontWeight: '600', fontSize: '22px', diff --git a/src/components/campaigns/CampaignDetails.tsx b/src/components/campaigns/CampaignDetails.tsx index e07b42a26..04856b556 100644 --- a/src/components/campaigns/CampaignDetails.tsx +++ b/src/components/campaigns/CampaignDetails.tsx @@ -98,7 +98,6 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ ['& .ql-editor']: { fontSize: theme.spacing(2), fontWeight: 500, - fontFamily: 'Montserrat', lineHeight: theme.spacing(4), paddingLeft: '0', paddingRight: '0', diff --git a/src/components/common/FormFieldButton.tsx b/src/components/common/FormFieldButton.tsx index fe7c37100..fcb4e97d3 100644 --- a/src/components/common/FormFieldButton.tsx +++ b/src/components/common/FormFieldButton.tsx @@ -55,7 +55,6 @@ const Root = styled('div')(({ theme }) => ({ fontSize: '1rem', lineHeight: '1.4375em', letterSpacing: '0.01071em', - fontFamily: theme.typography.fontFamily, fontWeight: 400, padding: 0, }, diff --git a/src/components/countries/grid/CountryGrid.tsx b/src/components/countries/grid/CountryGrid.tsx index 0d7af8ba1..e1ca9b354 100644 --- a/src/components/countries/grid/CountryGrid.tsx +++ b/src/components/countries/grid/CountryGrid.tsx @@ -22,7 +22,6 @@ const classes = { const Root = styled('div')({ [`& .${classes.gridColumn}`]: { '& .MuiDataGrid-columnHeaderTitle': { - fontFamily: 'Roboto', fontSize: '14px', fontWeight: '700', }, diff --git a/src/components/expenses/grid/Grid.tsx b/src/components/expenses/grid/Grid.tsx index 36a45406e..04001e749 100644 --- a/src/components/expenses/grid/Grid.tsx +++ b/src/components/expenses/grid/Grid.tsx @@ -33,12 +33,10 @@ const Root = styled('div')({ marginTop: '30px', marginRight: '40px', }, - fontFamily: 'Lato', fontSize: '12px', }, [`& .${classes.gridColumn}`]: { '& .MuiDataGrid-columnHeaderTitle': { - fontFamily: 'Roboto', fontSize: '14px', fontWeight: '700', }, diff --git a/src/components/index/IndexPage.styled.tsx b/src/components/index/IndexPage.styled.tsx index ab8a16cad..4f2321994 100644 --- a/src/components/index/IndexPage.styled.tsx +++ b/src/components/index/IndexPage.styled.tsx @@ -14,7 +14,6 @@ export const Heading = styled(Typography)(() => ({ export const InfoText = styled(Typography)(() => ({ display: 'inline-block', textAlign: 'center', - fontFamily: 'Montserrat', fontSize: theme.typography.pxToRem(16), lineHeight: theme.spacing(3), paddingBottom: theme.spacing(6), diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e30af0aff..12148352d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,21 +1,21 @@ -import Head from 'next/head' -import { AppProps } from 'next/app' -import { useRouter } from 'next/router' import { EmotionCache } from '@emotion/cache' import { CacheProvider } from '@emotion/react' -import React, { useEffect, useState } from 'react' -import { appWithTranslation, useTranslation } from 'next-i18next' -import { ThemeProvider, Theme } from '@mui/material/styles' import { CssBaseline } from '@mui/material' +import { Theme, ThemeProvider } from '@mui/material/styles' import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { appWithTranslation, useTranslation } from 'next-i18next' +import { AppProps } from 'next/app' +import Head from 'next/head' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import createEmotionCache from 'common/createEmotionCache' import theme from 'common/theme' import useGTM from 'common/util/useGTM' -import createEmotionCache from 'common/createEmotionCache' -import 'styles/global.scss' -import { queryFn } from 'service/restRequests' import { SessionProvider } from 'next-auth/react' +import { queryFn } from 'service/restRequests' +import 'styles/global.scss' // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache() @@ -28,6 +28,7 @@ declare module '@mui/styles/defaultTheme' { interface CustomAppProps extends AppProps { emotionCache?: EmotionCache } + function CustomApp({ Component, emotionCache = clientSideEmotionCache, diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index f68990eaf..6466533e3 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -14,11 +14,7 @@ export default class CustomDocument extends Document { {/* PWA primary color */} - - + {/* Inject MUI styles first to match with the prepend: true configuration. */} {(this.props as any).emotionStyleTags} diff --git a/yarn.lock b/yarn.lock index fc62f5c78..1648e7f08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1737,10 +1737,10 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.0.4": - version: 13.0.4 - resolution: "@next/env@npm:13.0.4" - checksum: f088009b462bbe0b2224ecb7591054cb2adc33fa04b458e0a811cb7bc8f34145c33d15f8d91bd792e3001b83a1539d60489e2917d6a3bf788263253695d7f26e +"@next/env@npm:13.0.5": + version: 13.0.5 + resolution: "@next/env@npm:13.0.5" + checksum: cd005b171d602df1b01415df00e1fee79bfd7c6840f1836bedc7b0f9cb466b73e2e52a6cdcff77535538ef55eec200f5e7accb7670fa3273c625f0e0c3a79afb languageName: node linkType: hard @@ -1753,93 +1753,100 @@ __metadata: languageName: node linkType: hard -"@next/swc-android-arm-eabi@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-android-arm-eabi@npm:13.0.4" +"@next/font@npm:^13.0.5": + version: 13.0.5 + resolution: "@next/font@npm:13.0.5" + checksum: 12304ac4a52be437f02a472a00e2183fc4dd49ca9b4583a2abde5249686c246346348d47231e74258659ccf54c8bca349811aec0d894c3e8824592316e78740c + languageName: node + linkType: hard + +"@next/swc-android-arm-eabi@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-android-arm-eabi@npm:13.0.5" conditions: os=android & cpu=arm languageName: node linkType: hard -"@next/swc-android-arm64@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-android-arm64@npm:13.0.4" +"@next/swc-android-arm64@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-android-arm64@npm:13.0.5" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-darwin-arm64@npm:13.0.4" +"@next/swc-darwin-arm64@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-darwin-arm64@npm:13.0.5" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-darwin-x64@npm:13.0.4" +"@next/swc-darwin-x64@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-darwin-x64@npm:13.0.5" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-freebsd-x64@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-freebsd-x64@npm:13.0.4" +"@next/swc-freebsd-x64@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-freebsd-x64@npm:13.0.5" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm-gnueabihf@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-linux-arm-gnueabihf@npm:13.0.4" +"@next/swc-linux-arm-gnueabihf@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-linux-arm-gnueabihf@npm:13.0.5" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-linux-arm64-gnu@npm:13.0.4" +"@next/swc-linux-arm64-gnu@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-linux-arm64-gnu@npm:13.0.5" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-linux-arm64-musl@npm:13.0.4" +"@next/swc-linux-arm64-musl@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-linux-arm64-musl@npm:13.0.5" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-linux-x64-gnu@npm:13.0.4" +"@next/swc-linux-x64-gnu@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-linux-x64-gnu@npm:13.0.5" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-linux-x64-musl@npm:13.0.4" +"@next/swc-linux-x64-musl@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-linux-x64-musl@npm:13.0.5" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-win32-arm64-msvc@npm:13.0.4" +"@next/swc-win32-arm64-msvc@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-win32-arm64-msvc@npm:13.0.5" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-win32-ia32-msvc@npm:13.0.4" +"@next/swc-win32-ia32-msvc@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-win32-ia32-msvc@npm:13.0.5" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.0.4": - version: 13.0.4 - resolution: "@next/swc-win32-x64-msvc@npm:13.0.4" +"@next/swc-win32-x64-msvc@npm:13.0.5": + version: 13.0.5 + resolution: "@next/swc-win32-x64-msvc@npm:13.0.5" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -2332,16 +2339,7 @@ __metadata: languageName: node linkType: hard -"@swc/helpers@npm:0.4.11": - version: 0.4.11 - resolution: "@swc/helpers@npm:0.4.11" - dependencies: - tslib: ^2.4.0 - checksum: 736857d524b41a8a4db81094e9b027f554004e0fa3e86325d85bdb38f7e6459ce022db079edb6c61ba0f46fe8583b3e663e95f7acbd13e51b8da6c34e45bba2e - languageName: node - linkType: hard - -"@swc/helpers@npm:^0.4.2": +"@swc/helpers@npm:0.4.14, @swc/helpers@npm:^0.4.2": version: 0.4.14 resolution: "@swc/helpers@npm:0.4.14" dependencies: @@ -8093,29 +8091,28 @@ __metadata: languageName: node linkType: hard -"next@npm:^13.0.4": - version: 13.0.4 - resolution: "next@npm:13.0.4" - dependencies: - "@next/env": 13.0.4 - "@next/swc-android-arm-eabi": 13.0.4 - "@next/swc-android-arm64": 13.0.4 - "@next/swc-darwin-arm64": 13.0.4 - "@next/swc-darwin-x64": 13.0.4 - "@next/swc-freebsd-x64": 13.0.4 - "@next/swc-linux-arm-gnueabihf": 13.0.4 - "@next/swc-linux-arm64-gnu": 13.0.4 - "@next/swc-linux-arm64-musl": 13.0.4 - "@next/swc-linux-x64-gnu": 13.0.4 - "@next/swc-linux-x64-musl": 13.0.4 - "@next/swc-win32-arm64-msvc": 13.0.4 - "@next/swc-win32-ia32-msvc": 13.0.4 - "@next/swc-win32-x64-msvc": 13.0.4 - "@swc/helpers": 0.4.11 +"next@npm:^13.0.5": + version: 13.0.5 + resolution: "next@npm:13.0.5" + dependencies: + "@next/env": 13.0.5 + "@next/swc-android-arm-eabi": 13.0.5 + "@next/swc-android-arm64": 13.0.5 + "@next/swc-darwin-arm64": 13.0.5 + "@next/swc-darwin-x64": 13.0.5 + "@next/swc-freebsd-x64": 13.0.5 + "@next/swc-linux-arm-gnueabihf": 13.0.5 + "@next/swc-linux-arm64-gnu": 13.0.5 + "@next/swc-linux-arm64-musl": 13.0.5 + "@next/swc-linux-x64-gnu": 13.0.5 + "@next/swc-linux-x64-musl": 13.0.5 + "@next/swc-win32-arm64-msvc": 13.0.5 + "@next/swc-win32-ia32-msvc": 13.0.5 + "@next/swc-win32-x64-msvc": 13.0.5 + "@swc/helpers": 0.4.14 caniuse-lite: ^1.0.30001406 postcss: 8.4.14 styled-jsx: 5.1.0 - use-sync-external-store: 1.2.0 peerDependencies: fibers: ">= 3.1.0" node-sass: ^6.0.0 || ^7.0.0 @@ -8158,7 +8155,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: 178694d4c531ea01910ab0c873f24fd30b843f84f49f34217f792a0210da40b7e1943adc5e3c309629db4904db02fd41d27bc5ea59f9622bafd7ade0e52b8786 + checksum: e13d8c51153b975d40002a222260352c8be048792014dd322f9a44bb9050a8f0b34c9e5c62329b3439febd87aacb6da5e0377dafff82570e79ba4f9d878f3ec5 languageName: node linkType: hard @@ -8818,6 +8815,7 @@ __metadata: "@mui/x-data-grid": ^5.17.2 "@mui/x-date-pickers": ^5.0.8 "@next/bundle-analyzer": ^12.1.0 + "@next/font": ^13.0.5 "@paypal/react-paypal-js": ^7.8.1 "@playwright/test": ^1.24.2 "@react-pdf/renderer": ^3.0.1 @@ -8859,7 +8857,7 @@ __metadata: lodash: ^4.17.21 mobx: 6.3.2 mobx-react: 7.2.0 - next: ^13.0.4 + next: ^13.0.5 next-auth: ^4.16.4 next-i18next: ^13.0.0 next-sitemap: ^2.5.20 @@ -11157,7 +11155,7 @@ __metadata: languageName: node linkType: hard -"use-sync-external-store@npm:1.2.0, use-sync-external-store@npm:^1.2.0": +"use-sync-external-store@npm:^1.2.0": version: 1.2.0 resolution: "use-sync-external-store@npm:1.2.0" peerDependencies: