Update text style for DNS content blockers

3 files changed, 23 insertions, 20 deletions

diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index 51a375cc25..ab761b9fd0 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();
 
@@ -297,12 +301,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 +326,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 +351,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 +386,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 +411,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 +436,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}