diff options
author | 2022-05-15 17:47:25 +0200 | |
---|---|---|
committer | 2022-05-17 14:44:49 +0200 | |
commit | d2336f5368587d29baf90fa6625e7b768861608e (patch) | |
tree | 6ae85ce59e830a40702609c3dac277fd5f9d2aca /packages/renderer/src/components/banner/NewWindowBanner.tsx | |
parent | fix(renderer): reduce white flash on start (diff) | |
download | sophie-d2336f5368587d29baf90fa6625e7b768861608e.tar.gz sophie-d2336f5368587d29baf90fa6625e7b768861608e.tar.zst sophie-d2336f5368587d29baf90fa6625e7b768861608e.zip |
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>
Diffstat (limited to 'packages/renderer/src/components/banner/NewWindowBanner.tsx')
-rw-r--r-- | packages/renderer/src/components/banner/NewWindowBanner.tsx | 23 |
1 files changed, 18 insertions, 5 deletions
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> |