diff options
13 files changed, 164 insertions, 55 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx index deac04b26b..643fb5da27 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx @@ -11,7 +11,7 @@ export const HeaderTitle = styled(TitleBig)({ }); export const HeaderSubTitle = styled(LabelTiny).attrs({ - $color: Colors.white60, + color: Colors.white60, })({}); interface SettingsHeaderProps { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index b2e25c9e63..fea4181624 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -551,7 +551,7 @@ function MacOsSplitTunnelingAvailability({ <WideSmallButton onClick={showFullDiskAccessSettings}> {messages.pgettext('split-tunneling-view', 'Open System Settings')} </WideSmallButton> - <FootnoteMini $color={Colors.white60}> + <FootnoteMini color={Colors.white60}> {messages.pgettext( 'split-tunneling-view', 'Enabled "Full disk access" and still having issues?', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx index 2454225638..002aa86433 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx @@ -8,5 +8,5 @@ export const CellFooter = styled.div({ }); export const CellFooterText = styled(LabelTiny).attrs({ - $color: Colors.white60, + color: Colors.white60, })({}); 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 index 9cfe1bc9c0..18ab10e202 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx @@ -1,8 +1,9 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; -import { typography } from '../../../tokens'; -import { Text } from './Text'; +export type BodySmallProps = Omit<TextProps, 'variant'>; -export const BodySmall = styled(Text)({ - ...typography['bodySmall'], -}); +export const BodySmall = ({ children, ...props }: BodySmallProps) => ( + <Text variant="bodySmall" {...props}> + {children} + </Text> +); 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 index 705a939e5d..f70a2c7b11 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx @@ -1,8 +1,9 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; -import { typography } from '../../../tokens'; -import { Text } from './Text'; +export type BodySmallSemiBoldProps = Omit<TextProps, 'variant'>; -export const BodySmallSemiBold = styled(Text)({ - ...typography['bodySmallSemibold'], -}); +export const BodySmallSemiBold = ({ children, ...props }: BodySmallSemiBoldProps) => ( + <Text variant="bodySmallSemibold" {...props}> + {children} + </Text> +); 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 index adbafb90d1..77d563e03c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx @@ -1,8 +1,9 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; -import { typography } from '../../../tokens'; -import { Text } from './Text'; +export type FoonoteMiniProps = Omit<TextProps, 'variant'>; -export const FootnoteMini = styled(Text)({ - ...typography['footnoteMini'], -}); +export const FootnoteMini = ({ children, ...props }: FoonoteMiniProps) => ( + <Text variant="footnoteMini" {...props}> + {children} + </Text> +); 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 index 9f6f8a143c..f7a952e67e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx @@ -1,8 +1,8 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; +export type LabelTinyProps = Omit<TextProps, 'variant'>; -import { typography } from '../../../tokens'; -import { Text } from './Text'; - -export const LabelTiny = styled(Text)({ - ...typography['labelTiny'], -}); +export const LabelTiny = ({ children, ...props }: LabelTinyProps) => ( + <Text variant="labelTiny" {...props}> + {children} + </Text> +); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx new file mode 100644 index 0000000000..f2ea457fe3 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx @@ -0,0 +1,62 @@ +import React, { useCallback } from 'react'; +import styled from 'styled-components'; + +import { useHistory } from '../../../lib/history'; +import { RoutePath } from '../../../lib/routes'; +import { Colors, Radius } from '../../../tokens'; +import { buttonReset } from '../mixins'; +import { Text, TextProps } from './Text'; + +export interface LinkProps extends TextProps, Omit<React.HtmlHTMLAttributes<'button'>, 'color'> { + to: RoutePath; +} + +const StyledText = styled(Text)<{ + $hoverColor: Colors | undefined; +}>((props) => ({ + ...buttonReset, + background: 'transparent', + + '&:hover': { + textDecorationLine: 'underline', + textUnderlineOffset: '2px', + color: props.$hoverColor, + }, + '&:focus-visible': { + borderRadius: Radius.radius4, + outline: `2px solid ${Colors.white}`, + outlineOffset: '2px', + }, +})); + +const getHoverColor = (color: Colors | undefined) => { + switch (color) { + case Colors.white60: + return Colors.white; + default: + return undefined; + } +}; + +export const Link = ({ to, children, color, onClick, ...props }: LinkProps) => { + const history = useHistory(); + const navigate = useCallback( + (e: React.MouseEvent<'button'>) => { + if (onClick) { + onClick(e); + } + return history.push(to); + }, + [history, to, onClick], + ); + return ( + <StyledText + onClick={navigate} + as={'button'} + color={color} + $hoverColor={getHoverColor(color)} + {...props}> + {children} + </StyledText> + ); +}; 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 index f4b32d988d..3ea195725a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx @@ -1,11 +1,53 @@ +import { forwardRef } from 'react'; import styled from 'styled-components'; -import { Colors } from '../../../tokens'; +import { Colors, Typography, typography } from '../../../tokens'; -interface TextProps { - $color?: Colors; -} +export type TextProps = React.PropsWithChildren<{ + variant?: Typography; + color?: Colors; + as?: React.ElementType; + style?: React.CSSProperties; +}>; -export const Text = styled.div<TextProps>(({ $color }) => ({ - color: $color ? $color : Colors.white, -})); +export const StyledText = styled.span({ + color: 'var(--color)', + fontFamily: 'var(--fontFamily)', + fontWeight: 'var(--fontWeight)', + fontSize: 'var(--fontSize)', + lineHeight: 'var(--lineHeight)', +}); + +export const Text = forwardRef( + ( + { + variant = 'bodySmall', + color = Colors.white, + children, + style, + ...props + }: React.PropsWithChildren<TextProps>, + ref, + ) => { + const { fontFamily, fontSize, fontWeight, lineHeight } = typography[variant]; + return ( + <StyledText + ref={ref} + style={ + { + '--color': color, + '--fontFamily': fontFamily, + '--fontWeight': fontWeight, + '--fontSize': fontSize, + '--lineHeight': lineHeight, + ...style, + } as React.CSSProperties + } + {...props}> + {children} + </StyledText> + ); + }, +); + +Text.displayName = 'Text'; 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 index 16d76c04ef..4b3b1d84ef 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx @@ -1,8 +1,8 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; +export type TitleBigProps = Omit<TextProps, 'variant'>; -import { typography } from '../../../tokens'; -import { Text } from './Text'; - -export const TitleBig = styled(Text)({ - ...typography['titleBig'], -}); +export const TitleBig = ({ children, ...props }: TitleBigProps) => ( + <Text variant="titleBig" {...props}> + {children} + </Text> +); 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 index e939b099fc..c80814362e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx @@ -1,7 +1,8 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; +export type TitleLargeProps = Omit<TextProps, 'variant'>; -import { typography } from '../../../tokens'; -import { Text } from './Text'; -export const TitleLarge = styled(Text)({ - ...typography['titleLarge'], -}); +export const TitleLarge = ({ children, ...props }: TitleLargeProps) => ( + <Text variant="titleLarge" {...props}> + {children} + </Text> +); 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 index 578d435ef3..5e188698a4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx @@ -1,8 +1,8 @@ -import styled from 'styled-components'; +import { Text, TextProps } from './Text'; +export type TitleMediumProps = Omit<TextProps, 'variant'>; -import { typography } from '../../../tokens'; -import { Text } from './Text'; - -export const TitleMedium = styled(Text)({ - ...typography['titleMedium'], -}); +export const TitleMedium = ({ children, ...props }: TitleMediumProps) => ( + <Text variant="titleMedium" {...props}> + {children} + </Text> +); 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 index 56db1927fc..542c9d5642 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts @@ -6,3 +6,4 @@ export * from './Text'; export * from './TitleBig'; export * from './TitleLarge'; export * from './TitleMedium'; +export * from './Link'; |