diff options
3 files changed, 63 insertions, 28 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/TroubleshootingModal.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/TroubleshootingModal.tsx index d9eb11c390..80aa4e1791 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/TroubleshootingModal.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/TroubleshootingModal.tsx @@ -1,22 +1,31 @@ import { useCallback } from 'react'; +import styled from 'styled-components'; import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; import { Button } from '../../../../../lib/components'; import { TransitionType, useHistory } from '../../../../../lib/history'; import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from '../../../../Modal'; +import { useTroubleshootingSteps } from './hooks'; export type TroubleshootingModalProps = { isOpen: boolean; onClose: () => void; }; +const StyledModalMessage = styled(ModalMessage)` + margin-top: 0; +`; + export function TroubleshootingModal({ isOpen, onClose }: TroubleshootingModalProps) { const { push } = useHistory(); const openSendProblemReport = useCallback(() => { onClose(); push(RoutePath.problemReport, { transition: TransitionType.show }); }, [onClose, push]); + + const steps = useTroubleshootingSteps(); + return ( <ModalAlert isOpen={isOpen} @@ -44,34 +53,9 @@ export function TroubleshootingModal({ isOpen, onClose }: TroubleshootingModalPr ) } </ModalMessage> - <ModalMessage> - <ModalMessageList> - <li> - { - // TRANSLATORS: List item in troubleshooting modal advising user to restart background process. - messages.pgettext('launch-view', 'Restarting the Mullvad background process') - } - </li> - <li> - { - // TRANSLATORS: List item in troubleshooting modal advising user to restart their computer. - messages.pgettext('launch-view', 'Restarting your computer') - } - </li> - <li> - { - // TRANSLATORS: List item in troubleshooting modal advising user to reinstall the app. - messages.pgettext('launch-view', 'Reinstalling the app') - } - </li> - <li> - { - // TRANSLATORS: List item in troubleshooting modal advising user disable third party antivirus. - messages.pgettext('launch-view', 'Disabling third party antivirus software') - } - </li> - </ModalMessageList> - </ModalMessage> + <StyledModalMessage> + <ModalMessageList>{steps}</ModalMessageList> + </StyledModalMessage> <ModalMessage> { // TRANSLATORS: Message in troubleshooting modal advising user to send a problem report if the steps do not work. diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/hooks/index.ts new file mode 100644 index 0000000000..44fa712e78 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/hooks/index.ts @@ -0,0 +1 @@ +export * from './useTroubleshootingSteps'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/hooks/useTroubleshootingSteps.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/hooks/useTroubleshootingSteps.tsx new file mode 100644 index 0000000000..afca701bc3 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/troubleshooting-modal/hooks/useTroubleshootingSteps.tsx @@ -0,0 +1,50 @@ +import { messages } from '../../../../../../../shared/gettext'; + +export const useTroubleshootingSteps = () => { + let restartBackgroundProcessStep = <></>; + if (window.env.platform === 'win32') { + restartBackgroundProcessStep = ( + <li> + { + // TRANSLATORS: List item in troubleshooting modal instructing user how to restart the background process. + messages.pgettext( + 'launch-view', + 'Restarting the Mullvad background process by clicking "Back", then "Try again"', + ) + } + </li> + ); + } else { + restartBackgroundProcessStep = ( + <li> + { + // TRANSLATORS: List item in troubleshooting modal advising user to restart background process. + messages.pgettext('launch-view', 'Restarting the Mullvad background process') + } + </li> + ); + } + return ( + <> + {restartBackgroundProcessStep} + <li> + { + // TRANSLATORS: List item in troubleshooting modal advising user to restart their computer. + messages.pgettext('launch-view', 'Restarting your computer') + } + </li> + <li> + { + // TRANSLATORS: List item in troubleshooting modal advising user to reinstall the app. + messages.pgettext('launch-view', 'Reinstalling the app') + } + </li> + <li> + { + // TRANSLATORS: List item in troubleshooting modal advising user disable third party antivirus. + messages.pgettext('launch-view', 'Disabling third party antivirus software') + } + </li> + </> + ); +}; |