diff options
Diffstat (limited to 'gui/src/renderer')
| -rw-r--r-- | gui/src/renderer/components/ApiAccessMethods.tsx | 23 | ||||
| -rw-r--r-- | gui/src/renderer/components/ContextMenu.tsx | 2 | ||||
| -rw-r--r-- | gui/src/renderer/components/InfoButton.tsx | 2 | ||||
| -rw-r--r-- | gui/src/renderer/components/cell/Label.tsx | 6 |
4 files changed, 30 insertions, 3 deletions
diff --git a/gui/src/renderer/components/ApiAccessMethods.tsx b/gui/src/renderer/components/ApiAccessMethods.tsx index 57668df787..68b873bd64 100644 --- a/gui/src/renderer/components/ApiAccessMethods.tsx +++ b/gui/src/renderer/components/ApiAccessMethods.tsx @@ -36,6 +36,8 @@ import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton'; const StyledContextMenuButton = styled(Cell.Icon)({ + alignItems: 'center', + justifyContent: 'center', marginRight: '8px', }); @@ -50,6 +52,7 @@ const StyledSpinner = styled(ImageView)({ }); const StyledNameLabel = styled(Cell.Label)({ + display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', @@ -133,6 +136,10 @@ export default function ApiAccessMethods() { method={methods.mullvadBridges} inUse={methods.mullvadBridges.id === currentMethod?.id} /> + <ApiAccessMethod + method={methods.encryptedDnsProxy} + inUse={methods.encryptedDnsProxy.id === currentMethod?.id} + /> {methods.custom.map((method) => ( <ApiAccessMethod key={method.id} @@ -211,7 +218,7 @@ function ApiAccessMethod(props: ApiAccessMethodProps) { }, ]; - // Edit and Delete shouldn't be available for direct and bridges. + // Edit and Delete shouldn't be available for direct, bridges or encrypted DNS proxy. if (props.custom) { items.push( { type: 'separator' as const }, @@ -290,6 +297,20 @@ function ApiAccessMethod(props: ApiAccessMethodProps) { ]} /> )} + {props.method.type === 'encrypted-dns-proxy' && ( + <StyledMethodInfoButton + message={[ + messages.pgettext( + 'api-access-methods-view', + 'With the “Encrypted DNS proxy” method, the app will communicate with our Mullvad API through a proxy address. It does this by retrieving an address from a DNS over HTTPS (DoH) server and then using that to reach our API servers.', + ), + messages.pgettext( + 'api-access-methods-view', + 'If you are not connected to our VPN, then the Encrypted DNS proxy will use your own non-VPN IP when connecting. The DoH servers are hosted by one of the following providers: Quad 9, CloudFlare, or Google.', + ), + ]} + /> + )} <ContextMenuContainer> <ContextMenuTrigger> <StyledContextMenuButton diff --git a/gui/src/renderer/components/ContextMenu.tsx b/gui/src/renderer/components/ContextMenu.tsx index fd84a8f0d9..2e01c9375f 100644 --- a/gui/src/renderer/components/ContextMenu.tsx +++ b/gui/src/renderer/components/ContextMenu.tsx @@ -36,6 +36,8 @@ const menuContext = React.createContext<MenuContext>({ const StyledMenuContainer = styled.div({ position: 'relative', padding: '8px 4px', + display: 'flex', + justifyContent: 'center', }); export function ContextMenuContainer(props: React.PropsWithChildren) { diff --git a/gui/src/renderer/components/InfoButton.tsx b/gui/src/renderer/components/InfoButton.tsx index 4ef2aa3c6e..7f77f115e7 100644 --- a/gui/src/renderer/components/InfoButton.tsx +++ b/gui/src/renderer/components/InfoButton.tsx @@ -8,7 +8,7 @@ import ImageView from './ImageView'; import { ModalAlert, ModalAlertType } from './Modal'; const StyledInfoButton = styled.button({ - margin: '0 16px 0 0', + margin: '0 16px 0 8px', borderWidth: 0, padding: 0, cursor: 'default', diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx index 1115edc829..b2b37c1e4c 100644 --- a/gui/src/renderer/components/cell/Label.tsx +++ b/gui/src/renderer/components/cell/Label.tsx @@ -15,11 +15,15 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({ textAlign: 'left', [`${LabelContainer} &&`]: { - marginTop: '5px', + marginTop: '0px', marginBottom: 0, height: '20px', lineHeight: '20px', }, + + [`${LabelContainer}:has(${StyledSubLabel}) &&`]: { + marginTop: '5px', + }, })); const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({ |