Merge branch 'change-dns-content-blockers-text-des-207'

4 files changed, 41 insertions, 25 deletions

diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 70a89c22e7..2b24f38a09 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -1416,6 +1416,10 @@ msgid "Attention: enabling this will always require a Mullvad VPN connection in
 msgstr ""
 
 msgctxt "vpn-settings-view"
+msgid "Attention: this setting cannot be used in combination with <b>%(customDnsFeatureName)s</b>"
+msgstr ""
+
+msgctxt "vpn-settings-view"
 msgid "Auto-connect"
 msgstr ""
 
@@ -1538,7 +1542,7 @@ msgid "This feature allows access to other devices on the local network, such as
 msgstr ""
 
 msgctxt "vpn-settings-view"
-msgid "This might cause issues on certain websites, services, and programs."
+msgid "This might cause issues on certain websites, services, and apps."
 msgstr ""
 
 #. Label for settings that enables tracker blocking.
@@ -1815,9 +1819,6 @@ msgstr ""
 msgid "This address has already been entered."
 msgstr ""
 
-msgid "This might cause issues on certain websites, services, and apps."
-msgstr ""
-
 msgid "To make sure that you have the most secure version and to inform you of any issues with the current version that is running, the app performs version checks automatically. This sends the app version and Android system version to Mullvad servers. Mullvad keeps counters on number of used app versions and Android versions. The data is never stored or used in any way that can identify you."
 msgstr ""
 
diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index 51a375cc25..06f69240b6 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -60,6 +60,10 @@ const LanIpRanges = styled.ul({
   marginLeft: '20px',
 });
 
