diff options
17 files changed, 59 insertions, 64 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx index da7dc13873..6bf589376f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { Icon } from '../lib/components'; -import { DeprecatedColors } from '../lib/foundations'; +import { colors } from '../lib/foundations'; interface IProps extends React.HTMLAttributes<HTMLButtonElement> { up: boolean; @@ -18,7 +18,7 @@ const StyledIcon = styled(Icon)({ alignSelf: 'stretch', justifyContent: 'center', '&&:hover': { - backgroundColor: DeprecatedColors.white, + backgroundColor: colors.white100, }, }); @@ -27,7 +27,7 @@ export default function ChevronButton(props: IProps) { return ( <Button {...otherProps}> - <StyledIcon color={DeprecatedColors.white60} icon={up ? 'chevron-up' : 'chevron-down'} /> + <StyledIcon color="white60" icon={up ? 'chevron-up' : 'chevron-down'} /> </Button> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx index 2acba17ece..0f1a7d4a71 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx @@ -5,7 +5,6 @@ import { messages } from '../../shared/gettext'; import log from '../../shared/logging'; import { useScheduler } from '../../shared/scheduler'; import { Flex, Icon, IconButton } from '../lib/components'; -import { DeprecatedColors } from '../lib/foundations'; import { useBoolean } from '../lib/utility-hooks'; const COPIED_ICON_DURATION = 2000; @@ -71,7 +70,7 @@ export default function ClipboardLabel(props: IProps) { </IconButton> )} {justCopied ? ( - <Icon icon="checkmark" color={DeprecatedColors.green}></Icon> + <Icon icon="checkmark" color="brandGreen"></Icon> ) : ( <IconButton onClick={onCopy} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx index 5c43bde31f..07911fdbc2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx @@ -230,7 +230,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) { <AriaLabel> <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label> </AriaLabel> - <Icon color={DeprecatedColors.white80} icon={expanded ? 'chevron-up' : 'chevron-down'} /> + <Icon color="white80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> </Cell.CellButton> <Accordion expanded={expanded}> @@ -276,7 +276,7 @@ function FilterByProvider(props: IFilterByProviderProps) { <> <Cell.CellButton onClick={toggleExpanded}> <Cell.Label>{messages.pgettext('filter-view', 'Providers')}</Cell.Label> - <Icon color={DeprecatedColors.white80} icon={expanded ? 'chevron-up' : 'chevron-down'} /> + <Icon color="white80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> </Cell.CellButton> <Accordion expanded={expanded}> <CheckboxRow @@ -341,7 +341,7 @@ function CheckboxRow(props: ICheckboxRowProps) { return ( <StyledRow onClick={onToggle}> <StyledCheckbox role="checkbox" aria-label={props.label} aria-checked={props.checked}> - {props.checked && <Icon icon="checkmark" color={DeprecatedColors.green} />} + {props.checked && <Icon icon="checkmark" color="brandGreen" />} </StyledCheckbox> <StyledRowTitle aria-hidden $bold={props.$bold}> {props.label} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx index 647b09c612..09b2b18dfb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; import log from '../../shared/logging'; import { Icon, IconProps, Spinner } from '../lib/components'; import { FlexColumn } from '../lib/components/flex-column'; -import { DeprecatedColors } from '../lib/foundations'; +import { Colors, DeprecatedColors } from '../lib/foundations'; import { IconBadge } from '../lib/icon-badge'; import { useEffectEvent } from '../lib/utility-hooks'; import { ButtonGroup } from './ButtonGroup'; @@ -310,19 +310,19 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt private renderTypeIcon(type: ModalAlertType) { let source: IconProps['icon'] | undefined = undefined; - let color = undefined; + let color: Colors | undefined = undefined; switch (type) { case ModalAlertType.info: source = 'info-circle'; - color = DeprecatedColors.white; + color = 'white100'; break; case ModalAlertType.caution: source = 'alert-circle'; - color = DeprecatedColors.white; + color = 'white100'; break; case ModalAlertType.warning: source = 'alert-circle'; - color = DeprecatedColors.red; + color = 'brandRed'; break; case ModalAlertType.loading: return <Spinner size="big" />; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx index 8236e140ca..be7400aa27 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx @@ -29,7 +29,7 @@ interface IProps { export default function RelayStatusIndicator(props: IProps) { return props.selected ? ( - <TickIcon color={DeprecatedColors.white} icon="checkmark" /> + <TickIcon color="white100" icon="checkmark" /> ) : ( <StyledRelayStatus $active={props.active} /> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx index 374b4c7bd6..84db0717f4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx @@ -96,7 +96,7 @@ export default function SearchBar(props: ISearchBarProps) { onInput={onInput} placeholder={messages.gettext('Search for...')} /> - <StyledSearchIcon icon="search" color={DeprecatedColors.white60} /> + <StyledSearchIcon icon="search" color="white60" /> {props.searchTerm.length > 0 && ( <StyledClearButton variant="secondary" onClick={onClear}> <IconButton.Icon icon="cross-circle" /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx index 40e4077e5f..c94c86cafb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx @@ -235,9 +235,9 @@ function SettingsImportStatus(props: ImportStatusProps) { iconProps = props.status.successful ? { icon: 'checkmark', - color: DeprecatedColors.green, + color: 'brandGreen', } - : { icon: 'cross', color: DeprecatedColors.red }; + : { icon: 'cross', color: 'brandRed' }; if (props.status.successful) { subtitle = diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index 427e1f2fa9..6493baa86c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -13,7 +13,7 @@ import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; import { Button, Container, Flex, FootnoteMini, IconButton, Spinner } from '../lib/components'; import { FlexColumn } from '../lib/components/flex-column'; -import { DeprecatedColors } from '../lib/foundations'; +import { Colors, DeprecatedColors } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; import { useAfterTransition } from '../lib/transition-hooks'; @@ -241,7 +241,7 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) { const hideWarningDialog = useCallback(() => setShowWarning(false), []); const disabled = props.application.warning === 'launches-elsewhere'; - const warningColor = disabled ? DeprecatedColors.red : DeprecatedColors.yellow; + const warningColor: Colors = disabled ? 'brandRed' : 'brandYellow'; const warningMessage = disabled ? sprintf( messages.pgettext( diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx index 092376fe22..d3af391109 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx @@ -132,7 +132,7 @@ export function SettingsRow(props: React.PropsWithChildren<IndentedRowProps>) { export function SettingsRowErrorMessage(props: React.PropsWithChildren) { return ( <StyledSettingsRowErrorMessage> - <StyledErrorMessageAlertIcon icon="alert-circle" color={DeprecatedColors.red} size="small" /> + <StyledErrorMessageAlertIcon icon="alert-circle" color="brandRed" size="small" /> {props.children} </StyledSettingsRowErrorMessage> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx index 7647909f1a..2eaa8cb4ea 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx @@ -155,7 +155,7 @@ export function SettingsSelect<T extends string>(props: SettingsSelectProps<T>) <StyledSelectedText> {props.items.find((item) => item.value === value)?.label ?? ''} </StyledSelectedText> - <StyledChevron color={DeprecatedColors.white60} icon="chevron-down" /> + <StyledChevron color="white60" icon="chevron-down" /> </StyledSelectedContainerInner> <StyledInvisibleItems> {props.items.map((item) => ( diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx index 852d63ad78..b709c0be30 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx @@ -106,7 +106,7 @@ export default function CustomLists(props: CustomListsProps) { $backgroundColor={DeprecatedColors.blue} $backgroundColorHover={DeprecatedColors.blue80} onClick={showAddList}> - <StyledSideButtonIcon icon="add-circle" color={DeprecatedColors.white60} /> + <StyledSideButtonIcon icon="add-circle" color="white60" /> </StyledCellButton> </StyledCellContainer> @@ -202,7 +202,7 @@ function AddListForm(props: AddListFormProps) { $backgroundColorHover={DeprecatedColors.blue80} disabled={!nameValid} onClick={createList}> - <StyledSideButtonIcon icon="checkmark" color={DeprecatedColors.white60} /> + <StyledSideButtonIcon icon="checkmark" color="white60" /> </StyledAddListCellButton> </StyledCellContainer> <Cell.CellFooter> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx index bbea50bf5f..a42f6ca01c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx @@ -83,7 +83,7 @@ export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonPro ); export const StyledHoverIcon = styled(Icon).attrs({ - color: DeprecatedColors.white60, + color: 'white60', })({ [`${StyledHoverIconButton}:hover &&`]: { backgroundColor: DeprecatedColors.white, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx index 94fcee90f0..7f8ff06445 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx @@ -3,7 +3,6 @@ import { useCallback } from 'react'; import { messages } from '../../../../../shared/gettext'; import { getDownloadUrl } from '../../../../../shared/version'; import { useAppContext } from '../../../../context'; -import { DeprecatedColors } from '../../../../lib/foundations'; import { useSelector } from '../../../../redux/store'; import * as Cell from '../../../cell'; import { LabelStack } from '../../../Layout'; @@ -36,7 +35,7 @@ export function AppVersionListItem() { const message = !consistentVersion ? inconsistentVersionMessage : updateAvailableMessage; - alertIcon = <Cell.CellIcon icon="alert-circle" color={DeprecatedColors.red} />; + alertIcon = <Cell.CellIcon icon="alert-circle" color="brandRed" />; footer = ( <Cell.CellFooter> <Cell.CellFooterText>{message}</Cell.CellFooterText> diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx index b70a312c71..438c14632c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx @@ -1,6 +1,5 @@ import styled from 'styled-components'; -import { DeprecatedColors } from '../../../foundations'; import { Icon, IconProps } from '../../icon'; import { useButtonContext } from '../ButtonContext'; @@ -14,7 +13,7 @@ export function ButtonIcon({ ...props }: ButtonIconProps) { <StyledButtonIcon size="medium" aria-hidden="true" - color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} + color={disabled ? 'white40' : 'white100'} {...props} /> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx index c101d4f9b0..4ae9c752f1 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx @@ -1,6 +1,5 @@ import styled from 'styled-components'; -import { DeprecatedColors } from '../../../foundations'; import { Icon, IconProps } from '../../icon'; import { useFilterChipContext } from '../FilterChipContext'; @@ -10,11 +9,5 @@ export const StyledIcon = styled(Icon)({}); export const FilterChipIcon = ({ ...props }: FilterChipIconProps) => { const { disabled } = useFilterChipContext(); - return ( - <Icon - size="small" - color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} - {...props} - /> - ); + return <Icon size="small" color={disabled ? 'white40' : 'white100'} {...props} />; }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx index 8fcb709990..e62b0a1db3 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx @@ -1,31 +1,34 @@ import styled from 'styled-components'; -import { DeprecatedColors } from '../../../foundations'; +import { Colors, colors } from '../../../foundations'; import { Icon, IconProps } from '../../icon/Icon'; import { useIconButtonContext } from '../IconButtonContext'; export type IconButtonIconProps = IconProps; const variants = { primary: { - background: DeprecatedColors.white, - hover: DeprecatedColors.white60, - disabled: DeprecatedColors.white50, + background: 'white100', + hover: 'white60', + disabled: 'white40', }, secondary: { - background: DeprecatedColors.white60, - hover: DeprecatedColors.white80, - disabled: DeprecatedColors.white50, + background: 'white60', + hover: 'white80', + disabled: 'white40', }, } as const; -const StyledIcon = styled(Icon)<IconButtonIconProps & { $hoverColor: string; $disabled?: boolean }>( - ({ $hoverColor, $disabled }) => ({ - ...(!$disabled && { - '&&:hover': { - backgroundColor: $hoverColor, - }, - }), - }), +const StyledIcon = styled(Icon)<IconButtonIconProps & { $hoverColor: Colors; $disabled?: boolean }>( + ({ $hoverColor, $disabled }) => { + const hoverColor = colors[$hoverColor]; + return { + ...(!$disabled && { + '&&:hover': { + backgroundColor: hoverColor, + }, + }), + }; + }, ); export const IconButtonIcon = (props: IconButtonIconProps) => { diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx index e387784485..6728bf9596 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx @@ -1,24 +1,25 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; -import { DeprecatedColors } from '../../foundations'; -import { TransientProps } from '../../types'; +import { Colors, colors } from '../../foundations'; import { icons } from './types'; export type IconProps = { icon: keyof typeof icons; size?: 'tiny' | 'small' | 'medium' | 'large' | 'big'; - color?: DeprecatedColors; + color?: Colors; className?: string; } & React.HTMLAttributes<HTMLDivElement>; -const StyledIcon = styled.div< - TransientProps<Pick<IconProps, 'color'>> & { $size: number; $src: string } ->` - width: ${({ $size }) => $size}px; - height: ${({ $size }) => $size}px; - mask: url(${({ $src }) => $src}) no-repeat center; - mask-size: contain; - background-color: ${({ $color }) => $color || 'currentColor'}; +const StyledIcon = styled.div<{ $color: string; $size: number; $src: string }>` + ${({ $size, $src, $color }) => { + return css` + width: ${$size}px; + height: ${$size}px; + mask: url(${$src}) no-repeat center; + mask-size: contain; + background-color: ${$color}; + `; + }} `; export const iconSizes = { @@ -34,10 +35,11 @@ const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : ''; export const Icon = ({ icon: iconProp, size = 'medium', - color = DeprecatedColors.white, + color: colorProp = 'white100', ...props }: IconProps) => { const icon = icons[iconProp]; const src = iconProp.startsWith('data:') ? iconProp : `${PATH_PREFIX}assets/icons/${icon}.svg`; + const color = colors[colorProp]; return <StyledIcon $src={src} $size={iconSizes[size]} $color={color} role="img" {...props} />; }; |