Use new colors in connection panel

6 files changed, 23 insertions, 22 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
index 83423039a0..15ba2fa4b6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
@@ -12,7 +12,7 @@ import {
   tunnelTypeToString,
 } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
 
@@ -38,7 +38,7 @@ const StyledConnectionDetailsHeading = styled.h2(tinyText, {
   margin: '0 0 4px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: DeprecatedColors.white60,
+  color: colors.white60,
 });
 
 const StyledConnectionDetailsContainer = styled.div({
@@ -58,13 +58,13 @@ const StyledIpLabelContainer = styled.div({
 
 const StyledConnectionDetailsLabel = styled.span(tinyText, {
   display: 'block',
-  color: DeprecatedColors.white,
+  color: colors.white100,
   fontWeight: '400',
   minHeight: '1em',
 });
 
 const StyledConnectionDetailsTitle = styled(StyledConnectionDetailsLabel)({
-  color: DeprecatedColors.white60,
+  color: colors.white60,
   whiteSpace: 'nowrap',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx
index 8a5685b35e..1a8f20ec19 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
 import { IconButton } from '../../lib/components';
+import { colors } from '../../lib/foundations';
 import { useBoolean } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import CustomScrollbars from '../CustomScrollbars';
@@ -30,7 +31,7 @@ const StyledConnectionPanel = styled.div<{ $expanded: boolean }>((props) => ({
   padding: '16px',
   justifySelf: 'flex-end',
   borderRadius: '12px',
-  backgroundColor: `rgba(16, 24, 35, ${props.$expanded ? 0.8 : 0.4})`,
+  backgroundColor: props.$expanded ? colors.darkerBlue10Alpha80 : colors.darkerBlue10Alpha40,
   backdropFilter: 'blur(6px)',
 
   transition: 'background-color 300ms ease-out',
@@ -61,7 +62,7 @@ const StyledConnectionStatusContainer = styled.div<{
 }>((props) => ({
   paddingBottom: props.$hasFeatureIndicators || props.$expanded ? '16px' : 0,
   marginBottom: props.$expanded && props.$hasFeatureIndicators ? '16px' : 0,
-  borderBottom: props.$expanded ? '1px rgba(255, 255, 255, 0.2) solid' : 'none',
+  borderBottom: props.$expanded ? `1px ${colors.white20} solid` : 'none',
   transitionProperty: 'margin-bottom, padding-bottom',
   transitionDuration: '300ms',
   transitionTimingFunction: 'ease-out',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
index aefef4d7c5..87c5c7eecf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { TunnelState } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { largeText } from '../common-styles';
 
@@ -29,14 +29,14 @@ export default function ConnectionStatus() {
 function getConnectionSTatusLabelColor(tunnelState: TunnelState, lockdownMode: boolean) {
   switch (tunnelState.state) {
     case 'connected':
-      return DeprecatedColors.green;
+      return colors.brandGreen;
     case 'connecting':
     case 'disconnecting':
-      return DeprecatedColors.white;
+      return colors.white100;
     case 'disconnected':
-      return lockdownMode ? DeprecatedColors.white : DeprecatedColors.red;
+      return lockdownMode ? colors.white100 : colors.brandRed;
     case 'error':
-      return tunnelState.details.blockingError ? DeprecatedColors.red : DeprecatedColors.white;
+      return tunnelState.details.blockingError ? colors.brandRed : colors.white100;
   }
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
index 2bcc711d0c..8a4337b53b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { strings } from '../../../shared/constants';
 import { FeatureIndicator } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useStyledRef } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
@@ -28,7 +28,7 @@ const StyledTitle = styled.h2(tinyText, {
   margin: '0 0 2px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: DeprecatedColors.white60,
+  color: colors.white60,
 });
 
 const StyledFeatureIndicators = styled.div({
@@ -50,8 +50,8 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '4px',
-  background: DeprecatedColors.darkerBlue,
-  color: DeprecatedColors.white,
+  background: colors.brandDarkBlue,
+  color: colors.white100,
   fontWeight: 400,
   whiteSpace: 'nowrap',
   visibility: 'hidden',
@@ -59,17 +59,17 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   // Style clickable feature indicators with a border and on-hover effect
   boxSizing: 'border-box', // make border act as padding rather than margin
   border: 'solid 1px',
-  borderColor: props.onClick ? DeprecatedColors.blue : DeprecatedColors.darkerBlue,
+  borderColor: props.onClick ? colors.brandBlue : colors.brandDarkBlue,
   transition: 'background ease-in-out 300ms',
   '&&:hover': {
-    background: props.onClick ? DeprecatedColors.blue60 : undefined,
+    background: props.onClick ? colors.blue60 : undefined,
   },
 }));
 
 const StyledBaseEllipsis = styled.span<{ $display: boolean }>(tinyText, (props) => ({
   position: 'absolute',
   top: `${LINE_HEIGHT + GAP}px`,
-  color: DeprecatedColors.white,
+  color: colors.white100,
   padding: '2px 8px 2px 16px',
   display: props.$display ? 'inline' : 'none',
 }));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
index 26b2b48b16..8bdb292f3c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
@@ -2,7 +2,7 @@ import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
 import { messages } from '../../../shared/gettext';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { IConnectionReduxState } from '../../redux/connection/reducers';
 import { useSelector } from '../../redux/store';
 import { smallText } from '../common-styles';
@@ -14,7 +14,7 @@ const StyledAccordion = styled(ConnectionPanelAccordion)({
 });
 
 const StyledHostname = styled.span(smallText, {
-  color: DeprecatedColors.white60,
+  color: colors.white60,
   fontWeight: '400',
   flexShrink: 0,
   minHeight: '1em',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
index 833b26252b..036152f13f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
 import { TunnelState } from '../../../shared/daemon-rpc-types';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { largeText } from '../common-styles';
 import Marquee from '../Marquee';
 import { ConnectionPanelAccordion } from './styles';
 
 const StyledLocation = styled.span(largeText, {
-  color: DeprecatedColors.white,
+  color: colors.white100,
   flexShrink: 0,
 });