From 063dd02ebef3720ce9932565993868e2b4a781ae Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 2 Dec 2024 13:43:24 +0100 Subject: [PATCH 1/4] Add spacing, color and typography tokens --- .../mullvad-vpn/src/renderer/tokens/colors.ts | 32 +++++++ .../mullvad-vpn/src/renderer/tokens/index.ts | 3 + .../src/renderer/tokens/spacings.ts | 15 +++ .../src/renderer/tokens/typography.ts | 96 +++++++++++++++++++ 4 files changed, 146 insertions(+) create mode 100644 desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts create mode 100644 desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts create mode 100644 desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts create mode 100644 desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts new file mode 100644 index 000000000000..46dc8508befe --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts @@ -0,0 +1,32 @@ +export enum Colors { + darkerBlue = 'rgba(25, 38, 56, 0.95)', + darkBlue = 'rgb(25, 46, 69)', + blue = 'rgb(41, 77, 115)', + darkGreen = 'rgb(32, 84, 37)', + green = 'rgb(68, 173, 77)', + red = 'rgb(227, 64, 57)', + darkYellow = 'rgb(142, 78, 19)', + yellow = 'rgb(255, 213, 36)', + black = 'rgb(0, 0, 0)', + white = 'rgb(255, 255, 255)', + white90 = 'rgba(255, 255, 255, 0.9)', + white80 = 'rgba(255, 255, 255, 0.8)', + white60 = 'rgba(255, 255, 255, 0.6)', + white50 = 'rgba(255, 255, 255, 0.5)', + white40 = 'rgba(255, 255, 255, 0.4)', + white20 = 'rgba(255, 255, 255, 0.2)', + white10 = 'rgba(255, 255, 255, 0.1)', + blue10 = 'rgba(41, 77, 115, 0.1)', + blue20 = 'rgba(41, 77, 115, 0.2)', + blue40 = 'rgba(41, 77, 115, 0.4)', + blue50 = 'rgba(41, 77, 115, 0.5)', + blue60 = 'rgba(41, 77, 115, 0.6)', + blue80 = 'rgba(41, 77, 115, 0.8)', + red95 = 'rgba(227, 64, 57, 0.95)', + red80 = 'rgba(227, 64, 57, 0.8)', + red60 = 'rgba(227, 64, 57, 0.6)', + red45 = 'rgba(227, 64, 57, 0.45)', + red40 = 'rgba(227, 64, 57, 0.4)', + green90 = 'rgba(68, 173, 77, 0.9)', + green40 = 'rgba(68, 173, 77, 0.4)', +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts new file mode 100644 index 000000000000..53555f1d5aef --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts @@ -0,0 +1,3 @@ +export * from './colors'; +export * from './spacings'; +export * from './typography'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts new file mode 100644 index 000000000000..fb0c92486300 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts @@ -0,0 +1,15 @@ +export enum Spacings { + spacing1 = '4px', + spacing2 = '6px', + spacing3 = '8px', + spacing4 = '12px', + spacing5 = '16px', + spacing6 = '24px', + spacing7 = '32px', + spacing8 = '40px', + spacing9 = '48px', + spacing10 = '56px', + spacing11 = '64px', + spacing12 = '72px', + spacing13 = '80px', +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts new file mode 100644 index 000000000000..df7359b8f0ae --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts @@ -0,0 +1,96 @@ +export enum FontFamilies { + openSans = 'Open Sans', + openSansPro = '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif', +} + +export enum Fonts { + title = FontFamilies.openSansPro, + body = FontFamilies.openSans, + label = FontFamilies.openSans, + footnote = FontFamilies.openSans, +} + +export enum FontWeights { + regular = 400, + semiBold = 600, + bold = 700, +} + +export enum FontSizes { + big = '32px', + large = '24px', + medium = '18px', + small = '14px', + tiny = '12px', + mini = '10px', +} + +export enum LineHeights { + big = '34px', + large = '28px', + medium = '24px', + small = '20px', + tiny = '18px', + mini = '15px', +} + +interface Typography { + fontFamily: React.CSSProperties['fontFamily']; + fontSize: React.CSSProperties['fontSize']; + fontWeight: React.CSSProperties['fontWeight']; + lineHeight: React.CSSProperties['lineHeight']; +} + +export const typography: Record< + | 'titleBig' + | 'titleLarge' + | 'titleMedium' + | 'bodySmall' + | 'bodySmallSemibold' + | 'labelTiny' + | 'footnoteMini', + Typography +> = { + titleBig: { + fontFamily: Fonts.title, + fontWeight: FontWeights.bold, + fontSize: FontSizes.big, + lineHeight: LineHeights.big, + }, + titleLarge: { + fontFamily: Fonts.title, + fontWeight: FontWeights.bold, + fontSize: FontSizes.large, + lineHeight: LineHeights.large, + }, + titleMedium: { + fontFamily: Fonts.title, + fontWeight: FontWeights.semiBold, + fontSize: FontSizes.medium, + lineHeight: LineHeights.medium, + }, + bodySmall: { + fontFamily: Fonts.body, + fontWeight: FontWeights.regular, + fontSize: FontSizes.small, + lineHeight: LineHeights.small, + }, + bodySmallSemibold: { + fontFamily: Fonts.body, + fontWeight: FontWeights.semiBold, + fontSize: FontSizes.small, + lineHeight: LineHeights.small, + }, + labelTiny: { + fontFamily: Fonts.label, + fontWeight: FontWeights.semiBold, + fontSize: FontSizes.tiny, + lineHeight: LineHeights.tiny, + }, + footnoteMini: { + fontFamily: Fonts.footnote, + fontWeight: FontWeights.semiBold, + fontSize: FontSizes.mini, + lineHeight: LineHeights.mini, + }, +} as const; From c9858eca5ce38d7b21b286c55a15783bba529baf Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 2 Dec 2024 13:44:24 +0100 Subject: [PATCH 2/4] Add text components based on typography tokens --- .../src/renderer/components/common/text/BodySmall.tsx | 8 ++++++++ .../components/common/text/BodySmallSemiBold.tsx | 8 ++++++++ .../renderer/components/common/text/FootnoteMini.tsx | 8 ++++++++ .../src/renderer/components/common/text/LabelTiny.tsx | 8 ++++++++ .../src/renderer/components/common/text/Text.tsx | 11 +++++++++++ .../src/renderer/components/common/text/TitleBig.tsx | 8 ++++++++ .../renderer/components/common/text/TitleLarge.tsx | 7 +++++++ .../renderer/components/common/text/TitleMedium.tsx | 8 ++++++++ .../src/renderer/components/common/text/index.ts | 8 ++++++++ 9 files changed, 74 insertions(+) create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx new file mode 100644 index 000000000000..9cfe1bc9c041 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; + +export const BodySmall = styled(Text)({ + ...typography['bodySmall'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx new file mode 100644 index 000000000000..705a939e5d48 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; + +export const BodySmallSemiBold = styled(Text)({ + ...typography['bodySmallSemibold'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx new file mode 100644 index 000000000000..adbafb90d129 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; + +export const FootnoteMini = styled(Text)({ + ...typography['footnoteMini'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx new file mode 100644 index 000000000000..9f6f8a143c42 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; + +export const LabelTiny = styled(Text)({ + ...typography['labelTiny'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx new file mode 100644 index 000000000000..f4b32d988d08 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +import { Colors } from '../../../tokens'; + +interface TextProps { + $color?: Colors; +} + +export const Text = styled.div(({ $color }) => ({ + color: $color ? $color : Colors.white, +})); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx new file mode 100644 index 000000000000..16d76c04ef82 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; + +export const TitleBig = styled(Text)({ + ...typography['titleBig'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx new file mode 100644 index 000000000000..e939b099fc05 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; +export const TitleLarge = styled(Text)({ + ...typography['titleLarge'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx new file mode 100644 index 000000000000..578d435ef373 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +import { typography } from '../../../tokens'; +import { Text } from './Text'; + +export const TitleMedium = styled(Text)({ + ...typography['titleMedium'], +}); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts new file mode 100644 index 000000000000..56db1927fc80 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts @@ -0,0 +1,8 @@ +export * from './BodySmall'; +export * from './BodySmallSemiBold'; +export * from './FootnoteMini'; +export * from './LabelTiny'; +export * from './Text'; +export * from './TitleBig'; +export * from './TitleLarge'; +export * from './TitleMedium'; From 67321f3d4af6d2fd79f916510d652f15b2d999ec Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 2 Dec 2024 13:45:06 +0100 Subject: [PATCH 3/4] Add layout components based on spacing tokens --- .../components/common/layout/Center.tsx | 13 ++++++ .../components/common/layout/Flex.tsx | 28 +++++++++++++ .../components/common/layout/Layout.tsx | 32 +++++++++++++++ .../components/common/layout/index.ts | 3 ++ .../components/common/layout/margin.ts | 40 +++++++++++++++++++ .../components/common/layout/padding.ts | 40 +++++++++++++++++++ .../components/common/layout/types.ts | 11 +++++ 7 files changed, 167 insertions(+) create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts create mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx new file mode 100644 index 000000000000..3222bb97196b --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +interface CenterProps { + $width?: string; + $height?: string; +} + +export const Center = styled.div((props) => ({ + display: 'grid', + placeItems: 'center', + height: props.$height, + width: props.$width, +})); 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 new file mode 100644 index 000000000000..1b73d69f4c50 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { Spacings } from '../../../tokens'; + +export interface FlexProps { + $gap?: Spacings; + $flex?: React.CSSProperties['flex']; + $flexDirection?: React.CSSProperties['flexDirection']; + $alignItems?: React.CSSProperties['alignItems']; + $justifyContent?: React.CSSProperties['justifyContent']; + $flexGrow?: React.CSSProperties['flexGrow']; + $flexShrink?: React.CSSProperties['flexShrink']; + children?: React.ReactNode; +} + +export const Flex = styled.div( + ({ $gap, $flex, $flexDirection, $alignItems, $justifyContent, $flexGrow, $flexShrink }) => ({ + display: 'flex', + gap: $gap, + flex: $flex, + flexDirection: $flexDirection, + alignItems: $alignItems, + justifyContent: $justifyContent, + flexGrow: $flexGrow, + flexShrink: $flexShrink, + }), +); 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 new file mode 100644 index 000000000000..5afb47169d47 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx @@ -0,0 +1,32 @@ +import styled from 'styled-components'; + +import { Spacings } from '../../../tokens'; +import { margin } from './margin'; +import { padding } from './padding'; +import { LayoutSpacings } from './types'; + +interface LayoutProps { + $margin?: Spacings | LayoutSpacings; + $padding?: Spacings | LayoutSpacings; +} + +const combine = ( + funcs: Record React.CSSProperties>, + spacings?: Spacings | LayoutSpacings, +): React.CSSProperties => { + if (!spacings) return {}; + + if (typeof spacings === 'string') return funcs.all(spacings); + + const result: React.CSSProperties = {}; + for (const [key, value] of Object.entries(spacings)) { + Object.assign(result, funcs[key as keyof LayoutSpacings](value)); + } + + return result; +}; + +export const Layout = styled.div(({ $margin, $padding }) => ({ + ...combine(margin, $margin), + ...combine(padding, $padding), +})); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts new file mode 100644 index 000000000000..885ab32d4b08 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts @@ -0,0 +1,3 @@ +export * from './Center'; +export * from './Flex'; +export * from './Layout'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts new file mode 100644 index 000000000000..c410e47c343b --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts @@ -0,0 +1,40 @@ +import { Spacings } from '../../../tokens'; +import { LayoutSpacings } from './types'; + +export const all = (margin: Spacings) => ({ margin }); + +const vertical = (margin: Spacings) => ({ + ...top(margin), + ...bottom(margin), +}); + +const horizontal = (margin: Spacings) => ({ + ...left(margin), + ...right(margin), +}); + +const top = (marginTop: Spacings) => ({ + marginTop, +}); + +const right = (marginRight: Spacings) => ({ + marginRight, +}); + +const bottom = (marginBottom: Spacings) => ({ + marginBottom, +}); + +const left = (marginLeft: Spacings) => ({ + marginLeft, +}); + +export const margin: Record React.CSSProperties> = { + all, + vertical, + horizontal, + top, + right, + bottom, + left, +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts new file mode 100644 index 000000000000..d98a209203d7 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts @@ -0,0 +1,40 @@ +import { Spacings } from '../../../tokens'; +import { LayoutSpacings } from './types'; + +export const all = (padding: Spacings) => ({ padding }); + +const vertical = (padding: Spacings) => ({ + ...top(padding), + ...bottom(padding), +}); + +const horizontal = (padding: Spacings) => ({ + ...left(padding), + ...right(padding), +}); + +const top = (paddingTop: Spacings) => ({ + paddingTop, +}); + +const right = (paddingRight: Spacings) => ({ + paddingRight, +}); + +const bottom = (paddingBottom: Spacings) => ({ + paddingBottom, +}); + +const left = (paddingLeft: Spacings) => ({ + paddingLeft, +}); + +export const padding: Record React.CSSProperties> = { + all, + vertical, + horizontal, + top, + right, + bottom, + left, +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts new file mode 100644 index 000000000000..f31c45891789 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts @@ -0,0 +1,11 @@ +import { Spacings } from '../../../tokens'; + +export interface LayoutSpacings { + all?: 'string'; + vertical?: Spacings; + horizontal?: Spacings; + top?: Spacings; + right?: Spacings; + bottom?: Spacings; + left?: Spacings; +} From 02c46a282c7ca632f2d4f7490f5bbeeb03dcc595 Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 2 Dec 2024 13:49:34 +0100 Subject: [PATCH 4/4] Use spacing tokens and components in user interface and vpn settings --- .../src/renderer/components/Debug.tsx | 5 +- .../src/renderer/components/Layout.tsx | 48 ++++--- .../src/renderer/components/Settings.tsx | 43 +++--- .../renderer/components/SettingsHeader.tsx | 15 ++- .../renderer/components/SettingsImport.tsx | 28 +--- .../renderer/components/SettingsStyles.tsx | 8 -- .../components/SplitTunnelingSettings.tsx | 63 ++++----- .../SplitTunnelingSettingsStyles.tsx | 7 +- .../components/UserInterfaceSettings.tsx | 90 ++++++------- .../src/renderer/components/VpnSettings.tsx | 122 ++++++++---------- .../renderer/components/WireguardSettings.tsx | 54 ++++---- .../renderer/components/cell/CellButton.tsx | 27 ++-- .../renderer/components/cell/Container.tsx | 3 +- .../src/renderer/components/cell/Footer.tsx | 16 +-- .../src/renderer/components/cell/Label.tsx | 16 +-- .../src/renderer/components/cell/Section.tsx | 8 +- .../src/renderer/components/common-styles.ts | 41 ++---- 17 files changed, 267 insertions(+), 327 deletions(-) delete mode 100644 desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx index 0b4d24cbfbe5..9522b422e547 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx @@ -3,8 +3,9 @@ import styled from 'styled-components'; import { useHistory } from '../lib/history'; import { useBoolean } from '../lib/utility-hooks'; +import { Spacings } from '../tokens'; import * as AppButton from './AppButton'; -import { measurements, spacings } from './common-styles'; +import { measurements } from './common-styles'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; import { @@ -24,7 +25,7 @@ const StyledContent = styled.div({ }); const StyledButtonGroup = styled.div({ - margin: `${spacings.spacing6} ${measurements.horizontalViewMargin}`, + margin: `${Spacings.spacing6} ${measurements.horizontalViewMargin}`, }); export default function Debug() { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx index 865fc790f63f..8ff848cb12b4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx @@ -1,7 +1,8 @@ import styled from 'styled-components'; -import { colors } from '../../config.json'; -import { measurements, spacings } from './common-styles'; +import { Colors, Spacings } from '../tokens'; +import { Flex } from './common/layout/Flex'; +import { measurements } from './common-styles'; import HeaderBar from './HeaderBar'; import { NavigationScrollbars } from './NavigationBar'; @@ -13,7 +14,7 @@ export const Container = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, - backgroundColor: colors.blue, + backgroundColor: Colors.blue, overflow: 'hidden', }); @@ -25,7 +26,7 @@ export const Layout = styled.div({ }); export const SettingsContainer = styled(Container)({ - backgroundColor: colors.darkBlue, + backgroundColor: Colors.darkBlue, }); export const SettingsNavigationScrollbars = styled(NavigationScrollbars)({ @@ -40,32 +41,39 @@ export const SettingsContent = styled.div({ marginBottom: measurements.verticalViewMargin, }); -export const SettingsStack = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: spacings.spacing5, -}); - export const Footer = styled.div({ display: 'flex', flexDirection: 'column', flex: 0, - padding: `${spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`, + padding: `${Spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`, [`${SettingsContent} &&`]: { paddingBottom: 0, }, }); -export const Spacing = styled.div<{ height: string }>((props) => ({ - height: props.height, -})); +export const SettingsStack = styled(Flex).attrs({ + $flexDirection: 'column', + $gap: Spacings.spacing5, +})({}); -export const ButtonStack = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: spacings.spacing5, - margin: `0 ${spacings.spacing6}`, +export const SettingsGroup = styled(Flex).attrs({ + $flex: 1, + $flexDirection: 'column', +})({}); + +export const ButtonStack = styled(Flex).attrs(() => ({ + $flexDirection: 'column', + $gap: Spacings.spacing5, + $margin: `0 ${Spacings.spacing6}`, +}))({ [`${Footer} &&`]: { - margin: `0 ${spacings.spacing3}`, + margin: `0 ${Spacings.spacing3}`, }, }); + +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/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx index 4c79f0225cc7..15f760941f32 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx @@ -1,27 +1,30 @@ import { useCallback } from 'react'; -import { colors, strings } from '../../config.json'; +import { strings } from '../../config.json'; import { messages } from '../../shared/gettext'; import { getDownloadUrl } from '../../shared/version'; import { useAppContext } from '../context'; import { useHistory } from '../lib/history'; import { RoutePath } from '../lib/routes'; import { useSelector } from '../redux/store'; +import { Colors } from '../tokens'; import { RedButton } from './AppButton'; import * as Cell from './cell'; +import { TitleBig } from './common/text'; import { BackAction } from './KeyboardNavigation'; import { ButtonStack, Footer, + LabelStack, Layout, SettingsContainer, SettingsContent, + SettingsGroup, SettingsNavigationScrollbars, SettingsStack, } from './Layout'; import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar'; -import SettingsHeader, { HeaderTitle } from './SettingsHeader'; -import { StyledCellIcon } from './SettingsStyles'; +import SettingsHeader from './SettingsHeader'; export default function Support() { const history = useHistory(); @@ -52,44 +55,44 @@ export default function Support() { - {messages.pgettext('navigation-bar', 'Settings')} + {messages.pgettext('navigation-bar', 'Settings')} {showSubSettings ? ( <> - + - + {showSplitTunneling && ( - + - + )} ) : ( - + - + )} - + - + - + - + {window.env.development && ( - + - + )}