diff options
11 files changed, 67 insertions, 90 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx index 7ee58275fb..dc2d9f9275 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx @@ -13,6 +13,7 @@ import * as Cell from './cell'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; import { NavigationContainer } from './NavigationContainer'; +import { NavigationListItem } from './NavigationListItem'; import { NavigationScrollbars } from './NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; @@ -58,16 +59,14 @@ export default function Support() { } function ProblemReportButton() { - const history = useHistory(); - const clickHandler = useCallback(() => history.push(RoutePath.problemReport), [history]); - // TRANSLATORS: Navigation button to the 'Report a problem' help view const label = messages.pgettext('support-view', 'Report a problem'); return ( - <Cell.CellNavigationButton onClick={clickHandler}> - <Cell.Label>{label}</Cell.Label> - </Cell.CellNavigationButton> + <NavigationListItem to={RoutePath.problemReport}> + <NavigationListItem.Label>{label}</NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx index 786013168b..be918077bc 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx @@ -1,24 +1,18 @@ -import { useCallback } from 'react'; import styled from 'styled-components'; import { messages } from '../../shared/gettext'; import { RoutePath } from '../../shared/routes'; import { useAppContext } from '../context'; +import { Image } from '../lib/components'; import { useHistory } from '../lib/history'; import { useSelector } from '../redux/store'; import { AppNavigationHeader } from './'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; import * as Cell from './cell'; import { BackAction } from './KeyboardNavigation'; -import { - LabelStack, - Layout, - SettingsContainer, - SettingsContent, - SettingsGroup, - SettingsStack, -} from './Layout'; +import { Layout, SettingsContainer, SettingsContent, SettingsGroup, SettingsStack } from './Layout'; import { NavigationContainer } from './NavigationContainer'; +import { NavigationListItem } from './NavigationListItem'; import { NavigationScrollbars } from './NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; @@ -240,25 +234,25 @@ function AnimateMapSetting() { } function LanguageButton() { - const history = useHistory(); const { getPreferredLocaleDisplayName } = useAppContext(); const preferredLocale = useSelector((state) => state.settings.guiSettings.preferredLocale); const localeDisplayName = getPreferredLocaleDisplayName(preferredLocale); - const navigate = useCallback(() => history.push(RoutePath.selectLanguage), [history]); - return ( - <Cell.CellNavigationButton onClick={navigate}> - <LabelStack> - <Cell.CellImage source="icon-language" /> - <Cell.Label> + <NavigationListItem to={RoutePath.selectLanguage}> + <NavigationListItem.Group> + <Image source="icon-language" /> + <NavigationListItem.Label> { // TRANSLATORS: Navigation button to the 'Language' settings view messages.pgettext('user-interface-settings-view', 'Language') } - </Cell.Label> - </LabelStack> - <Cell.SubText>{localeDisplayName}</Cell.SubText> - </Cell.CellNavigationButton> + </NavigationListItem.Label> + </NavigationListItem.Group> + <NavigationListItem.Group> + <NavigationListItem.Text>{localeDisplayName}</NavigationListItem.Text> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem.Group> + </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx index cca769e238..d1e3d7df72 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx @@ -28,6 +28,7 @@ import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer, SettingsContent, SettingsGroup, SettingsStack } from './Layout'; import { ModalAlert, ModalAlertType, ModalMessage } from './Modal'; import { NavigationContainer } from './NavigationContainer'; +import { NavigationListItem } from './NavigationListItem'; import { NavigationScrollbars } from './NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; @@ -787,52 +788,48 @@ function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) { } function WireguardSettingsButton() { - const history = useHistory(); const tunnelProtocol = useSelector((state) => mapRelaySettingsToProtocol(state.settings.relaySettings), ); - const navigate = useCallback(() => history.push(RoutePath.wireguardSettings), [history]); - return ( - <Cell.CellNavigationButton onClick={navigate} disabled={tunnelProtocol === 'openvpn'}> - <Cell.Label> + <NavigationListItem to={RoutePath.wireguardSettings} disabled={tunnelProtocol === 'openvpn'}> + <NavigationListItem.Label> {sprintf( // TRANSLATORS: %(wireguard)s will be replaced with the string "WireGuard" messages.pgettext('vpn-settings-view', '%(wireguard)s settings'), { wireguard: strings.wireguard }, )} - </Cell.Label> - </Cell.CellNavigationButton> + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem> ); } function OpenVpnSettingsButton() { - const history = useHistory(); const tunnelProtocol = useTunnelProtocol(); - const navigate = useCallback(() => history.push(RoutePath.openVpnSettings), [history]); - return ( - <Cell.CellNavigationButton onClick={navigate} disabled={tunnelProtocol === 'wireguard'}> - <Cell.Label> + <NavigationListItem to={RoutePath.openVpnSettings} disabled={tunnelProtocol === 'wireguard'}> + <NavigationListItem.Label> {sprintf( // TRANSLATORS: %(openvpn)s will be replaced with the string "OpenVPN" messages.pgettext('vpn-settings-view', '%(openvpn)s settings'), { openvpn: strings.openvpn }, )} - </Cell.Label> - </Cell.CellNavigationButton> + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem> ); } function IpOverrideButton() { - const history = useHistory(); - const navigate = useCallback(() => history.push(RoutePath.settingsImport), [history]); - return ( - <Cell.CellNavigationButton onClick={navigate}> - <Cell.Label>{messages.pgettext('vpn-settings-view', 'Server IP override')}</Cell.Label> - </Cell.CellNavigationButton> + <NavigationListItem to={RoutePath.settingsImport}> + <NavigationListItem.Label> + {messages.pgettext('vpn-settings-view', 'Server IP override')} + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx index 56cd42b14b..97079c0047 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx @@ -1,19 +1,17 @@ import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; export function ApiAccessMethodsListItem() { return ( <NavigationListItem to={RoutePath.apiAccessMethods}> - <ListItem.Label> + <NavigationListItem.Label> { // TRANSLATORS: Navigation button to the 'API access methods' view messages.pgettext('settings-view', 'API access') } - </ListItem.Label> - <Icon icon="chevron-right" /> + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx index d5e1d03ca2..a1e7c58e99 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx @@ -2,13 +2,12 @@ import styled from 'styled-components'; import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; -import { Flex, Icon } from '../../../../../lib/components'; +import { Flex } from '../../../../../lib/components'; import { Dot } from '../../../../../lib/components/dot'; -import { ListItem } from '../../../../../lib/components/list-item'; import { useVersionCurrent, useVersionSuggestedUpgrade } from '../../../../../redux/hooks'; import { NavigationListItem } from '../../../../NavigationListItem'; -const StyledText = styled(ListItem.Text)` +const StyledText = styled(NavigationListItem.Text)` margin-top: -4px; `; @@ -19,12 +18,12 @@ export function AppInfoListItem() { return ( <NavigationListItem to={RoutePath.appInfo}> <Flex $flexDirection="column"> - <ListItem.Label> + <NavigationListItem.Label> { // TRANSLATORS: Navigation button to the 'App info' view messages.pgettext('settings-view', 'App info') } - </ListItem.Label> + </NavigationListItem.Label> {suggestedUpgrade && ( <StyledText variant="footnoteMini"> { @@ -34,11 +33,11 @@ export function AppInfoListItem() { </StyledText> )} </Flex> - <ListItem.Group> - <ListItem.Text>{current}</ListItem.Text> + <NavigationListItem.Group> + <NavigationListItem.Text>{current}</NavigationListItem.Text> {suggestedUpgrade && <Dot variant="warning" size="small" />} - <Icon icon="chevron-right" /> - </ListItem.Group> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem.Group> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx index 9766bdbba8..f1280db9c6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx @@ -1,8 +1,6 @@ import { strings } from '../../../../../../shared/constants'; import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; import { useIsOn } from './hooks'; @@ -11,11 +9,13 @@ export function DaitaListItem() { return ( <NavigationListItem to={RoutePath.daitaSettings}> - <ListItem.Label>{strings.daita}</ListItem.Label> - <ListItem.Group> - <ListItem.Text>{isOn ? messages.gettext('On') : messages.gettext('Off')}</ListItem.Text> - <Icon icon="chevron-right" /> - </ListItem.Group> + <NavigationListItem.Label>{strings.daita}</NavigationListItem.Label> + <NavigationListItem.Group> + <NavigationListItem.Text> + {isOn ? messages.gettext('On') : messages.gettext('Off')} + </NavigationListItem.Text> + <NavigationListItem.Icon icon="chevron-right" /> + </NavigationListItem.Group> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx index 2388b659ba..60fe84f657 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx @@ -1,13 +1,11 @@ import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; export function DebugListItem() { return ( <NavigationListItem to={RoutePath.debug}> - <ListItem.Label>Developer tools</ListItem.Label> - <Icon icon="chevron-right" /> + <NavigationListItem.Label>Developer tools</NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx index 5f0201c984..9cf84551e8 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx @@ -1,14 +1,12 @@ import { strings } from '../../../../../../shared/constants'; import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; export function SplitTunnelingListItem() { return ( <NavigationListItem to={RoutePath.splitTunneling}> - <ListItem.Label>{strings.splitTunneling}</ListItem.Label> - <Icon icon="chevron-right" /> + <NavigationListItem.Label>{strings.splitTunneling}</NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx index 8fbfd81681..7157052a92 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx @@ -1,19 +1,17 @@ import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; export function SupportListItem() { return ( <NavigationListItem to={RoutePath.support}> - <ListItem.Label> + <NavigationListItem.Label> { // TRANSLATORS: Navigation button to the 'Support' view messages.pgettext('settings-view', 'Support') } - </ListItem.Label> - <Icon icon="chevron-right" /> + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx index f13d40cb5b..a93de63563 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx @@ -1,19 +1,17 @@ import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; export function UserInterfaceSettingsListItem() { return ( <NavigationListItem to={RoutePath.userInterfaceSettings}> - <ListItem.Label> + <NavigationListItem.Label> { // TRANSLATORS: Navigation button to the 'User interface settings' view messages.pgettext('settings-view', 'User interface settings') } - </ListItem.Label> - <Icon icon="chevron-right" /> + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> </NavigationListItem> ); } diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx index 0c39da6536..e5b3f89bd6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx @@ -1,19 +1,17 @@ import { messages } from '../../../../../../shared/gettext'; import { RoutePath } from '../../../../../../shared/routes'; -import { Icon } from '../../../../../lib/components'; -import { ListItem } from '../../../../../lib/components/list-item'; import { NavigationListItem } from '../../../../NavigationListItem'; export function VpnSettingsListItem() { return ( <NavigationListItem to={RoutePath.vpnSettings}> - <ListItem.Label> + <NavigationListItem.Label> { // TRANSLATORS: Navigation button to the 'VPN settings' view messages.pgettext('settings-view', 'VPN settings') } - </ListItem.Label> - <Icon icon="chevron-right" /> + </NavigationListItem.Label> + <NavigationListItem.Icon icon="chevron-right" /> </NavigationListItem> ); } |