Update text style for DNS content blockers

2 files changed, 7 insertions, 8 deletions

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}