1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { useCallback } from 'react';
import styled from 'styled-components';
import { colors } from '../../config.json';
import { messages } from '../../shared/gettext';
import { useAppContext } from '../context';
import { useSelector } from '../redux/store';
import * as AppButton from './AppButton';
import { measurements, tinyText } from './common-styles';
import ErrorView from './ErrorView';
import { Footer } from './Layout';
export default function Launch() {
const daemonAllowed = useSelector((state) => state.userInterface.daemonAllowed);
const footer = <SettingsFooter show={daemonAllowed === false} />;
return (
<ErrorView footer={footer}>
{messages.pgettext('launch-view', 'Connecting to Mullvad system service...')}
</ErrorView>
);
}
const StyledFooter = styled(Footer)<{ $show: boolean }>((props) => ({
backgroundColor: colors.blue,
padding: `0 14px ${measurements.viewMargin}`,
opacity: props.$show ? 1 : 0,
transition: 'opacity 250ms ease-in-out',
}));
const StyledSystemSettingsContainer = styled.div({
display: 'flex',
flexDirection: 'column',
flex: 1,
backgroundColor: colors.darkBlue,
borderRadius: '8px',
margin: 0,
padding: '16px',
});
const StyledLaunchFooterPrompt = styled.span(tinyText, {
color: colors.white,
margin: `8px 0 ${measurements.buttonVerticalMargin} 0`,
});
interface ISettingsFooterProps {
show: boolean;
}
function SettingsFooter(props: ISettingsFooterProps) {
const { showLaunchDaemonSettings } = useAppContext();
const openSettings = useCallback(async () => {
await showLaunchDaemonSettings();
}, []);
return (
<StyledFooter $show={props.show}>
<StyledSystemSettingsContainer>
<StyledLaunchFooterPrompt>
{messages.pgettext(
'launch-view',
'Permission for the Mullvad VPN service has been revoked. Please go to System Settings and allow Mullvad VPN under the “Allow in the Background” setting.',
)}
</StyledLaunchFooterPrompt>
<AppButton.BlueButton onClick={openSettings}>
{messages.gettext('Go to System Settings')}
</AppButton.BlueButton>
</StyledSystemSettingsContainer>
</StyledFooter>
);
}
|
