From d2336f5368587d29baf90fa6625e7b768861608e Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sun, 15 May 2022 17:47:25 +0200 Subject: feat(renderer): use system fonts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This decreases bundle size and avoid layout shifts due to font loading. Where it is not apparent wheter people can interact with a button, icons were added to disambiguate the button from the surrounding text. Signed-off-by: Kristóf Marussy --- packages/renderer/package.json | 1 - packages/renderer/src/components/ThemeProvider.tsx | 39 ++++++++++++++++++++++ .../src/components/banner/NewWindowBanner.tsx | 23 ++++++++++--- .../errorPage/SingleCertificateDetails.tsx | 2 ++ .../errorPage/TrustCertificateDialog.tsx | 3 +- packages/renderer/src/index.tsx | 4 --- 6 files changed, 60 insertions(+), 12 deletions(-) (limited to 'packages/renderer') diff --git a/packages/renderer/package.json b/packages/renderer/package.json index 185a157..3ef8b34 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -11,7 +11,6 @@ "@emotion/cache": "^11.7.1", "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@fontsource/roboto": "^4.5.5", "@mui/icons-material": "^5.6.2", "@mui/material": "^5.7.0", "@sophie/shared": "workspace:*", diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx index 0273234..aa14039 100644 --- a/packages/renderer/src/components/ThemeProvider.tsx +++ b/packages/renderer/src/components/ThemeProvider.tsx @@ -47,6 +47,28 @@ function ThemeProvider({ mode: 'light', divider: 'rgba(0, 0, 0, 0.24)', }, + typography: { + fontFamily: 'system-ui', + body1: { + letterSpacing: 0, + }, + body2: { + letterSpacing: 0, + }, + subtitle1: { + letterSpacing: 0, + }, + subtitle2: { + letterSpacing: 0, + }, + button: { + fontSize: '1rem', + textTransform: 'none', + letterSpacing: 0, + lineHeight: 1.5, + fontWeight: 700, + }, + }, components: { MuiBadge: { styleOverrides: { @@ -65,6 +87,23 @@ function ThemeProvider({ }, }, }, + MuiButton: { + styleOverrides: { + sizeSmall: { + fontSize: '0.875rem', + }, + sizeLarge: { + fontSize: '1rem', + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + fontWeight: 500, + }, + }, + }, }, }); diff --git a/packages/renderer/src/components/banner/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx index 685badf..ad9d07d 100644 --- a/packages/renderer/src/components/banner/NewWindowBanner.tsx +++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx @@ -18,9 +18,13 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import IconOpenInBrowser from '@mui/icons-material/OpenInBrowser'; -import IconOpenInNew from '@mui/icons-material/OpenInNew'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import DoNotDisturbOnOutlinedIcon from '@mui/icons-material/DoNotDisturbOnOutlined'; +import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import Button from '@mui/material/Button'; +import { useTheme } from '@mui/material/styles'; import { observer } from 'mobx-react-lite'; import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; @@ -37,6 +41,7 @@ function NewWindowBanner({ const { t } = useTranslation(undefined, { keyPrefix: 'banner.newWindow', }); + const { direction } = useTheme(); const { popups, @@ -54,7 +59,7 @@ function NewWindowBanner({ return ( } + icon={} onClose={() => service.dismissAllPopups()} buttons={ <> @@ -62,6 +67,13 @@ function NewWindowBanner({ onClick={() => service.followPopup(url)} color="inherit" size="small" + startIcon={ + direction === 'ltr' ? ( + + ) : ( + + ) + } > {t('followLink')} @@ -69,7 +81,7 @@ function NewWindowBanner({ onClick={() => service.openPopupInExternalBrowser(url)} color="inherit" size="small" - startIcon={} + startIcon={} > {t('openInExternalBrowser')} @@ -79,7 +91,7 @@ function NewWindowBanner({ onClick={() => service.openAllPopupsInExternalBrowser()} color="inherit" size="small" - startIcon={} + startIcon={} > {t('openAllInExternalBrowser')} @@ -87,6 +99,7 @@ function NewWindowBanner({ onClick={() => service.dismissPopup(url)} color="inherit" size="small" + startIcon={} > {t('dismiss')} diff --git a/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx index 107d9f1..0cbcac4 100644 --- a/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx +++ b/packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx @@ -40,10 +40,12 @@ const Header = styled('th')({ const SectionHeader = styled(Header)(({ theme }) => ({ padding: `${theme.spacing(2)} 0`, + fontWeight: theme.typography.fontWeightBold, })); const SubHeader = styled(Header)(({ theme }) => ({ color: theme.palette.text.secondary, + fontWeight: theme.typography.fontWeightMedium, })); const Cell = styled('td')({ diff --git a/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx index 630cbe0..372498b 100644 --- a/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx +++ b/packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx @@ -39,8 +39,7 @@ export default function TrustCertificateDialog({ return ( <> - {' '} - {t('trustWarning')} + {t('trustWarning')}