diff options
| author | Oskar <oskar@mullvad.net> | 2024-09-24 10:27:28 +0200 |
|---|---|---|
| committer | Oskar <oskar@mullvad.net> | 2024-09-30 09:23:51 +0200 |
| commit | 8a8d81ac9307a960dc0a7fcbd979e853d834a43f (patch) | |
| tree | 29188ea13db5ad6bea8cc84021351d91e674f444 /gui/src | |
| parent | 6099621064d8acf562b9b8072e0403eae8be6614 (diff) | |
| download | mullvadvpn-8a8d81ac9307a960dc0a7fcbd979e853d834a43f.tar.xz mullvadvpn-8a8d81ac9307a960dc0a7fcbd979e853d834a43f.zip | |
Add DAITA illustrations
Diffstat (limited to 'gui/src')
| -rw-r--r-- | gui/src/renderer/components/DaitaSettings.tsx | 34 |
1 files changed, 24 insertions, 10 deletions
diff --git a/gui/src/renderer/components/DaitaSettings.tsx b/gui/src/renderer/components/DaitaSettings.tsx index abd0e8eafc..46f251bf9e 100644 --- a/gui/src/renderer/components/DaitaSettings.tsx +++ b/gui/src/renderer/components/DaitaSettings.tsx @@ -1,5 +1,4 @@ -import { useCallback } from 'react'; -import React from 'react'; +import React, { useCallback } from 'react'; import { sprintf } from 'sprintf-js'; import styled from 'styled-components'; @@ -45,6 +44,11 @@ const EnableFooter = styled(Cell.CellFooter)({ paddingBottom: '16px', }); +const StyledIllustration = styled.img({ + width: '100%', + padding: '8px 0 8px', +}); + export default function DaitaSettings() { const { pop } = useHistory(); @@ -64,16 +68,26 @@ export default function DaitaSettings() { <HeaderTitle>{strings.daita}</HeaderTitle> <PageSlider content={[ - <StyledHeaderSubTitle key="without-daita"> - {sprintf( - messages.pgettext( + <React.Fragment key="without-daita"> + <StyledIllustration src="../../assets/images/daita-off-illustration.svg" /> + <StyledHeaderSubTitle> + {sprintf( + messages.pgettext( + 'wireguard-settings-view', + '%(daita)s (%(daitaFull)s) hides patterns in your encrypted VPN traffic.', + ), + { daita: strings.daita, daitaFull: strings.daitaFull }, + )} + </StyledHeaderSubTitle> + <StyledHeaderSubTitle> + {messages.pgettext( 'wireguard-settings-view', - '%(daita)s (%(daitaFull)s) hides patterns in your encrypted VPN traffic. If anyone is monitoring your connection, this makes it significantly harder for them to identify what websites you are visiting.', - ), - { daita: strings.daita, daitaFull: strings.daitaFull }, - )} - </StyledHeaderSubTitle>, + 'If anyone is monitoring your connection, this makes it significantly harder for them to identify what websites you are visiting.', + )} + </StyledHeaderSubTitle> + </React.Fragment>, <React.Fragment key="with-daita"> + <StyledIllustration src="../../assets/images/daita-on-illustration.svg" /> <StyledHeaderSubTitle> {messages.pgettext( 'wireguard-settings-view', |