Remove use of Colors enum in favor of using typed strings in props

7 files changed, 7 insertions, 14 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx
index bc6b3a2295..6c46aaaf97 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/changelog-list/ChangelogList.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { IChangelog } from '../../../shared/ipc-types';
 import { BodySmall } from '../../lib/components';
 import { Flex } from '../../lib/components';
-import { Colors } from '../../lib/foundations';
 
 const StyledList = styled(Flex)`
   list-style-type: disc;
@@ -21,7 +20,7 @@ export function ChangelogList({ changelog }: ChangelogListProps) {
   return (
     <StyledList as="ul" $flexDirection="column" $gap="medium">
       {changelog.map((item, i) => (
-        <BodySmall as="li" key={`${item}${i}`} color={Colors.white60}>
+        <BodySmall as="li" key={`${item}${i}`} color="whiteAlpha60">
           {item}
         </BodySmall>
       ))}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx
index 5a20fcdd1b..abc3654384 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/version-list-item/VersionListItem.tsx
@@ -1,7 +1,6 @@
 import { messages } from '../../../../../../shared/gettext';
 import { Icon } from '../../../../../lib/components';
 import { ListItem } from '../../../../../lib/components/list-item';
-import { Colors } from '../../../../../lib/foundations';
 import { useVersionCurrent } from '../../../../../redux/hooks';
 import { useShowAlert, useShowFooter } from './hooks';
 
@@ -15,7 +14,7 @@ export function VersionListItem() {
       <ListItem.Item>
         <ListItem.Content>
           <ListItem.Group>
-            {showAlert && <Icon icon="alert-circle" color={Colors.red} />}
+            {showAlert && <Icon icon="alert-circle" color="red" />}
             <ListItem.Label>
               {
                 // TRANSLATORS: Label for version list item.
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx
index acc6fa4b80..60c0056b44 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/error-footer/ErrorFooter.tsx
@@ -1,5 +1,4 @@
 import { Flex, Icon, LabelTiny } from '../../../../../../../lib/components';
-import { Colors } from '../../../../../../../lib/foundations';
 import { DownloadProgress } from '../../../download-progress';
 import { ManualDownloadLink, ReportProblemButton, RetryButton } from './components';
 import { useMessage, useShowManualDownloadLink } from './hooks';
@@ -13,7 +12,7 @@ export function ErrorFooter() {
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
         <Flex $gap="tiny" $flexDirection="row">
           <div>
-            <Icon size="small" icon="alert-circle" color={Colors.red} />
+            <Icon size="small" icon="alert-circle" color="red" />
           </div>
           <Flex $flexDirection="column">
             <LabelTiny>{message}</LabelTiny>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx
index 4ea07c816e..11a10354dd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/initial-footer/components/installer-ready/InstallerReady.tsx
@@ -1,6 +1,5 @@
 import { messages } from '../../../../../../../../../../shared/gettext';
 import { Flex, Icon, LabelTiny } from '../../../../../../../../../lib/components';
-import { Colors } from '../../../../../../../../../lib/foundations';
 import { DownloadProgress } from '../../../../../download-progress';
 import { LaunchInstallerButton } from '../../../../../launch-installer-button';
 
@@ -9,7 +8,7 @@ export function InstallerReady() {
     <Flex $padding="large" $flexDirection="column">
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
         <Flex $gap="tiny" $alignItems="center">
-          <Icon icon="checkmark" color={Colors.green} size="small" />
+          <Icon icon="checkmark" color="green" size="small" />
           <LabelTiny>
             {
               // TRANSLATORS: Label displayed above a progress bar when the update is verified successfully
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx
index c14fbfea12..a05afe356e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/footer/components/launch-footer/LaunchFooter.tsx
@@ -1,6 +1,5 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { Flex, Icon, LabelTiny } from '../../../../../../../lib/components';
-import { Colors } from '../../../../../../../lib/foundations';
 import { DownloadProgress } from '../../../download-progress';
 import { LaunchInstallerButton } from '../../../launch-installer-button';
 import { useDisabled, useMessage } from './hooks';
@@ -13,7 +12,7 @@ export function LaunchFooter() {
     <Flex $padding="large" $flexDirection="column">
       <Flex $gap="medium" $flexDirection="column" $margin={{ bottom: 'medium' }}>
         <Flex $gap="tiny" $alignItems="center">
-          <Icon icon="checkmark" color={Colors.green} size="small" />
+          <Icon icon="checkmark" color="green" size="small" />
           <LabelTiny>
             {
               // TRANSLATORS: Label displayed above a progress bar when the update is verified successfully
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/components/no-changelog-updates/NoChangelogUpdates.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/components/no-changelog-updates/NoChangelogUpdates.tsx
index d9179e3029..6621c8d4fe 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/components/no-changelog-updates/NoChangelogUpdates.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/upgrade-details/components/no-changelog-updates/NoChangelogUpdates.tsx
@@ -1,10 +1,9 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { BodySmall } from '../../../../../../../lib/components';
-import { Colors } from '../../../../../../../lib/foundations';
 
 export function NoChangelogUpdates() {
   return (
-    <BodySmall color={Colors.white60}>
+    <BodySmall color="whiteAlpha60">
       {
         // TRANSLATORS: Text displayed when there are no updates for this platform in the next app version
         messages.pgettext(
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx
index d67269e8d2..1cc425bd30 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx
@@ -1,10 +1,9 @@
 import { messages } from '../../../../../../shared/gettext';
 import { BodySmall } from '../../../../../lib/components';
-import { Colors } from '../../../../../lib/foundations';
 
 export function NoChangelogUpdates() {
   return (
-    <BodySmall color={Colors.white60}>
+    <BodySmall color="whiteAlpha60">
       {
         // TRANSLATORS: Text displayed when there are no updates for this platform in the app version
         messages.pgettext(