diff options
| author | Oliver <oliver@mohlin.dev> | 2025-04-29 16:36:14 +0200 |
|---|---|---|
| committer | Tobias Järvelöv <tobias.jarvelov@mullvad.net> | 2025-05-19 14:28:48 +0200 |
| commit | ac972861c2e35a6259d4cdb4f96c8e2104adcf3b (patch) | |
| tree | 81b2b99b505acd4fe1473b8779c00f5af7534c03 | |
| parent | 09a0c1cdd40d680b068d0a70ffae9515e9d4b634 (diff) | |
| download | mullvadvpn-ac972861c2e35a6259d4cdb4f96c8e2104adcf3b.tar.xz mullvadvpn-ac972861c2e35a6259d4cdb4f96c8e2104adcf3b.zip | |
Use new colors in Switch
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx index 4677d09c05..68b57cdf9f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { DeprecatedColors } from '../lib/foundations'; +import { colors, ColorVariables } from '../lib/foundations'; interface IProps { id?: string; @@ -18,7 +18,7 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({ position: 'relative', width: '34px', height: '22px', - borderColor: props.disabled ? DeprecatedColors.white20 : DeprecatedColors.white80, + borderColor: props.disabled ? colors.white20 : colors.white80, borderWidth: '2px', borderStyle: 'solid', borderRadius: '11px', @@ -26,9 +26,9 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({ })); const Knob = styled.div<{ $isOn: boolean; disabled: boolean }>((props) => { - let backgroundColor = props.$isOn ? DeprecatedColors.green : DeprecatedColors.red; + let backgroundColor: ColorVariables = props.$isOn ? colors.brandGreen : colors.brandRed; if (props.disabled) { - backgroundColor = props.$isOn ? DeprecatedColors.green40 : DeprecatedColors.red40; + backgroundColor = props.$isOn ? colors.green40 : colors.red40; } return { |