Use new colors in select location components

5 files changed, 30 insertions, 30 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
index e1dbe0b073..9bdaec3a78 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
@@ -12,7 +12,7 @@ import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
 import { Button } from '../../lib/components';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { formatHtml } from '../../lib/html-formatter';
 import { useBoolean } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
@@ -105,7 +105,7 @@ const StyledSelectListItemLabel = styled(Cell.Label)(normalText, {
 
 const StyledSelectListItemIcon = styled(Cell.CellTintedIcon)({
   [`${Cell.CellButton}:not(:disabled):hover &&`]: {
-    backgroundColor: DeprecatedColors.white80,
+    backgroundColor: colors.white80,
   },
 });
 
@@ -137,7 +137,7 @@ function SelectList(props: SelectListProps) {
 
 const StyledInputErrorText = styled.span(tinyText, {
   marginTop: '6px',
-  color: DeprecatedColors.red,
+  color: colors.brandRed,
 });
 
 interface EditListProps {
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 b709c0be30..eebc74a025 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
@@ -9,7 +9,7 @@ import {
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useBoolean, useStyledRef } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
 import * as Cell from '../cell';
@@ -30,7 +30,7 @@ const StyledInputContainer = styled.div({
   display: 'flex',
   alignItems: 'center',
   flex: 1,
-  backgroundColor: DeprecatedColors.blue,
+  backgroundColor: colors.brandBlue,
   paddingLeft: measurements.horizontalViewMargin,
   height: measurements.rowMinHeight,
 });
@@ -38,7 +38,7 @@ const StyledInputContainer = styled.div({
 const StyledHeaderLabel = styled(Cell.Label)({
   display: 'block',
   flex: 1,
-  backgroundColor: DeprecatedColors.blue,
+  backgroundColor: colors.brandBlue,
   paddingLeft: measurements.horizontalViewMargin,
   margin: 0,
   height: measurements.rowMinHeight,
@@ -55,17 +55,17 @@ const StyledAddListCellButton = styled(StyledCellButton)({
 
 const StyledSideButtonIcon = styled(Cell.CellIcon)({
   [`${StyledCellButton}:disabled &&, ${StyledAddListCellButton}:disabled &&`]: {
-    backgroundColor: DeprecatedColors.white40,
+    backgroundColor: colors.white40,
   },
 
   [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]:
     {
-      backgroundColor: DeprecatedColors.white,
+      backgroundColor: colors.white100,
     },
 });
 
 const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({
-  color: props.$error ? DeprecatedColors.red : 'auto',
+  color: props.$error ? colors.brandRed : 'auto',
 }));
 
 interface CustomListsProps {
@@ -103,8 +103,8 @@ export default function CustomLists(props: CustomListsProps) {
           {messages.pgettext('select-location-view', 'Custom lists')}
         </StyledHeaderLabel>
         <StyledCellButton
-          $backgroundColor={DeprecatedColors.blue}
-          $backgroundColorHover={DeprecatedColors.blue80}
+          $backgroundColor={colors.brandBlue}
+          $backgroundColorHover={colors.blue80}
           onClick={showAddList}>
           <StyledSideButtonIcon icon="add-circle" color="white60" />
         </StyledCellButton>
@@ -198,8 +198,8 @@ function AddListForm(props: AddListFormProps) {
           </StyledInputContainer>
 
           <StyledAddListCellButton
-            $backgroundColor={DeprecatedColors.blue}
-            $backgroundColorHover={DeprecatedColors.blue80}
+            $backgroundColor={colors.brandBlue}
+            $backgroundColorHover={colors.blue80}
             disabled={!nameValid}
             onClick={createList}>
             <StyledSideButtonIcon icon="checkmark" color="white60" />
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 a42f6ca01c..42cffe2192 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
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
 import { Icon } from '../../lib/components';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors, ColorVariables } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { buttonColor, ButtonColors } from '../cell/styles';
 import { measurements, normalText } from '../common-styles';
@@ -86,7 +86,7 @@ export const StyledHoverIcon = styled(Icon).attrs({
   color: 'white60',
 })({
   [`${StyledHoverIconButton}:hover &&`]: {
-    backgroundColor: DeprecatedColors.white,
+    backgroundColor: colors.white100,
   },
 });
 
@@ -96,19 +96,19 @@ export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButt
 );
 
 export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
-  let backgroundColor = DeprecatedColors.blue60;
+  let backgroundColor: ColorVariables = colors.blue60;
   if (selected) {
-    backgroundColor = DeprecatedColors.green;
+    backgroundColor = colors.brandGreen;
   } else if (level === 1) {
-    backgroundColor = DeprecatedColors.blue40;
+    backgroundColor = colors.blue40;
   } else if (level === 2) {
-    backgroundColor = DeprecatedColors.blue20;
+    backgroundColor = colors.blue20;
   } else if (level === 3) {
-    backgroundColor = DeprecatedColors.blue10;
+    backgroundColor = colors.blue10;
   }
 
   return {
     $backgroundColor: backgroundColor,
-    $backgroundColorHover: selected || disabled ? backgroundColor : DeprecatedColors.blue80,
+    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
   };
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
index c50f8ef688..02c22f77f8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { smallText } from '../common-styles';
 
 const StyledScopeBar = styled.div({
   display: 'flex',
   flexDirection: 'row',
-  backgroundColor: DeprecatedColors.blue40,
+  backgroundColor: colors.blue40,
   borderRadius: '13px',
   overflow: 'hidden',
 });
@@ -40,12 +40,12 @@ const StyledScopeBarItem = styled.button<{ selected?: boolean }>(smallText, (pro
   flex: 1,
   flexBasis: 0,
   padding: '4px 8px',
-  color: DeprecatedColors.white,
+  color: colors.white100,
   textAlign: 'center',
   border: 'none',
-  backgroundColor: props.selected ? DeprecatedColors.green : 'transparent',
+  backgroundColor: props.selected ? colors.brandGreen : 'transparent',
   '&&:hover': {
-    backgroundColor: props.selected ? DeprecatedColors.green : DeprecatedColors.blue40,
+    backgroundColor: props.selected ? colors.brandGreen : colors.blue40,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
index c9de24b6cb..9aaa8e2d45 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { normalText, tinyText } from '../common-styles';
 import SearchBar from '../SearchBar';
@@ -23,7 +23,7 @@ export const StyledNavigationBarAttachment = styled.div({
 
 export const StyledFilterRow = styled.div({
   ...tinyText,
-  color: DeprecatedColors.white,
+  color: colors.white100,
   margin: '0 6px 16px',
 });
 
@@ -31,11 +31,11 @@ export const StyledFilter = styled.div({
   ...tinyText,
   display: 'inline-flex',
   alignItems: 'center',
-  backgroundColor: DeprecatedColors.blue,
+  backgroundColor: colors.brandBlue,
   borderRadius: '4px',
   padding: '3px 8px',
   marginLeft: '6px',
-  color: DeprecatedColors.white,
+  color: colors.white100,
 });
 
 export const StyledClearFilterButton = styled.div({