feat(renderer): use system fonts

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 <kristof@marussy.com>

7 files changed, 60 insertions, 20 deletions

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 (
     <NotificationBanner
       severity="warning"
-      icon={<IconOpenInNew fontSize="inherit" />}
+      icon={<OpenInNewIcon fontSize="inherit" />}
       onClose={() => service.dismissAllPopups()}
       buttons={
         <>
@@ -62,6 +67,13 @@ function NewWindowBanner({
             onClick={() => service.followPopup(url)}
             color="inherit"
             size="small"
+            startIcon={
+              direction === 'ltr' ? (
+                <ArrowForwardIcon fontSize="inherit" />
+              ) : (
+                <ArrowBackIcon fontSize="inherit" />
+              )
+            }
           >
             {t('followLink')}
           </Button>
@@ -69,7 +81,7 @@ function NewWindowBanner({
             onClick={() => service.openPopupInExternalBrowser(url)}
             color="inherit"
             size="small"
-            startIcon={<IconOpenInBrowser />}
+            startIcon={<OpenInBrowserIcon />}
           >
             {t('openInExternalBrowser')}
           </Button>
@@ -79,7 +91,7 @@ function NewWindowBanner({
                 onClick={() => service.openAllPopupsInExternalBrowser()}
                 color="inherit"
                 size="small"
-                startIcon={<IconOpenInBrowser />}
+                startIcon={<OpenInBrowserIcon />}
               >
                 {t('openAllInExternalBrowser')}
               </Button>
@@ -87,6 +99,7 @@ function NewWindowBanner({
                 onClick={() => service.dismissPopup(url)}
                 color="inherit"
                 size="small"
+                startIcon={<DoNotDisturbOnOutlinedIcon fontSize="inherit" />}
               >
                 {t('dismiss')}
               </Button>
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 (
     <>
       <Typography mt={2}>
-        <WarningAmberIcon fontSize="inherit" />{' '}
-        <strong>{t('trustWarning')}</strong>
+        <WarningAmberIcon fontSize="inherit" /> {t('trustWarning')}
       </Typography>
       <Box mt={1}>
         <Button
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 964494a..980e4dd 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -18,10 +18,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autorun } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
diff --git a/yarn.lock b/yarn.lock
index 78fd4ce..e47e4dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -705,13 +705,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource/roboto@npm:^4.5.5":
-  version: 4.5.5
-  resolution: "@fontsource/roboto@npm:4.5.5"
-  checksum: ab6675e04392ccd5def878762be67dbbf64f77c49c26030c6a1d03c34ce33045b0eb1199ad1bd3f398f362e5fa1fcbcbe25c18af8dda855ab43df45561eea569
-  languageName: node
-  linkType: hard
-
 "@gar/promisify@npm:^1.0.1":
   version: 1.1.2
   resolution: "@gar/promisify@npm:1.1.2"
@@ -1376,7 +1369,6 @@ __metadata:
     "@emotion/cache": ^11.7.1
     "@emotion/react": ^11.9.0
     "@emotion/styled": ^11.8.1
-    "@fontsource/roboto": ^4.5.5
     "@jest/globals": ^28.1.0
     "@mui/icons-material": ^5.6.2
     "@mui/material": ^5.7.0