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

3 files changed, 36 insertions, 21 deletions

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}