Separate daita and multihop shared illustration component

2 files changed, 7 insertions, 2 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
index ade1220d97..6b10f60cc5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
+import styled from 'styled-components';
 
 import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
@@ -16,10 +17,14 @@ import { Layout, SettingsContainer } from './Layout';
 import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import { StyledIllustration } from './views/daita-settings/DaitaSettingsView';
 
 const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
 
+const StyledIllustration = styled.img({
+  width: '100%',
+  padding: '8px 0 8px',
+});
+
 export default function MultihopSettings() {
   const { pop } = useHistory();
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
index 2c8d59a643..6cb193fd8b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
@@ -26,7 +26,7 @@ const StyledHeaderSubTitle = styled(HeaderSubTitle)({
   display: 'inline-block',
 });
 
-export const StyledIllustration = styled.img({
+const StyledIllustration = styled.img({
   width: '100%',
   padding: '8px 0 8px',
 });