+const IndentedValueLabel = styled(Cell.ValueLabel)({
+  marginLeft: '16px',
+});
+
 export default function VpnSettings() {
   const { pop } = useHistory();
 
@@ -255,6 +259,7 @@ function useDns(setting: keyof IDnsOptions['defaultOptions']) {
 
 function DnsBlockers() {
   const dns = useSelector((state) => state.settings.dns);
+  const customDnsFeatureName = messages.pgettext('vpn-settings-view', 'Use custom DNS server');
 
   const title = (
     <>
@@ -271,7 +276,18 @@ function DnsBlockers() {
         <ModalMessage>
           {messages.pgettext(
             'vpn-settings-view',
-            'This might cause issues on certain websites, services, and programs.',
+            'This might cause issues on certain websites, services, and apps.',
+          )}
+        </ModalMessage>
+        <ModalMessage>
+          {formatHtml(
+            sprintf(
+              messages.pgettext(
+                'vpn-settings-view',
+                'Attention: this setting cannot be used in combination with <b>%(customDnsFeatureName)s</b>',
+              ),
+              { customDnsFeatureName },
+            ),
           )}
         </ModalMessage>
       </InfoButton>
@@ -297,12 +313,12 @@ function BlockAds() {
     <AriaInputGroup>
       <StyledSectionItem disabled={dns.state === 'custom'}>
         <AriaLabel>
-          <Cell.InputLabel>
+          <IndentedValueLabel>
             {
               // TRANSLATORS: Label for settings that enables ad blocking.
               messages.pgettext('vpn-settings-view', 'Ads')
             }
-          </Cell.InputLabel>
+          </IndentedValueLabel>
         </AriaLabel>
         <AriaInput>
           <Cell.Switch
@@ -322,12 +338,12 @@ function BlockTrackers() {
     <AriaInputGroup>
       <StyledSectionItem disabled={dns.state === 'custom'}>
         <AriaLabel>
-          <Cell.InputLabel>
+          <IndentedValueLabel>
             {
               // TRANSLATORS: Label for settings that enables tracker blocking.
               messages.pgettext('vpn-settings-view', 'Trackers')
             }
-          </Cell.InputLabel>
+          </IndentedValueLabel>
         </AriaLabel>
         <AriaInput>
           <Cell.Switch
@@ -347,12 +363,12 @@ function BlockMalware() {
     <AriaInputGroup>
       <StyledSectionItem disabled={dns.state === 'custom'}>
         <AriaLabel>
-          <Cell.InputLabel>
+          <IndentedValueLabel>
             {
               // TRANSLATORS: Label for settings that enables malware blocking.
               messages.pgettext('vpn-settings-view', 'Malware')
             }
-          </Cell.InputLabel>
+          </IndentedValueLabel>
         </AriaLabel>
         <AriaDetails>
           <InfoButton>
@@ -382,12 +398,12 @@ function BlockGambling() {
     <AriaInputGroup>
       <StyledSectionItem disabled={dns.state === 'custom'}>
         <AriaLabel>
-          <Cell.InputLabel>
+          <IndentedValueLabel>
             {
               // TRANSLATORS: Label for settings that enables block of gamling related websites.
               messages.pgettext('vpn-settings-view', 'Gambling')
             }
-          </Cell.InputLabel>
+          </IndentedValueLabel>
         </AriaLabel>
         <AriaInput>
           <Cell.Switch
@@ -407,12 +423,12 @@ function BlockAdultContent() {
     <AriaInputGroup>
       <StyledSectionItem disabled={dns.state === 'custom'}>
         <AriaLabel>
-          <Cell.InputLabel>
+          <IndentedValueLabel>
             {
               // TRANSLATORS: Label for settings that enables block of adult content.
               messages.pgettext('vpn-settings-view', 'Adult content')
             }
-          </Cell.InputLabel>
+          </IndentedValueLabel>
         </AriaLabel>
         <AriaInput>
           <Cell.Switch
@@ -432,12 +448,12 @@ function BlockSocialMedia() {
     <AriaInputGroup>
       <StyledSectionItem disabled={dns.state === 'custom'}>
         <AriaLabel>
-          <Cell.InputLabel>
+          <IndentedValueLabel>
             {
               // TRANSLATORS: Label for settings that enables block of social media.
               messages.pgettext('vpn-settings-view', 'Social media')
             }
-          </Cell.InputLabel>
+          </IndentedValueLabel>
         </AriaLabel>
         <AriaInput>
           <Cell.Switch
diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
index 5e9963ded9..780b593a1b 100644
--- a/gui/src/renderer/components/cell/Label.tsx
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
-import { buttonText, tinyText } from '../common-styles';
+import { buttonText, normalText, tinyText } from '../common-styles';
 import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
@@ -48,6 +48,10 @@ export function InputLabel(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
   return <StyledLabel as="label" disabled={disabled} {...props} />;
 }
 
+export const ValueLabel = styled(Label)(normalText, {
+  fontWeight: 400,
+});
+
 export function SubText(props: React.HTMLAttributes<HTMLDivElement>) {
   const disabled = useContext(CellDisabledContext);
   return <StyledSubText disabled={disabled} {...props} />;
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index f1d9e14360..debcdbef38 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -5,7 +5,6 @@ import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
 import { useStyledRef } from '../../lib/utilityHooks';
 import { AriaDetails, AriaInput, AriaLabel } from '../AriaGroup';
-import { normalText } from '../common-styles';
 import InfoButton from '../InfoButton';
 import * as Cell from '.';
 
@@ -126,10 +125,6 @@ const StyledCellIcon = styled(Cell.Icon)<{ $visible: boolean }>((props) => ({
   marginRight: '8px',
 }));
 
-const StyledLabel = styled(Cell.Label)(normalText, {
-  fontWeight: 400,
-});
-
 interface SelectorCellProps<T> {
   value: T;
   isSelected: boolean;
@@ -161,7 +156,7 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
         width={18}
         tintColor={colors.white}
       />
-      <StyledLabel>{props.children}</StyledLabel>
+      <Cell.ValueLabel>{props.children}</Cell.ValueLabel>
     </Cell.CellButton>
   );
 }
@@ -291,7 +286,7 @@ export function SelectorWithCustomItem<T, U>(props: SelectorWithCustomItemProps<
             width={18}
             tintColor={colors.white}
           />
-          <StyledLabel>{messages.gettext('Custom')}</StyledLabel>
+          <Cell.ValueLabel>{messages.gettext('Custom')}</Cell.ValueLabel>
           <AriaInput>
             <Cell.AutoSizingTextInput
               ref={inputRef}