diff options
| author | Oliver <oliver@mohlin.dev> | 2025-09-23 11:15:22 +0200 |
|---|---|---|
| committer | Tobias Järvelöv <tobias.jarvelov@mullvad.net> | 2025-09-30 11:22:23 +0200 |
| commit | be0ae1d493712be8d2704f25d74ac3ccb1a92d5a (patch) | |
| tree | ca9ba28cf1fb111586c30b844800d5b44a087eaa | |
| parent | c9316d573cb80d8851d2bd1332fa3053a412fd55 (diff) | |
| download | mullvadvpn-be0ae1d493712be8d2704f25d74ac3ccb1a92d5a.tar.xz mullvadvpn-be0ae1d493712be8d2704f25d74ac3ccb1a92d5a.zip | |
Update multihop view text styles and margins
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx | 34 |
1 files changed, 19 insertions, 15 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx index 6beb8c4d6b..85dcc46561 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx @@ -1,7 +1,8 @@ import styled from 'styled-components'; import { messages } from '../../../../shared/gettext'; -import { Flex } from '../../../lib/components'; +import { Flex, Text } from '../../../lib/components'; +import { FlexColumn } from '../../../lib/components/flex-column'; import { useHistory } from '../../../lib/history'; import { AppNavigationHeader } from '../..'; import * as Cell from '../../cell'; @@ -9,14 +10,13 @@ import { BackAction } from '../../KeyboardNavigation'; import { Layout, SettingsContainer } from '../../Layout'; import { NavigationContainer } from '../../NavigationContainer'; import { NavigationScrollbars } from '../../NavigationScrollbars'; -import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../SettingsHeader'; +import SettingsHeader, { HeaderTitle } from '../../SettingsHeader'; import { MultihopSetting } from './components'; const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : ''; const StyledIllustration = styled.img({ width: '100%', - padding: '8px 0 8px', }); export function MultihopSettingsView() { @@ -31,18 +31,22 @@ export function MultihopSettingsView() { <NavigationScrollbars> <SettingsHeader> - <HeaderTitle> - {messages.pgettext('wireguard-settings-view', 'Multihop')} - </HeaderTitle> - <HeaderSubTitle> - <StyledIllustration - src={`${PATH_PREFIX}assets/images/multihop-illustration.svg`} - /> - {messages.pgettext( - 'wireguard-settings-view', - 'Multihop routes your traffic into one WireGuard server and out another, making it harder to trace. This results in increased latency but increases anonymity online.', - )} - </HeaderSubTitle> + <FlexColumn $gap="medium"> + <HeaderTitle> + {messages.pgettext('wireguard-settings-view', 'Multihop')} + </HeaderTitle> + <FlexColumn $gap="small"> + <StyledIllustration + src={`${PATH_PREFIX}assets/images/multihop-illustration.svg`} + /> + <Text variant="labelTiny" color="whiteAlpha60"> + {messages.pgettext( + 'wireguard-settings-view', + 'Multihop routes your traffic into one WireGuard server and out another, making it harder to trace. This results in increased latency but increases anonymity online.', + )} + </Text> + </FlexColumn> + </FlexColumn> </SettingsHeader> <Flex $flexDirection="column" $flex={1}> |