Update paths changed due to vite migration

After switching to vite from gulp the paths are
resolved differently.

10 files changed, 32 insertions, 11 deletions

diff --git a/desktop/packages/mullvad-vpn/src/main/changelog.ts b/desktop/packages/mullvad-vpn/src/main/changelog.ts
index 978b0b28e6..3b72fc17e3 100644
--- a/desktop/packages/mullvad-vpn/src/main/changelog.ts
+++ b/desktop/packages/mullvad-vpn/src/main/changelog.ts
@@ -7,7 +7,7 @@ import log from '../shared/logging';
 // Reads and parses the changelog file.
 export function readChangelog(): IChangelog {
   try {
-    const changelogPath = path.join(__dirname, '..', '..', '..', 'changes.txt');
+    const changelogPath = path.join(__dirname, '..', 'changes.txt');
     const contents = fs.readFileSync(changelogPath).toString();
     return parseChangelog(contents);
   } catch (e) {
diff --git a/desktop/packages/mullvad-vpn/src/main/index.ts b/desktop/packages/mullvad-vpn/src/main/index.ts
index a80241f527..c0029ab86d 100644
--- a/desktop/packages/mullvad-vpn/src/main/index.ts
+++ b/desktop/packages/mullvad-vpn/src/main/index.ts
@@ -82,7 +82,8 @@ const ALLOWED_PERMISSIONS = ['clipboard-sanitized-write'];
 const SANDBOX_DISABLED = app.commandLine.hasSwitch('no-sandbox');
 const UPDATE_NOTIFICATION_DISABLED = process.env.MULLVAD_DISABLE_UPDATE_NOTIFICATION === '1';
 
-const GEO_DIR = path.resolve(__dirname, '../../assets/geo');
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../../../../dist-assets' : 'assets';
+const GEO_DIR = path.resolve(__dirname, PATH_PREFIX, 'geo');
 
 class ApplicationMain
   implements
diff --git a/desktop/packages/mullvad-vpn/src/main/load-translations.ts b/desktop/packages/mullvad-vpn/src/main/load-translations.ts
index a3e892ce0b..137d34bcec 100644
--- a/desktop/packages/mullvad-vpn/src/main/load-translations.ts
+++ b/desktop/packages/mullvad-vpn/src/main/load-translations.ts
@@ -6,7 +6,7 @@ import path from 'path';
 import log from '../shared/logging';
 
 const SOURCE_LANGUAGE = 'en';
-const LOCALES_DIR = path.resolve(__dirname, '../../locales');
+const LOCALES_DIR = path.resolve(__dirname, '../locales');
 
 export function loadTranslations(
   currentLocale: string,
diff --git a/desktop/packages/mullvad-vpn/src/main/notification-controller.ts b/desktop/packages/mullvad-vpn/src/main/notification-controller.ts
index 664f102709..b21a9f2d27 100644
--- a/desktop/packages/mullvad-vpn/src/main/notification-controller.ts
+++ b/desktop/packages/mullvad-vpn/src/main/notification-controller.ts
@@ -74,7 +74,8 @@ export default class NotificationController {
     }
 
     if (usePngIcon) {
-      const basePath = path.resolve(path.join(__dirname, '../../assets/images'));
+      const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
+      const basePath = path.resolve(path.join(__dirname, PATH_PREFIX, 'assets/images'));
       // `nativeImage` is undefined when running tests
       this.notificationIcon = nativeImage?.createFromPath(
         path.join(basePath, 'icon-notification.png'),
diff --git a/desktop/packages/mullvad-vpn/src/main/tray-icon-controller.ts b/desktop/packages/mullvad-vpn/src/main/tray-icon-controller.ts
index ff7300b1e6..42ecb894fb 100644
--- a/desktop/packages/mullvad-vpn/src/main/tray-icon-controller.ts
+++ b/desktop/packages/mullvad-vpn/src/main/tray-icon-controller.ts
@@ -12,6 +12,7 @@ export type TrayIconType = 'unsecured' | 'securing' | 'secured';
 
 type IconParameters = { monochromatic: boolean; notification: boolean };
 
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
 export default class TrayIconController {
   private animation?: KeyframeAnimation;
   private iconSet: NativeImage[] = [];
@@ -153,7 +154,9 @@ export default class TrayIconController {
   }
 
   private getImagePath(frame: number, suffix?: string) {
-    const basePath = path.resolve(path.join(__dirname, '../../assets/images/menubar-icons'));
+    const basePath = path.resolve(
+      path.join(__dirname, `${PATH_PREFIX}assets/images/menubar-icons`),
+    );
     const extension = process.platform === 'win32' ? 'ico' : 'png';
     return path.join(basePath, process.platform, `lock-${frame}${suffix}.${extension}`);
   }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index f19707b5a0..2cee5bae1e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -36,6 +36,8 @@ const StyledInfoButton = styled(InfoButton)({
   marginRight: Spacings.spacing5,
 });
 
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
+
 export default function DaitaSettings() {
   const { pop } = useHistory();
 
@@ -52,7 +54,9 @@ export default function DaitaSettings() {
                 <PageSlider
                   content={[
                     <React.Fragment key="without-daita">
-                      <StyledIllustration src="../../assets/images/daita-off-illustration.svg" />
+                      <StyledIllustration
+                        src={`${PATH_PREFIX}assets/images/daita-off-illustration.svg`}
+                      />
                       <Flex $flexDirection="column" $gap={Spacings.spacing5}>
                         <StyledHeaderSubTitle>
                           {sprintf(
@@ -81,7 +85,9 @@ export default function DaitaSettings() {
                       </Flex>
                     </React.Fragment>,
                     <React.Fragment key="with-daita">
-                      <StyledIllustration src="../../assets/images/daita-on-illustration.svg" />
+                      <StyledIllustration
+                        src={`${PATH_PREFIX}assets/images/daita-on-illustration.svg`}
+                      />
                       <Flex $flexDirection="column" $gap={Spacings.spacing5}>
                         <StyledHeaderSubTitle>
                           {sprintf(
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
index fcc4111e9e..f2681f9614 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
@@ -18,6 +18,8 @@ import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
+
 export default function MultihopSettings() {
   const { pop } = useHistory();
 
@@ -34,7 +36,9 @@ export default function MultihopSettings() {
                   {messages.pgettext('wireguard-settings-view', 'Multihop')}
                 </HeaderTitle>
                 <HeaderSubTitle>
-                  <StyledIllustration src="../../assets/images/multihop-illustration.svg" />
+                  <StyledIllustration
+                    src={`${PATH_PREFIX}assets/images/multihop-illustration.svg`}
+                  />
                   {messages.pgettext(
                     'wireguard-settings-view',
                     'Multihop routes your traffic into one WireGuard server and out another, making it harder to trace. This results in increased latency but increases anonymity online.',
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 7cf51a109f..2f6a1fdd29 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
@@ -29,6 +29,8 @@ export const iconSizes = {
   big: 48,
 };
 
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
+
 export const Icon = ({
   icon: iconProp,
   size = 'medium',
@@ -36,6 +38,6 @@ export const Icon = ({
   ...props
 }: IconProps) => {
   const icon = icons[iconProp];
-  const src = iconProp.startsWith('data:') ? iconProp : `../../assets/icons/${icon}.svg`;
+  const src = iconProp.startsWith('data:') ? iconProp : `${PATH_PREFIX}assets/icons/${icon}.svg`;
   return <StyledIcon $src={src} $size={iconSizes[size]} $color={color} role="img" {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx
index 1bf58c5040..4751374ca2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/image/Image.tsx
@@ -8,8 +8,10 @@ export interface ImageProps {
   className?: string;
 }
 
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
+
 export const Image = ({ source, ...props }: ImageProps) => {
-  const url = source.startsWith('data:') ? source : `../../assets/images/${source}.svg`;
+  const url = source.startsWith('data:') ? source : `${PATH_PREFIX}assets/images/${source}.svg`;
 
   return <img src={url} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/spinner/Spinner.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/spinner/Spinner.tsx
index 21f02b1652..1ffa04f415 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/spinner/Spinner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/spinner/Spinner.tsx
@@ -17,7 +17,9 @@ const sizes = {
   big: 48,
 };
 
+const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
+
 export const Spinner = ({ size = 'medium', ...props }: SpinnerProps) => {
-  const src = '../../assets/images/spinner.svg';
+  const src = `${PATH_PREFIX}assets/images/spinner.svg`;
   return <StyledSpinner src={src} $size={sizes[size]} {...props} />;
 };