diff options
Diffstat (limited to 'desktop')
4 files changed, 34 insertions, 3 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx index b13e201737..93186de4a5 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx @@ -1,4 +1,5 @@ import { sprintf } from 'sprintf-js'; +import styled, { css } from 'styled-components'; import { IDevice } from '../../../shared/daemon-rpc-types'; import { messages } from '../../../shared/gettext'; @@ -6,6 +7,7 @@ import { capitalizeEveryWord } from '../../../shared/string-helpers'; import { IconButton, Text } from '../../lib/components'; import { FlexColumn } from '../../lib/components/flex-column'; import { ListItem, ListItemProps } from '../../lib/components/list-item'; +import { spacings } from '../../lib/foundations'; import { useBoolean } from '../../lib/utility-hooks'; import { DeviceListItemProvider, useDeviceListItemContext } from './'; import { ConfirmDialog, ErrorDialog } from './components'; @@ -15,6 +17,19 @@ export type SettingsToggleListItemProps = { device: IDevice; } & Omit<ListItemProps, 'children'>; +const StyledListItem = styled(ListItem)<{ $isCurrentDevice: boolean }>( + ({ $isCurrentDevice }) => css` + ${() => { + if ($isCurrentDevice) { + return css` + margin-bottom: ${spacings.medium}; + `; + } + return null; + }} + `, +); + function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'device'>) { const { device, deleting, showConfirmDialog, confirmDialogVisible, error } = useDeviceListItemContext(); @@ -24,7 +39,7 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de return ( <> - <ListItem disabled={deleting} {...props}> + <StyledListItem disabled={deleting} $isCurrentDevice={isCurrentDevice} {...props}> <ListItem.Item> <ListItem.Content> <FlexColumn> @@ -68,7 +83,7 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de </ListItem.Group> </ListItem.Content> </ListItem.Item> - </ListItem> + </StyledListItem> <ConfirmDialog isOpen={confirmDialogVisible} /> <ErrorDialog isOpen={error} /> </> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts index 1dfb60199c..1ada24c505 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts @@ -1 +1,2 @@ export * from './use-get-devices'; +export * from './use-sorted-devices'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts index 1016f8f37f..84236ac8fb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts @@ -2,11 +2,12 @@ import React from 'react'; import { useAppContext } from '../../../../context'; import { useSelector } from '../../../../redux/store'; +import { useSortedDevices } from './use-sorted-devices'; export const useGetDevices = () => { const { fetchDevices } = useAppContext(); const accountNumber = useSelector((state) => state.account.accountNumber)!; - const devices = useSelector((state) => state.account.devices); + const devices = useSortedDevices(); React.useEffect(() => { try { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts new file mode 100644 index 0000000000..e364188191 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts @@ -0,0 +1,14 @@ +import React from 'react'; + +import { useSelector } from '../../../../redux/store'; + +export const useSortedDevices = () => { + const devices = useSelector((state) => state.account.devices); + const currentDeviceName = useSelector((state) => state.account.deviceName); + return React.useMemo(() => { + const currentDevice = devices.find((device) => device.name === currentDeviceName); + if (!currentDevice) return devices; + + return [currentDevice, ...devices.filter((device) => device.name !== currentDeviceName)]; + }, [currentDeviceName, devices]); +}; |