diff options
10 files changed, 115 insertions, 164 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx index 419be998ba..99f405b2a8 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx @@ -12,7 +12,9 @@ import { generateRoutePath } from '../lib/routeHelpers'; import { RoutePath } from '../lib/routes'; import { useBoolean } from '../lib/utility-hooks'; import { useSelector } from '../redux/store'; +import { Spacings } from '../tokens'; import * as Cell from './cell'; +import { Flex } from './common/layout'; import { ContextMenu, ContextMenuContainer, @@ -43,17 +45,11 @@ import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton'; const StyledContextMenuButton = styled(Cell.Icon)({ alignItems: 'center', justifyContent: 'center', - marginRight: '8px', + marginRight: Spacings.spacing3, }); const StyledMethodInfoButton = styled(InfoButton)({ - marginRight: '11px', -}); - -const StyledSpinner = styled(ImageView)({ - height: '10px', - width: '10px', - marginRight: '6px', + marginRight: Spacings.spacing4, }); const StyledNameLabel = styled(Cell.Label)({ @@ -68,7 +64,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({ height: '10px', borderRadius: '50%', backgroundColor: props.$result ? colors.green : colors.red, - marginRight: '6px', + marginRight: Spacings.spacing2, })); // This component is the topmost component in the API access methods view. @@ -258,8 +254,10 @@ function ApiAccessMethod(props: ApiAccessMethodProps) { <StyledNameLabel>{props.method.name}</StyledNameLabel> {testing && ( <Cell.SubLabel> - <StyledSpinner source="icon-spinner" /> - {messages.pgettext('api-access-methods-view', 'Testing...')} + <Flex $gap={Spacings.spacing2}> + <ImageView source="icon-spinner" width={10} /> + {messages.pgettext('api-access-methods-view', 'Testing...')} + </Flex> </Cell.SubLabel> )} {!testing && testResult !== undefined && ( diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx index bcfca03316..336761d823 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx @@ -8,8 +8,10 @@ import { useAppContext } from '../context'; import { useHistory } from '../lib/history'; import { useBoolean } from '../lib/utility-hooks'; import { useSelector } from '../redux/store'; +import { Spacings } from '../tokens'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; import * as Cell from './cell'; +import { Flex } from './common/layout'; import InfoButton from './InfoButton'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; @@ -25,20 +27,8 @@ import PageSlider from './PageSlider'; import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader'; import { SmallButton, SmallButtonColor } from './SmallButton'; -const StyledContent = styled.div({ - display: 'flex', - flexDirection: 'column', - flex: 1, - marginBottom: '2px', -}); - const StyledHeaderSubTitle = styled(HeaderSubTitle)({ display: 'inline-block', - fontWeight: 400, - - '&&:not(:last-child)': { - paddingBottom: '18px', - }, }); export const StyledIllustration = styled.img({ @@ -67,70 +57,73 @@ export default function DaitaSettings() { content={[ <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', - 'By using sophisticated AI it’s possible to analyze the traffic of data packets going in and out of your device (even if the traffic is encrypted).', - )} - </StyledHeaderSubTitle> - <StyledHeaderSubTitle> - {sprintf( - messages.pgettext( + <Flex $flexDirection="column" $gap={Spacings.spacing5}> + <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', - 'If an observer monitors these data packets, %(daita)s makes it significantly harder for them to identify which websites you are visiting or with whom you are communicating.', - ), - { daita: strings.daita }, - )} - </StyledHeaderSubTitle> + 'By using sophisticated AI it’s possible to analyze the traffic of data packets going in and out of your device (even if the traffic is encrypted).', + )} + </StyledHeaderSubTitle> + <StyledHeaderSubTitle> + {sprintf( + messages.pgettext( + 'wireguard-settings-view', + 'If an observer monitors these data packets, %(daita)s makes it significantly harder for them to identify which websites you are visiting or with whom you are communicating.', + ), + { daita: strings.daita }, + )} + </StyledHeaderSubTitle> + </Flex> </React.Fragment>, <React.Fragment key="with-daita"> <StyledIllustration src="../../assets/images/daita-on-illustration.svg" /> - <StyledHeaderSubTitle> - {sprintf( - messages.pgettext( - 'wireguard-settings-view', - '%(daita)s does this by carefully adding network noise and making all network packets the same size.', - ), - { daita: strings.daita }, - )} - </StyledHeaderSubTitle> - <StyledHeaderSubTitle> - {sprintf( - messages.pgettext( - 'wireguard-settings-view', - 'Not all our servers are %(daita)s-enabled. Therefore, we use multihop automatically to enable %(daita)s with any server.', - ), - { daita: strings.daita }, - )} - </StyledHeaderSubTitle> - <StyledHeaderSubTitle> - {sprintf( - messages.pgettext( - 'wireguard-settings-view', - 'Attention: Be cautious if you have a limited data plan as this feature will increase your network traffic. This feature can only be used with %(wireguard)s.', - ), - { wireguard: strings.wireguard }, - )} - </StyledHeaderSubTitle> + <Flex $flexDirection="column" $gap={Spacings.spacing5}> + <StyledHeaderSubTitle> + {sprintf( + messages.pgettext( + 'wireguard-settings-view', + '%(daita)s does this by carefully adding network noise and making all network packets the same size.', + ), + { daita: strings.daita }, + )} + </StyledHeaderSubTitle> + <StyledHeaderSubTitle> + {sprintf( + messages.pgettext( + 'wireguard-settings-view', + 'Not all our servers are %(daita)s-enabled. Therefore, we use multihop automatically to enable %(daita)s with any server.', + ), + { daita: strings.daita }, + )} + </StyledHeaderSubTitle> + <StyledHeaderSubTitle> + {sprintf( + messages.pgettext( + 'wireguard-settings-view', + 'Attention: Be cautious if you have a limited data plan as this feature will increase your network traffic. This feature can only be used with %(wireguard)s.', + ), + { wireguard: strings.wireguard }, + )} + </StyledHeaderSubTitle> + </Flex> </React.Fragment>, ]} /> </SettingsHeader> - - <StyledContent> + <SettingsContainer> <Cell.Group> <DaitaToggle /> </Cell.Group> - </StyledContent> + </SettingsContainer> </NavigationScrollbars> </NavigationContainer> </SettingsContainer> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx index 8ff848cb12..a7ece12a7d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { Colors, Spacings } from '../tokens'; -import { Flex } from './common/layout/Flex'; +import { Flex } from './common/layout'; import { measurements } from './common-styles'; import HeaderBar from './HeaderBar'; import { NavigationScrollbars } from './NavigationBar'; @@ -61,19 +61,18 @@ export const SettingsGroup = styled(Flex).attrs({ $flexDirection: 'column', })({}); -export const ButtonStack = styled(Flex).attrs(() => ({ +export const ButtonStack = styled(Flex).attrs({ $flexDirection: 'column', $gap: Spacings.spacing5, - $margin: `0 ${Spacings.spacing6}`, -}))({ +})({ [`${Footer} &&`]: { margin: `0 ${Spacings.spacing3}`, }, }); -export const LabelStack = styled(Flex).attrs(() => ({ +export const LabelStack = styled(Flex).attrs({ $flexGrow: 1, $flexDirection: 'row', $alignItems: 'center', $gap: Spacings.spacing3, -}))({}); +})({}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx index 3075e1d4ed..68e2451b41 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx @@ -1,6 +1,5 @@ import { useCallback } from 'react'; import { sprintf } from 'sprintf-js'; -import styled from 'styled-components'; import { strings } from '../../config.json'; import { messages } from '../../shared/gettext'; @@ -10,6 +9,7 @@ import { useHistory } from '../lib/history'; import { useSelector } from '../redux/store'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; import * as Cell from './cell'; +import { Flex } from './common/layout'; import { StyledIllustration } from './DaitaSettings'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; @@ -22,13 +22,6 @@ import { } from './NavigationBar'; import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader'; -const StyledContent = styled.div({ - display: 'flex', - flexDirection: 'column', - flex: 1, - marginBottom: '2px', -}); - export default function MultihopSettings() { const { pop } = useHistory(); @@ -59,11 +52,11 @@ export default function MultihopSettings() { </HeaderSubTitle> </SettingsHeader> - <StyledContent> + <Flex $flexDirection="column" $flex={1}> <Cell.Group> <MultihopSetting /> </Cell.Group> - </StyledContent> + </Flex> </NavigationScrollbars> </NavigationContainer> </SettingsContainer> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx index 8b78264a9a..deac04b26b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx @@ -2,19 +2,9 @@ import * as React from 'react'; import styled from 'styled-components'; import { Colors, Spacings } from '../tokens'; +import { Flex } from './common/layout'; import { LabelTiny, TitleBig } from './common/text'; -export const Container = styled.div({ - flex: 0, - margin: `${Spacings.spacing3} ${Spacings.spacing5} ${Spacings.spacing4}`, -}); - -export const ContentWrapper = styled.div({ - '&&:not(:first-child)': { - paddingTop: '8px', - }, -}); - export const HeaderTitle = styled(TitleBig)({ wordWrap: 'break-word', hyphens: 'auto', @@ -24,18 +14,25 @@ export const HeaderSubTitle = styled(LabelTiny).attrs({ $color: Colors.white60, })({}); -interface ISettingsHeaderProps { +interface SettingsHeaderProps { children?: React.ReactNode; className?: string; } -function SettingsHeader(props: ISettingsHeaderProps, forwardRef: React.Ref<HTMLDivElement>) { +function SettingsHeader(props: SettingsHeaderProps, forwardRef: React.Ref<HTMLDivElement>) { return ( - <Container ref={forwardRef} className={props.className}> - {React.Children.map(props.children, (child) => { - return React.isValidElement(child) ? <ContentWrapper>{child}</ContentWrapper> : undefined; - })} - </Container> + <Flex + ref={forwardRef} + $flexDirection="column" + $gap={Spacings.spacing3} + $margin={{ + top: Spacings.spacing3, + horizontal: Spacings.spacing5, + bottom: Spacings.spacing4, + }} + className={props.className}> + {props.children} + </Flex> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index 5dad65219f..b2e25c9e63 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -18,8 +18,8 @@ import { Colors, Spacings } from '../tokens'; import Accordion from './Accordion'; import * as AppButton from './AppButton'; import * as Cell from './cell'; -import { Flex } from './common/layout'; -import { FootnoteMini } from './common/text'; +import { Flex } from './common/layout/Flex'; +import { FootnoteMini } from './common/text/FootnoteMini'; import { CustomScrollbarsRef } from './CustomScrollbars'; import ImageView from './ImageView'; import { BackAction } from './KeyboardNavigation'; @@ -34,12 +34,8 @@ import { StyledCellButton, StyledCellLabel, StyledCellWarningIcon, - StyledContent, - StyledHeaderTitle, - StyledHeaderTitleContainer, StyledIcon, StyledIconPlaceholder, - StyledListContainer, StyledNavigationScrollbars, StyledNoResult, StyledNoResultText, @@ -71,12 +67,12 @@ export default function SplitTunneling() { </NavigationBar> <StyledNavigationScrollbars ref={scrollbarsRef}> - <StyledContent> + <Flex $flexDirection="column" $flex={1}> <PlatformSpecificSplitTunnelingSettings setBrowsing={setBrowsing} scrollToTop={scrollToTop} /> - </StyledContent> + </Flex> </StyledNavigationScrollbars> </NavigationContainer> </SettingsContainer> @@ -463,14 +459,14 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro return ( <> <SettingsHeader> - <StyledHeaderTitleContainer> - <StyledHeaderTitle>{strings.splitTunneling}</StyledHeaderTitle> + <Flex $justifyContent="space-between" $alignItems="center"> + <HeaderTitle>{strings.splitTunneling}</HeaderTitle> <Switch isOn={splitTunnelingEnabled} disabled={!splitTunnelingAvailable} onChange={setSplitTunnelingState} /> - </StyledHeaderTitleContainer> + </Flex> <MacOsSplitTunnelingAvailability needFullDiskPermissions={ window.env.platform === 'darwin' && splitTunnelingAvailable === false @@ -585,14 +581,17 @@ function ApplicationList<T extends IApplication>(props: IApplicationListProps<T> ); } else { return ( - <StyledListContainer data-testid={props['data-testid']}> + <Flex + $flexDirection="column" + $margin={{ bottom: Spacings.spacing5 }} + data-testid={props['data-testid']}> <List data-testid={props['data-testid']} items={props.applications.sort((a, b) => a.name.localeCompare(b.name))} getKey={applicationGetKey}> {props.rowRenderer} </List> - </StyledListContainer> + </Flex> ); } } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx index 01eb73ec50..84764439ef 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx @@ -1,13 +1,13 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; +import { Spacings } from '../tokens'; import * as AppButton from './AppButton'; import * as Cell from './cell'; import { measurements, normalText } from './common-styles'; import ImageView from './ImageView'; import { NavigationScrollbars } from './NavigationBar'; import SearchBar from './SearchBar'; -import { HeaderTitle } from './SettingsHeader'; import { SmallButton } from './SmallButton'; export const StyledPageCover = styled.div<{ $show: boolean }>((props) => ({ @@ -17,7 +17,6 @@ export const StyledPageCover = styled.div<{ $show: boolean }>((props) => ({ left: 0, right: 0, bottom: 0, - backgroundColor: colors.black, opacity: 0.5, display: props.$show ? 'block' : 'none', })); @@ -26,12 +25,6 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({ flex: 1, }); -export const StyledContent = styled.div({ - display: 'flex', - flexDirection: 'column', - flex: 1, -}); - export const StyledCellButton = styled(Cell.CellButton)<{ $lookDisabled?: boolean }>((props) => ({ '&&:not(:disabled):hover': { backgroundColor: props.$lookDisabled ? colors.blue : undefined, @@ -47,16 +40,16 @@ const disabledApplication = (props: DisabledApplicationProps) => ({ }); export const StyledIcon = styled(Cell.UntintedIcon)<DisabledApplicationProps>(disabledApplication, { - marginRight: '12px', + marginRight: Spacings.spacing4, }); export const StyledActionIcon = styled(ImageView)({ - marginLeft: '8px', + marginLeft: Spacings.spacing3, }); export const StyledCellWarningIcon = styled(Cell.Icon)({ - marginLeft: '9px', - marginRight: '3px', + marginLeft: Spacings.spacing3, + marginRight: Spacings.spacing1, }); export const StyledCellLabel = styled(Cell.Label)<DisabledApplicationProps>( @@ -71,53 +64,34 @@ export const StyledCellLabel = styled(Cell.Label)<DisabledApplicationProps>( export const StyledIconPlaceholder = styled.div({ width: '35px', - marginRight: '12px', + marginRight: Spacings.spacing4, }); export const StyledSpinnerRow = styled(Cell.CellButton)({ display: 'flex', alignItems: 'center', justifyContent: 'center', - padding: '8px 0', + padding: `${Spacings.spacing3} 0`, marginBottom: measurements.rowVerticalMargin, background: colors.blue40, }); -export const StyledListContainer = styled.div({ - display: 'flex', - flexDirection: 'column', - marginBottom: measurements.rowVerticalMargin, -}); - export const StyledBrowseButton = styled(AppButton.BlueButton)({ margin: `0 ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`, }); -export const StyledCellContainer = styled(Cell.Container)({ - marginBottom: measurements.rowVerticalMargin, -}); - export const StyledNoResult = styled(Cell.CellFooter)({ display: 'flex', flexDirection: 'column', paddingTop: 0, marginTop: 0, - marginBottom: '69px', + marginBottom: Spacings.spacing12, }); export const StyledNoResultText = styled(Cell.CellFooterText)({ textAlign: 'center', }); -export const StyledHeaderTitleContainer = styled.div({ - display: 'flex', - alignItems: 'center', -}); - -export const StyledHeaderTitle = styled(HeaderTitle)({ - flex: 1, -}); - export const StyledSearchBar = styled(SearchBar)({ marginLeft: measurements.horizontalViewMargin, marginRight: measurements.horizontalViewMargin, @@ -127,7 +101,3 @@ export const StyledSearchBar = styled(SearchBar)({ export const WideSmallButton = styled(SmallButton)({ width: '100%', }); - -export const Spacing = styled.div<{ height: string }>((props) => ({ - height: props.height, -})); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx index f8db1c45e6..12de226915 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx @@ -6,6 +6,7 @@ import { Row } from './Row'; const StyledContainer = styled(Row)({ padding: `0 ${Spacings.spacing5}`, + gap: Spacings.spacing5, }); export const CellDisabledContext = React.createContext<boolean>(false); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx index 1b73d69f4c..ede836194b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx @@ -2,8 +2,9 @@ import React from 'react'; import styled from 'styled-components'; import { Spacings } from '../../../tokens'; +import { Layout, LayoutProps } from './Layout'; -export interface FlexProps { +export interface FlexProps extends LayoutProps { $gap?: Spacings; $flex?: React.CSSProperties['flex']; $flexDirection?: React.CSSProperties['flexDirection']; @@ -14,7 +15,7 @@ export interface FlexProps { children?: React.ReactNode; } -export const Flex = styled.div<FlexProps>( +export const Flex = styled(Layout)<FlexProps>( ({ $gap, $flex, $flexDirection, $alignItems, $justifyContent, $flexGrow, $flexShrink }) => ({ display: 'flex', gap: $gap, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx index 5afb47169d..fe1dfbb94e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx @@ -5,7 +5,7 @@ import { margin } from './margin'; import { padding } from './padding'; import { LayoutSpacings } from './types'; -interface LayoutProps { +export interface LayoutProps { $margin?: Spacings | LayoutSpacings; $padding?: Spacings | LayoutSpacings; } |