diff options
-rw-r--r-- | packages/renderer/package.json | 1 | ||||
-rw-r--r-- | packages/renderer/src/components/ThemeProvider.tsx | 39 | ||||
-rw-r--r-- | packages/renderer/src/components/banner/NewWindowBanner.tsx | 23 | ||||
-rw-r--r-- | packages/renderer/src/components/errorPage/SingleCertificateDetails.tsx | 2 | ||||
-rw-r--r-- | packages/renderer/src/components/errorPage/TrustCertificateDialog.tsx | 3 | ||||
-rw-r--r-- | packages/renderer/src/index.tsx | 4 | ||||
-rw-r--r-- | yarn.lock | 8 |
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 @@ | |||
11 | "@emotion/cache": "^11.7.1", | 11 | "@emotion/cache": "^11.7.1", |
12 | "@emotion/react": "^11.9.0", | 12 | "@emotion/react": "^11.9.0", |
13 | "@emotion/styled": "^11.8.1", | 13 | "@emotion/styled": "^11.8.1", |
14 | "@fontsource/roboto": "^4.5.5", | ||
15 | "@mui/icons-material": "^5.6.2", | 14 | "@mui/icons-material": "^5.6.2", |
16 | "@mui/material": "^5.7.0", | 15 | "@mui/material": "^5.7.0", |
17 | "@sophie/shared": "workspace:*", | 16 | "@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({ | |||
47 | mode: 'light', | 47 | mode: 'light', |
48 | divider: 'rgba(0, 0, 0, 0.24)', | 48 | divider: 'rgba(0, 0, 0, 0.24)', |
49 | }, | 49 | }, |
50 | typography: { | ||
51 | fontFamily: 'system-ui', | ||
52 | body1: { | ||
53 | letterSpacing: 0, | ||
54 | }, | ||
55 | body2: { | ||
56 | letterSpacing: 0, | ||
57 | }, | ||
58 | subtitle1: { | ||
59 | letterSpacing: 0, | ||
60 | }, | ||
61 | subtitle2: { | ||
62 | letterSpacing: 0, | ||
63 | }, | ||
64 | button: { | ||
65 | fontSize: '1rem', | ||
66 | textTransform: 'none', | ||
67 | letterSpacing: 0, | ||
68 | lineHeight: 1.5, | ||
69 | fontWeight: 700, | ||
70 | }, | ||
71 | }, | ||
50 | components: { | 72 | components: { |
51 | MuiBadge: { | 73 | MuiBadge: { |
52 | styleOverrides: { | 74 | styleOverrides: { |
@@ -65,6 +87,23 @@ function ThemeProvider({ | |||
65 | }, | 87 | }, |
66 | }, | 88 | }, |
67 | }, | 89 | }, |
90 | MuiButton: { | ||
91 | styleOverrides: { | ||
92 | sizeSmall: { | ||
93 | fontSize: '0.875rem', | ||
94 | }, | ||
95 | sizeLarge: { | ||
96 | fontSize: '1rem', | ||
97 | }, | ||
98 | }, | ||
99 | }, | ||
100 | MuiTab: { | ||
101 | styleOverrides: { | ||
102 | root: { | ||
103 | fontWeight: 500, | ||
104 | }, | ||
105 | }, | ||
106 | }, | ||
68 | }, | 107 | }, |
69 | }); | 108 | }); |
70 | 109 | ||
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 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import IconOpenInBrowser from '@mui/icons-material/OpenInBrowser'; | 21 | import ArrowBackIcon from '@mui/icons-material/ArrowBack'; |
22 | import IconOpenInNew from '@mui/icons-material/OpenInNew'; | 22 | import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; |
23 | import DoNotDisturbOnOutlinedIcon from '@mui/icons-material/DoNotDisturbOnOutlined'; | ||
24 | import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'; | ||
25 | import OpenInNewIcon from '@mui/icons-material/OpenInNew'; | ||
23 | import Button from '@mui/material/Button'; | 26 | import Button from '@mui/material/Button'; |
27 | import { useTheme } from '@mui/material/styles'; | ||
24 | import { observer } from 'mobx-react-lite'; | 28 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 29 | import React from 'react'; |
26 | import { Trans, useTranslation } from 'react-i18next'; | 30 | import { Trans, useTranslation } from 'react-i18next'; |
@@ -37,6 +41,7 @@ function NewWindowBanner({ | |||
37 | const { t } = useTranslation(undefined, { | 41 | const { t } = useTranslation(undefined, { |
38 | keyPrefix: 'banner.newWindow', | 42 | keyPrefix: 'banner.newWindow', |
39 | }); | 43 | }); |
44 | const { direction } = useTheme(); | ||
40 | 45 | ||
41 | const { | 46 | const { |
42 | popups, | 47 | popups, |
@@ -54,7 +59,7 @@ function NewWindowBanner({ | |||
54 | return ( | 59 | return ( |
55 | <NotificationBanner | 60 | <NotificationBanner |
56 | severity="warning" | 61 | severity="warning" |
57 | icon={<IconOpenInNew fontSize="inherit" />} | 62 | icon={<OpenInNewIcon fontSize="inherit" />} |
58 | onClose={() => service.dismissAllPopups()} | 63 | onClose={() => service.dismissAllPopups()} |
59 | buttons={ | 64 | buttons={ |
60 | <> | 65 | <> |
@@ -62,6 +67,13 @@ function NewWindowBanner({ | |||
62 | onClick={() => service.followPopup(url)} | 67 | onClick={() => service.followPopup(url)} |
63 | color="inherit" | 68 | color="inherit" |
64 | size="small" | 69 | size="small" |
70 | startIcon={ | ||
71 | direction === 'ltr' ? ( | ||
72 | <ArrowForwardIcon fontSize="inherit" /> | ||
73 | ) : ( | ||
74 | <ArrowBackIcon fontSize="inherit" /> | ||
75 | ) | ||
76 | } | ||
65 | > | 77 | > |
66 | {t('followLink')} | 78 | {t('followLink')} |
67 | </Button> | 79 | </Button> |
@@ -69,7 +81,7 @@ function NewWindowBanner({ | |||
69 | onClick={() => service.openPopupInExternalBrowser(url)} | 81 | onClick={() => service.openPopupInExternalBrowser(url)} |
70 | color="inherit" | 82 | color="inherit" |
71 | size="small" | 83 | size="small" |
72 | startIcon={<IconOpenInBrowser />} | 84 | startIcon={<OpenInBrowserIcon />} |
73 | > | 85 | > |
74 | {t('openInExternalBrowser')} | 86 | {t('openInExternalBrowser')} |
75 | </Button> | 87 | </Button> |
@@ -79,7 +91,7 @@ function NewWindowBanner({ | |||
79 | onClick={() => service.openAllPopupsInExternalBrowser()} | 91 | onClick={() => service.openAllPopupsInExternalBrowser()} |
80 | color="inherit" | 92 | color="inherit" |
81 | size="small" | 93 | size="small" |
82 | startIcon={<IconOpenInBrowser />} | 94 | startIcon={<OpenInBrowserIcon />} |
83 | > | 95 | > |
84 | {t('openAllInExternalBrowser')} | 96 | {t('openAllInExternalBrowser')} |
85 | </Button> | 97 | </Button> |
@@ -87,6 +99,7 @@ function NewWindowBanner({ | |||
87 | onClick={() => service.dismissPopup(url)} | 99 | onClick={() => service.dismissPopup(url)} |
88 | color="inherit" | 100 | color="inherit" |
89 | size="small" | 101 | size="small" |
102 | startIcon={<DoNotDisturbOnOutlinedIcon fontSize="inherit" />} | ||
90 | > | 103 | > |
91 | {t('dismiss')} | 104 | {t('dismiss')} |
92 | </Button> | 105 | </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')({ | |||
40 | 40 | ||
41 | const SectionHeader = styled(Header)(({ theme }) => ({ | 41 | const SectionHeader = styled(Header)(({ theme }) => ({ |
42 | padding: `${theme.spacing(2)} 0`, | 42 | padding: `${theme.spacing(2)} 0`, |
43 | fontWeight: theme.typography.fontWeightBold, | ||
43 | })); | 44 | })); |
44 | 45 | ||
45 | const SubHeader = styled(Header)(({ theme }) => ({ | 46 | const SubHeader = styled(Header)(({ theme }) => ({ |
46 | color: theme.palette.text.secondary, | 47 | color: theme.palette.text.secondary, |
48 | fontWeight: theme.typography.fontWeightMedium, | ||
47 | })); | 49 | })); |
48 | 50 | ||
49 | const Cell = styled('td')({ | 51 | 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({ | |||
39 | return ( | 39 | return ( |
40 | <> | 40 | <> |
41 | <Typography mt={2}> | 41 | <Typography mt={2}> |
42 | <WarningAmberIcon fontSize="inherit" />{' '} | 42 | <WarningAmberIcon fontSize="inherit" /> {t('trustWarning')} |
43 | <strong>{t('trustWarning')}</strong> | ||
44 | </Typography> | 43 | </Typography> |
45 | <Box mt={1}> | 44 | <Box mt={1}> |
46 | <Button | 45 | <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 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import '@fontsource/roboto/300.css'; | ||
22 | import '@fontsource/roboto/400.css'; | ||
23 | import '@fontsource/roboto/500.css'; | ||
24 | import '@fontsource/roboto/700.css'; | ||
25 | import CssBaseline from '@mui/material/CssBaseline'; | 21 | import CssBaseline from '@mui/material/CssBaseline'; |
26 | import { autorun } from 'mobx'; | 22 | import { autorun } from 'mobx'; |
27 | import { addDisposer } from 'mobx-state-tree'; | 23 | import { addDisposer } from 'mobx-state-tree'; |
@@ -705,13 +705,6 @@ __metadata: | |||
705 | languageName: node | 705 | languageName: node |
706 | linkType: hard | 706 | linkType: hard |
707 | 707 | ||
708 | "@fontsource/roboto@npm:^4.5.5": | ||
709 | version: 4.5.5 | ||
710 | resolution: "@fontsource/roboto@npm:4.5.5" | ||
711 | checksum: ab6675e04392ccd5def878762be67dbbf64f77c49c26030c6a1d03c34ce33045b0eb1199ad1bd3f398f362e5fa1fcbcbe25c18af8dda855ab43df45561eea569 | ||
712 | languageName: node | ||
713 | linkType: hard | ||
714 | |||
715 | "@gar/promisify@npm:^1.0.1": | 708 | "@gar/promisify@npm:^1.0.1": |
716 | version: 1.1.2 | 709 | version: 1.1.2 |
717 | resolution: "@gar/promisify@npm:1.1.2" | 710 | resolution: "@gar/promisify@npm:1.1.2" |
@@ -1376,7 +1369,6 @@ __metadata: | |||
1376 | "@emotion/cache": ^11.7.1 | 1369 | "@emotion/cache": ^11.7.1 |
1377 | "@emotion/react": ^11.9.0 | 1370 | "@emotion/react": ^11.9.0 |
1378 | "@emotion/styled": ^11.8.1 | 1371 | "@emotion/styled": ^11.8.1 |
1379 | "@fontsource/roboto": ^4.5.5 | ||
1380 | "@jest/globals": ^28.1.0 | 1372 | "@jest/globals": ^28.1.0 |
1381 | "@mui/icons-material": ^5.6.2 | 1373 | "@mui/icons-material": ^5.6.2 |
1382 | "@mui/material": ^5.7.0 | 1374 | "@mui/material": ^5.7.0 |